Conversation
Walkthrough매칭 관련 화면에서 ROUTES.MATCH로의 네비게이션에 tab/filter 쿼리를 추가했고, 매칭 탭 패널의 컨테이너에 z-index 및 간격 조정을 적용했습니다. 매칭 결과 문구에 줄바꿈을 추가했으며 버튼 disabled 변형의 중복 클래스명을 제거했습니다. Changes
Sequence Diagram(s)sequenceDiagram
actor User as 사용자
participant UI as UI 컴포넌트
participant Router as 라우터
participant MatchPage as MATCH 페이지
User->>UI: 매칭 보기 버튼 클릭
UI->>Router: navigate(ROUTES.MATCH?tab={그룹|1:1}&filter=전체)
Router->>MatchPage: 요청(쿼리 포함)
MatchPage-->>User: 해당 탭/필터로 렌더링
note right of UI: 변경점: 네비게이션에 tab/filter 쿼리 추가
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
Suggested reviewers
Poem
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/result/components/sent-view.tsx (1)
33-33: 사용자 노출 문구의 따옴표 짝 불일치 수정왼쪽은 곡선 따옴표(‘)인데 오른쪽은 직선(')입니다. 통일 부탁드립니다.
- 진행 과정은 ‘매칭 현황'에서 확인할 수 있어요! + 진행 과정은 ‘매칭 현황’에서 확인할 수 있어요!
🧹 Nitpick comments (5)
src/pages/result/constants/matching-result.ts (1)
5-5: '\n' 줄바꿈 실제 렌더링 확인 및 문구 일원화 제안
- 해당 문자열이 있는 컴포넌트에서 whitespace-pre-line 또는
처리가 없으면 한 줄로 보입니다. 소비처에서 렌더링 전략을 확인해 주세요.- 동일 문구(‘매칭 현황’에서 확인…)가 SentView, MatchingAgreeView에도 반복됩니다. 상수로 일원화해 드리프트를 방지하는 것을 권장합니다.
예: 소비처에서
<p className="whitespace-pre-line">{MATCHING_HEADER_MESSAGE.group.subDescription}</p>src/shared/components/button/button/styles/button-variants.ts (1)
14-14: 중복 클래스 제거 LGTM + 비활성화 UX 보완 제안기능상 문제는 없지만 base에 cursor-pointer가 있어 disabled에도 포인터가 표시됩니다. 비활성 시 클릭 차단/커서 변경을 권장합니다.
- disabled: 'rounded-[0.8rem] bg-gray-100 text-gray-400', + disabled: 'rounded-[0.8rem] bg-gray-100 text-gray-400 cursor-not-allowed pointer-events-none',또한 Button 컴포넌트에서 variant='disabled'일 때 실제 disabled 속성도 함께 전달되는지 확인 부탁드립니다.
src/pages/match/create/components/button-section.tsx (1)
19-21: 탭/필터 쿼리 문자열 구성 공통화 + URLSearchParams 사용 제안세 곳에서 동일 로직이 반복됩니다. util로 추출하거나 URLSearchParams로 인코딩 안정성을 확보하세요.
- const tab = matchType === 'group' ? '그룹' : '1:1'; - navigate(`${ROUTES.MATCH}?tab=${tab}&filter=전체`); + const tab = matchType === 'group' ? '그룹' : '1:1'; + const search = new URLSearchParams({ tab, filter: '전체' }).toString(); + navigate(`${ROUTES.MATCH}?${search}`);탭 파서가 실제로 '그룹'/'1:1' 레이블 값을 기대하는지도 한 번만 확인해 주세요. 기대값이 slug('group'/'single')라면 여기서 매핑이 필요합니다.
src/pages/result/components/sent-view.tsx (1)
18-21: 탭 계산/네비게이션 로직 중복 — util로 DRYbutton-section, matching-agree-view와 동일 로직입니다. getMatchTabLabel() 같은 util로 중복 제거를 권장합니다. 쿼리 문자열은 URLSearchParams 사용 권장.
- const handleGoMatch = () => { - const tab = isGroupMatching ? '그룹' : '1:1'; - navigate(`${ROUTES.MATCH}?tab=${tab}&filter=전체`); - }; + const handleGoMatch = () => { + const tab = isGroupMatching ? '그룹' : '1:1'; + const search = new URLSearchParams({ tab, filter: '전체' }).toString(); + navigate(`${ROUTES.MATCH}?${search}`); + };src/pages/result/components/matching-agree-view.tsx (1)
42-47: 탭/필터 쿼리 문자열 조립 로직 중복 — 변수화 및 URLSearchParams 사용같은 표현이 위의 usePreventBackNavigation과 버튼 onClick에 반복됩니다. tab을 변수로 뽑고 URLSearchParams로 조립하는 편이 안전합니다.
- <Button - label="매칭 현황 보기" - onClick={() => - navigate(`${ROUTES.MATCH}?tab=${cardType === 'group' ? '그룹' : '1:1'}&filter=전체`) - } - /> + <Button + label="매칭 현황 보기" + onClick={() => { + const tab = cardType === 'group' ? '그룹' : '1:1'; + const search = new URLSearchParams({ tab, filter: '전체' }).toString(); + navigate(`${ROUTES.MATCH}?${search}`); + }} + />위쪽 usePreventBackNavigation도 동일 변수/문자열을 재사용하면 유지보수성이 좋아집니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/pages/match/components/match-tab-pannel.tsx(1 hunks)src/pages/match/create/components/button-section.tsx(1 hunks)src/pages/result/components/matching-agree-view.tsx(1 hunks)src/pages/result/components/sent-view.tsx(1 hunks)src/pages/result/constants/matching-result.ts(1 hunks)src/shared/components/button/button/styles/button-variants.ts(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 (1)
src/pages/match/components/match-tab-pannel.tsx (1)
59-87: ```shell
#!/bin/bash1. Locate handleCardClick definition and verify order of onCardClick and guard
echo "Searching for handleCardClick in match-tab-pannel.tsx"
rg -n -C5 "const handleCardClick" src/pages/match/components/match-tab-pannel.tsx || echo "Not found in specified file"echo "Searching project-wide for handleCardClick definition"
rg -n -C5 "const handleCardClick" src2. Search for CSS variable definition
echo "Searching for CSS variable --z-under-header-section"
rg -n "--z-under-header-section" -C2 .</blockquote></details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
Deploying mateball-client with
|
| Latest commit: |
d3b5a9d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://02462b3c.mateball-client.pages.dev |
| Branch Preview URL: | https://fix--366-new-line.mateball-client.pages.dev |
2 participants
#️⃣ Related Issue
Closes #366
☀️ New-insight
💎 PR Point
📸 Screenshot
2025-09-07.6.26.28.mov
2025-09-07.6.49.11.mov
Summary by CodeRabbit