Conversation
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... 📒 Files selected for processing (19)
Walkthrough이 변경사항들은 이벤트, 티켓, 대시보드, 회원가입 등 다양한 주요 페이지와 컴포넌트의 UI 및 내부 로직을 개선합니다. 에러 핸들링, 조건부 렌더링, 버튼 교체, 레이아웃 구조 변경, 프로필 이미지 기본값 수정, 검색 입력창 플레이스홀더 통일, 온라인/오프라인 이벤트 표시 등 다수의 세부사항이 반영되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InfoInputPage
participant useAgreeTerms
participant useUserUpdate
participant AuthStore
User->>InfoInputPage: 폼 제출
InfoInputPage->>useUserUpdate: 회원정보 업데이트 요청
useUserUpdate-->>InfoInputPage: 성공/실패
alt 회원정보 업데이트 성공
InfoInputPage->>useAgreeTerms: 약관 동의 뮤테이션
useAgreeTerms-->>InfoInputPage: 성공/실패
alt 약관 동의 성공
InfoInputPage->>AuthStore: 로그인, 이름 저장
InfoInputPage->>User: 완료 알림, 홈으로 이동
else 약관 동의 실패
InfoInputPage->>User: 실패 알림
end
else 회원정보 업데이트 실패
InfoInputPage->>User: 실패 알림
end
Suggested reviewers
Poem
Tip CodeRabbit can use your project's `biome` configuration to improve the quality of JS/TS/CSS/JSON code reviews.Add a configuration file to your project to customize how CodeRabbit runs ✨ 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: 7
🧹 Nitpick comments (13)
src/pages/home/ui/MainPage.tsx (1)
41-46: placeholder 문자열 중복 정의 방지 제안다른 페이지에서도 동일한
"검색어를 입력해주세요"문구가 반복됩니다. 다국어 지원이나 향후 문구 변경을 고려하면 공통 상수(예:constants/placeholder.ts)로 분리-재사용하는 편이 유지보수에 유리합니다.src/features/home/ui/EventSliderSection.tsx (1)
56-70:onlineType값이 없는 경우의 대비 추가 권장
event.onlineType가 API 스키마 변경 또는 데이터 누락으로undefined일 수 있습니다.EventCardprop이 필수라면 여기서 기본값을 지정하거나, 선택형(onlineType?: ...)으로 선언되어 있는지 확인해주세요.- onlineType={event.onlineType} + onlineType={event.onlineType ?? 'OFFLINE'}src/pages/search/ui/SearchPage.tsx (1)
70-73: placeholder 마침표 일관성 불일치HomePage 등에서는
"검색어를 입력해주세요"(마침표 없음)를 사용하고, 여기서는"검색어를 입력해주세요."(마침표 있음)를 사용합니다. 동일한 UX 문구는 통일하는 편이 좋습니다.src/pages/event/ui/EventDetailsPage.tsx (1)
139-158: 관련 링크 key 및 접근성 개선 제안
map의 key 로index를 사용하면 링크 변경 시 불필요한 재렌더가 발생할 수 있습니다.link.url또는 고유 ID 사용을 권장합니다.- 앵커에
aria-label={link.title}를 추가하면 스크린리더 사용자에게 친절해집니다.- {event.result.referenceLinks.map((link: { title: string; url: string }, index: number) => ( - <div key={index} className="flex items-center gap-2"> + {event.result.referenceLinks.map((link: { title: string; url: string }) => ( + <div key={link.url} className="flex items-center gap-2">src/pages/event/ui/AllEventsPage.tsx (3)
14-14:navigate변수명 오타
useNavigate()훅에서 반환받은 함수를navigater로 선언하셨습니다. 오탈자이므로navigate로 수정하여 다른 파일들과 네이밍을 일관성 있게 맞춰 주세요.- const navigater = useNavigate(); + const navigate = useNavigate();
24-26: 빈onChange핸들러는 제거하거나 실제 로직을 구현하세요
SearchTextField에 no-op 핸들러를 넘기면 불필요한 렌더링이 발생하거나, 내부 컴포넌트가 value state를 기대할 때 예기치 않은 동작을 야기할 수 있습니다. 핸들러가 필요 없다면 prop 자체를 제거하거나, 검색어 상태를 관리하도록 구현을 추가하는 편이 좋습니다.- onChange={() => {}} + // 필요 시 검색어 상태를 관리하거나, 불필요하면 prop 제거
31-36:ProfileCircle표시 로직 재검토
name?.slice(1, 3)로 첫 글자를 잘라내고 있어 성(姓)을 생략한 이니셜만 표시됩니다. 이름이 두 글자인 경우 공백이 반환될 수도 있으니 UX 요구 사항을 다시 확인해 주세요. 예)김나연→나연,홍길동→길동.필요 시 다음처럼 첫 글자 포함 또는 자리수 제한을 명시적으로 처리할 수 있습니다.
- <ProfileCircle profile="userProfile" name={name?.slice(1, 3) || ''} className="w-11 h-11 text-15" /> + <ProfileCircle + profile="userProfile" + name={name ? name.slice(0, 2) : ''} + className="w-11 h-11 text-15" + />src/shared/ui/EventCard.tsx (2)
83-86: 온라인 이벤트 문구 현지화 및 접근성 고려
ONLINE을 그대로 노출하면 한글 UI에서 이질감이 있을 수 있습니다.온라인등 현지화된 문구를 사용하거나,aria-label을 추가해 스크린 리더에도 의미가 잘 전달되도록 개선해 주세요.- {onlineType === 'ONLINE' ? 'ONLINE' : location} + {onlineType === 'ONLINE' ? '온라인' : location}
94-101:index를 key로 사용하는 것보다 해시태그 값 사용 권장리스트 렌더링 시
index를 key로 사용하면 데이터 변경 시 재렌더링 최적화가 깨질 수 있습니다. 해시태그는 유니크하다고 가정되니tag값을 key로 사용하는 편이 안전합니다.- {(hashtags ?? []).map((tag, index) => ( - <span key={index} + {(hashtags ?? []).map(tag => ( + <span key={tag}src/pages/menu/ui/MyTicketPage.tsx (2)
43-48: ❗alert메시지 구성은 좋지만, 문자열 결합 시 OS·브라우저별 줄바꿈 차이를 고려하세요
'\n'을 직접 사용하면 Windows(\r\n) / macOS(\n) / 일부 모바일 환경에서 줄바꿈이 의도대로 보이지 않을 수 있습니다.
템플릿 리터럴로\n대신os.EOL(노드 실행 환경일 때) 또는join('\r\n')과 같은 방식을 고려하면 플랫폼 간 표시가 더 안정적입니다.
큰 문제는 아니지만 사용자 경험 관점에서 잡아 두면 좋습니다.
172-176: 에러·무효 티켓 처리 후 상태 초기화 로직이 중복됩니다
setIsDeleteModalOpen(false),setIsCancelMode(false),setSelectedIds([])셋트가 "무효 티켓 경고" 블록과onError블록에 반복됩니다.
유틸 함수로 추출하거나finally블록 같은 공통 정리 루틴을 두면 유지보수가 수월합니다.src/shared/ui/backgrounds/DashboardLayout.tsx (1)
43-44: 접근성:<img>태그에alt속성이 없습니다
leftButtonLabel={<img src={homeButton} />}→ 시각장애 사용자용 대체 텍스트를 추가해 주세요.- leftButtonLabel={<img src={homeButton} />} + leftButtonLabel={<img src={homeButton} alt="홈으로" />}src/pages/join/InfoInputPage.tsx (1)
53-71: mutate 중첩 호출로 가독성 하락 → Promise 체이닝 또는 async/await 권장
updateUser성공 콜백 안에서agreeTerms를 다시 호출하면서 두 단계 모두onSuccess/onError를 인라인으로 작성해 깊이가 생깁니다.
async/await+try/catch로 리팩터링하면 가독성이 좋아집니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
public/assets/dashboard/menu/QR(black).svgis excluded by!**/*.svgpublic/assets/dashboard/menu/QR(pink).svgis excluded by!**/*.svg
📒 Files selected for processing (17)
src/features/event/ui/EventFunnel.tsx(2 hunks)src/features/home/ui/EventSliderSection.tsx(1 hunks)src/features/join/hooks/useUserHook.ts(1 hunks)src/features/ticket/ui/QrScanner.tsx(2 hunks)src/pages/dashboard/ui/ticket/CheckInPage.tsx(1 hunks)src/pages/event/ui/AllEventsPage.tsx(2 hunks)src/pages/event/ui/EventDetailsPage.tsx(1 hunks)src/pages/home/ui/MainPage.tsx(1 hunks)src/pages/join/AgreementPage.tsx(1 hunks)src/pages/join/InfoInputPage.tsx(2 hunks)src/pages/menu/ui/MyTicketPage.tsx(3 hunks)src/pages/search/ui/SearchPage.tsx(2 hunks)src/shared/hooks/useImageUpload.ts(1 hunks)src/shared/types/dashboardType.ts(2 hunks)src/shared/ui/EventCard.tsx(3 hunks)src/shared/ui/backgrounds/DashboardLayout.tsx(3 hunks)src/widgets/dashboard/ui/main/SideBar.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/pages/join/InfoInputPage.tsx (5)
src/features/join/model/agreementStore.ts (1)
useAgreementStore(24-74)src/features/join/api/user.ts (2)
agreeTerms(19-24)updateUser(11-16)src/features/join/hooks/useUserHook.ts (1)
useAgreeTerms(22-30)src/shared/utils/phoneFormatter.ts (1)
formatPhoneNumber(1-6)src/shared/lib/formValidation.ts (1)
FormData(25-25)
src/pages/join/AgreementPage.tsx (1)
src/features/join/model/agreementStore.ts (1)
useAgreementStore(24-74)
src/shared/ui/EventCard.tsx (1)
src/shared/lib/date.ts (1)
formatDate(1-9)
🪛 ESLint
src/features/event/ui/EventFunnel.tsx
[error] 50-50: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (8)
src/pages/search/ui/SearchPage.tsx (1)
90-100: 카드 클릭 시 네비게이션 추가 👍
EventCard클릭 시 상세 페이지로 이동하도록 onClick을 넘긴 점 훌륭합니다. 다만EventCard내부에서도 anchor 역할(버튼, div 등)에 따라 접근성 속성(role="button"및tabIndex)이 필요할 수 있으니 확인 부탁드립니다.src/widgets/dashboard/ui/main/SideBar.tsx (1)
33-35: 스크롤 가능 처리 추가 👍
overflow-y-auto클래스를 추가해 긴 메뉴 목록이 잘리는 문제를 해결한 점이 좋습니다. 특별한 문제는 없어 보입니다.src/features/event/ui/EventFunnel.tsx (1)
63-64:navigate('/')고정 경로로의 변경 확인 필요이전에는
navigate(-1)로 브라우저 히스토리 뒤로가기였으나, 루트(/)로 고정되었습니다. 사용자 흐름(예: 이벤트 생성 중 뒤로가기)을 의도적으로 막는 변경인지 확인 부탁드립니다.src/features/ticket/ui/QrScanner.tsx (2)
4-4: 디자인 시스템Button교체 👍커스텀
Button컴포넌트 도입으로 스타일 일관성이 향상되었습니다.
78-82: aspect-ratio 변경 확인비디오 비율을
3 / 4로 수정했는데, 실제 카메라 출력이 이 비율과 맞지 않을 경우 영상이 잘릴 수 있습니다. 기기별 테스트를 권장드립니다.src/shared/types/dashboardType.ts (2)
21-22: 아이콘 리소스 존재 여부 확인새 SVG 경로(
QR(black).svg,QR(pink).svg)가 실제 저장소에 존재하는지 CI 단계에서 종종 누락됩니다. 경로 오타를 한 번 더 확인해주세요.
39-41: 새 메뉴 경로에 대한 라우트 구현 확인
/dashboard/:id/check-in라우트가 정의되지 않았다면 사이드바 클릭 시 404가 발생합니다. 페이지 컴포넌트와 라우터 설정을 점검해주세요.src/pages/join/AgreementPage.tsx (1)
9-14: 약관 동의가 서버로 즉시 전송되지 않음이 페이지에서 “다음” 버튼을 누를 때 서버 전송이 빠지고 단순 네비게이션만 수행합니다.
현재 로직(InfoInput 단계에서 전송)과 UX 설계가 맞는지 PM/BE와 재확인하시기 바랍니다.
의도된 변경이라면 OK, 아니라면useAgreeTerms호출 위치를 되돌려야 합니다.
2 participants
QR 스캔 페이지 구현 및 테스트
Summary by CodeRabbit
신규 기능
버그 수정
UI/UX 개선
기타