fix: 매칭 요청 관련 사항들 수정#429
Conversation
Walkthrough이 PR은 매칭 요청 관련 사항을 포괄적으로 수정합니다. 상태 문자열을 정규화하고 새로운 색상 상태를 추가한 뒤, 카드 클릭 로직을 조정하고 결과 페이지 라우팅을 통일하며 헤더 표시 규칙을 쿼리 기반으로 변경합니다. Changes매칭 요청 관련 기능 개선
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
|
MATEBALL-STORYBOOK |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/pages/result/components/matching-receive-view.tsx (1)
25-31:⚠️ Potential issue | 🟠 Major | ⚡ Quick win데이터 로딩 전 상태를 에러로 처리하고 있습니다.
초기 렌더에서
mate가 아직 없다는 이유로ErrorView가 먼저 노출됩니다. 로딩 상태를 먼저 분기해 주세요.수정 예시
- const { data, isError } = useQuery(matchQueries.MATCH_DETAIL(parsedId, true)); + const { data, isError, isPending } = useQuery(matchQueries.MATCH_DETAIL(parsedId, true)); const mate = data?.mates?.[0]; - if (isError || !mate) { + if (isPending) { + return null; + } + if (isError || !mate) { return <ErrorView message={ERROR_MESSAGE} />; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/result/components/matching-receive-view.tsx` around lines 25 - 31, 현재 useQuery(matchQueries.MATCH_DETAIL(parsedId, true)) 결과를 바로 검사해 mate가 없으면 ErrorView를 렌더링하고 있어 초기 로딩 중에 에러가 뜹니다; useQuery의 로딩 플래그(isLoading 또는 isFetching)를 먼저 확인하고 로딩 중일 때는 로딩 컴포넌트나 null을 반환하도록 분기한 뒤, isError가 true일 때만 ErrorView(message=ERROR_MESSAGE)을 반환하도록 변경하세요; 관련 심볼: useQuery, matchQueries.MATCH_DETAIL, parsedId, data, mate, isError, isLoading/isFetching, ErrorView, ERROR_MESSAGE.src/shared/components/header/utils/get-header.tsx (1)
22-31:⚠️ Potential issue | 🟡 Minor | ⚡ Quick win
received뒤로가기 경로가 라우팅 통일 규칙과 다릅니다.
type=received도 현재는 기본ROUTES.MATCH로 이동해서, 의도한 탭(생성한 매칭)으로 복귀하지 않을 수 있습니다.수정 예시
- const goMatchTypes = ['fail', 'agree', 'success', 'received']; + const goMatchTypes = ['fail', 'agree', 'success', 'received']; if (pathname === ROUTES.RESULT()) { if (type === 'sent') { navigate(ROUTES.HOME); return; } + if (type === 'received') { + navigate(`${ROUTES.MATCH}?tab=생성한 매칭&filter=전체`); + return; + } if (goMatchTypes.includes(type)) { navigate(ROUTES.MATCH); return; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/shared/components/header/utils/get-header.tsx` around lines 22 - 31, 현재 get-header.tsx의 RESULT 분기에서 goMatchTypes=['fail','agree','success','received']로 묶여 있어 type === 'received'일 때 기본 ROUTES.MATCH로 이동합니다; 이 경우 의도한 "생성한 매칭(내가 만든 매칭) 탭"으로 복귀되지 않으므로, RESULT 처리 로직(파일: get-header.tsx, 블록: if (pathname === ROUTES.RESULT()) 내부)을 수정해 'received'를 별도 처리하도록 변경하고 navigate 호출을 생성한 매칭 탭을 가리키는 라우트로 바꿔주세요(예: ROUTES.MATCH의 생성한 매칭 탭 경로 또는 ROUTES.MATCH({tab: 'created'}) 등 프로젝트에서 사용하는 해당 탭 식별자를 사용). Ensure remove 'received' from goMatchTypes grouping or add an explicit if (type === 'received') branch before the goMatchTypes.includes check so other types continue to navigate to ROUTES.MATCH.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/match/components/match-tab-pannel.tsx`:
- Around line 58-60: The code compares card.statusLabel to the literal '수락 완료'
which mismatches the shared status constant ('승인 완료') and can skip calling
patchStageMutation.mutateAsync(card.id); replace both string literals (e.g., '매칭
완료' and '수락 완료') with the shared status constants used across the app (the
constant that holds '승인 완료' for the approved state) and import/use those
constants in this component so the condition reliably triggers
patchStageMutation.mutateAsync(card.id).
In `@src/shared/components/card/match-card/utils/get-match-current-step.ts`:
- Around line 12-13: The switch in getMatchCurrentStep currently uses the
literal '완료' which mismatches the shared status constant (매칭완료) and causes valid
매칭완료 inputs to fall to default; replace the literal case with the shared
constant (import 매칭완료 from the common status/constants module) so the case reads
case 매칭완료: return 2; and ensure imports/exports are updated accordingly so the
function uses the canonical status constant.
---
Outside diff comments:
In `@src/pages/result/components/matching-receive-view.tsx`:
- Around line 25-31: 현재 useQuery(matchQueries.MATCH_DETAIL(parsedId, true)) 결과를
바로 검사해 mate가 없으면 ErrorView를 렌더링하고 있어 초기 로딩 중에 에러가 뜹니다; useQuery의 로딩
플래그(isLoading 또는 isFetching)를 먼저 확인하고 로딩 중일 때는 로딩 컴포넌트나 null을 반환하도록 분기한 뒤,
isError가 true일 때만 ErrorView(message=ERROR_MESSAGE)을 반환하도록 변경하세요; 관련 심볼:
useQuery, matchQueries.MATCH_DETAIL, parsedId, data, mate, isError,
isLoading/isFetching, ErrorView, ERROR_MESSAGE.
In `@src/shared/components/header/utils/get-header.tsx`:
- Around line 22-31: 현재 get-header.tsx의 RESULT 분기에서
goMatchTypes=['fail','agree','success','received']로 묶여 있어 type === 'received'일 때
기본 ROUTES.MATCH로 이동합니다; 이 경우 의도한 "생성한 매칭(내가 만든 매칭) 탭"으로 복귀되지 않으므로, RESULT 처리
로직(파일: get-header.tsx, 블록: if (pathname === ROUTES.RESULT()) 내부)을 수정해
'received'를 별도 처리하도록 변경하고 navigate 호출을 생성한 매칭 탭을 가리키는 라우트로 바꿔주세요(예:
ROUTES.MATCH의 생성한 매칭 탭 경로 또는 ROUTES.MATCH({tab: 'created'}) 등 프로젝트에서 사용하는 해당 탭
식별자를 사용). Ensure remove 'received' from goMatchTypes grouping or add an explicit
if (type === 'received') branch before the goMatchTypes.includes check so other
types continue to navigate to ROUTES.MATCH.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 69dd3398-e9fa-4154-bc8b-d2e27c3fb715
📒 Files selected for processing (18)
src/pages/match/components/match-tab-pannel.tsxsrc/pages/match/components/mate-carousel.tsxsrc/pages/match/components/mate.tsxsrc/pages/match/constants/matching.tssrc/pages/match/match.tsxsrc/pages/match/utils/match-status.tssrc/pages/result/components/matching-receive-view.tsxsrc/pages/result/components/sent-view.tsxsrc/pages/result/constants/matching-result.tssrc/shared/apis/match/match-queries.tssrc/shared/components/card/match-card/constants/status.tssrc/shared/components/card/match-card/utils/get-color-type.tssrc/shared/components/card/match-card/utils/get-match-current-step.tssrc/shared/components/chip/styles/chip-state-variants.tssrc/shared/components/header/header.tsxsrc/shared/components/header/utils/get-header.tsxsrc/shared/constants/header.tssrc/shared/routes/layout.tsx
💤 Files with no reviewable changes (2)
- src/pages/match/components/mate.tsx
- src/shared/constants/header.ts
Deploying mateball-client with
|
| Latest commit: |
72601de
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://242c2adb.mateball-client.pages.dev |
| Branch Preview URL: | https://fix--428-modify-request.mateball-client.pages.dev |
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/pages/match/constants/matching.ts (1)
52-56: ⚡ Quick win
CLICKABLE_STATUS_MAP타입을 더 좁혀 주세요.지금처럼
Record<string, string>로 두면 이번 PR 같은 상태 라벨 변경이 다시 들어왔을 때 오타나 누락이 전부 런타임으로 밀립니다. key/value를 최소한 유니온 타입으로 고정해 두는 편이 안전합니다.♻️ 제안
+type ClickableStatus = '매칭 완료' | '수락 완료' | '새요청'; +type MatchResultQuery = 'success' | 'agree' | 'received'; + -export const CLICKABLE_STATUS_MAP: Record<string, string> = { +export const CLICKABLE_STATUS_MAP: Record<ClickableStatus, MatchResultQuery> = { '매칭 완료': 'success', '수락 완료': 'agree', 새요청: 'received', };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/match/constants/matching.ts` around lines 52 - 56, CLICKABLE_STATUS_MAP is currently typed as Record<string, string>, which allows typos and missing keys to slip to runtime; change its type to a narrow union by either (a) declaring the exact key/value union types (e.g., a ClickableStatus key union '매칭 완료'|'수락 완료'|'새요청' and a corresponding value union) and using Record<ClickableStatus, ClickableStatusValue>, or (b) make the literal object a const with a const assertion (export const CLICKABLE_STATUS_MAP = { ... } as const) and export derived types (e.g., type ClickableStatus = keyof typeof CLICKABLE_STATUS_MAP) so keys/values are checked at compile time; update references to use the new types instead of Record<string,string>.src/pages/match/components/match-tab-pannel.tsx (1)
46-47: ⚡ Quick win
received쿼리 문자열도 공용 상수로 묶어 주세요.여기만 리터럴로 남겨 두면
CLICKABLE_STATUS_MAP와 결과 페이지 쿼리 계약이 다시 분리됩니다. 쿼리 값은 한 곳에서만 정의되게 맞춰 두는 편이 안전합니다.♻️ 제안
--- a/src/pages/match/constants/matching.ts +++ b/src/pages/match/constants/matching.ts +export const MATCH_RESULT_QUERY = { + SUCCESS: 'success', + AGREE: 'agree', + RECEIVED: 'received', +} as const; + export const CLICKABLE_STATUS_MAP: Record<string, string> = { - '매칭 완료': 'success', - '수락 완료': 'agree', - 새요청: 'received', + '매칭 완료': MATCH_RESULT_QUERY.SUCCESS, + '수락 완료': MATCH_RESULT_QUERY.AGREE, + 새요청: MATCH_RESULT_QUERY.RECEIVED, };--- a/src/pages/match/components/match-tab-pannel.tsx +++ b/src/pages/match/components/match-tab-pannel.tsx -import { CLICKABLE_STATUS_MAP } from '../constants/matching'; +import { CLICKABLE_STATUS_MAP, MATCH_RESULT_QUERY } from '../constants/matching'; @@ const query = - isCreatedTab && card.hasUpdate ? 'received' : CLICKABLE_STATUS_MAP[card.statusLabel ?? '']; + isCreatedTab && card.hasUpdate + ? MATCH_RESULT_QUERY.RECEIVED + : CLICKABLE_STATUS_MAP[card.statusLabel ?? ''];🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/match/components/match-tab-pannel.tsx` around lines 46 - 47, Replace the inline 'received' literal with a shared constant so query values are defined in one place: introduce a constant (e.g., RECEIVED_QUERY) in the shared status/query constants module (or export it alongside CLICKABLE_STATUS_MAP) and use it in the expression that computes query (the ternary using isCreatedTab and card.hasUpdate). Update the code reference to use RECEIVED_QUERY instead of the string literal and ensure any downstream consumers use the same exported constant.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/pages/match/components/match-tab-pannel.tsx`:
- Around line 46-47: Replace the inline 'received' literal with a shared
constant so query values are defined in one place: introduce a constant (e.g.,
RECEIVED_QUERY) in the shared status/query constants module (or export it
alongside CLICKABLE_STATUS_MAP) and use it in the expression that computes query
(the ternary using isCreatedTab and card.hasUpdate). Update the code reference
to use RECEIVED_QUERY instead of the string literal and ensure any downstream
consumers use the same exported constant.
In `@src/pages/match/constants/matching.ts`:
- Around line 52-56: CLICKABLE_STATUS_MAP is currently typed as Record<string,
string>, which allows typos and missing keys to slip to runtime; change its type
to a narrow union by either (a) declaring the exact key/value union types (e.g.,
a ClickableStatus key union '매칭 완료'|'수락 완료'|'새요청' and a corresponding value
union) and using Record<ClickableStatus, ClickableStatusValue>, or (b) make the
literal object a const with a const assertion (export const CLICKABLE_STATUS_MAP
= { ... } as const) and export derived types (e.g., type ClickableStatus = keyof
typeof CLICKABLE_STATUS_MAP) so keys/values are checked at compile time; update
references to use the new types instead of Record<string,string>.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: ecd54ddf-d2ae-466d-a0f5-c83bf74f9bd8
📒 Files selected for processing (3)
src/pages/match/components/match-tab-pannel.tsxsrc/pages/match/constants/matching.tssrc/shared/components/card/match-card/constants/status.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/shared/components/card/match-card/constants/status.ts
* style: 요청 전송 완료 페이지 상단 여백 추가 (#428) * fix: 새요청 배지 수정 (#428) * fix: 매칭 요청 도착 페이지 수정 (#428) * fix: 요청 도착 페이지 헤더 및 버튼 수정 (#428) * fix: 요청 도착 페이지 텍스트 수정 (#428) * fix: 요청 도착 페이지 헤더 및 라우팅 수정 (#428) * chore: 주석 삭제 (#428) * style: 매칭 현황 페이지 탭 패널 z-index 수정 (#428) * fix: 매칭 요청 전송 페이지 캐러셀 인디케이터 및 라우팅 수정 (#428) * fix: 상태 상수 수정 및 리뷰 반영 (#428)
#️⃣ Related Issue
Closes #428
💎 PR Point
📸 Screenshot
Summary by CodeRabbit
릴리스 노트
버그 수정
개선 사항