fix: post mode identifier

src/components/Icon/data.ts

@@ -13,7 +13,7 @@ import LeftArrow from './icons/left-arrow.svg?react';
 import Letter from './icons/letter.svg?react';
 import Mag from './icons/mag.svg?react';
 import Minus from './icons/minus.svg?react';
-import Mobile from './icons/Mobile.svg?react';
+import Mobile from './icons/mobile.svg?react';
 import Pc from './icons/Pc.svg?react';
 import Plus from './icons/plus.svg?react';
 import RightArrow from './icons/right-arrow.svg?react';

src/pages/home/components/Tabber/PostModes/PostModes.components.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+import { Checkbox } from '~components/Checkbox/Checkbox';
+
+import { PostModeProps } from './PostModes.types';
+
+export function PostMode(props: PostModeProps): ReactNode {
+  const handlePostModeClick = (postModeElement: HTMLElement): void => {
+    props.onClickPostMode(postModeElement);
+  };
+
+  return (
+    <button
+      className={props.postModeClasses(props.postMode.id)}
+      onClick={(e) => {
+        props.changePostMode(props.postMode.id);
+        handlePostModeClick(e.currentTarget);
+      }}
+    >
+      <Checkbox
+        aria-label={`Check the post mode ${props.postMode.name}`}
+        checked={props.isChecked(props.postMode.id)}
+        onChange={(checked) => props.changeCheckBox(props.postMode.id, checked)}
+      />
+      {props.postMode.name}
+    </button>
+  );
+}

src/pages/home/components/Tabber/PostModes/PostModes.module.scss

@@ -2,12 +2,23 @@
 @use '~styles/breakpoints.scss' as *;
 
 .postModesHeader {
-  width: fit-content;
+  margin-bottom: 1.2rem;
+
+  position: relative;
+}
+
+.postModesWrapper {
+  overflow-x: auto;
 
   display: flex;
-  flex-wrap: wrap;
 
-  align-self: flex-end;
+  scroll-behavior: smooth;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .postModeTitle {
@@ -24,8 +35,77 @@
   }
 }
 
-@include from1240 {
+.selectPostMode {
+  max-width: max-content;
+
+  display: flex;
+  gap: 0.4rem;
+
+  align-items: center;
+
+  color: global.$tertiaryGray;
+
+  &.active {
+    [type='checkbox'] {
+      border-color: global.$secondaryPurple;
+    }
+  }
+}
+
+.firstGradient,
+.lastGradient {
+  width: 35px;
+  height: 100%;
+
+  position: absolute;
+  z-index: 1;
+
+  pointer-events: none;
+
+  content: '';
+}
+
+.firstGradient {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.lastGradient {
+  top: 0;
+  right: 0;
+
+  background: linear-gradient(
+    270deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+@include from905 {
+  .postModesHeader {
+    max-width: 44rem;
+
+    border: 0.1rem solid global.$primaryGray;
+
+    background-color: global.$quaternaryWhite;
+    border-radius: 3rem;
+  }
+
   .postModeTitle {
     padding: 1.2rem;
   }
+
+  .selectPostMode {
+    border: 0.2rem solid transparent;
+
+    &.active {
+      border-color: global.$secondaryPurple;
+
+      background-color: global.$primaryWhite;
+      border-radius: 10rem;
+    }
+  }
 }

src/pages/home/components/Tabber/PostModes/PostModes.spec.tsx

@@ -0,0 +1,132 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {
+  mockedAccounts,
+  mockedAddAccount,
+  mockedSocialMedias,
+  mockedUseSocialMediaStore,
+} from '~stores/__mocks__/useSocialMediaStore.mock';
+
+import PostModes from './PostModes';
+
+vi.mock(
+  '~stores/useSocialMediaStore/useSocialMediaStore',
+  () => mockedUseSocialMediaStore
+);
+
+const mockAccount = {
+  id: '1',
+  socialMediaId: 'DISCORD_EXAMPLE_ID',
+};
+const mockChangePostMode = vi.fn();
+const mockCurrentPostModeId = '1';
+
+describe('PostModes', () => {
+  beforeEach(() => {
+    vi.spyOn(
+      mockedUseSocialMediaStore,
+      'useSocialMediaStore'
+    ).mockImplementation(() => ({
+      accounts: mockedAccounts(),
+      addAccount: mockedAddAccount,
+      socialMedias: mockedSocialMedias(),
+    }));
+  });
+
+  it('renders correctly', () => {
+    render(
+      <PostModes
+        changePostModeId={mockChangePostMode}
+        postId={mockAccount.id}
+        postModeId={mockCurrentPostModeId}
+        socialMediaId={mockAccount.socialMediaId}
+      />
+    );
+    const socialMedia = mockedSocialMedias().get(mockAccount.socialMediaId);
+
+    const postModes = socialMedia?.postModes;
+    const firstPostModeName = postModes ? postModes[0].name : '';
+
+    const postMode = screen.getByText(firstPostModeName);
+
+    expect(postMode).toBeInTheDocument();
+  });
+
+  describe('PostModes button', () => {
+    it('calls onChangePostMode when is clicked', async () => {
+      render(
+        <PostModes
+          changePostModeId={mockChangePostMode}
+          postId={mockAccount.id}
+          postModeId={mockCurrentPostModeId}
+          socialMediaId={mockAccount.socialMediaId}
+        />
+      );
+      const user = userEvent.setup();
+
+      const socialMedia = mockedSocialMedias().get(mockAccount.socialMediaId);
+
+      const postModes = socialMedia?.postModes;
+      const firstPostModeName = postModes ? postModes[0].name : '';
+
+      const postMode = screen.getByText(firstPostModeName);
+
+      await user.click(postMode);
+      expect(mockChangePostMode).toHaveBeenCalled();
+    });
+  });
+
+  describe('PostModes checkbox', () => {
+    it('add post mode when checkbox is checked', async () => {
+      render(
+        <PostModes
+          changePostModeId={mockChangePostMode}
+          postId={mockAccount.id}
+          postModeId={mockCurrentPostModeId}
+          socialMediaId={mockAccount.socialMediaId}
+        />
+      );
+      const user = userEvent.setup();
+
+      const socialMedia = mockedSocialMedias().get(mockAccount.socialMediaId);
+
+      const postModes = socialMedia?.postModes;
+      const firstPostModeName = postModes ? postModes[0].name : '';
+
+      const postModeCheckbox = screen.getByLabelText(
+        `Check the post mode ${firstPostModeName}`
+      );
+
+      await user.click(postModeCheckbox);
+
+      expect(postModeCheckbox).toBeChecked();
+    });
+
+    it('remove post mode when checkbox is not checked', async () => {
+      render(
+        <PostModes
+          changePostModeId={mockChangePostMode}
+          postId={mockAccount.id}
+          postModeId={mockCurrentPostModeId}
+          socialMediaId={mockAccount.socialMediaId}
+        />
+      );
+      const user = userEvent.setup();
+
+      const socialMedia = mockedSocialMedias().get(mockAccount.socialMediaId);
+
+      const postModes = socialMedia?.postModes;
+      const firstPostModeName = postModes ? postModes[0].name : '';
+
+      const postModeCheckbox = screen.getByLabelText(
+        `Check the post mode ${firstPostModeName}`
+      );
+
+      await user.click(postModeCheckbox);
+      await user.click(postModeCheckbox);
+
+      expect(postModeCheckbox).not.toBeChecked();
+    });
+  });
+});

src/pages/home/components/Tabber/PostModes/PostModes.stories.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import { Story } from '@ladle/react';
+
+import { PostMode } from '~services/api/social-media/social-media.types';
+
+import PostModes from './PostModes';
+
+const mock = {
+  account: {
+    id: '1',
+    socialMediaId: 'DISCORD_EXAMPLE_ID',
+  },
+};
+
+export const PostmodesStories: Story = () => {
+  const [postModeOnView, setPostModeOnView] = useState(
+    'DISCORD_STORY_POSTMODE_ID'
+  );
+  const changePostMode = (postModeId: PostMode['id']): void => {
+    setPostModeOnView(postModeId);
+  };
+
+  return (
+    <PostModes
+      changePostModeId={changePostMode}
+      postId={mock.account.id}
+      postModeId={postModeOnView}
+      socialMediaId={mock.account.socialMediaId}
+    />
+  );
+};