Skip to content

fix: 매칭 요청 관련 사항들 수정#429

Merged
bongtta merged 10 commits into
developfrom
fix/#428/modify-request
May 18, 2026
Merged

fix: 매칭 요청 관련 사항들 수정#429
bongtta merged 10 commits into
developfrom
fix/#428/modify-request

Conversation

@bongtta

@bongtta bongtta commented May 16, 2026

Copy link
Copy Markdown
Contributor

#️⃣ Related Issue

Closes #428

💎 PR Point

  1. 생성한 매칭 카드에서 새 요청 클릭 시 요청 상세 화면으로 이동
  2. MatchingReceiveView 구현 및 요청 수락/거절 처리
  3. Result 페이지 헤더 조건 분기
  4. SentView에서 "매칭 현황" 버튼 클릭 시 요청한 매칭 탭으로 이동
  5. 그룹 매칭 멤버 캐러셀 인디케이터 조건 개선
  6. Match 탭 sticky 영역과 카드 스크롤 레이어 조정

📸 Screenshot

Summary by CodeRabbit

릴리스 노트

  • 버그 수정

    • 승인 대기 중 상태의 토스트 메시지가 정상적으로 표시되도록 수정
  • 개선 사항

    • 매칭 카드 클릭 시 상태 판단 로직 개선으로 더 정확한 네비게이션 제공
    • 캐러셀 인디케이터가 필요한 경우에만 표시되도록 최적화
    • 매칭 요청 수락 후 일관된 화면 전환 흐름 구현
    • 매칭 결과 페이지 헤더 표시 로직 개선
    • 상태 메시지 텍스트 정규화로 UI 일관성 강화

Review Change Stack

@bongtta bongtta self-assigned this May 16, 2026
@bongtta bongtta requested a review from heesunee as a code owner May 16, 2026 15:44
@bongtta bongtta linked an issue May 16, 2026 that may be closed by this pull request
@coderabbitai

coderabbitai Bot commented May 16, 2026

Copy link
Copy Markdown

Walkthrough

이 PR은 매칭 요청 관련 사항을 포괄적으로 수정합니다. 상태 문자열을 정규화하고 새로운 색상 상태를 추가한 뒤, 카드 클릭 로직을 조정하고 결과 페이지 라우팅을 통일하며 헤더 표시 규칙을 쿼리 기반으로 변경합니다.

Changes

매칭 요청 관련 기능 개선

Layer / File(s) Summary
상태 문자열 정규화 및 색상 시스템 확장
src/shared/components/card/match-card/constants/status.ts, src/pages/match/constants/matching.ts, src/shared/components/chip/styles/chip-state-variants.ts, src/shared/components/card/match-card/utils/get-color-type.ts
NEW_REQUESTRECRUITING 상태 문자열에서 공백을 제거하고, CLICKABLE_STATUS_MAP 키를 정규화하며, getColorType에서 NEW_REQUEST를 새로운 update 색상으로 분리하고 ChipColorVariant에 해당 스타일을 추가합니다.
매칭 현황 - 카드 클릭 및 상태 전환
src/pages/match/components/match-tab-pannel.tsx
카드 클릭 시 query를 정규화된 상태 문자열로 결정하고 query가 없으면 조기 반환하며, patchStageMutation 호출과 라우팅은 MATCHING_COMPLETE 또는 APPROVAL_COMPLETE 상태에서만 실행되도록 조건을 추가합니다.
매칭 현황 - UI 개선 및 정리
src/pages/match/components/mate-carousel.tsx, src/pages/match/match.tsx, src/pages/match/components/mate.tsx
캐러셀 인디케이터를 슬라이드가 2개 이상일 때만 표시하고, nav z-index를 --z-header로 조정하며 불필요한 TODO 주석을 제거합니다.
결과 페이지 - 라우팅 및 네비게이션 통일
src/pages/result/components/matching-receive-view.tsx, src/pages/result/components/sent-view.tsx
매칭 요청 수신 뷰에서 그룹/1:1 분기를 제거하고 수락 후 항상 생성한 매칭 탭으로 이동하며, 요청 전송 뷰에서 매칭 현황 이동 시 탭 쿼리를 포함하고 패딩을 조정합니다.
결과 페이지 상수 단순화
src/pages/result/constants/matching-result.ts
MATCHING_HEADER_MESSAGE를 복잡한 객체에서 단일 문자열 상수로 단순화합니다.
헤더 및 레이아웃 - 쿼리 기반 조건부 렌더링
src/shared/components/header/header.tsx, src/shared/components/header/utils/get-header.tsx, src/shared/constants/header.ts, src/shared/routes/layout.tsx
URL 쿼리 파라미터 type=received를 읽어 매칭 요청 수신 페이지를 감지하고 헤더 배경 스타일과 표시 조건을 동적으로 적용하며, NO_HEADER_PATHS에서 RESULT 경로를 제거합니다.
버그 수정 및 API 강화
src/pages/match/utils/match-status.ts, src/shared/apis/match/match-queries.ts
getPendingToast에서 '승인 대기 중' 상태의 누락된 return 문을 추가하고, MATCH_DETAIL 쿼리에서 newRequest 파라미터를 조건부로 포함시키며 응답 검증 로직을 강화합니다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • MATEBALL/MATEBALL-CLIENT#218: MatchTabPanel 카드 클릭 및 receive view 쿼리 파라미터 기반 라우팅 로직 변경이 동일하게 적용됩니다.
  • MATEBALL/MATEBALL-CLIENT#417: MatchTabPanel 카드 상호작용과 getPendingToast 승인 대기 로직 개선이 연속적으로 처리됩니다.
  • MATEBALL/MATEBALL-CLIENT#360: matching-receive-view.tsx의 요청 수락 성공 시 라우팅 및 쿼리 처리 로직이 함께 수정됩니다.

Suggested reviewers

  • heesunee
  • Dubabbi
  • yeeeww

Poem

🐰 매칭의 길을 정리하며,
상태는 공백 없이 선명하고,
쿼리는 흐름을 우아하게 따르네.
헤더의 눈은 요청을 바라보고,
버그 하나 둘 사라지니 — 완성! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목은 '매칭 요청 관련 사항들 수정'으로 변경사항의 주요 범위를 적절히 요약하고 있습니다.
Linked Issues check ✅ Passed PR의 변경사항들이 #428의 요청 전송 완료 페이지 수정 및 요청한 매칭 카드 수정 목표를 충족합니다.
Out of Scope Changes check ✅ Passed 모든 변경사항이 매칭 요청 관련 기능, 상태 표시, 네비게이션, UI 조정 등 연관된 범위 내에 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/#428/modify-request

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions

Copy link
Copy Markdown

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 9c3760d and d854265.

📒 Files selected for processing (18)
  • src/pages/match/components/match-tab-pannel.tsx
  • src/pages/match/components/mate-carousel.tsx
  • src/pages/match/components/mate.tsx
  • src/pages/match/constants/matching.ts
  • src/pages/match/match.tsx
  • src/pages/match/utils/match-status.ts
  • src/pages/result/components/matching-receive-view.tsx
  • src/pages/result/components/sent-view.tsx
  • src/pages/result/constants/matching-result.ts
  • src/shared/apis/match/match-queries.ts
  • src/shared/components/card/match-card/constants/status.ts
  • src/shared/components/card/match-card/utils/get-color-type.ts
  • src/shared/components/card/match-card/utils/get-match-current-step.ts
  • src/shared/components/chip/styles/chip-state-variants.ts
  • src/shared/components/header/header.tsx
  • src/shared/components/header/utils/get-header.tsx
  • src/shared/constants/header.ts
  • src/shared/routes/layout.tsx
💤 Files with no reviewable changes (2)
  • src/pages/match/components/mate.tsx
  • src/shared/constants/header.ts

Comment thread src/pages/match/components/match-tab-pannel.tsx Outdated
Comment thread src/shared/components/card/match-card/utils/get-match-current-step.ts Outdated
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented May 18, 2026

Copy link
Copy Markdown

Deploying mateball-client with  Cloudflare Pages  Cloudflare Pages

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

View logs

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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

📥 Commits

Reviewing files that changed from the base of the PR and between d854265 and 72601de.

📒 Files selected for processing (3)
  • src/pages/match/components/match-tab-pannel.tsx
  • src/pages/match/constants/matching.ts
  • src/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

@bongtta bongtta merged commit 249b686 into develop May 18, 2026
5 checks passed
@bongtta bongtta deleted the fix/#428/modify-request branch May 18, 2026 06:55
bongtta added a commit that referenced this pull request May 18, 2026
* style: 요청 전송 완료 페이지 상단 여백 추가 (#428)

* fix: 새요청 배지 수정 (#428)

* fix: 매칭 요청 도착 페이지 수정 (#428)

* fix: 요청 도착 페이지 헤더 및 버튼 수정 (#428)

* fix: 요청 도착 페이지 텍스트 수정 (#428)

* fix: 요청 도착 페이지 헤더 및 라우팅 수정 (#428)

* chore: 주석 삭제 (#428)

* style: 매칭 현황 페이지 탭 패널 z-index 수정 (#428)

* fix: 매칭 요청 전송 페이지 캐러셀 인디케이터 및 라우팅 수정 (#428)

* fix: 상태 상수 수정 및 리뷰 반영 (#428)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: 매칭 요청 관련 사항들을 수정합니다.

1 participant