fix: (QA/2) 매칭 결과 화면에서 뒤로가기 후 탭 유지

[Dubabbi]

#️⃣ Related Issue

Closes #226

☀️ New-insight

기존에는 매칭 결과 화면에서 브라우저 뒤로가기 클릭 시 항상 탭이 초기화되는 문제가 있었습니다. 2차 QA 반영하여 매칭 결과 화면(매칭 현황)에서 뒤로가기 클릭 시, 직전 탭 상태가 유지되도록 개선했습니다. 이를 통해 사용자 경험이 더욱 자연스러워졌습니다!

💎 PR Point

• useSearchParams를 활용하여 tab과 filter 값을 URL 쿼리로 관리
• 뒤로가기 시에도 이전 탭 상태를 그대로 유지
• 홈에서 요청 전송한 경우는 기존처럼 탭 초기화(1:1, 전체) 유지

📸 Screenshot

지금 보니까 캡처 영역을 잘못 잡아서 뒤로가기 버튼 누르는 게 안 나왔는데 마지막에 매칭현황에서 그룹 탭 유지되는 것만 봐주시면 됩니다!!

2025-07-18.065721.mp4

Summary by CodeRabbit

• 신규 기능

  • 로그인 시 스플래시 화면이 추가되었습니다.
  • 매칭 탭 및 필터 상태를 관리하는 커스텀 훅이 도입되었습니다.
  • 매칭 데이터 변환 유틸리티 함수가 추가되었습니다.
  • 하단 시트 인디케이터에 클릭 이벤트가 추가되었습니다.

• 버그 수정 및 개선

  • 매칭, 온보딩, 회원가입, 결과 화면 등에서 메시지, 버튼, 안내문구, 배경색 등 UI/UX가 개선되었습니다.
  • 매칭 헤더 메시지가 닉네임과 매칭 유형에 따라 동적으로 표시됩니다.
  • 입력창 메시지 아이콘이 상태에 따라 변경됩니다.
  • 인증 상태 로딩 처리 및 인증 미완료 시 로그인 페이지로 이동하도록 변경되었습니다.
  • 하단 시트 인디케이터, 칩 리스트, 버튼 등 컴포넌트의 접근성과 스타일이 개선되었습니다.

• 디자인 및 스타일

  • 매칭 성공/실패 화면, 글로벌 스타일, 테마 z-index 등 시각적 요소가 개선되었습니다.
  • 버튼에 새로운 gray2 스타일이 추가되었습니다.

• 문서 및 안내문구

  • 회원가입, 매칭 등에서 안내 문구가 더 명확하게 수정되었습니다.

• 기타

  • 쿼리 자동 재시도 및 에러 처리 옵션이 변경되어 안정성이 향상되었습니다.
  • 스토리북에서 Footer 컴포넌트가 라우팅 컨텍스트 내에서 렌더링됩니다.

[github-actions]

MATEBALL-STORYBOOK
⚾ Storybook 배포가 완료되었습니다!

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

src/pages/match/hooks/useMatchTabState.ts (1)

27-33: 상태 업데이트 로직 개선 권장

setState 콜백 내에서 updateQuery를 호출하는 것은 불필요한 복잡성을 야기할 수 있습니다. 상태 업데이트와 URL 업데이트를 분리하는 것이 더 명확합니다.

  const handleFilterChange = (filter: string) => {
-    setTabState((prev) => {
-      const next = { ...prev, filter };
-      updateQuery(next.type, filter);
-      return next;
-    });
+    setTabState((prev) => ({ ...prev, filter }));
+    updateQuery(tabState.type, filter);
  };

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between e7f06e4 and 1b7a5f9.

📒 Files selected for processing (8)

• src/pages/match/components/match-tab-pannel.tsx (1 hunks)
• src/pages/match/hooks/mapMatchData.ts (1 hunks)
• src/pages/match/hooks/useMatchTabState.ts (1 hunks)
• src/pages/match/match.tsx (1 hunks)
• src/pages/result/components/matching-agree-view.tsx (1 hunks)
• src/pages/result/components/matching-fail-view.tsx (1 hunks)
• src/pages/result/components/matching-receive-view.tsx (1 hunks)
• src/pages/result/components/matching-success-view.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (6)

src/pages/match/components/match-tab-pannel.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/result/components/matching-receive-view.tsx (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/result/components/matching-fail-view.tsx (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/result/components/matching-agree-view.tsx (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/result/components/matching-success-view.tsx (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

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

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

🧬 Code Graph Analysis (6)

src/pages/result/components/matching-receive-view.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/match/hooks/useMatchTabState.ts (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/result/components/matching-fail-view.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/result/components/matching-agree-view.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/result/components/matching-success-view.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/match/hooks/mapMatchData.ts (2)

src/shared/components/card/match-card/types/card.ts (2)

• SingleCardProps (27-37)
• GroupCardProps (39-44)

src/shared/types/match-types.ts (1)

• getGroupMatchMate (196-206)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: chromatic
• GitHub Check: Cloudflare Pages

🔇 Additional comments (15)

src/pages/result/components/matching-receive-view.tsx (1)

23-25: 뒤로가기 방지 로직이 올바르게 구현되었습니다.

URL 쿼리 파라미터를 기반으로 동적 라우트를 생성하여 탭 상태를 유지하는 기능이 정확히 구현되었습니다. cardtype에 따라 적절한 탭 값을 설정하고 있습니다.

src/pages/result/components/matching-agree-view.tsx (2)

9-9: 필요한 훅이 올바르게 import되었습니다.

뒤로가기 방지 로직에 필요한 useSearchParams 훅이 추가되었습니다.

---

17-21: 탭 상태 유지를 위한 동적 라우트 생성이 정확히 구현되었습니다.

cardtype 쿼리 파라미터를 기반으로 적절한 탭 값을 설정하여 뒤로가기 시 탭 상태를 유지하는 기능이 올바르게 구현되었습니다.

src/pages/result/components/matching-success-view.tsx (2)

7-7: 필요한 훅이 올바르게 import되었습니다.

뒤로가기 방지 로직에 필요한 useSearchParams 훅이 추가되었습니다.

---

15-19: 뒤로가기 방지 로직이 일관되게 구현되었습니다.

다른 결과 화면 컴포넌트들과 동일한 패턴으로 cardtype에 따른 동적 라우트 생성이 구현되어 탭 상태 유지 기능이 올바르게 작동합니다.

src/pages/result/components/matching-fail-view.tsx (2)

6-6: 필요한 훅이 올바르게 import되었습니다.

뒤로가기 방지 로직에 필요한 useSearchParams 훅이 추가되었습니다.

---

10-14: 뒤로가기 방지 로직이 올바르게 구현되었습니다.

cardtype 쿼리 파라미터를 기반으로 한 동적 라우트 생성이 다른 결과 화면 컴포넌트들과 일관되게 구현되어 탭 상태 유지 기능이 정상적으로 작동합니다.

src/pages/match/hooks/useMatchTabState.ts (1)

15-20: URL 업데이트 로직 승인

replace: true 옵션을 사용하여 브라우저 히스토리에 추가하지 않는 것이 탭 상태 관리에 적절합니다. 뒤로가기 동작이 자연스럽게 유지됩니다.

src/pages/match/hooks/mapMatchData.ts (2)

17-22: 그룹 데이터 매핑 로직 승인

그룹 매치 데이터 매핑 로직이 간결하고 명확합니다. 스프레드 연산자를 사용하여 기존 속성을 유지하면서 타입만 설정하는 것이 적절합니다.

---

12-12: 이미지 URL 배열 래핑 로직이 올바릅니다

• singleMatchMate.imgUrl은 string 타입으로 정의되어 있고
• SingleCardProps.imgUrl은 string[] 타입(BaseCardProps에서 상속)으로 정의되어 있습니다.
• 따라서 imgUrl: [mate.imgUrl] 형태로 단일 URL을 배열로 감싸는 로직이 타입에 부합합니다.

src/pages/match/match.tsx (5)

6-7: 모듈화된 훅과 유틸리티 함수 도입 승인

커스텀 훅과 매핑 함수를 도입하여 컴포넌트의 관심사를 분리한 것이 좋습니다. 코드의 가독성과 재사용성이 향상되었습니다.

---

12-13: URL 기반 상태 관리 전환 승인

useMatchTabState 훅을 통해 URL 파라미터 기반 상태 관리로 전환한 것이 PR 목표와 일치합니다. 뒤로가기 시 탭 상태가 유지될 것입니다.

---

28-42: 데이터 매핑과 tabType 프로퍼티 추가 승인

매핑 함수를 사용한 데이터 변환과 tabType 프로퍼티 추가가 일관성 있게 구현되었습니다. 컴포넌트 간 데이터 흐름이 명확해졌습니다.

---

46-46: CSS 클래스 정리 승인

scrollbar-hide 클래스 제거가 적절합니다. 불필요한 스타일링 제거로 코드가 깔끔해졌습니다.

---

16-24: 타입 안전성 보장 확인됨

• src/shared/apis/match/match-queries.ts:68–72
  SINGLE_MATCH_STATUS는 queryOptions<getSingleMatchStatusResponse>로 제네릭 타입을 선언
• src/shared/apis/match/match-queries.ts:77–81
  GROUP_MATCH_STATUS는 queryOptions<{ mates: getGroupMatchMate[] }>로 제네릭 타입을 선언

위와 같이 matchQueries 단계에서 이미 제네릭 타입이 명시되어 있어, useQuery 호출 시에도 데이터 타입이 온전히 유지됩니다. 따라서 별도의 타입 어노테이션 없이도 타입 안전성에 영향이 없습니다.

[coderabbitai]

🛠️ Refactor suggestion

타입 캐스팅 안전성 개선 필요

URL 파라미터에서 가져온 값을 TabType으로 직접 캐스팅하는 것은 안전하지 않습니다. 유효하지 않은 값이 전달될 수 있습니다.

-  const initialTab = (searchParams.get('tab') as TabType) || '1:1';
+  const tabParam = searchParams.get('tab');
+  const initialTab: TabType = (tabParam === '1:1' || tabParam === '그룹') ? tabParam : '1:1';

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	const initialTab = (searchParams.get('tab') as TabType) || '1:1';
	const initialFilter = searchParams.get('filter') || '전체';
	const tabParam = searchParams.get('tab');
	const initialTab: TabType = (tabParam === '1:1' || tabParam === '그룹') ? tabParam : '1:1';
	const initialFilter = searchParams.get('filter') || '전체';

🤖 Prompt for AI Agents

In src/pages/match/hooks/useMatchTabState.ts around lines 10 to 11, the direct
casting of the URL parameter value to TabType is unsafe because the value might
be invalid. To fix this, validate the value obtained from
searchParams.get('tab') against the allowed TabType values before assigning it
to initialTab. If the value is invalid or missing, default to '1:1'. This
ensures type safety and prevents runtime errors.

[heesunee]

고생하셨습니다 ~ !

[heesunee]

tab 을 tabType으로 꼭 타입 단언 해야하나?

[Dubabbi]

타입 단언 안 하는 방향으로 수정하겠습니다~!

[yeeeww]

수고하셨습니당~!!

[cloudflare-workers-and-pages]

Deploying mateball-client with    Cloudflare Pages

Latest commit:	a33d744
Status:	✅  Deploy successful!
Preview URL:	https://a440ed27.mateball-client.pages.dev
Branch Preview URL:	https://fix--226-back-tab.mateball-client.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 1

🔭 Outside diff range comments (1)

src/shared/types/match-types.ts (1)

29-38: 중복된 인터페이스 정의를 수정해야 합니다.

singleMatchMate 인터페이스가 두 번 정의되어 있습니다 (라인 29-38, 64-72). 이는 타입 충돌을 발생시킬 수 있습니다.

다음 diff를 적용하여 중복을 해결하세요:

/**
 * 1:1 매칭 리스트에 사용되는 Mate
 * @extends matchRateMate
 */
-export interface singleMatchMate extends matchRateMate {
+export interface singleMatchListMate extends matchRateMate {
  /** 나이 (예: "26세") */
  age: string;
  /** 응원 팀 */
  team: string;
  /** 응원 스타일 */
  style: string;
  /** 프로필 이미지 (단일 URL) */
  imgUrl: string;
}

/**
 * 1:1 매칭 상세 결과 Mate
- * @extends singleMatchMate
+ * @extends singleMatchListMate
 */
-export interface singleMatchResult extends singleMatchMate {
+export interface singleMatchResult extends singleMatchListMate {
  /** 성별 */
  gender: string;
}

그리고 getSingleMatchListResponse 인터페이스도 업데이트해야 합니다:

export interface getSingleMatchListResponse {
-  mates: singleMatchMate[];
+  mates: singleMatchListMate[];
}

Also applies to: 64-72

🧹 Nitpick comments (5)

src/shared/components/chip/chip-list.tsx (2)

13-13: 필터링 로직의 성능 최적화를 고려해보세요.

유효하지 않은 chip 이름을 필터링하는 것은 좋은 방어적 프로그래밍 접근입니다. 하지만 매 렌더링마다 Object.keys()를 호출하는 것은 비효율적일 수 있습니다.

다음과 같이 최적화할 수 있습니다:

+const validChipNames = new Set(Object.keys(chipVariantOptions.bgColor));
+
 const ChipList = ({ names }: ChipListProps) => {
-  const validNames = names.filter((name) => Object.keys(chipVariantOptions.bgColor).includes(name));
+  const validNames = names.filter((name) => validChipNames.has(name));

또는 컴포넌트 외부에서 한 번만 계산하도록 할 수도 있습니다:

+const validChipNames = Object.keys(chipVariantOptions.bgColor);
+
 const ChipList = ({ names }: ChipListProps) => {
-  const validNames = names.filter((name) => Object.keys(chipVariantOptions.bgColor).includes(name));
+  const validNames = names.filter((name) => validChipNames.includes(name));

---

16-16: 최소 높이 설정이 적절합니다.

min-h-[2.6rem] 설정으로 칩이 없을 때도 일관된 레이아웃을 유지할 수 있습니다. 다만 이 값이 디자인 시스템의 다른 컴포넌트 높이와 일치하는지 확인해보세요.

src/pages/match/create/create.tsx (1)

19-25: 하드코딩된 로딩 지연 시간을 재검토해보세요.

현재 구현은 기술적으로 올바르지만, 1.5초의 고정된 지연 시간이 다소 임의적으로 보입니다. 실제 데이터 로딩이나 API 호출과 연동되지 않은 고정된 지연은 사용자 경험에 부정적일 수 있습니다.

더 나은 접근 방법을 고려해보세요:

• 실제 데이터 로딩 상태와 연동
• 최소 로딩 시간과 실제 로딩 완료 시간 중 더 긴 시간 사용
• 로딩 시간을 상수로 분리하여 관리

+ const MIN_LOADING_TIME = 1500;
+
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
-   }, 1500);
+   }, MIN_LOADING_TIME);

    return () => clearTimeout(timer);
  }, []);

src/shared/routes/auth-guard.tsx (1)

6-9: 인증 플로우 개선이 적절하지만 로딩 UX를 고려해주세요.

isAuthLoading 상태 처리와 LOGIN 라우트로의 리디렉션 변경이 새로운 LoginWithSplash 컴포넌트와 잘 맞습니다. 다만 로딩 중 빈 <div />보다는 스피너나 스켈레톤 같은 로딩 인디케이터를 고려해보세요.

src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx (1)

67-75: 캐시 무효화 로직 개선 필요

매치 타입에 따른 조건부 캐시 무효화는 좋은 접근이지만, 코드 중복을 줄일 수 있습니다.

-          if (matchType === 'direct') {
-            queryClient.invalidateQueries({
-              queryKey: matchQueries.SINGLE_MATCH_LIST(date).queryKey,
-            });
-          } else {
-            queryClient.invalidateQueries({
-              queryKey: matchQueries.GROUP_MATCH_LIST(date).queryKey,
-            });
-          }
+          const queryKey = matchType === 'direct' 
+            ? matchQueries.SINGLE_MATCH_LIST(date).queryKey
+            : matchQueries.GROUP_MATCH_LIST(date).queryKey;
+          
+          queryClient.invalidateQueries({ queryKey });

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 726ce63 and d9ffad8.

⛔ Files ignored due to path filters (3)

• public/svgs/profile.svg is excluded by !**/*.svg
• src/shared/assets/svgs/chat-profile.svg is excluded by !**/*.svg
• src/shared/assets/svgs/check-filled.svg is excluded by !**/*.svg

📒 Files selected for processing (35)

• src/pages/home/components/calendar-section.tsx (1 hunks)
• src/pages/login/login-with-splash.tsx (1 hunks)
• src/pages/match/components/mate-header.tsx (1 hunks)
• src/pages/match/components/mate.tsx (1 hunks)
• src/pages/match/constants/matching.ts (2 hunks)
• src/pages/match/create/create.tsx (1 hunks)
• src/pages/match/groups/mates.tsx (1 hunks)
• src/pages/onboarding/components/date-select.tsx (3 hunks)
• src/pages/onboarding/onboarding-group.tsx (1 hunks)
• src/pages/onboarding/utils/onboarding-button.ts (2 hunks)
• src/pages/result/components/matching-fail-view.tsx (2 hunks)
• src/pages/result/components/matching-receive-view.tsx (3 hunks)
• src/pages/result/components/matching-success-view.tsx (1 hunks)
• src/pages/sign-up/components/signup-step.tsx (1 hunks)
• src/pages/sign-up/constants/NOTICE.ts (1 hunks)
• src/pages/sign-up/constants/validation.ts (1 hunks)
• src/shared/components/bottom-sheet/bottom-sheet-indicator.tsx (1 hunks)
• src/shared/components/bottom-sheet/bottom-sheet-modal.tsx (1 hunks)
• src/shared/components/bottom-sheet/bottom-sheet.tsx (1 hunks)
• src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx (4 hunks)
• src/shared/components/bottom-sheet/game-match/game-match-item.tsx (1 hunks)
• src/shared/components/button/button/styles/button-variants.ts (1 hunks)
• src/shared/components/chip/chip-list.tsx (2 hunks)
• src/shared/components/footer/footer.stories.tsx (2 hunks)
• src/shared/components/footer/footer.tsx (1 hunks)
• src/shared/components/input/input.tsx (1 hunks)
• src/shared/hooks/use-auth.ts (2 hunks)
• src/shared/libs/query-client.ts (1 hunks)
• src/shared/routes/auth-guard.tsx (1 hunks)
• src/shared/routes/lazy.ts (1 hunks)
• src/shared/routes/public-routes.tsx (1 hunks)
• src/shared/styles/custom-utilities.css (1 hunks)
• src/shared/styles/global.css (2 hunks)
• src/shared/styles/theme.css (1 hunks)
• src/shared/types/match-types.ts (2 hunks)

✅ Files skipped from review due to trivial changes (10)

• src/pages/home/components/calendar-section.tsx
• src/shared/components/bottom-sheet/game-match/game-match-item.tsx
• src/shared/components/button/button/styles/button-variants.ts
• src/pages/sign-up/constants/validation.ts
• src/shared/styles/theme.css
• src/shared/styles/global.css
• src/pages/sign-up/constants/NOTICE.ts
• src/pages/sign-up/components/signup-step.tsx
• src/pages/login/login-with-splash.tsx
• src/shared/styles/custom-utilities.css

🚧 Files skipped from review as they are similar to previous changes (3)

• src/pages/result/components/matching-receive-view.tsx
• src/pages/result/components/matching-fail-view.tsx
• src/pages/result/components/matching-success-view.tsx

🧰 Additional context used

🧠 Learnings (15)

📓 Common learnings

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

src/pages/onboarding/onboarding-group.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/match/groups/mates.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/components/footer/footer.stories.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/components/bottom-sheet/bottom-sheet-modal.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/match/components/mate.tsx (4)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/onboarding/utils/onboarding-button.ts (2)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/shared/types/match-types.ts (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/routes/lazy.ts (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/routes/public-routes.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/components/footer/footer.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/match/components/mate-header.tsx (4)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

src/pages/onboarding/components/date-select.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/match/constants/matching.ts (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

🧬 Code Graph Analysis (10)

src/shared/components/bottom-sheet/bottom-sheet-modal.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/onboarding/utils/onboarding-button.ts (1)

src/shared/apis/auth/auth.ts (1)

• authQueries (12-18)

src/shared/components/chip/chip-list.tsx (1)

src/shared/components/chip/styles/chip-variants.ts (1)

• chipVariantOptions (3-36)

src/shared/components/footer/footer.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/shared/hooks/use-auth.ts (1)

src/shared/apis/auth/auth.ts (1)

• authQueries (12-18)

src/pages/match/components/mate-header.tsx (1)

src/pages/match/constants/matching.ts (1)

• MATCHING_HEADER_MESSAGE (11-15)

src/pages/onboarding/components/date-select.tsx (2)

src/shared/components/tab/tab/constants/tab-type.ts (1)

• TAB_TYPES (1-4)

src/shared/apis/game/game-queries.ts (1)

• gameQueries (7-18)

src/shared/routes/auth-guard.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/match/constants/matching.ts (1)

src/pages/result/constants/matching-result.ts (1)

• MATCHING_HEADER_MESSAGE (1-10)

src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx (3)

src/shared/apis/match/match-mutations.ts (1)

• matchMutations (12-72)

src/shared/apis/match/match-queries.ts (1)

• matchQueries (16-94)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: chromatic

🔇 Additional comments (33)

src/shared/components/chip/chip-list.tsx (2)

3-3: import 추가가 적절합니다.

필터링 로직에 필요한 chipVariantOptions import가 올바르게 추가되었습니다.

---

17-17: 필터링된 배열 사용이 적절합니다.

유효한 칩 이름만 렌더링하도록 validNames를 사용하는 것이 올바른 접근입니다.

src/pages/match/groups/mates.tsx (1)

32-32: 매칭 ID 전달 로직이 올바르게 구현되었습니다.

BottomSheetModal 컴포넌트에 matchId prop을 전달하는 것은 동적 라우팅을 지원하기 위한 필수적인 변경사항입니다. numericMatchId를 사용하여 타입 안전성도 확보했습니다.

src/shared/components/bottom-sheet/bottom-sheet-modal.tsx (1)

37-37: 동적 라우팅 구현이 PR 목표와 일치합니다.

매칭 결과 페이지로의 네비게이션을 정적 라우트에서 matchId를 포함한 동적 라우트로 변경한 것은 탭 상태 유지 기능을 지원하는 핵심 변경사항입니다. ROUTES.RESULT(matchId)를 사용하여 매칭별 고유 URL을 생성하고, 쿼리 파라미터를 통해 상태를 유지할 수 있게 되었습니다.

src/shared/components/input/input.tsx (1)

63-67: 입력 상태에 따른 아이콘 표시 개선이 적절합니다.

입력이 유효한 상태일 때 체크 아이콘을 표시하여 사용자에게 명확한 시각적 피드백을 제공하는 좋은 UX 개선입니다.

src/shared/components/bottom-sheet/bottom-sheet.tsx (1)

57-57: 바텀시트 인디케이터 상호작용 개선이 적절합니다.

인디케이터 클릭 시 바텀시트가 닫히도록 하는 기능 추가로 사용자 경험이 향상됩니다.

src/shared/components/bottom-sheet/bottom-sheet-indicator.tsx (1)

3-11: 접근성과 사용자 경험을 개선하는 적절한 리팩토링입니다.

인터랙티브한 요소를 div에서 button으로 변경하여 시맨틱하게 올바르고 접근성이 향상되었습니다. 클릭 핸들러와 커서 스타일링도 적절하게 추가되었습니다.

src/pages/match/create/create.tsx (4)

1-1: 로딩 컴포넌트 임포트가 올바르게 추가되었습니다.

새로운 로딩 상태 기능을 위해 필요한 임포트입니다.

---

6-6: React 훅 임포트가 적절히 추가되었습니다.

새로운 로딩 상태 관리를 위해 필요한 훅들이 올바르게 임포트되었습니다.

---

12-12: 로딩 상태 선언이 올바르게 구현되었습니다.

useState 훅을 사용하여 로딩 상태를 적절히 관리하고 있습니다.

---

30-32: 조건부 렌더링이 올바르게 구현되었습니다.

로딩 상태의 조건부 렌더링이 적절한 위치에 배치되어 있으며, 유효성 검사 로직 이후에 실행되는 것이 논리적으로 맞습니다.

src/shared/components/footer/footer.stories.tsx (2)

3-3: 라우팅 컨텍스트 제공을 위한 적절한 import 추가

Footer 컴포넌트가 useLocation 훅을 사용하도록 업데이트되었으므로, Storybook에서 라우팅 컨텍스트를 제공하기 위해 MemoryRouter import가 필요합니다.

---

23-29: 라우팅 컨텍스트를 위한 적절한 래퍼 구현

Footer 컴포넌트의 새로운 라우팅 종속성을 지원하기 위해 MemoryRouter로 Story를 래핑하는 것이 올바른 접근입니다. initialEntries={['/']}를 통해 홈 페이지를 시뮬레이션하여 Footer의 조건부 스타일링을 테스트할 수 있습니다.

src/shared/components/footer/footer.tsx (3)

4-6: 라우팅 기반 조건부 스타일링을 위한 적절한 의존성 추가

홈 페이지에서만 배경색을 적용하기 위해 필요한 의존성들이 올바르게 추가되었습니다. ROUTES 상수를 사용하여 일관성을 유지하고, clsx와 useLocation을 통해 조건부 스타일링을 구현하는 것이 적절합니다.

---

9-11: 라우팅 상태 확인 로직 구현

useLocation 훅을 사용하여 현재 경로를 확인하고 홈 페이지 여부를 판단하는 로직이 명확하고 간결하게 구현되었습니다.

---

14-18: Footer 배경색 조건부 적용 범위 확인 필요

현재 Footer 컴포넌트는 내부에서 pathname === ROUTES.HOME인 경우에만 bg-gray-200 배경색이 적용됩니다.

• src/shared/routes/layout.tsx에서는 홈 경로일 때만 <Footer />를 렌더링
• src/pages/profile/profile.tsx 등 다른 페이지에서는 수동으로 <Footer />를 호출하지만, isHome이 false여서 배경색이 빠짐

디자인 시스템 관점에서 모든 페이지에 동일한 배경색이 필요한지, 혹은 홈 페이지만 구분된 스타일이 의도된 것인지 검토 부탁드립니다.

확인 위치:

• src/shared/components/footer/footer.tsx (isHome 조건부 클래스)
• src/shared/routes/layout.tsx (홈 경로에서만 렌더링)
• src/pages/profile/profile.tsx (<Footer /> 사용)

src/shared/libs/query-client.ts (1)

6-8: 쿼리 클라이언트 설정 개선이 적절합니다.

retry: false와 throwOnError: true 설정을 통해 에러 처리와 재시도 동작을 명시적으로 제어하는 것이 좋습니다. 이는 캐시 무효화 패턴과 함께 일관된 에러 처리를 보장합니다.

src/pages/onboarding/onboarding-group.tsx (1)

55-55: DateSelect 컴포넌트 단순화가 적절합니다.

onComplete 콜백 제거를 통해 컴포넌트 간 결합도를 낮추고 네비게이션 제어를 중앙화하는 것이 좋은 아키텍처 개선입니다.

src/shared/routes/lazy.ts (1)

4-4: 로그인 컴포넌트 경로 변경이 적절합니다.

LoginWithSplash 컴포넌트로의 변경이 새로운 인증 플로우와 일관되게 구현되었습니다.

src/pages/onboarding/utils/onboarding-button.ts (2)

1-2: 캐시 무효화를 위한 의존성 추가가 적절합니다.

authQueries와 queryClient 임포트를 통해 사용자 상태 동기화를 개선할 수 있습니다.

---

60-60: 사용자 상태 캐시 무효화가 적절합니다.

매칭 성공 후 USER_STATUS 쿼리를 무효화하여 UI와 데이터 상태를 동기화하는 것이 좋은 패턴입니다. 이는 다른 컴포넌트에서 최신 사용자 상태를 반영할 수 있게 합니다.

src/shared/routes/public-routes.tsx (1)

2-3: 로그인 라우트 변경이 PR 목적과 관련이 없어 보입니다.

이 변경사항은 매칭 결과 화면의 탭 상태 유지와 직접적인 관련이 없어 보입니다. 하지만 구현 자체는 올바르게 되어 있습니다.

Also applies to: 7-7

Likely an incorrect or invalid review comment.

src/shared/hooks/use-auth.ts (1)

2-2: 인증 훅의 로딩 처리 방식 변경이 PR 목적과 무관합니다.

useSuspenseQuery에서 useQuery로 변경하면서 Suspense 기반 로딩 처리가 명시적 로딩 상태 처리로 바뀌었습니다. 이는 매칭 결과 화면의 탭 상태 유지와 관련이 없으며, 이 훅을 사용하는 컴포넌트들의 로딩 처리 방식에 영향을 줄 수 있습니다.

Also applies to: 6-6, 22-22

Likely an incorrect or invalid review comment.

src/pages/onboarding/components/date-select.tsx (2)

1-64: 온보딩 컴포넌트 리팩토링이 PR 목적과 일치하지 않습니다.

이 변경사항은 게임 매치 선택 로직을 GameMatchBottomSheet로 중앙화하는 리팩토링으로, 매칭 결과 화면의 탭 상태 유지와 직접적인 관련이 없습니다.

Likely an incorrect or invalid review comment.

---

15-15: 하드코딩된 탭 타입 확인 필요

activeType이 TAB_TYPES.GROUP으로 하드코딩되어 있습니다. 온보딩에서는 항상 그룹 매칭만 생성하는 것이 의도된 것인지 확인이 필요합니다.

src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx (1)

28-29: PR 목적과 일치하지 않는 변경사항

이 변경사항들은 온보딩 플로우 지원과 캐시 무효화를 추가하는 것으로, PR 설명에 언급된 "URL 쿼리 파라미터를 통한 탭 상태 관리"와 관련이 없습니다. 매칭 결과 화면에서 뒤로가기 시 탭 상태를 유지하는 코드가 보이지 않습니다.

#!/bin/bash
# Description: URL 쿼리 파라미터를 통한 탭 상태 관리 관련 코드 검색

# useSearchParams 사용 검색
rg -A 5 "useSearchParams"

# tab 쿼리 파라미터 사용 검색
rg -A 5 "searchParams.*tab|tab.*searchParams"

# filter 쿼리 파라미터 사용 검색  
rg -A 5 "searchParams.*filter|filter.*searchParams"

Also applies to: 37-37, 79-83

Likely an incorrect or invalid review comment.

src/shared/types/match-types.ts (2)

211-211: API 엔드포인트 경로 업데이트가 일관되게 적용되었습니다.

엔드포인트 경로가 /v1/users/match-detail/{matchId}에서 /v1/users/match/{matchId}로 업데이트되었습니다.

Also applies to: 226-226

---

229-229: 닉네임 속성 추가로 개인화된 메시지 지원이 가능해졌습니다.

getMatchDetailResponse 인터페이스에 nickname 속성이 추가되어 매칭 결과 화면에서 개인화된 메시지를 표시할 수 있게 되었습니다.

src/pages/match/components/mate.tsx (1)

31-31: 닉네임 소스 변경으로 개인화된 메시지가 개선되었습니다.

이전에는 현재 메이트의 닉네임 첫 글자를 사용했지만, 이제는 응답 데이터의 전체 닉네임을 사용하여 더 의미있는 개인화된 헤더 메시지를 표시할 수 있습니다.

src/pages/match/components/mate-header.tsx (1)

4-4: 개인화된 헤더 메시지 지원을 위한 컴포넌트 업데이트가 잘 구현되었습니다.

• nickname prop이 인터페이스에 추가되고 올바르게 사용되었습니다
• MATCHING_HEADER_MESSAGE 함수 호출이 새로운 시그니처와 일치합니다
• 개인화된 메시지 생성 로직이 일관되게 적용되었습니다

Also applies to: 8-8, 11-11

src/pages/match/constants/matching.ts (3)

11-15: 개인화된 메시지를 위한 함수 리팩토링이 잘 구현되었습니다.

MATCHING_HEADER_MESSAGE가 정적 객체에서 닉네임과 매칭 타입을 받는 함수로 변경되어 개인화된 메시지 생성이 가능해졌습니다. 함수 시그니처와 로직이 올바르게 구현되었습니다.

---

19-19: 매칭 제한 설명이 더 명확하게 개선되었습니다.

"동시에 진행할 수 있는" 표현으로 매칭 제한 사항이 더 명확하게 전달됩니다.

Also applies to: 23-23

---

38-38: 메시지 포맷팅이 개선되었습니다.

닉네임 뒤에 공백이 추가되어 메시지의 가독성이 향상되었습니다.

[coderabbitai]

Walkthrough

이 변경 사항은 매칭, 온보딩, 로그인, 하단 시트, 스타일 등 다양한 주요 페이지와 컴포넌트에 걸쳐 대규모 리팩토링 및 개선을 수행합니다. 주요 흐름 제어, 상태 관리, 메시지 생성, 스타일 및 접근성, 쿼리 무효화, 라우팅, 그리고 동적 UI 렌더링 방식이 업데이트되었습니다.

Changes

파일/경로 그룹	변경 요약
src/pages/home/components/calendar-section.tsx	캘린더와 탭/버튼 섹션 사이의 margin-top을 3.5rem→2.5rem로 축소
src/pages/login/login-with-splash.tsx, src/shared/routes/lazy.ts, src/shared/routes/public-routes.tsx	로그인 진입 시 1.2초 스플래시 화면 추가, 라우트 및 lazy import 경로 변경
src/pages/match/components/mate-header.tsx, src/pages/match/constants/matching.ts, src/pages/match/components/mate.tsx	MateHeader가 닉네임을 필수 prop으로 받고, 헤더 메시지가 동적으로 생성되도록 리팩토링. 상수 메시지→함수화 및 설명 문구 일부 수정
src/pages/match/create/create.tsx	1.5초 로딩 상태 추가, 로딩 중엔 Loading 컴포넌트 노출
src/pages/match/groups/mates.tsx	BottomSheetModal에 matchId prop 전달 추가
src/pages/match/hooks/mapMatchData.ts, src/pages/match/hooks/useMatchTabState.ts	매칭 데이터 매핑 함수 및 탭/필터 상태 관리 커스텀 훅 신규 도입
src/pages/match/match.tsx	내부 탭/필터 상태 관리 및 데이터 매핑 로직을 커스텀 훅과 외부 함수로 분리, 코드 단순화
src/pages/onboarding/components/date-select.tsx, src/pages/onboarding/onboarding-group.tsx	DateSelect의 onComplete prop 제거 및 내부 게임 선택 UI→GameMatchBottomSheet로 위임, 온보딩에서 DateSelect 콜백 제거
src/pages/onboarding/utils/onboarding-button.ts	매칭 타입 단계에서 쿼리 무효화 로직 추가
src/pages/result/components/matching-agree-view.tsx, src/pages/result/components/matching-fail-view.tsx, src/pages/result/components/matching-receive-view.tsx, src/pages/result/components/matching-success-view.tsx	뒤로가기 방지 훅에 동적 쿼리 파라미터 적용, 일부 UI 스타일 및 메시지 상수 변경, 에러 핸들러 단순화
src/pages/sign-up/components/signup-step.tsx, src/shared/components/button/button/styles/button-variants.ts	성별 버튼 미선택시 variant를 white→gray2로 변경, gray2 variant 신규 추가
src/pages/sign-up/constants/NOTICE.ts, src/pages/sign-up/constants/validation.ts	닉네임 안내 및 출생연도 에러 메시지 문구 변경(더 명확하게)
src/shared/components/bottom-sheet/bottom-sheet-indicator.tsx, src/shared/components/bottom-sheet/bottom-sheet.tsx	BottomSheetIndicator가 onClick prop을 받아 버튼으로 변경, BottomSheet에서 indicator 클릭 시 onClose 호출
src/shared/components/bottom-sheet/bottom-sheet-modal.tsx	매칭 요청 성공 시 동적 matchId 경로로 이동하도록 네비게이션 로직 개선
src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx	쿼리 무효화, fromOnboarding prop 추가, isNavigating/로딩 상태 제거, 즉시 네비게이션
src/shared/components/bottom-sheet/game-match/game-match-item.tsx	구장 아이콘 baseball→location으로 변경, 스타일 일부 조정
src/shared/components/chip/chip-list.tsx	chip 이름 유효성 검사 추가, ul에 min-height 스타일 부여
src/shared/components/footer/footer.stories.tsx, src/shared/components/footer/footer.tsx	Footer가 라우트에 따라 배경색 동적으로 적용, 스토리북에 MemoryRouter 래핑 추가
src/shared/components/input/input.tsx	인풋 메시지 아이콘이 valid 상태면 check-filled로 변경
src/shared/hooks/use-auth.ts, src/shared/routes/auth-guard.tsx	useAuth에서 suspense→isLoading 명시, isAuthLoading 반환 및 AuthGuard에서 로딩 중 빈 div 반환, 비로그인 리다이렉트 경로 변경
src/shared/libs/query-client.ts	QueryClient 기본 옵션: staleTime 제거, retry:false, throwOnError:true 추가
src/shared/styles/custom-utilities.css, src/shared/styles/global.css, src/shared/styles/theme.css	매칭 성공 배경 등 z-index 변수 도입, 그림자/배경색 스타일 개선
src/shared/types/match-types.ts	getMatchDetailResponse에 nickname 필드 추가, API 주석 경로 수정

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant LoginWithSplash
  participant Splash
  participant Login

  User->>LoginWithSplash: 진입
  LoginWithSplash->>Splash: showSplash=true
  Note over Splash: 1.2초간 스플래시 노출
  Splash-->>LoginWithSplash: 타이머 완료
  LoginWithSplash->>Login: showSplash=false

Loading

sequenceDiagram
  participant MatchPage
  participant useMatchTabState
  participant useNavigate

  MatchPage->>useMatchTabState: 탭/필터 상태 초기화
  useMatchTabState->>useNavigate: URL 쿼리 파라미터 동기화
  MatchPage->>useMatchTabState: 탭/필터 변경 요청
  useMatchTabState->>useNavigate: 쿼리 업데이트

Loading

sequenceDiagram
  participant DateSelect
  participant GameMatchBottomSheet
  participant useQuery

  DateSelect->>useQuery: 날짜별 경기 스케줄 요청
  DateSelect->>GameMatchBottomSheet: 스케줄, 탭, fromOnboarding 전달
  GameMatchBottomSheet->>useMutation: 매칭 생성 요청
  useMutation-->>GameMatchBottomSheet: 성공
  GameMatchBottomSheet->>useQueryClient: 쿼리 무효화
  GameMatchBottomSheet->>DateSelect: onClose 호출
  GameMatchBottomSheet->>User: 온보딩 완료 or 매칭 생성 페이지 이동

Loading

Possibly related PRs

• #248: MatchingSuccessView 및 관련 CSS의 z-index와 포지셔닝을 조정하는 변경으로, 본 PR의 시각적 레이어링 개선과 직접적으로 연관됩니다.
• #267: DateSelect와 GameMatchBottomSheet의 온보딩/홈 통합 및 쿼리 무효화 로직 추가로, 본 PR의 동일 컴포넌트 리팩토링과 밀접하게 연결되어 있습니다.
• #110: MateHeader 컴포넌트와 동적 헤더 메시지 생성 로직 도입, 본 PR의 관련 컴포넌트 및 메시지 함수화 변경과 직접적 관계가 있습니다.

Suggested labels

예원

Suggested reviewers

• bongtta

Poem

🐇
새로워진 매칭과 온보딩,
버튼도 칩도 한껏 멋져졌지!
스플래시 지나 로그인,
뒤로가기도 똑똑하게~
깔끔한 스타일, 동적인 흐름,
토끼는 오늘도 코드를 춤추네!
🥕✨

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/pages/login/login-with-splash.tsx

Oops! Something went wrong! :(

ESLint: 9.30.1

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'eslint-plugin-storybook' imported from /eslint.config.js
at Object.getPackageJSONURL (node:internal/modules/package_json_reader:255:9)
at packageResolve (node:internal/modules/esm/resolve:767:81)
at moduleResolve (node:internal/modules/esm/resolve:853:18)
at defaultResolve (node:internal/modules/esm/resolve:983:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:801:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:725:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:708:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:309:38)
at #link (node:internal/modules/esm/module_job:202:49)

src/pages/home/components/calendar-section.tsx

Oops! Something went wrong! :(

ESLint: 9.30.1

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'eslint-plugin-storybook' imported from /eslint.config.js
at Object.getPackageJSONURL (node:internal/modules/package_json_reader:255:9)
at packageResolve (node:internal/modules/esm/resolve:767:81)
at moduleResolve (node:internal/modules/esm/resolve:853:18)
at defaultResolve (node:internal/modules/esm/resolve:983:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:801:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:725:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:708:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:309:38)
at #link (node:internal/modules/esm/module_job:202:49)

src/pages/match/components/mate-header.tsx

Oops! Something went wrong! :(

ESLint: 9.30.1

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'eslint-plugin-storybook' imported from /eslint.config.js
at Object.getPackageJSONURL (node:internal/modules/package_json_reader:255:9)
at packageResolve (node:internal/modules/esm/resolve:767:81)
at moduleResolve (node:internal/modules/esm/resolve:853:18)
at defaultResolve (node:internal/modules/esm/resolve:983:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:801:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:725:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:708:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:309:38)
at #link (node:internal/modules/esm/module_job:202:49)

• 36 others

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (2)

src/pages/home/components/calendar-section.tsx (1)

36-36: 변경된 여백(mt-[2.5rem])이 디자인 시스템과 일치하는지 확인 바랍니다.

기존 3.5 rem → 2.5 rem로 축소되면서 타 컴포넌트(예: 동일 섹션 다른 페이지)와 간격 불일치가 발생할 수 있습니다.
머지 전에 Figma 스펙 또는 전역 spacing 토큰(--space-* 등)을 재확인해 주세요. 필요하다면 하드코딩 대신 토큰 사용을 권장합니다.

-      <section className="mt-[2.5rem] flex justify-between">
+      <section className="mt-[var(--space-lg)] flex justify-between">

src/pages/match/hooks/useMatchTabState.ts (1)

21-26: 함수 네이밍 개선 제안

updateTabQuery 함수명이 URL 쿼리 매개변수를 업데이트한다는 의미를 명확히 전달하지 못할 수 있습니다. updateUrlQuery 또는 syncStateToUrl 같은 더 명확한 이름을 고려해보세요.

-  const updateTabQuery = (type: TabType, filter: string) => {
+  const updateUrlQuery = (type: TabType, filter: string) => {

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between e7f06e4 and a33d744.

⛔ Files ignored due to path filters (3)

• public/svgs/profile.svg is excluded by !**/*.svg
• src/shared/assets/svgs/chat-profile.svg is excluded by !**/*.svg
• src/shared/assets/svgs/check-filled.svg is excluded by !**/*.svg

📒 Files selected for processing (39)

• src/pages/home/components/calendar-section.tsx (1 hunks)
• src/pages/login/login-with-splash.tsx (1 hunks)
• src/pages/match/components/mate-header.tsx (1 hunks)
• src/pages/match/components/mate.tsx (1 hunks)
• src/pages/match/constants/matching.ts (2 hunks)
• src/pages/match/create/create.tsx (1 hunks)
• src/pages/match/groups/mates.tsx (1 hunks)
• src/pages/match/hooks/mapMatchData.ts (1 hunks)
• src/pages/match/hooks/useMatchTabState.ts (1 hunks)
• src/pages/match/match.tsx (1 hunks)
• src/pages/onboarding/components/date-select.tsx (3 hunks)
• src/pages/onboarding/onboarding-group.tsx (1 hunks)
• src/pages/onboarding/utils/onboarding-button.ts (2 hunks)
• src/pages/result/components/matching-agree-view.tsx (1 hunks)
• src/pages/result/components/matching-fail-view.tsx (2 hunks)
• src/pages/result/components/matching-receive-view.tsx (3 hunks)
• src/pages/result/components/matching-success-view.tsx (1 hunks)
• src/pages/sign-up/components/signup-step.tsx (1 hunks)
• src/pages/sign-up/constants/NOTICE.ts (1 hunks)
• src/pages/sign-up/constants/validation.ts (1 hunks)
• src/shared/components/bottom-sheet/bottom-sheet-indicator.tsx (1 hunks)
• src/shared/components/bottom-sheet/bottom-sheet-modal.tsx (1 hunks)
• src/shared/components/bottom-sheet/bottom-sheet.tsx (1 hunks)
• src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx (4 hunks)
• src/shared/components/bottom-sheet/game-match/game-match-item.tsx (1 hunks)
• src/shared/components/button/button/styles/button-variants.ts (1 hunks)
• src/shared/components/chip/chip-list.tsx (2 hunks)
• src/shared/components/footer/footer.stories.tsx (2 hunks)
• src/shared/components/footer/footer.tsx (1 hunks)
• src/shared/components/input/input.tsx (1 hunks)
• src/shared/hooks/use-auth.ts (2 hunks)
• src/shared/libs/query-client.ts (1 hunks)
• src/shared/routes/auth-guard.tsx (1 hunks)
• src/shared/routes/lazy.ts (1 hunks)
• src/shared/routes/public-routes.tsx (1 hunks)
• src/shared/styles/custom-utilities.css (1 hunks)
• src/shared/styles/global.css (2 hunks)
• src/shared/styles/theme.css (1 hunks)
• src/shared/types/match-types.ts (2 hunks)

🧰 Additional context used

🧠 Learnings (26)

src/pages/home/components/calendar-section.tsx (2)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: bongtta
PR: MATEBALL/MATEBALL-CLIENT#269
File: src/shared/components/calendar/week-calendar.tsx:31-41
Timestamp: 2025-07-18T00:45:47.263Z
Learning: WeekCalendar 컴포넌트의 toastBottomOffset은 의도적으로 '4.6rem'으로 설정되어 있으며, 다른 컴포넌트들의 '5.3rem'과 다른 값을 사용하는 것이 의도된 설계입니다.

src/pages/result/components/matching-receive-view.tsx (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/match/groups/mates.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/components/footer/footer.stories.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/routes/lazy.ts (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/sign-up/components/signup-step.tsx (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/shared/components/bottom-sheet/bottom-sheet-modal.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/onboarding/utils/onboarding-button.ts (2)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/match/components/mate.tsx (4)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/shared/routes/public-routes.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/types/match-types.ts (2)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/login/login-with-splash.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/result/components/matching-agree-view.tsx (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/match/components/mate-header.tsx (4)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/sign-up/constants/NOTICE.ts (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

src/shared/styles/custom-utilities.css (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#102
File: src/shared/components/bottom-sheet/bottom-sheet-indicator.tsx:5-5
Timestamp: 2025-07-10T09:58:36.134Z
Learning: MATEBALL-CLIENT 프로젝트의 `src/shared/styles/custom-utilities.css`에서 `.flex-col` 클래스는 이미 `@apply flex flex-col;`을 포함하고 있어서 별도로 `flex` 클래스를 추가할 필요가 없습니다. CSS 클래스 관련 제안을 하기 전에 반드시 커스텀 유틸리티 클래스 파일을 먼저 확인해야 합니다.

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

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

src/shared/components/bottom-sheet/game-match/game-match-item.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/result/components/matching-success-view.tsx (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/components/footer/footer.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/shared/routes/auth-guard.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/match/create/create.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

src/pages/result/components/matching-fail-view.tsx (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

src/pages/match/constants/matching.ts (3)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#94
File: src/pages/sign-up/sign-up.tsx:4-4
Timestamp: 2025-07-09T17:24:19.755Z
Learning: heesunee는 src/pages/sign-up/sign-up.tsx의 isNicknameStep 하드코딩된 값을 퍼널 패턴으로 카카오 통합과 함께 나중에 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.

Learnt from: Dubabbi
PR: MATEBALL/MATEBALL-CLIENT#110
File: src/pages/match/components/mate.tsx:8-11
Timestamp: 2025-07-11T13:42:53.182Z
Learning: Dubabbi는 src/pages/match/components/mate.tsx에서 하드코딩된 닉네임 '두밥비'를 개발 단계에서 사용하고 있으며, 아직 실제 사용자 정보가 구현되지 않았기 때문에 현재는 플레이스홀더로 유지하고 있습니다.

src/pages/onboarding/components/date-select.tsx (1)

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#7
File: src/shared/routes/Router.tsx:4-4
Timestamp: 2025-06-29T18:02:42.616Z
Learning: The Home component file in the MATEBALL-CLIENT project was renamed from Home.tsx to home.tsx, so the correct import path is '@pages/home/home'.

🧬 Code Graph Analysis (18)

src/pages/result/components/matching-receive-view.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/shared/components/chip/chip-list.tsx (1)

src/shared/components/chip/styles/chip-variants.ts (1)

• chipVariantOptions (3-36)

src/shared/hooks/use-auth.ts (1)

src/shared/apis/auth/auth.ts (1)

• authQueries (12-18)

src/shared/components/bottom-sheet/bottom-sheet-modal.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/onboarding/utils/onboarding-button.ts (1)

src/shared/apis/auth/auth.ts (1)

• authQueries (12-18)

src/shared/routes/public-routes.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/login/login-with-splash.tsx (1)

src/shared/routes/lazy.ts (1)

• Login (4-4)

src/pages/result/components/matching-agree-view.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/match/components/mate-header.tsx (1)

src/pages/match/constants/matching.ts (1)

• MATCHING_HEADER_MESSAGE (11-15)

src/pages/match/hooks/useMatchTabState.ts (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/result/components/matching-success-view.tsx (3)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/match/constants/matching.ts (1)

• MATCHING_SUCCESS_TITLE (28-31)

src/shared/constants/lotties.ts (1)

• LOTTIE_PATH (1-10)

src/shared/components/footer/footer.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/shared/routes/auth-guard.tsx (1)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/match/create/create.tsx (3)

src/shared/routes/lazy.ts (1)

• Create (13-13)

src/pages/match/utils/match-validators.ts (1)

• isInvalidMatchId (1-3)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/result/components/matching-fail-view.tsx (2)

src/shared/routes/routes-config.ts (1)

• ROUTES (1-22)

src/pages/match/constants/matching.ts (1)

• MATCHING_GUIDE_MESSAGE_DESCRIPTION (40-41)

src/pages/match/hooks/mapMatchData.ts (2)

src/shared/components/card/match-card/types/card.ts (2)

• SingleCardProps (27-37)
• GroupCardProps (39-44)

src/shared/types/match-types.ts (1)

• getGroupMatchMate (196-206)

src/pages/match/constants/matching.ts (1)

src/pages/result/constants/matching-result.ts (1)

• MATCHING_HEADER_MESSAGE (1-10)

src/pages/onboarding/components/date-select.tsx (2)

src/shared/components/tab/tab/constants/tab-type.ts (1)

• TAB_TYPES (1-4)

src/shared/apis/game/game-queries.ts (1)

• gameQueries (7-18)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: chromatic

🔇 Additional comments (87)

src/shared/components/footer/footer.stories.tsx (2)

3-3: 라우터 컨텍스트 추가가 적절합니다.

Footer 컴포넌트가 useLocation 훅을 사용하도록 변경되었으므로, 스토리북에서 라우터 컨텍스트를 제공하기 위해 MemoryRouter 임포트가 필요합니다.

---

23-29: 스토리북 데코레이터 구현이 올바릅니다.

MemoryRouter로 Story를 감싸고 initialEntries를 ['/']로 설정하여 Footer 컴포넌트의 라우트 기반 스타일링이 스토리북에서 올바르게 동작하도록 구현되었습니다.

src/shared/components/footer/footer.tsx (4)

4-6: 필요한 의존성들이 올바르게 추가되었습니다.

라우트 기반 조건부 스타일링을 위해 ROUTES, clsx, useLocation이 적절히 임포트되었습니다.

---

9-11: 라우트 감지 로직이 명확합니다.

useLocation 훅을 사용하여 현재 경로를 가져오고, 홈 페이지 여부를 판단하는 로직이 깔끔하게 구현되었습니다.

---

14-18: 조건부 스타일링 구현이 적절합니다.

clsx를 사용하여 홈 페이지일 때만 bg-gray-200 배경색을 적용하는 조건부 스타일링이 올바르게 구현되었습니다.

---

1-53: PR 목적과 변경사항 간의 불일치가 있습니다.

PR 목적은 "매칭 결과 화면에서 뒤로가기 후 탭 유지"에 관한 것이지만, 실제 변경사항은 Footer 컴포넌트의 라우트 기반 스타일링에 관한 것입니다. 이는 AI 요약과 실제 코드 변경사항 간의 불일치를 나타냅니다.

Likely an incorrect or invalid review comment.

src/shared/styles/theme.css (1)

84-86: 새로운 음수 z-index 변수 추가가 적절합니다

테마 변수로 음수 z-index 값을 중앙화하는 것은 좋은 접근입니다. 기존 z-index 변수들과 일관된 명명 규칙을 따르고 있고, 백그라운드 레이어링에 적합한 값들입니다.

src/shared/components/button/button/styles/button-variants.ts (1)

13-13: 새로운 버튼 변형 추가가 적절합니다

gray2 변형은 기존 변형들과 일관된 패턴을 따르고 있으며, 배경색과 텍스트 색상 조합이 적절합니다. 회원가입 플로우에서 사용될 예정이라는 점에서 UI 일관성 개선에 도움이 됩니다.

src/pages/match/create/create.tsx (2)

1-1: 로딩 상태 관련 import 추가 확인

필요한 훅과 컴포넌트를 적절히 import했습니다.

Also applies to: 6-6, 12-12

---

30-32: 로딩 상태 렌더링 로직 적절함

유효성 검사 후에 로딩 상태를 확인하는 구조가 올바릅니다.

src/shared/components/bottom-sheet/bottom-sheet-indicator.tsx (2)

3-5: 인터페이스에 onClick 프로퍼티 추가가 적절합니다

옵셔널한 onClick 콜백 프로퍼티를 추가하여 컴포넌트의 재사용성을 높였습니다.

---

7-11: 접근성 개선을 위한 버튼 요소 사용이 우수합니다

div에서 button 요소로 변경한 것은 다음과 같은 이점을 제공합니다:

• 시맨틱한 HTML 요소 사용으로 접근성 향상
• type="button" 속성으로 명시적인 버튼 타입 지정
• 키보드 네비게이션 지원 자동 제공

src/shared/components/bottom-sheet/bottom-sheet.tsx (1)

57-57: 좋은 개선 사항입니다!

BottomSheetIndicator에 onClick 콜백을 전달하여 사용자가 인디케이터를 클릭해서 바텀시트를 닫을 수 있도록 한 것은 훌륭한 UX 개선입니다. 기존 onClose 콜백을 재활용하여 일관된 닫기 동작을 제공합니다.

src/pages/onboarding/onboarding-group.tsx (1)

55-55: 컴포넌트 캡슐화 개선이 잘 되었습니다.

DateSelect 컴포넌트에서 onComplete 프로퍼티를 제거하여 컴포넌트 내부에서 완료 로직을 처리하도록 변경한 것은 좋은 아키텍처 개선입니다. 이는 관심사의 분리를 향상시키고 DateSelect 컴포넌트의 자율성을 높입니다.

src/pages/match/groups/mates.tsx (1)

32-32: 동적 라우팅 지원을 위한 올바른 구현입니다.

BottomSheetModal에 matchId 프로퍼티를 전달하여 매칭 요청 성공 후 올바른 동적 라우트로 이동할 수 있도록 한 것은 좋은 변경사항입니다. 기존에 계산된 numericMatchId를 활용하여 일관성 있는 구현을 유지했습니다.

src/shared/components/input/input.tsx (1)

63-67: 입력 상태에 따른 아이콘 표시 개선이 훌륭합니다.

입력 상태가 'valid'일 때 체크 아이콘을 표시하고, 그렇지 않을 때 정보 아이콘을 표시하도록 조건부 렌더링을 구현한 것은 훌륭한 UX 개선입니다. 사용자에게 명확한 시각적 피드백을 제공하며 일반적인 UI 패턴을 잘 따르고 있습니다.

src/shared/routes/lazy.ts (1)

4-4: 스플래시 스크린 추가를 위한 올바른 구현입니다.

Login 컴포넌트의 import 경로를 login-with-splash로 변경하여 스플래시 스크린 기능을 추가한 것은 좋은 변경사항입니다. 레이지 로딩 방식을 유지하면서 export 이름도 일관성 있게 유지하여 기존 코드에 영향을 주지 않습니다.

src/pages/result/components/matching-receive-view.tsx (3)

23-25: URL 쿼리 파라미터를 통한 탭 상태 유지 구현이 올바릅니다.

cardType 파라미터에 따라 동적으로 탭과 필터 값을 설정하여 뒤로가기 시 탭 상태가 유지되도록 구현되었습니다. 이는 PR 목표와 일치합니다.

---

50-52: 에러 처리 간소화가 적절합니다.

콘솔 로깅을 제거하고 에러 페이지로의 네비게이션만 유지하는 것이 일관된 에러 처리 패턴과 맞습니다.

---

62-64: 에러 처리 간소화가 적절합니다.

콘솔 로깅을 제거하고 에러 페이지로의 네비게이션만 유지하는 것이 일관된 에러 처리 패턴과 맞습니다.

src/shared/components/bottom-sheet/game-match/game-match-item.tsx (2)

29-29: 레이아웃 일관성을 위한 고정 너비 적용이 적절합니다.

w-[20rem] 고정 너비 설정과 gap-[0.8rem] 간격 조정으로 UI 일관성이 개선됩니다.

---

36-36: 경기장 정보에 더 적절한 아이콘 사용입니다.

"baseball" 아이콘에서 "location" 아이콘으로 변경하여 경기장 정보 표시에 더 적합한 시각적 표현을 제공합니다.

src/pages/sign-up/constants/validation.ts (1)

26-26: 생년 입력 형식 안내 메시지가 명확합니다.

"숫자로 4자리 입력만 가능해요." 메시지가 사용자에게 명확한 입력 형식을 제공합니다.

src/pages/sign-up/components/signup-step.tsx (4)

120-120: 버튼 변형 업데이트가 UI 일관성을 개선합니다.

'white'에서 'gray2' 변형으로 변경하여 전체 애플리케이션의 버튼 스타일 일관성을 향상시킵니다.

---

123-123: 중복 스타일 클래스 제거가 적절합니다.

"bg-background" 클래스 제거로 gray2 변형과의 스타일 중복을 방지합니다.

---

127-127: 버튼 변형 업데이트가 UI 일관성을 개선합니다.

'white'에서 'gray2' 변형으로 변경하여 전체 애플리케이션의 버튼 스타일 일관성을 향상시킵니다.

---

130-130: 중복 스타일 클래스 제거가 적절합니다.

"bg-background" 클래스 제거로 gray2 변형과의 스타일 중복을 방지합니다.

src/shared/components/chip/chip-list.tsx (4)

3-3: chipVariantOptions 임포트 추가로 유효성 검사 구현을 지원합니다.

유효한 칩 색상 확인을 위해 필요한 임포트입니다.

---

13-13: 유효하지 않은 칩 이름 필터링으로 안정성이 향상됩니다.

chipVariantOptions.bgColor에 정의된 유효한 칩 색상만 렌더링하여 스타일 오류를 방지합니다.

---

16-16: 최소 높이 설정으로 레이아웃 일관성이 보장됩니다.

min-h-[2.6rem] 클래스 추가로 칩이 없는 경우에도 일관된 레이아웃을 유지합니다.

---

17-17: 필터링된 유효한 칩 이름 사용이 적절합니다.

validNames 사용으로 유효성 검사가 완료된 칩만 렌더링됩니다.

src/pages/onboarding/utils/onboarding-button.ts (2)

1-2: 쿼리 무효화 로직 추가가 적절합니다.

authQueries와 queryClient 임포트를 추가하여 매칭 성공 후 사용자 상태 데이터를 최신화하는 것은 좋은 접근 방식입니다.

---

60-60: 매칭 성공 후 사용자 상태 쿼리 무효화가 올바르게 구현되었습니다.

onSuccess 콜백에서 authQueries.USER_STATUS() 쿼리를 무효화하여 UI 데이터 일관성을 보장하는 것은 적절한 구현입니다.

src/shared/styles/global.css (3)

19-21: HTML 요소 배경색 분리가 적절합니다.

html 요소에 흰색 배경을 별도로 설정하여 body 요소와 배경 레이어링을 분리한 것은 좋은 접근 방식입니다.

---

38-38: 박스 쉐도우 개선이 시각적으로 더 나은 효과를 제공합니다.

기존 0px 0px 30px 0px rgba(0, 0, 0, 0.25)에서 0px 0px 50px 0px rgba(0, 0, 0, 0.1)로 변경하여 더 부드럽고 넓은 그림자 효과를 만들었습니다.

---

42-44: Body 요소 배경색 분리가 일관성 있는 스타일링을 제공합니다.

body 요소에 CSS 변수 배경색을 별도로 적용하여 테마 시스템과의 일관성을 유지하는 것이 좋습니다.

src/pages/match/components/mate.tsx (1)

31-31: 닉네임 데이터 소스 변경이 적절합니다.

mates 배열의 현재 선택된 항목에서 닉네임의 첫 글자만 가져오는 것에서 data 객체의 전체 닉네임을 사용하도록 변경한 것은 올바른 개선입니다. 이는 MateHeader 컴포넌트가 개인화된 메시지 생성을 위해 전체 닉네임이 필요하다는 요구사항과 일치합니다.

src/shared/components/bottom-sheet/bottom-sheet-modal.tsx (1)

37-37: 동적 라우팅 개선이 올바르게 구현되었습니다.

ROUTES.RESULT() 함수를 사용하여 matchId를 경로 매개변수로 전달하는 것은 정적 라우트 사용보다 더 나은 접근 방식입니다. 쿼리 매개변수(type, mode)도 적절히 유지되어 있습니다.

src/shared/types/match-types.ts (2)

211-211: API 엔드포인트 경로 업데이트가 적절합니다.

/v1/users/match-detail/{matchId}에서 /v1/users/match/{matchId}로 경로를 단순화한 것은 좋은 개선입니다. 주석이 실제 API 엔드포인트와 일치하도록 업데이트되었습니다.

Also applies to: 226-226

---

229-229: 닉네임 속성 추가가 개인화된 UI 지원을 위해 필요합니다.

getMatchDetailResponse 인터페이스에 nickname 속성을 추가한 것은 MateHeader 컴포넌트와 같은 곳에서 개인화된 메시지 생성을 지원하기 위한 적절한 변경입니다.

src/shared/routes/public-routes.tsx (1)

2-2: 스플래시 화면이 포함된 로그인 플로우 업데이트 승인

LoginWithSplash 컴포넌트로의 변경이 일관되게 적용되었습니다. 스플래시 화면이 있는 새로운 로그인 플로우가 라우팅 설정에 적절히 통합되었습니다.

Also applies to: 7-7

src/pages/sign-up/constants/NOTICE.ts (1)

7-7: 사용자 친화적인 메시지 개선 승인

메시지가 더 친근하고 포괄적으로 변경되었습니다. 느낌표 사용으로 더 환영하는 톤이 되었고, "닉네임"에서 "정보"로 변경하여 더 일반적인 범위를 다루게 되었습니다.

src/shared/routes/auth-guard.tsx (1)

6-6: 인증 로딩 상태 처리 및 리디렉션 경로 업데이트 승인

useAuth 훅의 변경사항에 맞춰 로딩 상태를 적절히 처리하고 있습니다. isAuthLoading 상태에서 빈 div를 반환하는 것과 ROUTES.LOGIN으로의 리디렉션이 새로운 LoginWithSplash 플로우와 일관성 있게 구현되었습니다.

Also applies to: 8-9

src/shared/hooks/use-auth.ts (1)

2-2: 명시적 로딩 상태 관리로의 전환 승인

useSuspenseQuery에서 useQuery로 변경하여 명시적인 로딩 상태 처리가 가능하게 되었습니다. isAuthLoading 상태를 노출하여 컴포넌트가 로딩 상태를 직접 제어할 수 있게 한 것은 적절한 개선입니다.

Also applies to: 6-6, 17-23

src/pages/login/login-with-splash.tsx (1)

1-19: 스플래시 화면 로그인 컴포넌트 구현 승인

깔끔하고 목적에 맞는 구현입니다. 1.2초 타이머로 스플래시 화면을 표시하고, cleanup 함수로 메모리 누수를 방지하는 것이 적절합니다. 조건부 렌더링 로직도 명확하고 이해하기 쉽습니다.

src/pages/result/components/matching-agree-view.tsx (2)

9-9: useSearchParams 가져오기 추가 승인

URL 쿼리 매개변수를 읽기 위해 useSearchParams 훅을 가져온 것이 적절합니다.

---

17-21: 탭 상태 유지 로직 구현 승인

cardtype 매개변수를 기반으로 동적 URL을 생성하여 뒤로가기 시 탭 상태가 유지되도록 하는 로직이 올바르게 구현되었습니다. 'group' 카드타입은 '그룹' 탭으로, 다른 값들은 '1:1' 탭으로 매핑되는 것이 적절합니다.

src/shared/styles/custom-utilities.css (2)

89-93: 매칭 성공 배경 스타일 개선 승인

배경 크기 조정(35rem → 30rem), 위치 미세 조정(+10px), CSS 변수 기반 z-index 사용, 그리고 그라데이션 색상 변경이 모두 적절합니다. 이러한 변경사항들이 매칭 성공 화면의 시각적 개선에 기여할 것으로 보입니다.

---

96-96: CSS 변수 기반 z-index 사용 승인

z-index 값을 CSS 변수로 관리하는 것이 일관성과 유지보수성 측면에서 좋은 접근입니다.

src/pages/match/match.tsx (5)

6-7: 모듈화된 함수 및 훅 가져오기 승인

데이터 매핑 함수들과 탭 상태 관리 훅을 분리하여 가져온 것이 코드 구조 개선에 도움이 됩니다.

---

12-13: 커스텀 훅을 통한 상태 관리 개선 승인

useMatchTabState 훅을 사용하여 탭 상태 관리를 중앙화한 것이 코드의 재사용성과 유지보수성을 향상시킵니다.

---

16-24: 타입 어노테이션 제거 승인

쿼리 변수에서 명시적 타입 어노테이션을 제거한 것이 코드를 더 간결하게 만듭니다. TypeScript가 타입을 올바르게 추론할 수 있습니다.

---

27-41: 외부 매핑 함수 사용 승인

데이터 변환 로직을 별도의 매핑 함수로 분리한 것이 컴포넌트의 책임을 명확히 하고 테스트 가능성을 향상시킵니다.

---

44-44: CSS 클래스 단순화 승인

scrollbar-hide 클래스 제거가 스타일 단순화에 기여합니다.

src/pages/match/components/mate-header.tsx (2)

4-5: 필수 nickname 프로퍼티 추가 승인

nickname을 필수 프로퍼티로 추가하고 isGroupMatching을 선택적으로 유지한 것이 적절합니다.

---

8-11: 동적 메시지 생성 로직 개선 승인

MATCHING_HEADER_MESSAGE 함수를 사용하여 닉네임과 매칭 타입을 기반으로 개인화된 메시지를 생성하는 것이 사용자 경험을 향상시킵니다. !!isGroupMatching을 통한 불린 변환도 적절합니다.

src/pages/match/hooks/useMatchTabState.ts (4)

10-12: 타입 가드 함수 추가로 타입 안전성 개선

이전 리뷰 코멘트에서 지적된 타입 캐스팅 안전성 문제를 해결하기 위해 isTabType 타입 가드 함수를 추가한 것이 좋은 접근입니다.

---

14-17: 안전한 초기값 설정 승인

URL 매개변수에서 값을 가져온 후 타입 가드를 통해 검증하고, 유효하지 않은 경우 기본값으로 설정하는 로직이 올바르게 구현되었습니다.

---

28-31: 탭 변경 시 필터 초기화 로직 승인

탭 변경 시 필터를 '전체'로 초기화하는 것이 사용자 경험 측면에서 적절합니다.

---

33-39: 필터 변경 로직 구현 승인

상태 업데이트와 URL 동기화를 함께 처리하는 로직이 올바르게 구현되었습니다. replace: true 사용으로 브라우저 히스토리에 불필요한 엔트리가 추가되지 않도록 한 것도 좋습니다.

src/pages/result/components/matching-fail-view.tsx (4)

4-4: 상수 사용으로 일관성 향상

하드코딩된 메시지 대신 상수를 사용하여 코드의 일관성과 유지보수성이 향상되었습니다.

---

7-7: URL 파라미터 기반 상태 관리 개선

useSearchParams 추가로 URL 파라미터를 통한 상태 관리가 가능해졌습니다.

---

11-15: 뒤로가기 방지 로직의 동적 처리

cardtype 파라미터를 기반으로 탭 상태를 동적으로 설정하여 뒤로가기 후 탭 상태가 유지되도록 구현되었습니다. 이는 PR 목표와 일치합니다.

---

24-26: 스타일링 개선 및 상수 사용

whitespace-pre-line 클래스 추가로 줄바꿈 처리가 개선되었고, 텍스트 색상이 gray-white로 변경되어 일관된 스타일이 적용되었습니다.

src/pages/match/hooks/mapMatchData.ts (3)

1-6: 타입 임포트 구조 개선

타입 임포트가 명확하게 구조화되어 있고, 필요한 타입들이 올바르게 임포트되었습니다.

---

8-15: 단일 매칭 데이터 변환 함수

데이터 변환 로직이 명확하고 타입 안전성이 보장됩니다. imgUrl을 배열로 변환하고 chips 배열을 생성하는 로직이 적절합니다.

---

17-22: 그룹 매칭 데이터 변환 함수

그룹 매칭 데이터 변환이 간단하고 효율적으로 구현되었습니다. 타입 설정과 스프레드 연산자 사용이 적절합니다.

src/pages/result/components/matching-success-view.tsx (6)

7-7: URL 파라미터 기반 상태 관리 일관성

다른 결과 화면 컴포넌트와 동일한 방식으로 useSearchParams를 사용하여 일관된 상태 관리가 구현되었습니다.

---

15-19: 동적 탭 상태 관리

cardtype 파라미터를 통한 동적 탭 결정 로직이 다른 결과 화면들과 일관되게 적용되었습니다.

---

24-26: 레이어링 개선

z-index 값 추가로 요소들의 레이어링이 명확해졌습니다.

---

27-33: 포지셔닝 구조 개선

fixed 포지셔닝과 top 오프셋을 통해 애니메이션 요소들의 위치가 더 정확하게 제어됩니다.

---

31-31: Lottie 속성 간소화

loop={true}를 loop로 간소화하여 더 깔끔한 코드가 되었습니다.

---

34-36: z-index 적용

텍스트 요소에도 z-index가 적용되어 레이어링이 일관되게 관리됩니다.

src/pages/onboarding/components/date-select.tsx (5)

1-7: 모듈러 임포트 구조 개선

GameMatchBottomSheet 컴포넌트와 관련 유틸리티들을 임포트하여 더 전문화된 기능을 사용할 수 있게 되었습니다.

---

11-11: 함수 시그니처 간소화

onComplete 콜백 제거로 컴포넌트의 책임이 명확해지고 상위 컴포넌트와의 결합도가 낮아졌습니다.

---

15-15: 탭 타입 상수 사용

하드코딩된 값 대신 TAB_TYPES.GROUP 상수를 사용하여 일관성이 향상되었습니다.

---

29-32: React Query 통합

useQuery를 사용하여 게임 스케줄 데이터를 페치하는 로직이 추가되어 실제 데이터와 연동됩니다.

---

52-59: 전문화된 바텀시트 컴포넌트 사용

GameMatchBottomSheet를 사용하여 게임 매칭 관련 기능이 더 구체적이고 전문화되었습니다. fromOnboarding 플래그를 통해 온보딩 플로우를 구분하는 것도 적절합니다.

src/pages/match/constants/matching.ts (3)

11-15: 동적 메시지 생성 함수로 개선

정적 객체를 함수로 변환하여 닉네임을 포함한 개인화된 메시지 생성이 가능해졌습니다. 함수 구조와 조건부 반환 로직이 명확합니다.

---

19-19: 설명 텍스트 개선

"최대 N건까지 신청할 수 있어요."에서 "동시에 진행할 수 있는 ... 최대 N개예요."로 변경되어 더 명확한 표현이 되었습니다.

Also applies to: 23-23

---

37-38: 템플릿 문자열 공백 조정

닉네임 뒤에 공백이 추가되어 UI 텍스트 포맷팅이 개선되었습니다.

src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx (6)

2-2: import 추가가 적절합니다.

쿼리 무효화 기능을 위해 필요한 matchQueries와 useQueryClient import가 올바르게 추가되었습니다.

Also applies to: 9-9

---

28-28: 온보딩 플로우를 위한 prop 추가가 적절합니다.

fromOnboarding 선택적 prop이 명확한 네이밍과 적절한 기본값으로 잘 구현되었습니다.

---

37-37: props 구조 분해가 올바르게 구현되었습니다.

fromOnboarding prop의 기본값 설정이 인터페이스 정의와 일치하며 적절합니다.

---

41-41: 쿼리 클라이언트 초기화가 올바릅니다.

React Query의 useQueryClient 훅을 사용한 쿼리 클라이언트 초기화가 적절하게 구현되었습니다.

---

44-44: 비활성화 상태 로직이 개선되었습니다.

mutation 진행 중 상태를 고려한 비활성화 로직이 추가되어 중복 제출을 방지합니다.

---

67-84: 성공 콜백 로직 및 date 파라미터 사용 검증 완료

• matchQueries.SINGLE_MATCH_LIST(date)와 GROUP_MATCH_LIST(date)는 모두 string 타입의 date를 인자로 받고,
  바텀시트 컴포넌트의 date: string prop과 일치합니다.
• 쿼리 무효화 로직과 네비게이션 흐름에 추가 검증이나 수정은 필요하지 않습니다.

[coderabbitai]

💡 Verification agent

🧩 Analysis chain

쿼리 클라이언트 설정 변경사항 검증 필요

전역 쿼리 설정에서 retry: false와 throwOnError: true를 추가한 것은 상당한 동작 변경입니다. 이러한 변경은 다음과 같은 영향을 미칠 수 있습니다:

1. 자동 재시도 비활성화로 인한 일시적 네트워크 오류 처리 악화
2. 에러 발생 시 더 엄격한 에러 처리 요구

다음 스크립트로 이 설정 변경이 기존 쿼리 사용 패턴과 호환되는지 확인해주세요:

---

🏁 Script executed:

#!/bin/bash
# 기존 쿼리 훅 사용 패턴 확인
echo "=== useQuery 사용 패턴 분석 ==="
rg -A 5 -B 2 "useQuery|useSuspenseQuery" --type ts --type tsx

echo -e "\n=== 에러 핸들링 패턴 확인 ==="
rg -A 3 -B 2 "catch|error|Error" --type ts --type tsx | head -20

Length of output: 304

---

rg의 --type tsx 인식 오류로 검색이 되지 않았습니다. glob 패턴을 사용해 .ts와 .tsx 파일을 모두 검색하도록 스크립트를 수정했습니다. 아래 스크립트를 실행해 주세요.

---

🏁 Script executed:

#!/bin/bash
echo "=== useQuery 사용 패턴 분석 ==="
rg -A5 -B2 "useQuery|useSuspenseQuery" --glob '*.ts' --glob '*.tsx'

echo -e "\n=== 에러 핸들링 패턴 확인 ==="
rg -A3 -B2 "catch|error|Error" --glob '*.ts' --glob '*.tsx' | head -20

Length of output: 17585

---

쿼리 클라이언트 설정 변경에 따른 에러 처리 재검토 및 수정 필요

throwOnError: true를 글로벌 설정으로 적용하면, 쿼리 실패 시 기존의 isError 분기 로직 대신 에러가 즉시 throw되어 컴포넌트가 크래시될 수 있습니다. 아래 주요 호출 지점들을 확인하고, 각 컴포넌트가 에러 바운더리 또는 적절한 에러 처리 로직으로 감싸져 있는지 검증하거나, 개별 쿼리에 throwOnError: false를 설정해 주세요.

– 주요 useQuery/useSuspenseQuery 호출 위치
• src/pages/home/home.tsx
• src/pages/profile/profile.tsx
• src/pages/result/components//*.tsx
• src/pages/match//*.tsx
• src/pages/onboarding/components/date-select.tsx
• src/shared/hooks/use-auth.ts
• src/shared/components/bottom-sheet/game-match/**

– 검토 및 조치

1. 각 컴포넌트를 React의 <ErrorBoundary>로 래핑하거나
2. 전역 대신 개별 쿼리 옵션으로 throwOnError: false를 지정

위 사항이 적용되지 않으면, 네트워크 오류 발생 시 사용자에게 적절한 피드백 없이 앱이 멈출 수 있습니다.

🤖 Prompt for AI Agents

In src/shared/libs/query-client.ts around lines 6 to 8, the global setting
throwOnError: true causes query errors to throw immediately, potentially
crashing components that lack proper error boundaries. Review all major useQuery
and useSuspenseQuery calls in the specified files and either wrap those
components with React ErrorBoundary components or override the global setting by
setting throwOnError: false individually on each query. This ensures errors are
handled gracefully without crashing the app or leaving users without feedback.

[coderabbitai]

🛠️ Refactor suggestion

인위적인 로딩 지연 시간 재검토 필요

1.5초의 고정된 로딩 지연이 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 실제 데이터 로딩이나 API 호출 없이 인위적인 지연을 추가하는 것은 권장되지 않습니다.

다음과 같은 대안을 고려해보세요:

- useEffect(() => {
-   const timer = setTimeout(() => {
-     setIsLoading(false);
-   }, 1500);
-   return () => clearTimeout(timer);
- }, []);
+ // 실제 데이터 로딩이 필요한 경우에만 로딩 상태 사용
+ // 또는 더 짧은 지연 시간 (예: 300ms) 사용

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	useEffect(() => {
	const timer = setTimeout(() => {
	setIsLoading(false);
	}, 1500);
	return () => clearTimeout(timer);
	}, []);
	// 실제 데이터 로딩이 필요한 경우에만 로딩 상태 사용
	// 또는 더 짧은 지연 시간 (예: 300ms) 사용

🤖 Prompt for AI Agents

In src/pages/match/create/create.tsx around lines 19 to 25, the fixed 1.5-second
loading delay is artificially prolonging the loading state without real data
fetching, which can harm user experience. Remove the setTimeout and instead
control the loading state based on actual data loading or API call completion.
Implement proper async data fetching logic and set isLoading to false only after
the data is fully loaded.

[coderabbitai]

💡 Verification agent

🧩 Analysis chain

타입 캐스팅 검증 필요

mate.team과 mate.style을 ChipColor 타입으로 캐스팅하고 있는데, 런타임에서 이 값들이 실제로 유효한 ChipColor 값인지 확인이 필요합니다.

다음 스크립트로 ChipColor 타입 정의를 확인해보겠습니다:

---

🏁 Script executed:

#!/bin/bash
# ChipColor 타입 정의와 team, style 필드의 타입 호환성 확인
ast-grep --pattern 'type ChipColor = $$$'
ast-grep --pattern 'interface $_ {
  $$$
  team: $_;
  $$$
  style: $_;
  $$$
}'

Length of output: 2459

---

ChipColor 런타임 검증 로직 추가 필요

mate.team과 mate.style은 string 타입이므로, 아래와 같이 강제 캐스팅만 하면 유효하지 않은 값이 들어올 수 있습니다. 실제로 ChipColor에 정의된 값인지 검증하는 타입 가드나 필터링 로직을 추가해주세요.

• Location: src/pages/match/hooks/mapMatchData.ts (라인 13)

제안 예시:

// ChipColor 타입 값인지 확인하는 유틸 함수
const isChipColor = (v: string): v is ChipColor =>
  Object.values(chipVariants).some(variant => variant.bgColor === v);

// mapMatchData 내부
chips: [mate.team, mate.style]
  .filter(isChipColor)       // 유효한 값만
  .map(v => v as ChipColor), // 안전하게 캐스팅

위와 같이 검증 후 캐스팅하거나, 기본값을 지정하는 방식으로 런타임 안정성을 확보해주세요.

🤖 Prompt for AI Agents

In src/pages/match/hooks/mapMatchData.ts at line 13, the code casts mate.team
and mate.style directly to ChipColor without runtime validation, which risks
invalid values. To fix this, implement a type guard function that checks if a
string is a valid ChipColor by comparing against chipVariants values, then
filter mate.team and mate.style using this guard before casting. This ensures
only valid ChipColor values are included, improving runtime safety.