src/hooks/game/useBalanceGameVote.ts (1)

38-61: 게스트 투표 로직 확인
게스트 유저의 투표, 취소, 교체 로직을 배열 인덱스를 찾아 적절히 수정해주는 구조가 명확합니다. 다만, findIndex로 찾았을 때 없을 경우( return -1 )에 대한 추가 체크가 필요할 수 있습니다.

가능하다면 currentVoteIndex가 -1일 때의 에러 처리를 명시적으로 추가하는 것이 안전합니다.

+ if (currentVoteIndex === -1 && selectedOption) {
+   // 혹은 별도 처리 로직
+ }

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

11-11: useGameEndBookmark 훅 사용
useGameEndBookmark를 사용하여 즐겨찾기(북마크) 로직을 단순화시킨 것은 유지보수성에 긍정적입니다. API 연동 및 에러 처리가 훅 내부에서 일관성 있게 처리되는지 재차 점검해 주세요.

src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.tsx (3)

42-50: 컴포넌트 Props 설계
gameSetId, game, isMyGame 등 주요 상태를 명시적으로 전달받는 구조가 명확합니다. 후속 유지보수 시 props 증가 가능성이 높은 부분이니, 필요하다면 별도의 context나 상위 컴포넌트 분리도 고려할 수 있습니다.

---

61-67: useGuestGameVote 훅 연동
guestVotedList의 상태와 함수를 훅으로 분리함으로써 로직 가독성이 향상되었습니다. 다만, 훅 내부에서 발생할 수 있는 에러 케이스(잘못된 currentStage 등)에 대한 방어 로직이 필요할 수 있습니다.

---

123-130: handleBookmarkClick 파라미터 확인
콜백 함수를 통해 로그인 모달을 열어주는 형태는 유연도가 높습니다. 만약 비로그인에 대한 다른 처리가 필요해질 경우를 대비해, 콜백 이외의 로그인 리다이렉션 전략 등도 고려할 수 있겠습니다.

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

19-20: useGuestGameVote 훅 도입
guest 투표 로직 분야가 명확히 분리되어 가독성이 좋아졌습니다. 가능하다면 회원 투표 로직과 함께 유사한 Hook 시그니처를 유지하여, 이후 확장성 및 재사용성을 높이는 것이 좋겠습니다.

---

123-130: useGameBookmark 훅 사용
동일한 훅을 웹/모바일에서 공유하여 즐겨찾기 로직을 일원화한 점이 훌륭합니다. 북마크 생성/삭제에 대한 에러 상황(예: 네트워크 오류, 이미 북마크되어 있는 게임)에 대한 사용자 알림 처리도 곁들여 주시면 좋겠습니다.

---

239-239: handleBookmarkClick 콜백 인자
콜백을 통해 비로그인 시 별도의 모달을 호출하는 로직이 유연하게 처리됩니다. 다만, 로그인 처리 후 재시도 로직이 필요한 상황에 대비하여 handleBookmarkClick 내부에서 다시 한 번 vote나 bookmark를 시도할 수 있도록 구조를 개선할 수도 있습니다.

필요하다면 후속 로직 개선을 위한 추가 코드를 제안해 드릴 수 있습니다.

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

14-16: 이벤트 리스너 최적화가 필요합니다.

리사이즈 이벤트가 너무 자주 발생하는 것을 방지하기 위해 디바운스 처리가 필요합니다.

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

import { debounce } from 'lodash';

function useIsMobile() {
  const [isMobile, setIsMobile] = useState<boolean>(false);

  useEffect(() => {
    const checkIsMobile = () => {
      // ... existing code ...
    };

    const debouncedCheck = debounce(checkIsMobile, 250);
    
    checkIsMobile();
    window.addEventListener('resize', debouncedCheck);
    return () => {
      window.removeEventListener('resize', debouncedCheck);
      debouncedCheck.cancel();
    };
  }, []);

  return isMobile;
}

src/components/mobile/organisms/BalanceGameEndingSection/BalanceGameEndingSection.style.ts (1)

41-47: 토스트 모달의 접근성 개선 필요

현재 토스트 모달 구현에 다음 접근성 속성들이 누락되어 있습니다:

• ARIA 역할 및 라이브 리전
• 스크린 리더 지원

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

export const toastModalStyling = css({
  position: 'fixed',
  top: '65px',
  left: '50%',
  transform: 'translate(-50%)',
  zIndex: '1000',
+  role: 'alert',
+  'aria-live': 'polite',
});

src/components/mobile/atoms/BalanceGameButton/BalanceGameButton.style.ts (1)

36-41: 이미지 최적화 속성 추가 필요

이미지 스타일에 성능 및 사용자 경험 향상을 위한 속성들이 누락되어 있습니다.

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

export const imageStyle = css({
  width: '90px',
  height: '90px',
  borderRadius: '10px',
  objectFit: 'cover',
+  loading: 'lazy',
+  decoding: 'async',
});

src/layout/layout.tsx (2)

17-19: 미디어 쿼리 브레이크포인트 상수화 필요

하드코딩된 미디어 쿼리 브레이크포인트는 일관성 유지에 문제가 될 수 있습니다.

상수 파일을 생성하여 브레이크포인트를 관리하는 것을 추천드립니다:

// src/constants/breakpoints.ts
export const BREAKPOINTS = {
  MOBILE: '430px',
  TABLET: '768px',
  DESKTOP: '1024px',
} as const;

그리고 다음과 같이 사용:

-          '@media (max-width: 430px)': {
+          [`@media (max-width: ${BREAKPOINTS.MOBILE})`]: {
            paddingTop: '55px',
          },

---

24-24: Footer 조건부 렌더링 최적화 필요

삼항 연산자를 사용한 조건부 렌더링은 가독성이 떨어지며, 불필요한 null 반환이 있습니다.

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

-      {isMobile ? null : <Footer />}
+      {!isMobile && <Footer />}

src/components/mobile/atoms/BalanceGameButton/BalanceGameButton.tsx (3)

1-1: ESLint 비활성화 주석에 대한 설명이 필요합니다.

ESLint 규칙을 비활성화한 이유를 주석으로 설명해주시면 좋겠습니다.

---

6-14: 타입 정의 개선이 필요합니다.

다음 사항들을 개선하면 좋겠습니다:

1. id prop이 선택적인 이유가 명확하지 않습니다.
2. 'A' | 'B' 타입이 반복되므로 별도의 타입으로 분리하는 것이 좋겠습니다.

+type OptionType = 'A' | 'B';
+
 export interface BalanceGameButtonProps {
-  id?: number;
+  id: number;
   name: string;
   imgUrl: string | null;
   description: string;
-  optionType: 'A' | 'B';
-  selectedButton: 'A' | 'B' | null;
-  onClick: (optionType: 'A' | 'B') => void;
+  optionType: OptionType;
+  selectedButton: OptionType | null;
+  onClick: (optionType: OptionType) => void;
 }

---

31-33: 조건부 렌더링 로직 개선이 필요합니다.

renderCheckedIcon 함수를 더 간단하게 작성할 수 있습니다.

-  const renderCheckedIcon = () => {
-    return optionType === 'A' ? <RedCheckIcon /> : <BlueCheckIcon />;
-  };
+  const renderCheckedIcon = () => (
+    optionType === 'A' ? <RedCheckIcon /> : <BlueCheckIcon />
+  );

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

1-1: eslint-disable 주석 제거 필요

프로덕션 코드에서 alert 사용을 피하고 더 적절한 피드백 메커니즘을 구현하는 것이 좋습니다.

---

38-43: 테스트 데이터 개선 필요

현재 사용 중인 샘플 데이터가 실제 사용 사례를 잘 반영하지 못하고 있습니다. 다음과 같은 개선을 제안합니다:

• 더 현실적인 제목과 설명 텍스트 사용
• 다양한 길이의 텍스트 케이스 추가

src/pages/mobile/BalanceGameMobilePage/BalanceGameMobilePage.tsx (1)

24-30: 상태 업데이트 로직 최적화 필요

handleNextGame과 handlePrevGame 함수를 하나의 함수로 통합하여 코드 중복을 줄일 수 있습니다.

- const handleNextGame = () => {
-   setCurrentStage((stage) => (stage < 10 ? stage + 1 : stage));
- };
- 
- const handlePrevGame = () => {
-   setCurrentStage((stage) => (stage > 0 ? stage - 1 : stage));
- };
+ const handleStageChange = (direction: 'next' | 'prev') => {
+   setCurrentStage((stage) => {
+     if (direction === 'next') return stage < 10 ? stage + 1 : stage;
+     return stage > 0 ? stage - 1 : stage;
+   });
+ };

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

53-62: 옵션 A의 널 체크 개선 필요

옵션 데이터의 안전한 처리를 위해 옵셔널 체이닝 사용이 중복되어 있습니다.

다음과 같이 구조 분해 할당과 기본값을 활용하여 코드를 개선할 수 있습니다:

- <BalanceGameButton
-   name={optionA?.name ?? ''}
-   imgUrl={optionA?.imgUrl ?? null}
-   description={optionA?.description ?? ''}
-   optionType={optionA?.optionType ?? 'A'}
-   selectedButton={selectedVote ?? null}
-   onClick={() => {
-     handleButtonClick('A');
-   }}
- />
+ <BalanceGameButton
+   name={optionA?.name || ''}
+   imgUrl={optionA?.imgUrl || null}
+   description={optionA?.description || ''}
+   optionType="A"
+   selectedButton={selectedVote || null}
+   onClick={() => handleButtonClick('A')}
+ />

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

Line range hint 34-39: 배경 이미지 초기화 로직 최적화 필요

getRandomImages 함수가 컴포넌트 렌더링마다 새로 생성되어 불필요한 메모리를 사용할 수 있습니다.

다음과 같이 useMemo를 사용하여 최적화하는 것을 권장드립니다:

- const getRandomImages = () => {
+ const getRandomImages = useMemo(() => {
    const [randomNumberA, randomNumberB] = getRandomNumbers(
      S.gameBackgrounds.length,
    );
    return [S.gameBackgrounds[randomNumberA], S.gameBackgrounds[randomNumberB]];
- };
+ }, []);

src/stories/mobile/molecules/BalanceGameBox.stories.tsx (2)

11-28: 테스트 데이터 관리 개선 필요

테스트용 예제 데이터가 하드코딩되어 있어 유지보수가 어려울 수 있습니다.

별도의 테스트 데이터 파일로 분리하여 관리하는 것을 권장드립니다:

// src/stories/fixtures/balanceGame.ts
export const mockGameOptions: GameOption[] = [
  {
    id: 0,
    name: '제목은글자제한30자제목은글자제한30자제목은글자제한30자',
    imgUrl: SampleWhole,
    description: '상황설명글자제한50상황설명글자제한50상황설명글자제한50상황설명글자제한50상황설명글자제한50',
    optionType: 'A',
  },
  // ... 옵션 B
];

---

76-93: 스토리 렌더링 구조 개선 필요

현재 스토리 렌더링 구조가 반복적이며, 재사용성이 낮습니다.

다음과 같이 맵 함수를 사용하여 코드를 개선할 수 있습니다:

export const All: Story = {
  render: (args) => (
    <ul css={storyContainer}>
-     <li css={storyInnerContainer}>
-       <h3>not selected</h3>
-       <BalanceGameBox {...args} />
-     </li>
-     <li css={storyInnerContainer}>
-       <h3>A selected</h3>
-       <BalanceGameBox {...args} selectedVote="A" />
-     </li>
-     <li css={storyInnerContainer}>
-       <h3>B selected</h3>
-       <BalanceGameBox {...args} selectedVote="B" />
-     </li>
+     {[
+       { title: 'not selected', vote: null },
+       { title: 'A selected', vote: 'A' },
+       { title: 'B selected', vote: 'B' },
+     ].map(({ title, vote }) => (
+       <li key={title} css={storyInnerContainer}>
+         <h3>{title}</h3>
+         <BalanceGameBox {...args} selectedVote={vote} />
+       </li>
+     ))}
    </ul>
  ),
};

src/stories/mobile/organisms/BalanceGameSection.stories.tsx (1)

68-71: 핸들러 함수의 기본 구현 개선 필요

빈 함수 대신 콘솔 로그나 알림을 추가하여 Storybook에서 상호작용을 더 명확하게 표시하는 것이 좋습니다.

-    setCurrentStage: () => {},
-    handleNextGame: () => {},
-    handlePrevGame: () => {},
+    setCurrentStage: () => console.log('현재 스테이지 변경'),
+    handleNextGame: () => console.log('다음 게임으로 이동'),
+    handlePrevGame: () => console.log('이전 게임으로 이동'),

src/components/mobile/organisms/BalanceGameEndingSection/BalanceGameEndingSection.tsx (1)

32-33: 게스트 사용자 확인 로직 분리 제안

게스트 사용자 확인 로직을 커스텀 훅으로 분리하면 재사용성이 향상되고 코드가 더 깔끔해질 것 같습니다.

-  const isGuest = !localStorage.getItem('accessToken');
+  const { isGuest } = useAuthStatus();

src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.style.ts (1)

99-101: 그라데이션 성능 최적화 고려

선형 그라데이션은 모바일 기기에서 성능에 영향을 줄 수 있습니다.
가능하다면 더 가벼운 대안을 고려하거나, will-change 속성을 사용하여 최적화하세요.

   background:
     'linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))',
+  willChange: 'transform',

src/App.tsx (1)

24-24: 모바일 컴포넌트 import 구문 검토

모바일 페이지 컴포넌트를 동적 import로 변경하여 초기 번들 크기를 최적화하는 것이 좋습니다.

다음과 같이 React.lazy를 사용하여 코드 분할을 구현하는 것을 추천드립니다:

-import BalanceGameMobilePage from './pages/mobile/BalanceGameMobilePage/BalanceGameMobilePage';
+const BalanceGameMobilePage = React.lazy(() => 
+  import('./pages/mobile/BalanceGameMobilePage/BalanceGameMobilePage')
+);

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

#!/bin/bash
# primary variant medium 버튼이 사용된 컴포넌트들을 검색합니다
rg -l "variant=\"?primary\"?.+size=\"?medium\"?" --type tsx

#!/bin/bash
# Search for Button component usage with primary variant and medium size
rg -l "variant.*primary.*size.*medium|size.*medium.*variant.*primary"

# Also check for any direct imports of the Button component
rg -l "import.*Button.*from.*components/mobile/atoms/Button"

#!/bin/bash
# Check the actual usage context in the files that import the Button
rg "Button.*variant.*primary|variant.*primary.*Button" -A 3 -B 3 src/components/mobile/molecules/GameTagModal/GameTagModal.tsx src/components/mobile/molecules/ShareModal/ShareModal.tsx

# Check the story file to see how the button is used in different scenarios
cat src/stories/mobile/atoms/Button.stories.tsx

#!/bin/bash
# useIsMobile 훅의 구현 확인
rg -A 10 "useIsMobile" src/hooks/common/useIsMobile.ts

src/stories/organisms/SideBar.stories.tsx (1)

16-22: 데코레이터 중복 코드 개선 제안

ActionBox.stories.tsx와 동일한 데코레이터 코드가 중복되어 있습니다. 공통 데코레이터를 별도의 파일로 분리하여 재사용하는 것을 제안드립니다.

다음과 같이 구현할 수 있습니다:

// src/stories/decorators/withRouter.tsx
+import { BrowserRouter } from 'react-router-dom';
+
+export const withRouter = (Story) => (
+  <BrowserRouter>
+    <Story />
+  </BrowserRouter>
+);

// src/stories/organisms/SideBar.stories.tsx
-decorators: [
-  (Story) => (
-    <BrowserRouter>
-      <Story />
-    </BrowserRouter>
-  ),
-],
+decorators: [withRouter],

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

src/components/mobile/atoms/BalanceGameButton/BalanceGameButton.style.ts (1)

5-14: 🛠️ Refactor suggestion

버튼의 접근성 및 반응형 디자인 개선 필요

버튼 컴포넌트의 기본 접근성이 누락되어 있으며, 고정된 너비 값은 다양한 화면 크기에서 문제를 일으킬 수 있습니다.

export const buttonWrapStyle = css({
  all: 'unset',
  cursor: 'pointer',
  display: 'flex',
  flexDirection: 'column',
-  width: '305px',
+  width: '100%',
+  maxWidth: '305px',
  backgroundColor: color.WT,
  borderRadius: '10px',
  overflow: 'hidden',
+  role: 'button',
+  'aria-pressed': 'false',
});

src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.tsx (1)

9-9: 불필요한 중복 슬래시를 제거해 주세요.

import 구문에 중복된 슬래시가 있습니다. 경로 가독성을 위해 아래와 같이 변경하는 것을 권장합니다.

- import Button from '@/components/mobile//atoms/Button/Button';
+ import Button from '@/components/mobile/atoms/Button/Button';

src/components/mobile/atoms/BalanceGameButton/BalanceGameButton.style.ts (3)

16-23: 타입 안정성 개선 제안

옵션 타입을 리터럴 유니온 타입으로 분리하여 타입 안정성을 향상시킬 수 있습니다.

+type OptionType = 'A' | 'B';

-export const getOutlineStyle = (option: 'A' | 'B', isSelected: boolean) => {
+export const getOutlineStyle = (option: OptionType, isSelected: boolean) => {

---

33-36: 타이포그래피 시스템 일관성 유지 필요

타이포그래피 시스템을 재정의하는 것은 일관성을 해칠 수 있습니다. 기존 타이포그래피 시스템을 활용하거나, 필요한 경우 시스템을 확장하는 것이 좋습니다.

-export const nameStyle = css(typo.Mobile.Text.SemiBold_14, {
-  width: '220px',
-  fontSize: '16px',
-});
+export const nameStyle = css(typo.Mobile.Text.SemiBold_16, {
+  width: '220px',
+});

---

38-43: 이미지 처리 방식 개선 제안

고정된 이미지 크기는 이미지 품질에 영향을 줄 수 있습니다. 반응형 크기와 이미지 최적화를 고려해보세요.

이미지 컴포넌트에서 다음 사항들을 고려해주세요:

• 이미지 최적화 (next/image 사용)
• 반응형 크기 처리
• 이미지 로딩 상태 처리
• alt 텍스트 지원

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

 export const useUserGameVote = (
   gameSetId: number,
   gameId: number,
   handleNextStage: () => void,
 ) => {
-  const { mutate: createGameVote } = useCreateGameVoteMutation(
+  const { 
+    mutate: createGameVote,
+    isLoading: isCreating 
+  } = useCreateGameVoteMutation(
     gameSetId,
     gameId,
   );
-  const { mutate: editGameVote } = useEditGameVoteMutation(gameSetId, gameId);
-  const { mutate: deleteGameVote } = useDeleteGameVoteMutation(
+  const { 
+    mutate: editGameVote,
+    isLoading: isEditing 
+  } = useEditGameVoteMutation(gameSetId, gameId);
+  const { 
+    mutate: deleteGameVote,
+    isLoading: isDeleting 
+  } = useDeleteGameVoteMutation(
     gameSetId,
     gameId,
   );
+
+  const isLoading = isCreating || isEditing || isDeleting;

 const updateGuestVotedList = () => {
   const storedVotes = localStorage.getItem(`game_${gameSetId}`);
-  setGuestVotedList(
-    storedVotes ? (JSON.parse(storedVotes) as VoteRecord[]) : [],
-  );
+  try {
+    if (!storedVotes) {
+      setGuestVotedList([]);
+      return;
+    }
+    const parsedVotes = JSON.parse(storedVotes);
+    if (Array.isArray(parsedVotes) && 
+        parsedVotes.every(vote => 
+          typeof vote.gameId === 'number' && 
+          (vote.votedOption === 'A' || vote.votedOption === 'B')
+        )) {
+      setGuestVotedList(parsedVotes);
+    } else {
+      console.error('Invalid vote data structure');
+      setGuestVotedList([]);
+    }
+  } catch (error) {
+    console.error('Failed to parse vote data:', error);
+    setGuestVotedList([]);
+  }
 };

 const handleUserGameVote = (
   selectedOption: MyVoteOption,
   voteOption: VoteOption,
 ) => {
+  if (isLoading) return;
+
   if (!selectedOption) {
     createGameVote(voteOption, {
       onSuccess: () => {
         const nextStageTimer = setTimeout(() => {
           handleNextStage();
         }, 500);
         return () => clearTimeout(nextStageTimer);
       },
+      onError: (error) => {
+        console.error('Failed to create vote:', error);
+      },
     });
   } else if (selectedOption === voteOption) {
-    deleteGameVote();
+    deleteGameVote(undefined, {
+      onSuccess: () => {
+        console.log('Vote deleted successfully');
+      },
+      onError: (error) => {
+        console.error('Failed to delete vote:', error);
+      },
+    });
   } else {
-    editGameVote(voteOption);
+    editGameVote(voteOption, {
+      onSuccess: () => {
+        console.log('Vote updated successfully');
+      },
+      onError: (error) => {
+        console.error('Failed to update vote:', error);
+      },
+    });
   }
 };