src/components/molecules/CategoryBox/CategoryBox.tsx (1)

11-24: 코드 중복을 줄일 수 있는 여지가 있습니다.

CategoryButton에 isMobile prop을 전달하는 부분에서 중복이 발생합니다. 다음과 같은 개선을 고려해보세요:

- <CategoryButton isMobile imageType="PickVote" label="톡&픽 플레이스" />
+ <CategoryButton
+   {...(isMobile && { isMobile })}
+   imageType="PickVote"
+   label="톡&픽 플레이스"
+ />

또는 모바일 버전용 버튼들을 별도의 컴포넌트로 추출하는 것도 고려해볼 수 있습니다:

const MobileCategoryButtons = ({ handleService }: { handleService: () => void }) => (
  <>
    <Link to="/talkpickplace">
      <CategoryButton isMobile imageType="PickVote" label="톡&픽 플레이스" />
    </Link>
    <CategoryButton
      isMobile
      imageType="RandomGame"
      label="랜덤 밸런스 게임"
      onClick={handleService}
    />
  </>
);

src/components/molecules/SearchTagBar/SearchTagBar.tsx (1)

23-29: 조건부 렌더링 로직을 개선할 수 있습니다.

현재 구현은 작동하지만, 다음과 같은 개선사항을 제안드립니다:

1. SearchBar 컴포넌트로 전달되는 isMobile prop의 영향이 명확하지 않습니다. 주석이나 문서화가 필요해 보입니다.
2. 조건부 렌더링 로직을 더 간단하게 만들 수 있습니다.

다음과 같이 개선해 보시는 것은 어떨까요?:

- return isMobile ? (
-   <SearchBar
-     isMobile
-     onInputChange={handleInputChange}
-     onSearchClick={handleSearchClick}
-     value={inputValue}
-   />
- ) : (
+ const commonSearchBarProps = {
+   onInputChange: handleInputChange,
+   onSearchClick: handleSearchClick,
+   value: inputValue,
+ };
+
+ return (
    <div css={S.searchBarContainerStyling}>
-     <SearchBar
-       onInputChange={handleInputChange}
-       onSearchClick={handleSearchClick}
-       value={inputValue}
-     />
+     <SearchBar {...commonSearchBarProps} isMobile={isMobile} />
+     {!isMobile && (
      <div css={S.btnWrapperStyling}>
        {KEYWORD_TAG.map((keyWord) => (
          <Button key={keyWord} size="large" variant="outlinePrimary">
            #{keyWord}
          </Button>
        ))}
      </div>
+     )}
    </div>
  );

src/components/mobile/atoms/DraftSaveButton/DraftSaveButton.tsx (1)

8-14: 접근성 개선을 위한 제안사항이 있습니다.

버튼 컴포넌트의 기본 구현은 잘 되어있으나, 다음과 같은 접근성 속성들을 추가하면 좋을 것 같습니다:

 <button 
   css={S.buttonStyle} 
   type="button" 
   onClick={onClick}
+  aria-label="임시저장"
+  role="button"
 >
   임시저장
 </button>

src/components/atoms/Bookmark/Bookmark.style.ts (1)

14-17: CSS 변수 사용을 통한 유지보수성 개선을 제안드립니다.

현재 하드코딩된 픽셀값들을 CSS 변수로 관리하면 일관성 있는 유지보수가 가능할 것 같습니다.

+const styles = {
+  bookmark: {
+    desktop: {
+      size: '30px',
+    },
+    mobile: {
+      size: '19px',
+    },
+  },
+} as const;

 export const bookmarkButton = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
+  width: ${styles.bookmark.desktop.size};
+  height: ${styles.bookmark.desktop.size};
   flex-shrink: 0;
   background-color: transparent;
   border: none;
   cursor: pointer;
   padding: 0;

   @media (max-width: 430px) {
-    width: 19px;
-    height: 19px;
+    width: ${styles.bookmark.mobile.size};
+    height: ${styles.bookmark.mobile.size};
   }
`;

src/hooks/common/useIsMobile.ts (1)

14-16: 이벤트 리스너 최적화 필요

리사이즈 이벤트가 너무 자주 발생하면 성능에 영향을 줄 수 있습니다.

디바운스를 적용하는 것을 추천드립니다:

+import { debounce } from 'lodash';
+
 useEffect(() => {
-  checkIsMobile();
-  window.addEventListener('resize', checkIsMobile);
+  const debouncedCheck = debounce(checkIsMobile, 250);
+  checkIsMobile();
+  window.addEventListener('resize', debouncedCheck);
-  return () => window.removeEventListener('resize', checkIsMobile);
+  return () => {
+    window.removeEventListener('resize', debouncedCheck);
+    debouncedCheck.cancel();
+  };
 }, []);

src/stories/mobile/atoms/DraftSaveButton.stories.tsx (2)

7-23: 스토리 구성 개선 필요

스토리북 설정에 다음 사항들이 보완되면 좋을 것 같습니다:

1. 모바일 뷰포트 설정이 없습니다
2. 버튼의 다양한 상태를 보여주는 스토리가 없습니다

다음과 같이 개선하는 것을 추천드립니다:

 const meta: Meta<typeof DraftSaveButton> = {
   title: 'mobile/atoms/DraftSaveButton',
   component: DraftSaveButton,
   parameters: {
     layout: 'centered',
+    viewport: {
+      defaultViewport: 'mobile',
+    },
   },
   argTypes: {
-    onClick: { action: '클릭 이벤트 발생' },
+    onClick: { 
+      action: '임시저장 버튼 클릭',
+      description: '클릭 시 임시저장 로직이 실행됩니다',
+    },
   },
   decorators: [
     (Story) => (
       <BrowserRouter>
         <Story />
       </BrowserRouter>
     ),
   ],
 };

---

28-28: 스토리 변형 추가 필요

기본 스토리만으로는 컴포넌트의 다양한 상태를 테스트하기 어렵습니다.

다음과 같은 추가 스토리를 작성하는 것을 추천드립니다:

export const Loading: Story = {
  args: {
    isLoading: true,
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
  },
};

export const WithCustomText: Story = {
  args: {
    children: '커스텀 텍스트',
  },
};

src/stories/mobile/atoms/MobileToggleGroup.stories.tsx (1)

29-29: 스토리 구현을 보완하는 것이 좋습니다.

현재 Default 스토리가 비어있습니다. 컴포넌트의 다양한 상태와 사용 사례를 보여주는 스토리를 추가하면 좋겠습니다.

export const Default: Story = {
  args: {
    selectedValue: { field: 'views', order: 'desc' },
  },
};

export const WithDifferentSelection: Story = {
  args: {
    selectedValue: { field: 'latest', order: 'asc' },
  },
};

src/components/mobile/atoms/FloatingButton/FloatingButton.style.ts (2)

5-23: 전반적인 스타일 구조가 잘 설계되었습니다.

스타일 구조와 반응형 디자인이 잘 구현되어 있습니다. 다만, transition 속성을 더 구체적으로 지정하면 좋을 것 같습니다.

다음과 같이 수정을 제안드립니다:

-    transition: 'all 0.3s ease-in',
+    transition: 'box-shadow 0.3s ease-in',

---

12-19: 매직 넘버를 상수로 분리하는 것을 고려해보세요.

현재 하드코딩된 수치들(padding, gap, width 등)을 의미 있는 상수로 분리하면 유지보수성이 향상될 것 같습니다.

다음과 같은 방식을 제안드립니다:

const FLOATING_BUTTON = {
  PADDING: {
    LEFT: '21px',
    RIGHT: '5px',
  },
  GAP: '13px',
  WIDTH: {
    TALKPICK: '102px',
    GAME: '139px',
  },
  MARGIN: {
    TALKPICK: '37px',
  },
} as const;

src/components/atoms/Chips/Chips.style.ts (1)

15-15: 브레이크포인트 값을 상수로 분리하는 것을 추천드립니다.

여러 곳에서 사용되는 미디어 쿼리 브레이크포인트 값(430px)을 상수로 분리하면 유지보수성이 향상될 것 같습니다.

다음과 같은 방식을 제안드립니다:

// src/styles/breakpoints.ts
export const BREAKPOINTS = {
  MOBILE: '430px',
} as const;

// 사용 예시
import { BREAKPOINTS } from '@/styles/breakpoints';

`@media (max-width: ${BREAKPOINTS.MOBILE})`

Also applies to: 26-26

src/stories/mobile/atoms/MobileSideMenu.stories.tsx (1)

1-2: ESLint 비활성화 주석 개선 필요

전역 ESLint 비활성화 주석 대신 특정 라인에 대한 비활성화를 고려해주세요. 현재 방식은 파일 전체에 영향을 미치므로 코드 품질 관리에 어려움이 있을 수 있습니다.

-/* eslint-disable no-console */
-/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line no-console, @typescript-eslint/no-unused-vars

src/stories/mobile/molecules/FloatingMenuButton.stories.tsx (1)

15-25: Provider 중첩 구조 개선 제안

현재 Provider 중첩이 다소 복잡해 보입니다. 테스트 환경 설정을 위한 별도의 래퍼 컴포넌트를 만들어 사용하는 것을 고려해보세요.

const TestWrapper = ({ children }: { children: React.ReactNode }) => (
  <Provider store={store}>
    <ReactQueryProvider>
      <Router>{children}</Router>
    </ReactQueryProvider>
  </Provider>
);

// decorators에서 사용
decorators: [(Story) => <TestWrapper><Story /></TestWrapper>]

src/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup.style.ts (2)

10-21: 클릭된 토글의 스타일 구현에 대한 제안

현재 구현은 잘 작동하지만, 다음과 같은 개선을 고려해보세요:

1. isOpen 상태에 따른 스타일 변화를 더 명확하게 구분
2. 반복되는 스타일 값들을 상수로 분리

다음과 같이 개선해 보세요:

+const TOGGLE_PADDING = '4px 8px 4px 9px';
+const BORDER_RADIUS = '6px';

 export const clickedToggleStyle = (isOpen: boolean) =>
   css(typo.Mobile.Text.SemiBold_12, {
     color: color.MAIN,
     backgroundColor: color.WT_VIOLET,
     display: 'flex',
     alignItems: 'center',
     gap: '8px',
-    padding: '4px 8px 4px 9px',
+    padding: TOGGLE_PADDING,
     borderBottom: isOpen ? `0.6px solid ${color.SKYBLUE}` : undefined,
-    borderRadius: isOpen ? undefined : '6px',
+    borderRadius: isOpen ? undefined : BORDER_RADIUS,
     cursor: 'pointer',
   });

---

23-33: 미클릭 토글의 hover 효과 개선 제안

현재 hover 효과가 즉시 적용되는데, 부드러운 전환을 위해 배경색 변경에만 transition을 적용하는 것이 좋습니다.

다음과 같이 수정해보세요:

 export const unClickedToggleStyle = css(typo.Mobile.Text.SemiBold_12, {
   color: color.GY[1],
   backgroundColor: color.WT,
   padding: '4px 26px 4px 9px',
-  transition: 'all .1s ease-in',
+  transition: 'background-color .1s ease-in',
   borderRadius: '0 0 6px 6px',
   cursor: 'pointer',
   '&:hover': {
     backgroundColor: color.WT_VIOLET,
   },
 });

src/pages/LandingPage/LandingPage.style.ts (1)

32-37: 검색 박스 스타일의 모바일 대응 필요

모바일 환경에서 마진과 갭이 너무 크게 설정되어 있습니다. 화면 크기에 따른 반응형 조정이 필요합니다.

다음과 같이 수정해보세요:

 export const searchBoxStyle = css({
   margin: '30px 0',
   gap: '14px',
   display: 'flex',
   flexDirection: 'column',
+  '@media (max-width: 768px)': {
+    margin: '20px 0',
+    gap: '10px',
+  },
 });

src/components/atoms/CategoryButton/CategoryButton.tsx (1)

27-32: 모바일 조건부 렌더링 로직이 개선될 수 있습니다.

현재 구현은 작동하지만, 반복되는 삼항 연산자 패턴을 개선할 수 있습니다.

다음과 같이 리팩토링하는 것을 고려해보세요:

- ImageComponent = isMobile ? PickVoteSmall : PickVote;
+ const components = {
+   PickVote: { default: PickVote, mobile: PickVoteSmall },
+   RandomGame: { default: RandomGame, mobile: RandomGameSmall },
+   TodayPick: { default: TodayPick, mobile: TodayPick }
+ };
+ ImageComponent = components[imageType][isMobile ? 'mobile' : 'default'];

src/components/atoms/Bookmark/Bookmark.tsx (1)

27-32: renderIcon 함수 구현이 개선될 수 있습니다.

현재 구현도 잘 작동하지만, 조건부 렌더링을 더 간결하게 만들 수 있습니다.

다음과 같은 리팩토링을 제안합니다:

const renderIcon = () => {
-  if (isPressed) {
-    return isMobile ? <BookmarkPRSmall /> : <BookmarkPR css={S.icon} />;
-  }
-  return isMobile ? <BookmarkDFSmall /> : <BookmarkDF css={S.icon} />;
+  const Icon = isPressed
+    ? (isMobile ? BookmarkPRSmall : BookmarkPR)
+    : (isMobile ? BookmarkDFSmall : BookmarkDF);
+  return <Icon css={!isMobile ? S.icon : undefined} />;
};

src/components/organisms/BalanceGameList/BalanceGameList.style.ts (1)

6-12: 미디어 쿼리 브레이크포인트를 상수로 분리하는 것을 추천드립니다.

여러 곳에서 반복되는 430px 브레이크포인트를 상수로 분리하면 유지보수가 더욱 용이해질 것 같습니다.

다음과 같이 변경하는 것을 제안드립니다:

+ const MOBILE_BREAKPOINT = '430px';

export const containerStyle = css({
  width: '1158px',
- '@media (max-width: 430px)': {
+ `@media (max-width: ${MOBILE_BREAKPOINT})`: {
    maxWidth: '335px',
    // ...
  },
});

Also applies to: 20-25, 32-34, 41-43, 51-53

src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.tsx (1)

5-6: 모바일 대응이 적절하게 구현되었습니다.

useIsMobile 훅을 사용하여 디바이스에 따라 적절한 크기의 아이콘을 렌더링하는 방식이 좋습니다.

단, Check와 CheckSmall 컴포넌트의 props 타입을 명시하면 더 좋을 것 같습니다:

import { Check, CheckSmall } from '@/assets';
type CheckProps = {
  // 공통 props 정의
};

Also applies to: 20-20, 35-35

src/components/organisms/Header/Header.style.ts (1)

5-22: z-index 값을 상수로 관리하는 것을 추천드립니다.

고정 헤더의 z-index: 1000 값을 상수로 분리하여 관리하면 다른 컴포넌트들과의 레이어 관계를 더 명확하게 관리할 수 있을 것 같습니다.

다음과 같이 변경하는 것을 제안드립니다:

const Z_INDICES = {
  HEADER: 1000,
  MODAL: 1100,
  // 다른 z-index 값들...
} as const;

export const containerStyle = css`
  // ...
  z-index: ${Z_INDICES.HEADER};
`;

src/stories/mobile/atoms/FloatingButton.stories.tsx (1)

1-1: 콘솔 로그 제거 필요

프로덕션 코드에서는 console.log 문을 제거하는 것이 좋습니다. 디버깅 목적으로 사용된 콘솔 로그가 남아있습니다.

다음과 같이 수정하는 것을 제안합니다:

- /* eslint-disable no-console */
- onClick={() => console.log('TalkPick button clicked')}
+ onClick={() => {}}

- onClick={() => console.log('Game button clicked')}
+ onClick={() => {}}

Also applies to: 34-34, 42-42

src/components/molecules/TopBanner/TopBanner.style.ts (1)

8-10: 스타일 상수 추출 권장

반복되는 미디어 쿼리 브레이크포인트와 매직 넘버(예: 430px, 227px 등)를 상수로 추출하면 유지보수가 더 용이해질 것 같습니다.

다음과 같은 방식으로 상수를 추출하는 것을 제안합니다:

const BREAKPOINTS = {
  MOBILE: '430px',
} as const;

const DIMENSIONS = {
  MOBILE: {
    BANNER_HEIGHT: '227px',
    DOT_SIZE: '4px',
    DOT_GAP: '5px',
    ACTIVE_DOT_WIDTH: '32px',
  },
} as const;

Also applies to: 31-34, 46-50, 57-61

src/stories/molecules/CategoryBar.stories.tsx (1)

21-21: 스토리 문서화 개선 필요

activeTab의 빈 문자열 처리에 대한 설명이 부족합니다. 다음 사항들의 추가를 제안드립니다:

1. 빈 문자열이 의미하는 상태 설명
2. API 파라미터와의 연관성 명시
3. 각 탭 상태별 동작 방식 설명

// Story 설명 예시
/**
 * activeTab이 빈 문자열('')일 경우:
 * - 인기 탭으로 간주
 * - API 호출 시 tagName 파라미터 제외
 * 
 * activeTab이 특정 값일 경우:
 * - 해당 태그로 필터링
 * - API 호출 시 tagName 파라미터 포함
 */

Also applies to: 55-55

src/stories/atoms/CategoryButton.stories.tsx (1)

52-74: Mobile 스토리의 구현 방식 개선이 필요합니다.

Mobile 스토리에서 다음과 같은 개선사항을 제안드립니다:

1. TodayPick 케이스가 누락되어 있습니다.
2. 모바일 환경에서의 레이아웃 테스트를 위해 스타일 속성을 추가하는 것이 좋습니다.

다음과 같이 수정하는 것을 제안드립니다:

export const Mobile: Story = {
  parameters: {
    viewport: {
      defaultViewport: 'mobile',
    },
  },
  render: () => (
    <ul css={[storyContainer, { padding: '0 16px' }]}>
      <li css={storyInnerContainer}>
        <h3>모바일 톡&픽 플레이스</h3>
        <CategoryButton imageType="PickVote" label="톡&픽 플레이스" isMobile />
      </li>
      <li css={storyInnerContainer}>
        <h3>모바일 오늘의 톡픽 모음</h3>
+       <CategoryButton imageType="TodayPick" label="오늘의 톡픽 모음.zip" isMobile />
      </li>
      <li css={storyInnerContainer}>
        <h3>모바일 랜덤 밸런스 게임</h3>
        <CategoryButton
          imageType="RandomGame"
          label="랜덤 밸런스 게임"
          isMobile
        />
      </li>
    </ul>
  ),
};

src/components/molecules/CategoryBar/CategoryBar.tsx (1)

Line range hint 28-40: getBadgeText 함수의 타입 안전성 개선이 필요합니다.

getBadgeText 함수에서 다음과 같은 개선이 필요합니다:

1. 파라미터 타입을 CategoryTabType을 사용하도록 변경
2. 반환 타입을 명시적으로 지정

- const getBadgeText = (tab: '' | '커플' | '취향' | '월드컵') => {
+ const getBadgeText = (tab: CategoryTabType): string => {

src/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup.tsx (2)

51-72: 접근성 개선이 필요합니다.

토글 그룹의 접근성 향상을 위해 다음 사항들을 추가해주세요:

1. ARIA 속성 추가
2. 키보드 네비게이션 지원

  return (
-   <div css={S.toggleGroupStyle}>
+   <div css={S.toggleGroupStyle} role="group" aria-label="정렬 옵션">
      <button
        css={S.clickedToggleStyle(isOpen)}
        type="button"
+       aria-expanded={isOpen}
+       aria-haspopup="true"
        onClick={handleMenuClick}
+       onKeyDown={(e) => {
+         if (e.key === 'Escape') setIsOpen(false);
+       }}
      >

---

10-19: 상수 값의 분리가 필요합니다.

defaultItems를 별도의 상수 파일로 분리하여 재사용성을 높이는 것이 좋습니다.

+ // src/constants/toggle.ts
+ export const TOGGLE_ITEMS: ToggleGroupItem[] = [
+   {
+     label: '인기순',
+     value: { field: 'views', order: 'desc' },
+   },
+   {
+     label: '최신순',
+     value: { field: 'createdAt', order: 'desc' },
+   },
+ ];

- const defaultItems: ToggleGroupItem[] = [
-   {
-     label: '인기순',
-     value: { field: 'views', order: 'desc' },
-   },
-   {
-     label: '최신순',
-     value: { field: 'createdAt', order: 'desc' },
-   },
- ];
+ import { TOGGLE_ITEMS } from '@/constants/toggle';
+ const defaultItems = TOGGLE_ITEMS;

src/components/molecules/ContentsButton/ContentsButton.style.ts (2)

30-36: 크기 값을 상수로 분리하는 것이 좋겠습니다.

하드코딩된 크기 값들을 상수로 분리하면 유지보수가 더 용이해질 것 같습니다.

다음과 같이 개선해보세요:

const SIZES = {
  EXTRA_SMALL: {
    WIDTH: '162px',
    HEIGHT: '121px',
    INFO_HEIGHT: '40px',
    LABEL_MAX_WIDTH: '141px',
    IMAGE_HEIGHT: '81px',
  },
  // ... 다른 사이즈들도 동일하게 적용
} as const;

const sizeStyles = {
  extraSmall: SIZES.EXTRA_SMALL,
  // ... 나머지 사이즈
};

---

68-69: 모바일 반응형 스타일이 잘 구현되었습니다.

미디어 쿼리를 통한 모바일 대응이 적절하게 구현되었습니다. 다만, 브레이크포인트 값(430px)을 상수로 분리하면 더 좋을 것 같습니다.

브레이크포인트를 다음과 같이 분리해보세요:

const BREAKPOINTS = {
  MOBILE: '430px',
} as const;

// 사용 예시
@media (max-width: ${BREAKPOINTS.MOBILE}) {
  // ...
}

Also applies to: 115-117, 124-126

src/components/atoms/BalanceGameCategoryButton/BalanceGameCategoryButton.style.ts (2)

15-17: 미디어 쿼리 상수화 및 일관성 개선 필요

미디어 쿼리에서 반복적으로 사용되는 430px 값과 여러 간격 값들을 상수로 분리하여 관리하면 유지보수성이 향상될 것 같습니다.

다음과 같은 개선을 제안드립니다:

+ const BREAKPOINTS = {
+   MOBILE: '430px',
+ };
+ 
+ const SPACING = {
+   MOBILE: {
+     MARGIN_TOP: '2px',
+     MARGIN_BOTTOM: '2px',
+     MARGIN_LEFT: '2px',
+   },
+ };
+ 
  export const buttonStyle = css({
    // ...
-   '@media (max-width: 430px)': {
+   [`@media (max-width: ${BREAKPOINTS.MOBILE})`]: {
      width: '84px',
    },
  });

Also applies to: 26-28, 33-35, 41-43, 49-51, 60-62, 71-73

---

77-85: border-radius 값의 일관성 확보 필요

inactiveLineStyle 함수에서 하드코딩된 border-radius 값들을 상수로 분리하면 스타일의 일관성을 더 쉽게 유지할 수 있을 것 같습니다.

다음과 같은 개선을 제안드립니다:

+ const BORDER_RADIUS = {
+   DESKTOP: {
+     LEFT: '10px 0 0 10px',
+     RIGHT: '0 10px 10px 0',
+   },
+   MOBILE: {
+     LEFT: '3px 0 0 3px',
+     RIGHT: '0 3px 3px 0',
+   },
+ };

  export const inactiveLineStyle = (label: string) => {
    let baseBorderRadius = '0';
    let mobileBorderRadius = '0';

    if (label === '인기') {
-     baseBorderRadius = '10px 0 0 10px';
-     mobileBorderRadius = '3px 0 0 3px';
+     baseBorderRadius = BORDER_RADIUS.DESKTOP.LEFT;
+     mobileBorderRadius = BORDER_RADIUS.MOBILE.LEFT;
    } else if (label === '월드컵') {
-     baseBorderRadius = '0 10px 10px 0';
-     mobileBorderRadius = '0 3px 3px 0';
+     baseBorderRadius = BORDER_RADIUS.DESKTOP.RIGHT;
+     mobileBorderRadius = BORDER_RADIUS.MOBILE.RIGHT;
    }

Also applies to: 92-96

src/components/organisms/BalanceGameList/BalanceGameList.tsx (2)

20-24: 타입 정의 개선 필요

activeTab의 타입과 관련된 문자열 리터럴을 상수로 분리하여 재사용성과 유지보수성을 높일 수 있습니다.

다음과 같은 개선을 제안드립니다:

export const TAB_TYPES = {
  EMPTY: '',
  COUPLE: '커플',
  PREFERENCE: '취향',
  WORLDCUP: '월드컵',
} as const;

type TabType = typeof TAB_TYPES[keyof typeof TAB_TYPES];

export interface ContentListProps {
  // ...
  activeTab: TabType;
  setActiveTab: React.Dispatch<React.SetStateAction<TabType>>;
  // ...
}

---

64-74: 조건부 렌더링 로직 개선 필요

삼항 연산자를 사용한 조건부 렌더링이 가독성을 떨어뜨립니다. 컴포넌트를 분리하거나 더 명확한 방식으로 처리하면 좋을 것 같습니다.

다음과 같은 개선을 제안드립니다:

const ToggleGroupComponent = {
  mobile: MobileToggleGroup,
  desktop: ToggleGroup,
};

const Component = isMobile ? ToggleGroupComponent.mobile : ToggleGroupComponent.desktop;

return (
  <Component
    selectedValue={selectedValue}
    onClick={isMobile ? handleToggleChange : setSelectedValue}
  />
);

src/pages/LandingPage/LandingPage.tsx (1)

62-80: 모바일 뷰의 구조적 개선이 필요합니다.

모바일 뷰에서 많은 props를 전달하고 있습니다. 컴포넌트의 책임을 줄이고 유지보수성을 높이기 위해 다음과 같은 개선을 제안합니다.

- <BalanceGameList
-   isMobile
-   contents={contents}
-   selectedValue={selectedValue}
-   setSelectedValue={setSelectedValue}
-   activeTab={activeTab}
-   setActiveTab={setActiveTab}
- />
+ <BalanceGameList
+   isMobile
+   contents={contents}
+   selectedValue={selectedValue}
+   onValueChange={setSelectedValue}
+   activeTab={activeTab}
+   onTabChange={setActiveTab}
+ />

src/components/atoms/Button/Button.style.ts (1)

207-213: circle 버튼의 medium 사이즈 스타일 개선이 필요합니다.

SVG 아이콘의 크기가 너무 작아 보입니다. 가독성을 위해 크기를 약간 키우는 것을 제안합니다.

medium: css({
  padding: '8.5px',
  '& svg': {
-   width: '10.5px',
-   height: '10.5px',
+   width: '12px',
+   height: '12px',
  },
}),

src/components/organisms/Header/Header.tsx (1)

175-198: 데스크톱 뷰의 중첩된 컨테이너를 단순화해주세요.

불필요하게 중첩된 rightContainerStyle이 있습니다. 구조를 단순화하여 가독성을 개선할 수 있습니다.

- <div css={S.rightContainerStyle}>
  <button
    type="button"
    onClick={handleLoginButton}
    css={S.LoginButtonStyle}
  >
    {accessToken ? '로그아웃' : '로그인'}
  </button>
  <div css={S.notificationStyle}>
    {accessToken ? (
      <ProfileIcon
        interaction="custom"
        imgUrl={member?.profileImgUrl ?? DefaultProfile}
        onClick={handleProfileIcon}
      />
    ) : (
      <ProfileIcon
        interaction="default"
        onClick={handleProfileIcon}
      />
    )}
  </div>
- </div>

src/styles/typo.ts (2)

193-198: 일관성 있는 스타일 속성을 유지하세요.

SemiBold_12와 Medium_12에서 letterSpacing 속성이 일관되지 않게 적용되어 있습니다. 또한 다른 스타일들과 달리 lineHeight가 1.3으로 설정되어 있습니다.

      SemiBold_12: {
        fontFamily: 'Pretendard',
        fontSize: '12px',
        fontWeight: 600,
-       lineHeight: '1.3',
+       lineHeight: '1.6',
+       letterSpacing: `${12 * -0.05}px`,
      },

Also applies to: 218-223

---

Line range hint 232-235: 기술 부채 해결 계획을 수립하세요.

이전 타이포 타입에 대한 TODO 주석이 있습니다. 기술 부채를 해결하기 위한 이슈를 생성하고 계획을 수립하는 것이 좋습니다.

이전 타이포 타입 정리를 위한 GitHub 이슈를 생성하시겠습니까?

src/assets/index.ts (1)

Line range hint 104-127: 이전 SVG 정리가 필요합니다.

TODO 주석으로 표시된 이전 SVG 파일들의 정리가 필요합니다. 현재 사용 중인 컴포넌트들과의 연관성을 확인하고 정리하는 것이 좋습니다.

이전 SVG 정리를 위한 GitHub 이슈를 생성하시겠습니까?

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

#!/bin/bash
# ContentsButton.style.ts 파일에서 extraSmall 스타일 정의 확인
rg "extraSmall" -A 5 "src/components/molecules/ContentsButton/ContentsButton.style.ts"

#!/bin/bash
# preview 파일에서 viewport 설정 확인
rg "viewport" ".storybook/preview.ts"

#!/bin/bash
# preview 파일의 viewport 설정 전체 내용 확인
rg -A 10 "viewport: {" ".storybook/preview.ts"

#!/bin/bash
# preview 파일의 전체 내용 확인
cat ".storybook/preview.ts"

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

#!/bin/bash
# activeTab 타입이 일관되게 적용되었는지 확인
ast-grep --pattern 'type $_ = {
  $$$
  activeTab: $_;
  $$$
}'

#!/bin/bash
# activeTab 관련 타입과 사용처를 검색
rg "activeTab.*['\"]커플['\"].*['\"]취향['\"].*['\"]월드컵['\"]" -A 2 -B 2

# activeTab 상태 관리 코드 검색
ast-grep --pattern 'const [$_, $_] = useState<$_>($$$)'

# 관련 Props 타입 정의 검색
rg "interface.*Props" -A 5 -B 1