Conversation
|
Error: Could not generate a valid Mermaid diagram after multiple attempts. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (9)
🚧 Files skipped from review as they are similar to previous changes (9)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (2)
src/pages/event/ui/create-event/FunnelPage.tsx (2)
14-21:previousStep갱신 시 불안정한 클로저 사용
setPreviousStep([...previousStep, currentStep])는 기존 상태를 직접 캡처해 업데이트하므로 연속 클릭 시 값이 유실될 수 있습니다. 함수형 업데이트로 안전하게 처리하세요.-setPreviousStep([...previousStep, currentStep]); +setPreviousStep(prev => [...prev, currentStep]);
25-35:previousStep.pop()으로 상태 직접 변형
pop()은 배열을 mutate 하므로 React 상태 관리 원칙에 어긋납니다. 불변 복사본을 만든 뒤 갱신하고setPreviousStep으로 상태를 동기화하세요.-const prevStep = previousStep.pop(); -if (prevStep !== undefined) { - setStep(prevStep); - navigate(`${location.pathname}?step=${steps[prevStep]}`); -} +setPreviousStep(prev => { + const copy = [...prev]; + const prevStep = copy.pop(); + if (prevStep !== undefined) { + setStep(prevStep); + navigate(`${location.pathname}?step=${steps[prevStep]}`); + } + return copy; +});
🧹 Nitpick comments (7)
tailwind.config.js (1)
54-56: px 대신 rem 사용 고려고정 px 단위는 사용자 브라우저 기본 폰트 크기 설정을 무시하여 접근성에 불리할 수 있습니다.
17px,18px를 등록할 때 다음과 같이 rem 기반으로 선언하면 유연성이 높아집니다.src/main.tsx (1)
15-15: Devtools 기본 오픈 여부 재검토
initialIsOpen={true}로 두면 로컬 개발 시 항상 패널이 열려 UI를 가리는 경우가 잦습니다.
다음과 같이 ENV 플래그로 제어하거나 기본값을false로 유지하는 방안을 고려해 주세요.-{import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={true} position="left" />} +{import.meta.env.DEV && ( + <ReactQueryDevtools + initialIsOpen={import.meta.env.VITE_RQ_DEVTOOLS_OPEN === 'true'} + position="left" + /> +)}src/shared/ui/EventCard.tsx (1)
132-133: alert 사용은 사용자 경험 저해
window.alert는 모달을 강제 block 하며 모바일 환경에서 화면 비율이 깨질 수 있습니다.
비동기 알림용 토스트(예:react-toastify또는 자체 Snackbar)를 사용하면 UX가 향상됩니다.- alert('이벤트 삭제에 성공했습니다.'); + toast.success('이벤트 삭제에 성공했습니다.'); // 예시또한 다국어 지원을 고려해 i18n 메시지로 분리해 주세요.
src/pages/event/ui/host/HostSelectionPage.tsx (1)
41-45: 알림 메시지의 사용자 경험 개선 제안
alert(${error.message})는 개발용 내부 에러 메시지를 그대로 노출할 가능성이 있습니다.
공통 Toast/Modal 컴포넌트를 사용해 사용자 친화적인 문구로 보여주면 UX 가 향상됩니다.src/pages/event/ui/create-event/FunnelPage.tsx (1)
49-56:useEffect의 의존성 누락
setStep,navigate,location.pathname,steps등을 사용하지만 의존성 배열이 비어 있습니다. ESLint 규칙을 따른다면 경고가 발생합니다. 의도적으로 최초 1회만 실행하려면 주석으로 lint 무시 또는// eslint-disable-next-line react-hooks/exhaustive-deps를 추가해 의도를 명시하세요.src/features/dashboard/ui/ParticipantCard.tsx (2)
18-29: 에러 핸들링 👍 & 잔여 TODO 정리 필요
usePersonalTicketOptionAnswers로 에러를 확인한 뒤alert처리한 점은 👍
다만 코드 주석(// 에러 핸들링 여기도 수정해야함)과 불필요한 주석은 정리하고,
추후 Toast 컴포넌트로 통일하는 것이 좋겠습니다.
8-15: 미사용 prop 제거 또는 활용
checked,onChangeprop 이 인터페이스에는 존재하지만 컴포넌트에서 사용되지 않습니다. 호출부(ParticipantsList)는 여전히 전달하고 있어 혼동을 줄 수 있습니다. 필요 없다면 인터페이스와 호출부를 함께 정리하세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/app/Layout.tsx(1 hunks)src/features/dashboard/ui/PariticipantsList.tsx(1 hunks)src/features/dashboard/ui/ParticipantCard.tsx(3 hunks)src/features/ticket/hooks/useTicketOptionDnD.ts(1 hunks)src/main.tsx(1 hunks)src/pages/event/ui/create-event/FunnelPage.tsx(3 hunks)src/pages/event/ui/host/HostSelectionPage.tsx(2 hunks)src/shared/ui/EventCard.tsx(1 hunks)src/widgets/dashboard/ui/main/TicketRevenue.tsx(1 hunks)tailwind.config.js(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/features/dashboard/ui/ParticipantCard.tsx (1)
src/features/ticket/hooks/useTicketOptionHook.ts (1)
usePersonalTicketOptionAnswers(65-76)
🔇 Additional comments (3)
src/app/Layout.tsx (1)
3-8: 들여쓰기 수정 확인 완료들여쓰기만 정리된 변경으로, 렌더 결과나 접근성에 영향을 주지 않습니다. 유지해도 무방합니다.
src/widgets/dashboard/ui/main/TicketRevenue.tsx (1)
13-13: 타이포그래피 클래스 변경 확인
text-15,text-17은tailwind.config.js에 새로 정의된 값과 일치합니다. 빌드 오류 위험 없음으로 보이며 가독성도 개선됩니다.src/features/dashboard/ui/PariticipantsList.tsx (1)
2-2: 타이포 수정 👍
ParticipantCard경로 오타가 해결되어 모듈 해석 문제가 사라집니다. 별다른 추가 이슈 없습니다.
xaexunxang
force-pushed
the
refact/#174/host-dashboard-refactoring
branch
from
515d6d0 to
4b09450
Compare
Yejiin21
left a comment
Yejiin21
left a comment
There was a problem hiding this comment.
수정사항 모두 잘 반영해주셨네요! 수고하셨습니당
2 participants
호스트 생성
대시보드
default.mov
대신 이곳에서는 정상적인 불러오기 동작에 "!"를 작성함으로써 에러 핸들링을 구현했고, 추후 수정해야하는 부분에 대해서 주석을 남겨놓았습니다.
Summary by CodeRabbit
버그 수정
UI/스타일
신규 기능 및 개선
개발 도구
코드 스타일