[FEAT] 토론 종료 화면 동작 개선 #401
Conversation
i-meant-to-be
added
chore
|
Warning Rate limit exceeded@i-meant-to-be has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 3 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
Walkthrough홈으로 가기 버튼을 제거하고 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant DebateEndPage
participant DebateVotePage
participant FeedbackTimerPage
participant GoToOverviewButton
participant GoToDebateEndButton
rect rgba(60,130,200,0.06)
User->>Router: GET /table/customize/{tableId}/end
Router->>DebateEndPage: render(tableId)
DebateEndPage->>GoToOverviewButton: render
end
alt 시간표로 돌아가기
User->>GoToOverviewButton: click
GoToOverviewButton->>Router: navigate /overview/customize/{tableId}
end
alt 토론 종료 → 투표 (새 경로)
User->>DebateEndPage: click 투표 진입
DebateEndPage->>Router: navigate /table/customize/{tableId}/end/vote/{pollId}
Router->>DebateVotePage: render(tableId, pollId)
end
alt 타이머 피드백에서 종료로 이동
User->>Router: GET /timer/... (id)
Router->>FeedbackTimerPage: render(id -> tableId 검증)
FeedbackTimerPage->>GoToDebateEndButton: render
User->>GoToDebateEndButton: click
GoToDebateEndButton->>Router: navigate /table/customize/{tableId}/end
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
src/page/DebateVotePage/DebateVotePage.tsx (1)
29-29: 라우트 경로 불일치 문제가 있습니다.이 네비게이션 경로가 routes.tsx의 Line 63에 정의된 라우트와 일치하지 않습니다. routes.tsx 리뷰 코멘트를 참조해주세요.
🧹 Nitpick comments (3)
src/page/TimerPage/FeedbackTimerPage.tsx (1)
16-19: 렌더링 중 에러를 throw하는 방식을 재고해주세요.렌더링 단계에서 직접
throw하는 방식은 작동하지만, 더 나은 사용자 경험을 위해 조건부 렌더링으로 에러 UI를 표시하는 것이 좋습니다.다음과 같이 개선할 수 있습니다:
+ const { id } = useParams(); + const tableId = Number(id); const { setTimer, setDefaultTimer } = feedbackTimerInstance; - // 테이블 ID 검증 로직 - if (rawTableId === null || isNaN(Number(rawTableId))) { - throw new Error('테이블 ID가 올바르지 않습니다.'); - } - const tableId = rawTableId ? Number(rawTableId) : 0; - + if (!id || isNaN(tableId)) { + return ( + <DefaultLayout> + <DefaultLayout.ContentContainer> + <ErrorIndicator onClickRetry={() => navigate('/')}> + 테이블 ID가 올바르지 않습니다. + </ErrorIndicator> + </DefaultLayout.ContentContainer> + </DefaultLayout> + ); + }src/page/DebateEndPage/components/GoToOverviewButton.tsx (1)
15-17: handleClick 함수의 매개변수가 불필요합니다.
handleClick함수가tableId를 매개변수로 받고 있지만, 이미 상위 스코프에서 접근 가능합니다. 이는 불필요한 중복입니다.다음과 같이 단순화할 수 있습니다:
- const handleClick = (tableId: number) => { + const handleClick = () => { navigate(`/overview/customize/${tableId}`); }; return ( <button type="button" aria-label="시간표로 돌아가기" - onClick={() => handleClick(tableId)} + onClick={handleClick}src/components/GoToDebateEndButton/GoToDebateEndButton.tsx (1)
14-16: handleClick 함수의 매개변수가 불필요합니다.GoToOverviewButton과 동일한 패턴으로,
handleClick함수의tableId매개변수가 불필요합니다.다음과 같이 단순화할 수 있습니다:
- const handleClick = (tableId: number) => { + const handleClick = () => { navigate(`/table/customize/${tableId}/end`); }; return ( <button type="button" aria-label="토론 종료 화면으로 돌아가기" - onClick={() => handleClick(tableId)} + onClick={handleClick}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/GoToDebateEndButton/GoToDebateEndButton.tsx(1 hunks)src/components/GoToHomeButton/GoToHomeButton.tsx(0 hunks)src/page/DebateEndPage/DebateEndPage.tsx(3 hunks)src/page/DebateEndPage/components/GoToOverviewButton.tsx(1 hunks)src/page/DebateVotePage/DebateVotePage.tsx(4 hunks)src/page/TimerPage/FeedbackTimerPage.tsx(2 hunks)src/routes/routes.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/GoToHomeButton/GoToHomeButton.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: i-meant-to-be
Repo: debate-timer/debate-timer-fe PR: 359
File: src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx:745-758
Timestamp: 2025-09-03T14:25:28.457Z
Learning: 사용자 i-meant-to-be는 PR #359에서 종소리 입력들(분, 초, 횟수 등)에 관한 리뷰를 생략하고 다른 PR에서 정리할 예정이라고 명시했다. 이런 입력 처리 로직 개선은 별도 PR로 분리하는 것을 선호한다.
🧬 Code graph analysis (4)
src/routes/routes.tsx (1)
src/page/DebateVotePage/DebateVotePage.tsx (1)
DebateVotePage(9-132)
src/page/DebateEndPage/DebateEndPage.tsx (1)
src/page/DebateEndPage/components/GoToOverviewButton.tsx (1)
GoToOverviewButton(10-33)
src/page/TimerPage/FeedbackTimerPage.tsx (2)
src/page/TimerPage/hooks/useFeedbackTimer.ts (1)
useFeedbackTimer(10-117)src/components/GoToDebateEndButton/GoToDebateEndButton.tsx (1)
GoToDebateEndButton(9-31)
src/page/DebateVotePage/DebateVotePage.tsx (2)
src/hooks/query/useGetPollInfo.ts (1)
useGetPollInfo(5-15)src/components/GoToDebateEndButton/GoToDebateEndButton.tsx (1)
GoToDebateEndButton(9-31)
🔇 Additional comments (5)
src/page/DebateEndPage/components/GoToOverviewButton.tsx (1)
10-33: 컴포넌트 구현이 깔끔합니다!접근성을 위한
aria-label, 유연성을 위한classNameprop 지원, 그리고 명확한 인터페이스 정의가 잘 되어 있습니다.src/components/GoToDebateEndButton/GoToDebateEndButton.tsx (1)
9-31: 컴포넌트 구현이 잘 되어 있습니다!GoToOverviewButton과 일관된 구조로 구현되어 있으며, 접근성과 유연성이 잘 고려되어 있습니다.
src/routes/routes.tsx (1)
58-58: 투표 라우트 경로 변경이 올바르게 반영되었습니다.
tableId와pollId를 모두 포함하도록 라우트가 업데이트되어 투표 화면에서 토론 종료 화면으로 돌아가는 기능이 가능해졌습니다.src/page/DebateVotePage/DebateVotePage.tsx (2)
16-22: 매개변수 검증 로직이 잘 구현되어 있습니다!
pollId와tableId모두에 대해 명확한 검증을 수행하고 있으며, 조건부 렌더링을 통해 에러를 처리하는 방식이 적절합니다. FeedbackTimerPage.tsx에서도 이 패턴을 따르는 것이 좋겠습니다.
125-125: GoToDebateEndButton 통합이 잘 되어 있습니다.검증된
tableId를 전달하고 있으며,className을 통한 레이아웃 조정도 적절합니다.
There was a problem hiding this comment.
확인했습니다. 리뷰에 남긴 문제 해결이 필요하고, DebateVoteResultPage에서 바뀐 투표 ID와 함께 테이블 ID대로 변경이 필요해보입니다.
export default function DebateVoteResultPage() {
const { id: pollIdParam } = useParams();
const pollId = pollIdParam ? Number(pollIdParam) : NaN;
const isValidPollId = !!pollIdParam && !Number.isNaN(pollId);
const navigate = useNavigate();
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/page/DebateVotePage/DebateVotePage.tsx (1)
39-39: 쿼리 활성화 조건을 개선할 수 있습니다.현재
enabled: isPollIdValid를 사용하고 있지만, 컴포넌트는pollId와tableId둘 다 유효해야 정상 동작합니다.tableId가 유효하지 않으면 line 56에서 에러를 표시하게 되므로, 쿼리가 불필요하게 실행될 수 있습니다.
enabled: isArgsValid로 변경하여 두 파라미터가 모두 유효할 때만 API 호출이 발생하도록 개선하는 것을 권장합니다.다음과 같이 수정할 수 있습니다:
- } = useGetPollInfo(pollId, { refetchInterval: 5000, enabled: isPollIdValid }); + } = useGetPollInfo(pollId, { refetchInterval: 5000, enabled: isArgsValid });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/page/DebateEndPage/DebateEndPage.tsx(2 hunks)src/page/DebateVotePage/DebateVotePage.tsx(4 hunks)src/page/TimerPage/FeedbackTimerPage.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/page/DebateEndPage/DebateEndPage.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: i-meant-to-be
Repo: debate-timer/debate-timer-fe PR: 359
File: src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx:745-758
Timestamp: 2025-09-03T14:25:28.457Z
Learning: 사용자 i-meant-to-be는 PR #359에서 종소리 입력들(분, 초, 횟수 등)에 관한 리뷰를 생략하고 다른 PR에서 정리할 예정이라고 명시했다. 이런 입력 처리 로직 개선은 별도 PR로 분리하는 것을 선호한다.
📚 Learning: 2025-08-08T14:21:17.745Z
Learnt from: i-meant-to-be
Repo: debate-timer/debate-timer-fe PR: 335
File: src/page/TimerPage/components/NormalTimer.tsx:50-54
Timestamp: 2025-08-08T14:21:17.745Z
Learning: Progress 퍼센트(원형 게이지)는 컴포넌트가 아닌 훅(src/page/TimerPage/hooks/useCircularTimerAnimation.ts)에서 0–100으로 clamp한다. 향후 리뷰에서는 컴포넌트 레벨에서의 중복 clamp 제안 대신 훅 사용을 권장한다.
Applied to files:
src/page/TimerPage/FeedbackTimerPage.tsx
🧬 Code graph analysis (2)
src/page/DebateVotePage/DebateVotePage.tsx (2)
src/hooks/query/useGetPollInfo.ts (1)
useGetPollInfo(5-15)src/components/GoToDebateEndButton/GoToDebateEndButton.tsx (1)
GoToDebateEndButton(9-31)
src/page/TimerPage/FeedbackTimerPage.tsx (2)
src/page/TimerPage/hooks/useFeedbackTimer.ts (1)
useFeedbackTimer(10-117)src/components/GoToDebateEndButton/GoToDebateEndButton.tsx (1)
GoToDebateEndButton(9-31)
🔇 Additional comments (8)
src/page/DebateVotePage/DebateVotePage.tsx (5)
8-8: LGTM!새로운 네비게이션 버튼 컴포넌트가 올바르게 임포트되었습니다.
16-22: 매개변수 검증 로직이 명확합니다.pollId와 tableId를 모두 검증하는 로직이 적절하게 구현되었습니다. PR 목표와 일치합니다.
56-66: 검증 로직이 적절합니다.두 파라미터를 모두 검증하고 유효하지 않을 경우 명확한 에러 메시지를 표시하는 로직이 올바르게 구현되었습니다.
117-124: 레이아웃 개선이 적절합니다.두 버튼을 동일한 크기로 나란히 배치하도록 스타일이 조정되었습니다. 사용자 경험 개선에 기여합니다.
125-125: PR 목표에 부합하는 개선입니다.홈 버튼을 토론 종료 화면으로 돌아가기 버튼으로 교체하여 사용자의 서비스 체류를 유도하는 PR의 핵심 목표가 구현되었습니다.
tableId가 올바르게 전달되고 있습니다.src/page/TimerPage/FeedbackTimerPage.tsx (3)
5-6: 새로운 import가 적절하게 추가되었습니다.GoToDebateEndButton 컴포넌트와 useParams 훅이 올바르게 import되었으며, 코드에서 적절히 사용되고 있습니다.
34-34: GoToDebateEndButton이 올바르게 구현되었습니다.tableId prop이 정확하게 전달되고, className을 통해 적절한 스타일이 적용되었습니다. 이 버튼은 사용자를 토론 종료 화면으로 올바르게 리다이렉트합니다.
12-19: 리뷰 코멘트가 현재 코드 상태를 정확히 반영하지 못했습니다.코드베이스는 이미 다음과 같이 적절하게 설계되어 있습니다:
ErrorBoundary클래스 컴포넌트가 완벽하게 구현됨 (getDerivedStateFromError,componentDidCatch)ErrorBoundaryWrapper가 라우트 최상위 레이아웃에 적용되어 모든 페이지 커버FeedbackTimerPage는 자동으로ErrorBoundary범위 내에서 렌더링됨ErrorPage컴포넌트가 폴백 UI로 사용자 친화적인 에러 화면 제공따라서
FeedbackTimerPage에서throw new Error()하는 것은 이미 안전하게 처리되고 있습니다. 추가 조치가 필요하지 않습니다.Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/page/DebateVotePage/DebateVotePage.tsx (1)
16-22: 매개변수 검증 로직이 합리적이지만, 양수 검증을 추가할 수 있습니다.현재 구현은 NaN 체크를 수행하지만, ID 값은 일반적으로 양수여야 합니다. 더 엄격한 검증을 위해 양수 체크를 추가할 수 있습니다.
다음과 같이 검증을 강화할 수 있습니다:
// 매개변수 검증 const { pollId: rawPollId, tableId: rawTableId } = useParams(); const pollId = rawPollId ? Number(rawPollId) : NaN; - const isPollIdValid = !!rawPollId && !Number.isNaN(pollId); + const isPollIdValid = !!rawPollId && !Number.isNaN(pollId) && pollId > 0; const tableId = rawTableId ? Number(rawTableId) : NaN; - const isTableIdValid = !!rawTableId && !Number.isNaN(tableId); + const isTableIdValid = !!rawTableId && !Number.isNaN(tableId) && tableId > 0; const isArgsValid = isPollIdValid && isTableIdValid;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/page/DebateVotePage/DebateVotePage.tsx(4 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: i-meant-to-be
Repo: debate-timer/debate-timer-fe PR: 359
File: src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx:745-758
Timestamp: 2025-09-03T14:25:28.457Z
Learning: 사용자 i-meant-to-be는 PR #359에서 종소리 입력들(분, 초, 횟수 등)에 관한 리뷰를 생략하고 다른 PR에서 정리할 예정이라고 명시했다. 이런 입력 처리 로직 개선은 별도 PR로 분리하는 것을 선호한다.
🧬 Code graph analysis (1)
src/page/DebateVotePage/DebateVotePage.tsx (2)
src/hooks/query/useGetPollInfo.ts (1)
useGetPollInfo(5-15)src/components/GoToDebateEndButton/GoToDebateEndButton.tsx (1)
GoToDebateEndButton(9-31)
🔇 Additional comments (7)
src/page/DebateVotePage/DebateVotePage.tsx (7)
8-8: 새로운 컴포넌트 import가 적절합니다.토론 종료 화면으로 돌아가는 버튼 컴포넌트가 올바르게 import되었습니다.
28-30: 라우팅 경로가 올바르게 수정되었습니다.tableId가 경로에 포함되어 새로운 라우팅 구조와 일치합니다. 이전 리뷰에서 지적된 내용이 적절하게 반영되었습니다.
39-39: 쿼리 활성화 조건이 올바르게 업데이트되었습니다.
isArgsValid로 변경하여 pollId와 tableId가 모두 유효할 때만 데이터를 가져오도록 했습니다. 이는 페이지의 완전한 기능을 위해 두 매개변수가 모두 필요하므로 적절한 변경입니다.
56-66: 유효성 검증과 에러 처리가 적절합니다.
isArgsValid체크로 변경하여 pollId와 tableId 모두를 검증하며, 에러 메시지도 여전히 사용자 친화적입니다.
117-117: 컨테이너 스타일 변경이 적절합니다.배경 스타일을 제거하여 레이아웃을 깔끔하게 정리했습니다.
118-124: 버튼 레이아웃 개선이 좋습니다.
flex-1추가로 두 버튼이 동일한 너비를 갖도록 하여 시각적 균형이 향상되었습니다.
125-125: 새로운 내비게이션 버튼이 올바르게 구현되었습니다.
GoToDebateEndButton이 적절하게 사용되었으며 tableId가 올바르게 전달되었습니다. PR 목표인 "홈으로 돌아가기 버튼 삭제 및 토론 종료 화면으로 돌아가기 버튼 추가"가 성공적으로 구현되었습니다.
jaeml06
left a comment
jaeml06
left a comment
There was a problem hiding this comment.
DebateVoteResultPage에서 수정이 필요합니다.
export default function DebateVoteResultPage() {
const { pollId: pollIdParam } = useParams();
const pollId = pollIdParam ? Number(pollIdParam) : NaN;
const isValidPollId = !!pollIdParam && !Number.isNaN(pollId);
현재는 id인데 pollId로 변경이 필요합니다. 화면이 넘어가지 않네요
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 (1)
src/page/DebateVoteResultPage/DebateVoteResultPage.tsx (1)
108-114: PR 목표와 불일치: "홈으로 돌아가기" 버튼이 여전히 존재합니다.PR 목표에 따르면 투표 화면에서 "홈으로 돌아가기" 버튼을 삭제하고 "토론 종료 화면으로 돌아가기" 버튼으로 교체해야 합니다. 현재 구현은 여전히 홈으로 이동하는 버튼을 사용하고 있습니다.
다음과 같이 수정하세요:
- <button - type="button" - onClick={handleGoHome} - className="button enabled neutral w-full rounded-full" - > - 홈으로 돌아가기 → - </button> + <GoToDebateEndButton tableId={tableId} className="w-full" />그리고 파일 상단에 import를 추가하세요:
+import GoToDebateEndButton from '../../components/GoToDebateEndButton/GoToDebateEndButton';참고:
handleGoHome함수도 사용되지 않으므로 제거할 수 있습니다 (Line 129의 VoteDetailResult에서도 동일하게 변경 필요).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/page/DebateVoteResultPage/DebateVoteResultPage.tsx(1 hunks)src/page/DebateVoteResultPage/components/VoteDetailResult.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: i-meant-to-be
Repo: debate-timer/debate-timer-fe PR: 359
File: src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx:745-758
Timestamp: 2025-09-03T14:25:28.457Z
Learning: 사용자 i-meant-to-be는 PR #359에서 종소리 입력들(분, 초, 횟수 등)에 관한 리뷰를 생략하고 다른 PR에서 정리할 예정이라고 명시했다. 이런 입력 처리 로직 개선은 별도 PR로 분리하는 것을 선호한다.
jaeml06
left a comment
jaeml06
left a comment
There was a problem hiding this comment.
넵 정상동작하는 것 확인했습니다. approve드르겠습니다.
useon
left a comment
useon
left a comment
There was a problem hiding this comment.
숀 ~!! 제대로 동작되는 것을 확인했습니다 !! 검증 부분도 신경써서 처리해 주셔서 감사해요 ! 몇 가지 디자인적인 코멘트를 달았어요!! 이 부분에 대해 함께 써니와 이야기를 나눠봐야 할 것 같아요!
추가로 투표 결과 페이지에는 홈으로 돌아가기를 안 걷어내도 될지 궁금합니다! 토론 종료 화면으로 돌아가야할 것 같다고 느껴져서요! 요기도 마찬가지로 강조 버튼인 결과 확인을 오른쪽에 두고 돌아가기를 왼쪽으로 두는 배치가 어떤지 여쭙고 싶습니다!!
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/page/DebateVoteResultPage/DebateVoteResultPage.tsx (1)
68-77: 에러 메시지를 더 구체적으로 개선하는 것을 고려하세요.현재
isArgsValid가 false일 때 일반적인 에러 메시지만 표시됩니다. tableId와 pollId 중 어느 것이 유효하지 않은지 구분하면 사용자 경험과 디버깅이 개선됩니다.다음과 같이 수정할 수 있습니다:
if (!isArgsValid) { return ( <DefaultLayout> <DefaultLayout.ContentContainer> <ErrorIndicator onClickRetry={() => navigate('/')}> - 유효하지 않은 투표 결과 링크입니다. + {!isTableIdValid && !isPollIdValid + ? '유효하지 않은 테이블 ID 및 투표 ID입니다.' + : !isTableIdValid + ? '유효하지 않은 테이블 ID입니다.' + : '유효하지 않은 투표 ID입니다.'} </ErrorIndicator> </DefaultLayout.ContentContainer> </DefaultLayout> ); }
🧹 Nitpick comments (3)
src/page/DebateVotePage/DebateVotePage.tsx (2)
16-22:pollId/tableId파라미터 검증 로직이 명확합니다.
useParams로 받은 문자열을Number+isNaN으로 검증하고,isArgsValid로 한 번에 판단하는 구조라 읽기 쉽고, 훗날 다른 페이지에서도 같은 패턴을 재사용하기 좋겠습니다. 비슷한 검증이 다른 페이지에도 반복된다면, 추후 작은 유틸 함수로 뽑는 것도 고려해 볼 만합니다.
117-123: 푸터 버튼 배치와 스타일이 다른 화면과 잘 맞고, 동작도 안전합니다.
flex컨테이너 + 각 버튼에flex-1을 부여해 두 버튼 폭이 균일하고, 왼쪽에 뒤로가기(토론 종료 화면), 오른쪽에 “투표 결과 보기”가 오는 순서도 다른 화면과 통일감이 있어 보입니다.GoToDebateEndButton에tableId,mutate(pollId)에는 검증된pollId만 전달되도록 위에서isArgsValid로 가드하고 있어 런타임 오류 가능성도 낮아 보입니다. 추후 UX적으로 필요하다면, 결과 요청 중에는 “투표 결과 보기” 버튼을 비활성화하는 정도만 선택적으로 고민해 보시면 될 것 같습니다.src/page/DebateVoteResultPage/DebateVoteResultPage.tsx (1)
124-152: 모달 확인 플로우가 잘 구현되었습니다.확인 단계를 추가하여 세부 결과를 공개하기 전에 사용자 의도를 확인하는 것은 좋은 UX 개선입니다.
isConfirmed상태 관리와 모달 닫기 시 리셋 로직도 적절합니다.선택적으로, 향후 모달 확인 로직이 더 복잡해지면 별도 커스텀 훅(
useConfirmationModal등)으로 추출하는 것을 고려할 수 있습니다. 하지만 현재 구현은 명확하고 유지보수하기 좋습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/GoToDebateEndButton/GoToDebateEndButton.tsx(1 hunks)src/page/DebateVotePage/DebateVotePage.tsx(4 hunks)src/page/DebateVoteResultPage/DebateVoteResultPage.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/GoToDebateEndButton/GoToDebateEndButton.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: i-meant-to-be
Repo: debate-timer/debate-timer-fe PR: 359
File: src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx:745-758
Timestamp: 2025-09-03T14:25:28.457Z
Learning: 사용자 i-meant-to-be는 PR #359에서 종소리 입력들(분, 초, 횟수 등)에 관한 리뷰를 생략하고 다른 PR에서 정리할 예정이라고 명시했다. 이런 입력 처리 로직 개선은 별도 PR로 분리하는 것을 선호한다.
🧬 Code graph analysis (2)
src/page/DebateVotePage/DebateVotePage.tsx (2)
src/hooks/query/useGetPollInfo.ts (1)
useGetPollInfo(5-15)src/components/GoToDebateEndButton/GoToDebateEndButton.tsx (1)
GoToDebateEndButton(9-31)
src/page/DebateVoteResultPage/DebateVoteResultPage.tsx (5)
src/hooks/query/useGetPollInfo.ts (1)
useGetPollInfo(5-15)src/hooks/useModal.tsx (1)
useModal(15-87)src/components/GoToDebateEndButton/GoToDebateEndButton.tsx (1)
GoToDebateEndButton(9-31)src/page/DebateVoteResultPage/components/VoteDetailResult.tsx (1)
VoteDetailResult(11-58)src/components/DialogModal/DialogModal.tsx (1)
DialogModal(16-67)
🔇 Additional comments (5)
src/page/DebateVotePage/DebateVotePage.tsx (4)
8-8: 토론 종료 화면 이동 버튼 컴포넌트 도입 방향 좋습니다.
GoToDebateEndButton을 별도 컴포넌트로 가져와 재사용하는 구조라, 종료 화면 네비게이션을 여러 페이지에서 일관되게 유지하기 좋아 보입니다.
28-30: 투표 결과 경로에tableId를 포함하도록 수정된 부분이 라우트 정의와 일치합니다.
navigate(\/table/customize/${tableId}/end/vote/${pollId}/result`)로 수정되어, PR 설명에 나온/table/customize/:tableId/end/vote/:pollId/result` 라우트와 정확히 맞고, 종료 화면 → 결과 화면 흐름도 자연스럽게 연결될 것 같습니다.
32-40:enabled: isArgsValid로 쿼리 트리거를 제어한 점이 적절합니다.
useGetPollInfo(pollId, { refetchInterval: 5000, enabled: isArgsValid })패턴 덕분에, 파라미터가 유효하지 않을 때는 네트워크 요청 자체가 발생하지 않고, 아래에서!isArgsValid분기로만 처리되어 불필요한 에러 상태도 피할 수 있어 좋습니다.
56-66: 비정상 투표 링크에 대한 예외 처리 UX가 추가된 점이 좋습니다.
!isArgsValid일 때 별도의ErrorIndicator를 통해 “유효하지 않은 투표 링크입니다.”를 보여주고, 홈으로 돌려보내는 흐름이 명확합니다. 이 케이스에서 홈(/)이 아니라 다른 진입점(예: 시간표)으로 보내야 하는지는 기획/PM 쪽과 한 번만 더 확인해 보시면 좋겠습니다.src/page/DebateVoteResultPage/DebateVoteResultPage.tsx (1)
14-20: 이전 리뷰 피드백이 올바르게 반영되었습니다.
tableId와pollId파라미터를 모두 추출하고 개별적으로 검증한 후isArgsValid로 복합 검증을 수행하는 로직이 정확하게 구현되었습니다.
i-meant-to-be
temporarily deployed
to
DEPLOY_DEV
GitHub Actions
Inactive
🚩 연관 이슈
closed #400
📝 작업 내용
문제 상황
토론 종료 화면(피드백 타이머 화면, 투표 화면 포함)에서 '홈으로 돌아가기' 버튼이 사용자를 너무 빠르게 서비스 플로우에서 내보낸다는 피드백이 있었어요.
개선 내용
토론 종료 화면에서의 동작을 개선하여 사용자가 서비스에 더 오래 머물 수 있게 유도했어요.
토론 종료 화면
피드백 타이머 화면, 투표 화면
기술적 변경 사항
투표 관련 페이지 URL 변경
투표 화면에서 토론 종료 화면으로 돌아가기 위해서는 현재 테이블 ID가 필요합니다. 이를 위해 투표 관련 페이지 URL에
tableId를 추가했습니다. 이렇게 변경하게 된 이유에는 여러 원인이 있습니다:pollId만 있어서 테이블 ID에 접근 불가능했음tableId"의 형태를 가지는데, 오직 투표 관련 URL만 "/table/customize/pollId"의 형태라서, 일관성이 맞지 않음GoToHomeButton삭제이제 더 이상 사용하지 않는 코드라 삭제했습니다.
버튼을 별도 컴포넌트로 분리
버튼의 유지/관리가 쉽도록 별도 컴포넌트로 분리해 개발했습니다. 또한
className을 받을 수 있게 개선하여 상황별 시나리오에 유동적으로 대응 가능하게 구현했습니다.테이블 ID 검증 로직 추가
투표 페이지 및 피드백 타이머 페이지에 테이블 ID를 검증하는 코드를 추가했습니다.
🏞️ 스크린샷 (선택)
토론 종료 화면
피드백 타이머 화면
투표 화면
🗣️ 리뷰 요구사항 (선택)
Summary by CodeRabbit
새로운 기능
개선 사항
리팩토
✏️ Tip: You can customize this high-level summary in your review settings.