feat: (QA/3) 그룹 매칭 수락 완료 화면의 뒤로가기 버튼 삭제

[Dubabbi]

#️⃣ Related Issue

Closes #343

☀️ New-insight

결과 화면(/result/:id)에서 type=agree인 경우 헤더 자체를 렌더링하지 않도록 헤더 로직을 변경하고, 이 변경에 따라 개별 화면 컴포넌트 내부에서 사용하던 뒤로가기 가드 훅을 제거했습니다.

💎 PR Point

기존에는 결과 화면에서도 헤더가 공통으로 노출되며 뒤로가기 아이콘/가드 훅으로 네비게이션을 제어했습니다. 이번 작업에서는 그룹 매칭 수락 완료 화면 내 사용자의 혼란을 방지하기 위해 따라서 헤더 단계에서 type=agree를 감지해 헤더를 숨김 처리하고, 페이지 내부의 usePreventBackNavigation 훅을 제거해 중복 제어를 없앴습니다.

1. 헤더 로직 추가: pathname이 결과 경로이고 type=agree이면 null을 반환하여 헤더 비노출
2. 페이지 내부 정리: 헤더가 사라지므로 뒤로가기 동작을 가드할 필요가 없어져 usePreventBackNavigation 훅 제거

1) Header: getHeaderContent에 agree 분기 추가

  const isResult = Boolean(matchPath(`${ROUTES.RESULT()}`, pathname));
  const isGroupAgree = isResult && urlParams.get('type') === 'agree';
  if (isGroupAgree) {
    return null;
  }

2) 결과-수락 완료 화면: 컴포넌트에서 뒤로가기 훅 제거

usePreventBackNavigation

• https://dev.mateball.co.kr/result/69?type=agree&cardtype=group → 헤더가 노출되지 않음
• 뒤로가기는 상단 아이콘 대신 화면 내 CTA(예: ‘매칭 현황 보기’ 버튼) 로 유도
• 결과적으로 헤더/페이지 양쪽에서 중복 제어하던 네비게이션 로직을 헤더 한 곳으로 정리하여 일관성 향상

📸 Screenshot

[coderabbitai]

Walkthrough

그룹매칭 수락완료(result?type=agree) 화면에서 뒤로가기 헤더를 숨기도록 헤더 유틸에 가드를 추가하고, 해당 화면 컴포넌트에서 쿼리 파라미터 기반 네비게이션 가드(usePreventBackNavigation)와 관련 로직/임포트를 제거했습니다. 버튼의 매칭 페이지 이동 동작은 유지됩니다.

Changes

Cohort / File(s)	Summary
Result Agree View: back-nav guard 제거 src/pages/result/components/matching-agree-view.tsx	usePreventBackNavigation 제거, useSearchParams 의존 제거, 임포트 정리; 버튼의 ROUTES.MATCH 네비게이션 로직은 유지
Header: agree 결과 화면에서 헤더 숨김 src/shared/components/header/utils/get-header.tsx	ROUTES.RESULT() 경로이면서 urlParams.type === 'agree'인 경우 null 반환하도록 가드 추가; 사소한 포매팅 정리

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant V as MatchingAgreeView
    participant R as Router
    participant H as Header(getHeaderContent)

    U->>V: Open result?type=agree
    Note over V: 기존 back-navigation 가드 제거됨
    V->>R: (on button) navigate(ROUTES.MATCH)

    U->>H: Render header for current route
    H->>H: if path is RESULT() and type==='agree'
    H-->>U: return null (헤더 비표시)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective	Addressed	Explanation
뒤로가기 버튼 삭제: 그룹매칭 수락완료 화면[#343]	✅

Assessment against linked issues: Out-of-scope changes

(해당 없음)

Possibly related PRs

• fix: (QA/2) 그룹 매칭 수락 시 매칭 현황으로 네비게이트 #281: 그룹매칭 수락 플로우의 네비게이션 처리 변경과 본 PR의 agree 결과 화면 동작 변경이 맞물립니다.
• fix: (QA/3) 그룹 매칭 수락 시 매칭 현황 화면으로 이동 #360: 그룹 케이스의 수락/결과 네비게이션 조정과 본 PR의 헤더 숨김 로직이 연계됩니다.
• feat: SP1 그룹 매칭 수락 완료 화면 수정 #315: 동일 컴포넌트(matching-agree-view)에서 UI 요소 제거와 본 PR의 가드 제거가 연속 작업으로 보입니다.

Suggested labels

feat, 소은

Suggested reviewers

• heesunee
• bongtta
• yeeeww

Poem

토끼는 깡총, 헤더는 살짝 숨겼지
뒤로가기 길목엔 발자국도 없네
agree의 바람 따라 MATCH로 점프!
쿵짝—경로는 깔끔, 화면은 말끔
귀 끝에 바람, 네비는 간단하게 🐇✨

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#343/back

---

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

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

[github-actions]

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

src/shared/components/header/utils/get-header.tsx (2)

44-46: matchPath 대신 일관된 동등 비교(=) 또는 end 옵션 명시 권장

현재 isResult 계산이 matchPath(암묵적 end 동작)에 의존합니다. 기존 코드가 pathname === ROUTES.RESULT()로 엄밀 비교하던 맥락과 맞추거나, end 옵션을 명시해 오검출을 방지하는 편이 안전합니다.

다음 중 하나로 단순화/명시화 제안:

- const isResult = Boolean(matchPath(`${ROUTES.RESULT()}`, pathname));
+ const isResult = pathname === ROUTES.RESULT();

또는:

- const isResult = Boolean(matchPath(`${ROUTES.RESULT()}`, pathname));
+ const isResult = Boolean(matchPath({ path: ROUTES.RESULT(), end: true }, pathname));

---

45-47: 매직 스트링 제거로 오타 리스크 축소

'agree'는 상수화해 재사용하면 오타/변경 관리가 쉬워집니다.

예시:

+ const RESULT_TYPES = { AGREE: 'agree' } as const;
- const isGroupAgree = isResult && urlParams.get('type') === 'agree';
+ const isGroupAgree = isResult && urlParams.get('type') === RESULT_TYPES.AGREE;

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

35-37: 히스토리 되돌림 방지로 UX 마무리

완료 화면에서 “매칭 현황 보기” 클릭 후 하드웨어/브라우저 뒤로가기로 다시 완료 화면으로 돌아오지 않게 하려면 replace 이동을 권장합니다. (요구사항에 따라 선택)

- <Button label="매칭 현황 보기" onClick={() => navigate(ROUTES.MATCH)} />
+ <Button label="매칭 현황 보기" onClick={() => navigate(ROUTES.MATCH, { replace: true })} />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 84c4226 and 15bfaa1.

📒 Files selected for processing (2)

• src/pages/result/components/matching-agree-view.tsx (1 hunks)
• src/shared/components/header/utils/get-header.tsx (1 hunks)

⏰ 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: Cloudflare Pages

🔇 Additional comments (4)

src/shared/components/header/utils/get-header.tsx (2)

44-49: 목표 충족: result?type=agree에서 헤더를 완전히 숨겨 뒤로가기 제거

의도대로 해당 화면에서 뒤로가기 버튼 및 헤더가 노출되지 않습니다. 👍

---

44-49: 케이스별 회귀 확인 요청

아래 케이스에서 헤더 노출 여부가 의도와 일치하는지 빠른 수동/자동 확인 부탁드립니다.

• /result?type=agree → 헤더 없음
• /result?type=success | fail | receive | sent → 헤더 있음(기존 동작 유지)
• (있는 경우) /result/하위경로?type=agree → 헤더 정책 의도 확인

원하면 E2E 시나리오 작성 도와드릴게요.

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

8-8: 불필요한 뒤로가기 가드 제거 깔끔합니다

화면 목적에 맞춰 의존성 정리된 점 좋습니다.

---

35-37: 제품 기대행동 확인 요청: 뒤로가기 허용 여부

완료 화면에서 네이티브/브라우저 뒤로가기를 허용할지(현 상태 유지) 또는 차단/대체할지(replace: true 등) PO 결정을 확인해 주세요.