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

12-14: 반응형 전환 효과 추가 검토

패딩값이 데스크톱에서 모바일로 전환될 때 급격하게 변경됩니다. 부드러운 사용자 경험을 위해 transition 속성 추가를 고려해보세요.

export const contentWrapStyle = css({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  width: '100%',
  background: color.WT,
  padding: '113px 388px 95px 374px',
+ transition: 'padding 0.3s ease-in-out',
  '@media (max-width: 430px)': {
    padding: '18px 20px',
  },
});

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

5-22: 브레이크포인트 표준화 및 전환 개선 필요

현재 구현된 미디어 쿼리에 대해 다음 사항들을 고려해주세요:

1. 430px의 브레이크포인트가 매우 구체적입니다. 재사용 가능한 상수로 정의하는 것이 좋습니다.
2. 패딩이 200px에서 20px로 급격하게 변경되어 레이아웃 시프트가 발생할 수 있습니다.

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

+import { BREAKPOINTS } from '@/styles/breakpoints';

 export const containerStyle = css`
   width: 100%;
   padding: 0 200px;
   height: 100px;
-  @media (max-width: 430px) {
+  @media (max-width: ${BREAKPOINTS.MOBILE}) {
     padding: 0 20px;
     height: 55px;
   }

---

24-31: 로고 스타일 구현이 적절합니다

Flex를 활용한 모바일 환경에서의 로고 중앙 정렬이 잘 구현되었습니다. 다만, 앞서 언급된 브레이크포인트 표준화가 여기에도 적용되면 좋겠습니다.

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

Line range hint 6-24: 주석 처리된 코드 정리가 필요합니다.

사용하지 않는 주석 처리된 코드(Button, Notification 등)가 남아있습니다. 코드의 가독성과 유지보수를 위해 불필요한 주석은 제거하는 것이 좋습니다.

---

91-97: 로그인/로그아웃 처리 시 에러 핸들링이 필요합니다.

현재 로그인/로그아웃 처리 시 발생할 수 있는 에러에 대한 처리가 없습니다. 사용자 경험 향상을 위해 에러 처리를 추가하는 것이 좋습니다.

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

 const handleLoginButton = () => {
   if (accessToken) {
-    logout.mutate();
+    try {
+      logout.mutate();
+    } catch (error) {
+      console.error('로그아웃 중 오류가 발생했습니다:', error);
+      // 사용자에게 에러 메시지 표시
+    }
     setIsMenuOpen(false);
   } else {
     navigate('/login');
     setIsMenuOpen(false);
   }
 };

---

151-201: 접근성과 구조적 개선이 필요한 부분이 있습니다.

1. 모바일 메뉴 토글 버튼에 대한 접근성이 개선되었지만, 추가적인 ARIA 속성이 도움될 수 있습니다.
2. 중첩된 div 구조가 복잡합니다.

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

-            <button
-              type="button"
-              aria-label="headerList"
-              onClick={handleMenuToggle}
-              css={S.listButtonStyle}
-            >
+            <button
+              type="button"
+              aria-label="메뉴 열기"
+              aria-expanded={isMenuOpen}
+              aria-controls="mobile-menu"
+              onClick={handleMenuToggle}
+              css={S.listButtonStyle}
+            >
               <ListIcon />
             </button>
             {isMenuOpen && (
               <MobileSideMenu
+                id="mobile-menu"
                 isOpen={isMenuOpen}
                 setIsOpen={setIsMenuOpen}
                 accessToken={accessToken}
                 handleLoginButton={handleLoginButton}
               />
             )}

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

70-103: 중복된 코드를 리팩토링하여 유지보수성을 향상시킬 수 있습니다.

모바일과 데스크톱의 렌더링 부분에서 코드 중복이 발생하고 있습니다. 공통된 부분을 별도의 컴포넌트나 함수로 분리하면 코드의 가독성과 유지보수성이 향상될 수 있습니다.

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

14-16: 성능 최적화 및 상수 정의 필요

매직 넘버를 피하고 성능을 개선하기 위한 수정이 필요합니다.

+const MOBILE_MAX_WIDTH = 768;
+
 function useIsMobile() {
   const [isMobile, setIsMobile] = useState<boolean>(false);
+  const mobileMediaQuery = useMemo(
+    () => window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH}px)`),
+    []
+  );

---

19-21: 이벤트 리스너 최적화 필요

리사이즈 이벤트에 디바운스 처리가 필요합니다.

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

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

29-33: 접근성 및 일관성 개선 필요

모바일 입력 필드의 높이가 터치 타겟 최소 크기에 미달하며, 패딩값이 일관적이지 않습니다.

 export const mobileInputStyling = css(typo.Mobile.Text.Medium_12, {
   width: '100%',
-  height: '36px',
+  height: MOBILE_MIN_TOUCH_TARGET,
-  padding: '0 5px',
+  padding: '0 10px',
 });

src/components/mobile/MobileCreateDropdown/MobileCreateDropdown.style.ts (2)

2-2: 사용하지 않는 import 제거 필요

주석 처리된 import문은 제거하는 것이 좋습니다.

-// import color from '@/styles/color';

---

32-40: 터치 영역 및 위치 조정 필요

버튼의 터치 영역이 작고, 절대 위치 지정으로 인한 레이아웃 깨짐이 발생할 수 있습니다.

+const MOBILE_TOUCH_TARGET = '60px';

 export const dropdownButtonStyling = css({
   cursor: 'pointer',
-  zIndex: 20,
+  zIndex: Z_INDEX.dropdown,
-  width: '50px',
-  height: '50px',
+  width: MOBILE_TOUCH_TARGET,
+  height: MOBILE_TOUCH_TARGET,
   position: 'absolute',
   bottom: '10px',
   right: '20px',
+  '@media (max-width: 430px)': {
+    bottom: '20px',
+    right: '20px',
+  },
 });

src/components/mobile/MobileSideMenu/MobileSideMenu.style.ts (1)

28-36: 접근성 개선을 위한 제안

모바일 환경의 사용성 향상을 위해 다음 사항들을 고려해주세요:

1. 버튼의 패딩(10.5px)이 터치 영역으로는 다소 작을 수 있습니다.
2. 터치 피드백을 위한 active 상태 스타일 추가가 필요합니다.

export const buttonStyle = css(typo.Mobile.Text.Medium_12, {
  outline: 'none',
  cursor: 'pointer',
  backgroundColor: 'transparent',
-  padding: '10.5px 60px 10.5px 24px',
+  padding: '16px 60px 16px 24px',
  textAlign: 'left',
  color: color.BK,
  border: 'none',
+  '&:active': {
+    backgroundColor: color.GR100,
+  },
});

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

16-19: 스토리북 테스트 케이스 보완 필요

다음 테스트 케이스들의 추가를 고려해주세요:

1. isOpen: false 상태
2. accessToken: undefined 또는 null 상태
3. 실제 동작하는 handleLoginButton 구현

예시 구현:

export const Closed: Story = {
  args: {
    ...Default.args,
    isOpen: false,
  },
};

export const LoggedOut: Story = {
  args: {
    ...Default.args,
    accessToken: undefined,
  },
};

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

15-18: 미디어 쿼리 브레이크포인트 표준화 필요

현재 하드코딩된 430px 브레이크포인트를 상수나 테마 설정으로 분리하는 것이 좋습니다. 이는 유지보수성을 높이고 일관된 반응형 디자인을 보장할 수 있습니다.

+ // constants/breakpoints.ts 파일 생성
+ export const BREAKPOINTS = {
+   MOBILE: '430px',
+ } as const;

  '@media (max-width: ${BREAKPOINTS.MOBILE})': {
    ...typo.Mobile.Text.SemiBold_10,
    padding: '4px 9px',
  },

---

26-29: 중복된 미디어 쿼리 로직 개선 필요

동일한 브레이크포인트를 사용하는 미디어 쿼리가 여러 곳에서 반복되고 있습니다. 재사용 가능한 믹스인이나 유틸리티 함수로 분리하는 것이 좋습니다.

+ // styles/mixins.ts
+ export const mobileStyling = (styles: CSSObject) => css({
+   [`@media (max-width: ${BREAKPOINTS.MOBILE})`]: styles,
+ });

  // 사용 예시
  outline: css({
    padding: '10px 18px',
    borderRadius: '12px',
    ...mobileStyling({
      padding: '4px 9px',
      borderRadius: '7.2px',
    }),
  }),

src/stories/mobile/MobileCreateButton.stories.tsx (1)

28-29: 스토리북 인터랙션 테스트 개선 필요

단순 console.log 대신 Storybook의 Actions를 활용하여 더 의미 있는 인터랙션 테스트를 구현하는 것이 좋습니다.

  export const TalkPick: Story = {
    args: {
      imageType: 'talkpick',
      label: '톡픽',
-     onClick: () => console.log('TalkPick button clicked'),
+     onClick: action('톡픽 버튼 클릭됨'),
    },
  };

Also applies to: 36-37

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

18-19: border 스타일 로직 개선 필요

isOpen 상태에 따른 borderRadius 및 borderBottom 스타일 적용이 다소 복잡합니다. 다음과 같이 개선하는 것을 고려해보세요:

-    borderBottom: isOpen ? `0.6px solid ${color.SKYBLUE}` : undefined,
-    borderRadius: isOpen ? undefined : '6px',
+    ...(!isOpen && { borderRadius: '6px' }),
+    ...(isOpen && { borderBottom: `0.6px solid ${color.SKYBLUE}` }),

---

27-27: 트랜지션 지속 시간 조정 권장

현재 트랜지션 시간이 0.1초로 설정되어 있어 사용자가 변화를 인지하기 어려울 수 있습니다. 부드러운 사용자 경험을 위해 0.2초 이상으로 조정을 권장드립니다.

-  transition: 'all .1s ease-in',
+  transition: 'all .2s ease-in',

src/components/mobile/MobileCreateButton/MobileCreateButton.tsx (1)

18-27: switch 문을 객체 리터럴로 단순화 권장

현재 switch 문을 사용한 이미지 컴포넌트 선택 로직을 객체 리터럴을 사용하여 더 간단하게 구현할 수 있습니다.

-  let ImageComponent;
-  switch (imageType) {
-    case 'talkpick':
-      ImageComponent = CircleTalkPick;
-      break;
-    case 'game':
-      ImageComponent = CircleGame;
-      break;
-    default:
-      return null;
-  }
+  const IMAGE_COMPONENTS = {
+    talkpick: CircleTalkPick,
+    game: CircleGame,
+  };
+  
+  const ImageComponent = IMAGE_COMPONENTS[imageType];
+  if (!ImageComponent) return null;

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

27-30: 이미지 컴포넌트 매핑 로직 개선 제안

현재 조건부 연산자를 사용한 이미지 컴포넌트 선택 로직을 상수 객체를 사용하여 더 깔끔하게 구현할 수 있습니다.

+  const IMAGE_MAPPING = {
+    PickVote: {
+      mobile: PickVoteSmall,
+      desktop: PickVote,
+    },
+    RandomGame: {
+      mobile: RandomGameSmall,
+      desktop: RandomGame,
+    },
+    TodayPick: {
+      mobile: TodayPick,
+      desktop: TodayPick,
+    },
+  };
+
   switch (imageType) {
     case 'PickVote':
-      ImageComponent = isMobile ? PickVoteSmall : PickVote;
+      ImageComponent = IMAGE_MAPPING.PickVote[isMobile ? 'mobile' : 'desktop'];
       break;
     case 'RandomGame':
-      ImageComponent = isMobile ? RandomGameSmall : RandomGame;
+      ImageComponent = IMAGE_MAPPING.RandomGame[isMobile ? 'mobile' : 'desktop'];
       break;

---

21-21: isMobile 기본값 설정 위치 변경 제안

isMobile prop의 기본값이 컴포넌트 내부에서 설정되어 있습니다. 이를 Props 인터페이스 레벨에서 설정하는 것이 더 명시적일 수 있습니다.

export interface CategoryButtonProps extends ComponentPropsWithRef<'button'> {
  imageType: 'PickVote' | 'RandomGame' | 'TodayPick';
  label: string;
-  isMobile?: boolean;
+  isMobile: boolean = false;
}

const CategoryButton = ({
  imageType,
  label,
-  isMobile = false,
+  isMobile,
  ...attributes
}: CategoryButtonProps) => {

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

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

15-25: 타이포그래피 스타일 사용 개선 제안

타이포그래피 스타일을 분리하여 관리하는 것이 좋습니다. 현재 모바일용 타이포그래피가 인라인으로 적용되어 있어 일관성 있는 관리가 어려울 수 있습니다.

export const titleWrapStyle = css({
-  ...typo.Title,
+  ...typo.getResponsiveStyle('Title'),
  display: 'flex',
  justifyContent: 'space-between',
  marginBottom: '20px',
  '@media (max-width: 430px)': {
-    ...typo.Mobile.Text.Bold_16,
    marginBottom: 0,
    height: '50px',
    width: '100%',
  },
});

---

40-43: 매직 넘버 상수화 제안

gap 값 '9px'와 같은 매직 넘버들을 의미 있는 상수로 분리하는 것이 좋습니다.

+const MOBILE_SPACING = {
+  GAP: '9px',
+  PADDING: '16px 0',
+} as const;

export const contentStyle = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)',
  gap: '20px',
  '@media (max-width: 430px)': {
-    gap: '9px',
+    gap: MOBILE_SPACING.GAP,
  },
});

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

31-34: 모바일 UI 스타일링이 체계적으로 구현되었습니다.

도트 네비게이션의 크기와 간격이 모바일 환경에 맞게 잘 조정되었습니다. 다만, 아래 사항들을 고려해 보시면 좋겠습니다:

1. 반응형 값들을 상수로 분리하여 관리하는 것이 유지보수에 도움이 될 수 있습니다.
2. 중복되는 미디어 쿼리를 mixin으로 분리하는 것을 고려해 보세요.

Also applies to: 44-47, 54-57

src/layout/layout.tsx (3)

17-19: 미디어 쿼리 상수화가 필요합니다.

하드코딩된 미디어 쿼리 값들을 상수로 분리하여 관리하면 일관성 있는 반응형 디자인 구현이 가능합니다.

+ // src/constants/breakpoints.ts
+ export const BREAKPOINTS = {
+   MOBILE: '430px',
+ } as const;
+ 
+ export const LAYOUT_PADDING = {
+   DESKTOP: '100px',
+   MOBILE: '55px',
+ } as const;

  '@media (max-width: 430px)': {
    paddingTop: '55px',
  },

---

24-24: Footer 표시/숨김 처리 개선이 필요합니다.

현재 구현은 Footer를 조건부로 제거하고 있어 레이아웃 변경 시 갑작스러운 변화가 발생할 수 있습니다. CSS를 통한 부드러운 전환을 고려해보세요.

- {isMobile ? null : <Footer />}
+ <Footer 
+   css={css`
+     display: ${isMobile ? 'none' : 'block'};
+     transition: opacity 0.3s ease-in-out;
+     opacity: ${isMobile ? 0 : 1};
+   `}
+ />

---

40-42: 중복된 미디어 쿼리 로직이 발견되었습니다.

Layout과 LayoutNoSearch 컴포넌트에서 동일한 미디어 쿼리 로직이 반복되고 있습니다. 공통 스타일로 분리하는 것이 좋겠습니다.

+ const commonMainStyle = css({
+   paddingTop: '100px',
+   '@media (max-width: 430px)': {
+     paddingTop: '55px',
+   },
+ });

  // Layout 컴포넌트에서
- css({
-   paddingTop: '100px',
-   '@media (max-width: 430px)': {
-     paddingTop: '55px',
-   },
- })
+ commonMainStyle

  // LayoutNoSearch 컴포넌트에서도 동일하게 적용

src/components/mobile/MobileToggleGroup/MobileToggleGroup.tsx (1)

38-58: 접근성 개선이 필요합니다

토글 그룹의 접근성을 개선하기 위해 ARIA 속성과 키보드 네비게이션을 추가하는 것이 좋습니다.

다음과 같은 개선사항을 제안합니다:

 <div css={S.toggleGroupStyle}>
   <button
     css={S.clickedToggleStyle(isOpen)}
     type="button"
+    aria-expanded={isOpen}
+    aria-haspopup="true"
+    aria-label={`정렬 기준: ${selectedValue === 'views' ? '인기순' : '최신순'}`}
     onClick={handleMenuClick}
   >

src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.style.ts (2)

19-23: 반응형 디자인 상수 관리 개선이 필요합니다

미디어 쿼리의 브레이크포인트를 상수로 관리하면 일관성 있는 유지보수가 가능합니다.

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

// src/styles/breakpoints.ts
export const BREAKPOINTS = {
  MOBILE: '430px',
  TABLET: '768px',
  // ... 기타 브레이크포인트
} as const;

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

export const talkPickStyling = css({
  // ... 기존 스타일
  [`@media (max-width: ${BREAKPOINTS.MOBILE})`]: {
    // ... 모바일 스타일
  },
});

---

37-42: 반응형 타이포그래피 시스템 검토가 필요합니다

여러 컴포넌트에서 동일한 모바일 타이포그래피 스타일이 반복되고 있습니다. 재사용 가능한 믹스인으로 관리하면 일관성과 유지보수성이 향상될 것 같습니다.

다음과 같은 아키텍처 개선을 제안합니다:

// src/styles/mixins.ts
import { css } from '@emotion/react';
import typo from '@/styles/typo';
import { BREAKPOINTS } from '@/styles/breakpoints';

export const withMobileTypography = (desktopTypo: any, mobileTypo: any) => css`
  ${desktopTypo};
  @media (max-width: ${BREAKPOINTS.MOBILE}) {
    ${mobileTypo};
  }
`;

// 사용 예시
export const bannerChipStyling = css({
  ...withMobileTypography(
    typo.Main.SemiBold,
    typo.Mobile.Text.SemiBold_7
  ),
  // ... 나머지 스타일
});

Also applies to: 55-60, 69-73

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

19-21: 타입 안전성 개선이 필요합니다

isMobile 프로퍼티가 선택적(optional)으로 정의되어 있지만, 기본값이 있으므로 필수 프로퍼티로 변경하는 것이 더 명확할 것 같습니다.

- isMobile?: boolean;
+ isMobile: boolean;

src/components/mobile/MobileCreateDropdown/MobileCreateDropdown.tsx (1)

43-48: 이벤트 리스너 최적화가 필요합니다

전역 이벤트 리스너를 사용할 때는 성능 최적화를 고려해야 합니다. 현재 구현은 불필요하게 자주 이벤트 핸들러가 호출될 수 있습니다.

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

useEffect(() => {
  if (isOpen) {
    const handleOutsideClick = (e: MouseEvent) => {
      if (!dropdownRef.current?.contains(e.target as Node)) {
        setIsOpen(false);
      }
    };
    
    window.addEventListener('click', handleOutsideClick);
    return () => window.removeEventListener('click', handleOutsideClick);
  }
}, [isOpen]);

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

41-51: 조건부 렌더링 구현이 깔끔합니다.

모바일/데스크톱 환경에 따른 토글 그룹 컴포넌트 분기 처리가 잘 되어있습니다. 다만, 재사용성을 위해 공통 props 타입을 분리하는 것을 고려해보세요.

+ interface CommonToggleGroupProps {
+   selectedValue: string;
+   onClick: (value: string) => void;
+ }

+ interface MobileToggleGroupProps extends CommonToggleGroupProps {
+   // mobile specific props
+ }

+ interface ToggleGroupProps extends CommonToggleGroupProps {
+   // desktop specific props
+ }

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

30-36: extraSmall 사이즈 스펙이 적절합니다.

모바일 환경에 맞는 크기로 잘 정의되어 있습니다. 다만, 매직 넘버 대신 변수화를 고려해보세요.

+ const MOBILE = {
+   WIDTH: '162px',
+   HEIGHT: '121px',
+   INFO_HEIGHT: '40px',
+   LABEL_MAX_WIDTH: '141px',
+   IMAGE_HEIGHT: '81px',
+ };

  extraSmall: {
-   width: '162px',
+   width: MOBILE.WIDTH,
    // ... 나머지 속성들도 동일하게 적용
  },

---

67-69: 미디어 쿼리 브레이크포인트가 일관되게 적용되었습니다.

모바일 대응을 위한 미디어 쿼리가 430px로 통일되어 있습니다. 다만, 브레이크포인트를 상수로 분리하는 것을 추천드립니다.

+ const BREAKPOINT = {
+   MOBILE: '430px',
+ };

- @media (max-width: 430px)
+ @media (max-width: ${BREAKPOINT.MOBILE})

Also applies to: 110-112, 119-121

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

77-96: 반응형 스타일 로직이 개선될 여지가 있습니다.

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',
+  },
+ };

+ const getBorderRadius = (label: string, isMobile: boolean) => {
+   if (label === '인기') return isMobile ? BORDER_RADIUS.MOBILE.LEFT : BORDER_RADIUS.DESKTOP.LEFT;
+   if (label === '월드컵') return isMobile ? BORDER_RADIUS.MOBILE.RIGHT : BORDER_RADIUS.DESKTOP.RIGHT;
+   return '0';
+ };

src/assets/index.ts (1)

104-104: 이전 SVG 정리 필요

TODO 주석에 명시된 대로 이전 SVG 파일들의 정리가 필요합니다. 현재 코드베이스의 일관성을 위해 이 작업의 우선순위를 고려해주세요.

이전 SVG 파일들의 정리를 위한 이슈를 생성해드릴까요?

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# z-index 사용 현황 확인
rg -n "zIndex|z-index" --type css --type typescript

#!/bin/bash
# z-index 사용 현황 확인 (파일 확장자 직접 지정)
rg -n "zIndex|z-index" -g "*.ts" -g "*.tsx" -g "*.css" -g "*.scss"

#!/bin/bash
# Description: Verify mobile breakpoint consistency across the codebase

# Search for breakpoint definitions
echo "Searching for breakpoint definitions..."
rg -n "breakpoint|@media.*max-width|@media.*min-width" --type css --type typescript

# Search for useIsMobile implementation
echo "Searching for useIsMobile implementation..."
rg -n "useIsMobile" --type typescript

#!/bin/bash
# Search for breakpoint definitions and useIsMobile implementation with correct file extensions
echo "Searching for breakpoint definitions..."
rg -n "breakpoint|@media.*max-width|@media.*min-width" -t tsx -t ts -t css -t scss

echo -e "\nSearching for useIsMobile implementation..."
rg -n "useIsMobile" -t tsx -t ts -A 5

#!/bin/bash
# Search without file type restrictions
echo "Searching for breakpoint definitions..."
rg -n "breakpoint|@media.*max-width|@media.*min-width"

echo -e "\nSearching for useIsMobile implementation and its definition..."
rg -n "useIsMobile" -A 5

echo -e "\nSearching for files containing useIsMobile..."
fd useIsMobile

#!/bin/bash
# z-index 충돌 가능성 확인
rg -n "z-index|zIndex" --type ts --type tsx

#!/bin/bash
# z-index 충돌 가능성 확인 (수정된 명령어)
rg -n "z-index|zIndex" -t ts

#!/bin/bash
# 모바일 관련 스타일 파일들 검색
fd -e ts -e tsx . src/ --exec grep -l "style"

#!/bin/bash
# 버튼 관련 스타일 검색
rg -n "button.*style|style.*button" -t ts

#!/bin/bash
# Description: Check if there's an alternative way to access "오늘의 톡픽 모음.zip" on mobile

# Search for routes or links related to "오늘의 톡픽"
rg -i "오늘의\s*톡픽" --type ts --type tsx

#!/bin/bash
# Search for files with .tsx extension and content related to "오늘의 톡픽"
rg -i "오늘의.*톡픽" -g "*.tsx"

# Search for route definitions
rg -i "route|path" -g "*.tsx" -A 2

# Check CategoryBox component in non-mobile view
cat src/components/molecules/CategoryBox/CategoryBox.tsx

#!/bin/bash
# Check for routes and links to "오늘의 톡픽" content
rg -i "todaytalkpick|오늘의.*톡픽" -g "*.{tsx,ts}" -A 2

# Check mobile navigation components
fd -e tsx -e ts "Mobile.*Menu|Mobile.*Nav" -x cat {}

#!/bin/bash
# Description: Check breakpoint consistency across components

# Search for all media query breakpoints
rg -i "max-width:\s*\d+" --type ts --type tsx

#!/bin/bash
# Search for media query breakpoints in TypeScript files
rg -i "@media.*max-width.*\d+" --type ts

# Also search in style files that might have different extensions
rg -i "@media.*max-width.*\d+" -g "*.style.*"
rg -i "@media.*max-width.*\d+" -g "*.styled.*"

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

1-15: 모바일 환경에서의 터치 이벤트 처리가 필요합니다.

모바일 컴포넌트이므로 터치 이벤트에 대한 고려가 필요합니다.

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

 interface DraftSaveButtonProps {
   onClick: () => void;
+  onTouchStart?: () => void;
+  onTouchEnd?: () => void;
 }

-const DraftSaveButton = ({ onClick }: DraftSaveButtonProps) => {
+const DraftSaveButton = ({
+  onClick,
+  onTouchStart,
+  onTouchEnd
+}: DraftSaveButtonProps) => {
   return (
     <button
       css={S.buttonStyle}
       type="button"
       onClick={onClick}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
     >
       임시저장
     </button>
   );
 };

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

5-8: 모바일 화면 너비 고려가 필요합니다.

토글 그룹의 너비를 명시적으로 지정하는 것이 좋습니다. 모바일 환경에서 예상치 못한 레이아웃 이슈를 방지할 수 있습니다.

다음과 같이 width 속성을 추가하는 것을 고려해보세요:

export const toggleGroupStyle = css({
  display: 'flex',
  flexDirection: 'column',
+ width: '100%',
});

---

23-33: 스타일 일관성 개선이 필요합니다.

1. 클릭되지 않은 상태의 패딩(4px 26px 4px 9px)이 클릭된 상태와 다릅니다.
2. 디자인 토큰화된 값을 사용하면 유지보수가 더 쉬워질 것 같습니다.

다음과 같이 개선하는 것을 제안합니다:

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

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

src/components/mobile/atom/MobileToggleGroup/MobileToggleGroup.tsx (1)

16-29: 이벤트 처리 방식과 재사용성 개선이 필요합니다

1. e.stopPropagation()의 사용이 다른 이벤트 핸들러의 동작을 방해할 수 있습니다.
2. 토글 값('views', 'createdAt')이 하드코딩되어 있어 컴포넌트의 재사용성이 제한됩니다.

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

+interface ToggleOption {
+  value: string;
+  label: string;
+}
+
 interface MobileToggleGroupProps {
   selectedValue: string;
   onClick?: (value: string) => void;
+  options: ToggleOption[];
 }

 const handleToggleClick = () => {
-  const newValue = selectedValue === 'views' ? 'createdAt' : 'views';
+  const currentIndex = options.findIndex(opt => opt.value === selectedValue);
+  const nextIndex = (currentIndex + 1) % options.length;
+  const newValue = options[nextIndex].value;
   onClick?.(newValue);
   setIsOpen(false);
 };

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

94-97: setIsMenuOpen(false);의 중복 호출을 제거해주세요

handleLoginButton 함수에서 setIsMenuOpen(false);이 if와 else 블록 모두에서 호출되고 있습니다. 중복 코드를 제거하기 위해 if 문 바깥으로 이동시키는 것이 좋습니다.

다음과 같이 수정할 수 있습니다:

const handleLoginButton = () => {
  if (accessToken) {
    logout.mutate();
  } else {
    navigate('/login');
  }
+ setIsMenuOpen(false);
};

src/components/mobile/molecule/MobileCreateDropdown/MobileCreateDropdown.style.ts (2)

2-2: 주석 처리된 import 문을 정리해주세요.

주석 처리된 color import 문을 제거하거나 실제로 사용하도록 수정해주세요. 현재는 불필요한 코드로 남아있습니다.

---

4-12: z-index 값을 중앙 집중화하는 것이 좋습니다.

여러 컴포넌트에서 하드코딩된 z-index 값(10, 20)을 사용하고 있습니다. 이는 유지보수를 어렵게 만들 수 있습니다.

다음과 같이 상수로 분리하는 것을 제안합니다:

const Z_INDICES = {
  OVERLAY: 10,
  DROPDOWN: 20,
} as const;

Also applies to: 14-19, 21-30, 32-40

src/components/mobile/atom/MobileCreateButton/MobileCreateButton.style.ts (3)

12-13: 매직 넘버를 상수로 분리하는 것이 좋습니다.

padding, gap, width 등의 매직 넘버를 의미 있는 상수로 분리하면 유지보수가 더 쉬워집니다.

다음과 같이 상수로 분리하는 것을 제안합니다:

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

Also applies to: 18-19

---

17-17: transition 속성을 최적화해주세요.

all 대신 실제로 변경되는 속성만 transition을 적용하는 것이 성능상 좋습니다.

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

---

15-15: 박스 쉐도우 값을 중앙 집중화하는 것이 좋습니다.

반복되는 박스 쉐도우 값을 상수로 분리하면 일관성 있는 스타일 관리가 가능합니다.

const BOX_SHADOWS = {
  DEFAULT: '1px 2px 15px 0 rgba(119, 130, 255, 0.2)',
  HOVER: '1px 2px 15px 0 rgba(119, 130, 255, 0.8)',
} as const;

Also applies to: 21-21

src/components/mobile/atom/MobileCreateButton/MobileCreateButton.tsx (2)

5-9: 타입 안전성을 개선할 수 있습니다.

imageType을 리터럴 유니온 타입으로 정의한 것은 좋습니다. 하지만 이를 상수로 분리하면 재사용성과 타입 안전성이 더욱 향상됩니다.

export const IMAGE_TYPES = {
  TALKPICK: 'talkpick',
  GAME: 'game',
} as const;

type ImageType = typeof IMAGE_TYPES[keyof typeof IMAGE_TYPES];

interface MobileCreateButtonProps extends ComponentPropsWithRef<'button'> {
  imageType: ImageType;
  label: string;
  onClick?: () => void;
}

---

17-27: 이미지 컴포넌트 선택 로직을 최적화할 수 있습니다.

switch 문 대신 객체 매핑을 사용하면 코드가 더 간결해지고 성능이 개선됩니다.

const IMAGE_COMPONENTS = {
  talkpick: CircleTalkPick,
  game: CircleGame,
} as const;

const ImageComponent = IMAGE_COMPONENTS[imageType];
if (!ImageComponent) return null;

src/components/mobile/molecule/MobileCreateDropdown/MobileCreateDropdown.tsx (2)

1-11: ESLint 비활성화 범위를 최소화하세요

전역 ESLint 규칙 비활성화보다는 특정 코드 라인에만 적용하는 것이 좋습니다. 필요한 부분에만 규칙을 비활성화하여 코드 품질을 유지하세요.

다음과 같이 수정하는 것을 추천드립니다:

-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */

// 필요한 라인에만 적용
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions

---

18-32: 중복된 네비게이션 로직을 개선하세요

handleCreatePostButton와 handleCreateGameButton에 중복된 로직이 있습니다. 이를 하나의 함수로 추상화하면 코드 유지보수가 더 쉬워질 것 같습니다.

다음과 같이 리팩토링하는 것을 추천드립니다:

const handleNavigation = (path: string) => {
  if (accessToken) {
    navigate(path);
  } else {
    navigate(PATH.LOGIN);
  }
};

const handleCreatePostButton = () => handleNavigation(PATH.CREATE.TALK_PICK);
const handleCreateGameButton = () => handleNavigation(PATH.CREATE.GAME);

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

18-18: 조건부 렌더링 최적화가 필요합니다

모바일/데스크톱 버전의 렌더링 로직이 복잡해질 수 있으므로, 각각의 컴포넌트를 분리하고 메모이제이션을 적용하는 것이 좋을 것 같습니다.

다음과 같은 구조로 개선하는 것을 추천드립니다:

const MobileContent = memo(({ 
  contents, 
  selectedValue, 
  setSelectedValue, 
  activeTab, 
  setActiveTab,
  handleSearch,
  handleService 
}) => (
  <div css={S.contentWrapStyle}>
    {/* 모바일 버전 컨텐츠 */}
  </div>
));

const DesktopContent = memo(({ /* props */ }) => (
  <div css={S.contentWrapStyle}>
    {/* 데스크톱 버전 컨텐츠 */}
  </div>
));

// LandingPage 컴포넌트 내부
{isMobile ? (
  <MobileContent {...props} />
) : (
  <DesktopContent {...props} />
)}

Also applies to: 70-103

---

Line range hint 31-48: 상태 관리 로직을 최적화하세요

contents 상태 업데이트 로직이 복잡하고 의존성이 많습니다. useMemo를 사용하여 최적화하고 의존성을 줄이는 것이 좋을 것 같습니다.

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

const contents = useMemo(() => {
  if (isBestLoading || isLatestLoading) return [];
  return selectedValue === 'views' ? bestGames : latestGames;
}, [selectedValue, bestGames, latestGames, isBestLoading, isLatestLoading]);

Configuration used: CodeRabbit UI
Review profile: CHILL

- const accessToken = useNewSelector(selectAccessToken) as string;
+ const accessToken = useNewSelector(selectAccessToken) ?? '';

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

62-72: 토글 그룹 렌더링 로직을 개선해보세요.

현재 구현은 동작하지만, 공통 props가 중복되어 있습니다. 다음과 같이 개선하면 코드를 더 간결하게 만들 수 있습니다:

-        {isMobile ? (
-          <MobileToggleGroup
-            selectedValue={selectedValue}
-            onClick={setSelectedValue}
-          />
-        ) : (
-          <ToggleGroup
-            selectedValue={selectedValue}
-            onClick={setSelectedValue}
-          />
-        )}
+        {React.createElement(isMobile ? MobileToggleGroup : ToggleGroup, {
+          selectedValue,
+          onClick: setSelectedValue,
+        })}

---

84-84: 버튼 크기 값을 상수로 분리하면 좋겠습니다.

크기 값을 직접 문자열로 사용하는 대신, 상수로 분리하여 관리하면 유지보수가 더 쉬워질 것 같습니다.

+ const BUTTON_SIZE = {
+   MOBILE: 'extraSmall' as const,
+   DESKTOP: 'large' as const,
+ };

- size={isMobile ? 'extraSmall' : 'large'}
+ size={isMobile ? BUTTON_SIZE.MOBILE : BUTTON_SIZE.DESKTOP}

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

35-37: 메뉴 토글 핸들러의 안전성을 개선해주세요.

현재 구현은 기본적인 토글 기능만 제공합니다. 다음과 같은 개선사항을 고려해보세요:

• 토글 상태 변경 시 애니메이션 처리
• 외부 영역 클릭 시 메뉴 닫기
• 키보드 접근성 지원 (예: ESC 키로 닫기)

---

154-201: 모바일 UI 렌더링 로직의 구조를 개선해주세요.

현재 구현에서 다음과 같은 개선이 필요해 보입니다:

1. 조건부 렌더링 로직을 별도의 컴포넌트로 분리하여 가독성 향상
2. 반복되는 버튼 컴포넌트들을 공통 컴포넌트로 추상화
3. 모바일/데스크톱 뷰를 별도의 컴포넌트로 분리

예시 구조:

const MobileView = ({ isMenuOpen, handleMenuToggle, ...props }) => (
  // 모바일 뷰 로직
);

const DesktopView = ({ optionData, ...props }) => (
  // 데스크톱 뷰 로직
);

return (
  <div css={S.containerStyle}>
    <Logo isMobile={isMobile} />
    <div css={S.rightContainerStyle}>
      {isMobile ? <MobileView {...props} /> : <DesktopView {...props} />}
    </div>
  </div>
);

---

접근성과 보안 관련 개선이 필요합니다.

다음과 같은 문제점들이 발견되었습니다:

1. 접근성 문제:

   • 키보드 네비게이션 핸들러가 구현되어 있지 않음
   • 메뉴 버튼에 대한 ARIA 레이블이 최소한으로만 구현됨 (aria-label="headerList")
   • 상호작용 가능한 요소들에 대한 적절한 ARIA 속성이 부족함

2. 보안 취약점:

   • 토큰이 로컬 스토리지에 직접 저장되어 XSS 공격에 취약함
   • Bearer 토큰이 코드에 하드코딩되어 있음
   • 토큰 만료 처리 로직이 구현되어 있지 않음

다음 사항들의 구현을 권장드립니다:

• 모든 상호작용 요소에 대한 키보드 이벤트 핸들러 추가
• 적절한 ARIA 레이블과 역할 속성 추가
• 토큰 저장소를 쿠키나 세션 스토리지로 변경
• 토큰 만료 처리 및 자동 갱신 메커니즘 구현

🔗 Analysis chain

Line range hint 1-207: 접근성과 보안 측면의 개선이 필요합니다.

다음 사항들을 고려해주세요:

1. 접근성 개선:

   • 모든 상호작용 요소에 대한 키보드 네비게이션 지원
   • 스크린 리더 사용자를 위한 ARIA 레이블 보완
   • 색상 대비 확인

2. 보안 강화:

   • 로그인 상태 변경 시 토큰 관리 검증
   • 사용자 세션 만료 처리
   • XSS 방지를 위한 입력값 검증

3. 사용자 경험:

   • 로딩 상태 표시
   • 에러 처리 및 사용자 피드백
   • 네트워크 지연 시 폴백 UI

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for accessibility-related dependencies
grep -r "aria-" .
grep -r "role=" .

Length of output: 98345

---

Script:

#!/bin/bash
# Check for keyboard navigation and accessibility attributes
ast-grep --pattern $'button {
  $$$
  onKeyDown($$$) {
    $$$
  }
  $$$
}'

# Check for ARIA labels and roles in the Header component
rg -l "aria-" src/components/organisms/Header/Header.tsx
rg -l "role=" src/components/organisms/Header/Header.tsx

# Check for security-related code in the Header component
rg "(localStorage|sessionStorage|token|Bearer)" src/components/organisms/Header/Header.tsx

Length of output: 455

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# CategoryBar 컴포넌트에서 isMobile prop 처리 확인
ast-grep --pattern 'interface CategoryBarProps {
  $$$
  isMobile?: boolean;
  $$$
}'

#!/bin/bash
# CategoryBar 컴포넌트의 isMobile prop 사용 확인
ast-grep --pattern 'const CategoryBar = ({ isMobile, $$ }: CategoryBarProps) => {
  $$$
}'

# CategoryBar 컴포넌트 전체 내용 확인
rg -U "const CategoryBar.*?^}" -A 50 --multiline

#!/bin/bash
# CategoryBar 컴포넌트 파일의 전체 내용 확인
cat src/components/molecules/CategoryBar/CategoryBar.tsx

# styled-components에서 isMobile 사용 확인
rg "isMobile" src/components/molecules/CategoryBar/CategoryBar.tsx

src/components/mobile/molecules/MobileCreateDropdown/MobileCreateDropdown.tsx (1)

1-3: ESLint 비활성화를 컴포넌트 레벨로 이동하는 것이 좋습니다

파일 수준의 ESLint 규칙 비활성화보다는 필요한 컴포넌트에만 적용하는 것이 좋습니다. 특히 접근성 관련 규칙들은 신중하게 처리해야 합니다.

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

-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */

 const MobileCreateDropdown = () => {
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   return (
     // component code
   );
 };

Configuration used: CodeRabbit UI
Review profile: CHILL

const dropdownRef = useRef<HTMLDivElement>(null);
useOutsideClick(dropdownRef, () => setIsOpen(false));

return (
  <div ref={dropdownRef} css={S.dropdownStyling}>
    // ... rest of the component
  </div>
);

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

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

현재 중첩된 조건부 렌더링이 코드의 가독성을 저하시키고 있습니다.

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

const renderMobileView = () => (
  <>
    <button
      type="button"
      aria-label="headerList"
      aria-expanded={isMenuOpen}
      aria-controls="mobile-menu"
      onClick={handleMenuToggle}
      css={S.listButtonStyle}
    >
      <ListIcon />
    </button>
    {isMenuOpen && (
      <MobileSideMenu
        isOpen={isMenuOpen}
        setIsOpen={setIsMenuOpen}
        accessToken={accessToken}
        handleLoginButton={handleLoginButton}
      />
    )}
  </>
);

const renderDesktopView = () => (
  <>
    <CreateDropdown optionData={optionData} />
    <div css={S.rightContainerStyle}>
      {/* ... 나머지 데스크톱 뷰 컴포넌트 ... */}
    </div>
  </>
);

return (
  <div css={S.containerStyle}>
    <div css={S.logoStyle}>
      <Link to="/">{isMobile ? <LogoSmall /> : <Logo />}</Link>
    </div>
    <div css={S.rightContainerStyle}>
      {isMobile ? renderMobileView() : renderDesktopView()}
    </div>
  </div>
);

이렇게 분리하면:

1. 각 뷰의 로직이 명확하게 구분됩니다.
2. 코드의 가독성이 향상됩니다.
3. 유지보수가 용이해집니다.

---

29-30: 모바일 반응형 구현 방식에 대한 제안

현재 useIsMobile 훅과 상태 관리 방식이 모바일 대응에 있어 몇 가지 잠재적인 문제를 가질 수 있습니다:

1. 리사이즈 이벤트가 자주 발생할 경우 성능 저하 가능성
2. 브레이크포인트 관리의 중앙화 필요성
3. 상태 변경으로 인한 불필요한 리렌더링

다음과 같은 개선을 고려해보세요:

1. 리사이즈 이벤트에 디바운스 적용
2. 브레이크포인트를 중앙 관리하는 설정 파일 도입
3. CSS 미디어 쿼리와의 일관성 유지를 위한 전략 수립

이러한 개선사항들을 적용하시겠습니까? 필요하시다면 구체적인 구현 방안을 제시해드리겠습니다.