Conversation
|
Warning Rate limit exceeded@hyeeuncho has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 5 minutes and 35 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 ignored due to path filters (1)
📒 Files selected for processing (1)
""" Walkthrough여러 대시보드 및 이벤트 관련 페이지에서 UI와 상태 관리가 개선되었습니다. 이벤트 태그 페이지는 퍼널 상태 및 이벤트 데이터 저장 기능이 추가되었고, 공유 모달에 스와이프 제스처가 도입되었습니다. 일부 컴포넌트의 레이아웃, 검색, 헤더, 스타일, 캐시 무효화, 해시태그 필터링 등 다양한 개선이 이루어졌습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EventTagPage
participant FunnelProvider
participant useEventDetail
participant useUpdateEventHook
participant Dashboard
User->>EventTagPage: 페이지 진입
EventTagPage->>FunnelProvider: 퍼널 상태 초기화
EventTagPage->>useEventDetail: 이벤트 상세 데이터 요청
useEventDetail-->>EventTagPage: 이벤트 데이터 반환
EventTagPage->>FunnelProvider: 해시태그 상태 초기화
User->>EventTagPage: 태그 수정 및 저장 클릭
EventTagPage->>useUpdateEventHook: 이벤트 태그 저장 요청
useUpdateEventHook-->>EventTagPage: 저장 성공/실패 콜백
EventTagPage->>Dashboard: 저장 성공 시 대시보드로 이동
sequenceDiagram
participant User
participant ShareEventModal
User->>ShareEventModal: 모달에서 터치 시작
ShareEventModal->>ShareEventModal: 터치 이동 (Y 좌표 추적)
User->>ShareEventModal: 터치 종료 (100px 이상 아래로 스와이프)
ShareEventModal->>ShareEventModal: 모달 닫기 트리거
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
""" 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
🧹 Nitpick comments (5)
tailwind.config.js (1)
93-93: 플러그인 배열 구성 개선 제안플러그인 배열의 가독성을 향상시킬 수 있습니다.
- plugins: [require('tailwind-scrollbar-hide'),typography,], + plugins: [ + require('tailwind-scrollbar-hide'), + typography, + ],src/features/event/ui/ShareEventModal.tsx (1)
27-64: 스와이프 제스처 구현 우수함모달의 스와이프 다운 기능이 잘 구현되어 있습니다:
- 터치 시작점 추적 및 드래그 중 시각적 피드백
- 100px 임계값을 통한 적절한 닫기 조건
- 부드러운 애니메이션 전환 효과
성능 최적화를 위해 다음 개선사항을 고려해볼 수 있습니다:
+ const SWIPE_THRESHOLD = 100; + const TRANSITION_DURATION = 200; + const handleTouchEnd = (e: React.TouchEvent) => { const startY = startYRef.current; if (startY === null) return; const endY = e.changedTouches[0].clientY; const deltaY = endY - startY; - if (deltaY > 100) { + if (deltaY > SWIPE_THRESHOLD) { closeModal(); } else { if (modalRef.current) { modalRef.current.style.transform = 'translateY(0)'; - modalRef.current.style.transition = 'transform 0.2s ease-out'; + modalRef.current.style.transition = `transform ${TRANSITION_DURATION}ms ease-out`; setTimeout(() => { if (modalRef.current) modalRef.current.style.transition = ''; - }, 200); + }, TRANSITION_DURATION); } } };src/pages/dashboard/ui/EventInfoPage.tsx (1)
92-93: 대시보드 헤더 표준화 및 코드 정리 제안헤더 라벨을 "DASHBOARD"로 표준화한 것은 다른 대시보드 페이지들과의 일관성을 위해 좋은 개선입니다. 하지만 주석 처리된 코드를 제거하여 코드베이스를 더 깔끔하게 유지하는 것을 권장합니다.
다음과 같이 주석 처리된 코드를 제거하세요:
- // <DashboardLayout centerContent={title}> <DashboardLayout centerContent={"DASHBOARD"}>src/app/routes/Router.tsx (1)
83-83: 코드 포매팅 개선 제안EventTagPage를 FunnelProvider로 감싸는 것은 적절하지만, 가독성을 위해 포매팅을 개선할 수 있습니다.
- { path: DASHBOARD_ROUTES.eventTag, element: (<FunnelProvider><EventTagPage /></FunnelProvider>),requiresAuth: false,}, + { + path: DASHBOARD_ROUTES.eventTag, + element: ( + <FunnelProvider> + <EventTagPage /> + </FunnelProvider> + ), + requiresAuth: false, + },src/pages/dashboard/ui/EventDetailPage.tsx (1)
27-27: 디버깅용 콘솔 로그 제거 필요프로덕션 코드에서 디버깅용 콘솔 로그는 제거해야 합니다.
- console.log(data?.result.bannerImageUrl)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/assets/Home.svgis excluded by!**/*.svg
📒 Files selected for processing (18)
src/app/routes/Router.tsx(1 hunks)src/entities/event/api/event.ts(1 hunks)src/features/event/ui/ShareEventModal.tsx(3 hunks)src/features/event/ui/TextEditor.tsx(1 hunks)src/features/home/ui/EventTags.tsx(1 hunks)src/features/join/hooks/useUserHook.ts(1 hunks)src/features/ticket/api/ticket.ts(1 hunks)src/pages/dashboard/ui/EventDetailPage.tsx(5 hunks)src/pages/dashboard/ui/EventInfoPage.tsx(1 hunks)src/pages/dashboard/ui/EventTagPage.tsx(1 hunks)src/pages/dashboard/ui/mail/MailBoxPage.tsx(4 hunks)src/pages/dashboard/ui/ticket/TIcketConfirmPage.tsx(3 hunks)src/pages/dashboard/ui/ticket/TicketOptionPage.tsx(1 hunks)src/pages/event/ui/EventDetailsPage.tsx(3 hunks)src/pages/join/InfoInputPage.tsx(0 hunks)src/shared/ui/EventCard.tsx(2 hunks)src/shared/ui/HashtagCarousel.tsx(0 hunks)tailwind.config.js(2 hunks)
💤 Files with no reviewable changes (2)
- src/shared/ui/HashtagCarousel.tsx
- src/pages/join/InfoInputPage.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: xaexunxang
PR: GoTogether-Inc/frontend#106
File: src/entities/event/model/eventRequest.ts:26-30
Timestamp: 2025-04-29T10:26:21.217Z
Learning: GoTogether 프로젝트의 이벤트 API에서는 생성(EventCreate)과 수정(EventUpdate) 인터페이스에서 다른 필드명을 사용합니다:
- EventCreate: organizerEmail, organizerPhoneNumber (Swagger 스펙 기준)
- EventUpdate: hostEmail, hostPhoneNumber (Notion 스펙 기준)
이는 백엔드 API 명세의 불일치로 인한 의도적인 차이입니다.
🪛 GitHub Actions: hyeeuncho의 스토리북 배포
tailwind.config.js
[error] 1-1: Build failed: Cannot find module '@tailwindcss/typography' required by tailwind.config.js.
🔇 Additional comments (19)
src/features/ticket/api/ticket.ts (1)
12-14: 헤더 추가 변경사항 승인, 용도 확인 요청
isPublicApi: true헤더가 추가되었습니다. 백엔드에서 공개 API 처리를 위한 것으로 보이는데, 이 헤더의 구체적인 용도와 다른 티켓 관련 API 함수들에도 동일한 헤더가 필요한지 확인해 주세요.src/features/event/ui/TextEditor.tsx (1)
99-104: dangerouslyPasteHTML 사용에 따른 XSS 위험 검증 필요현재
eventState?.description을 그대로dangerouslyPasteHTML로 복원하고 있어 잠재적 XSS 공격에 노출될 수 있습니다.
eventState.description이 서버에서 안전하게 sanitization 되어 저장되는지, 클라이언트에서도 별도 검증·정제 로직이 적용되는지 반드시 확인해주세요.
필요하다면 다음을 검토하세요:
- 클라이언트 측 HTML 정제를 위해
DOMPurify등 사용- Quill Delta 포맷(
setContents) 기반 복원을 통한 안전 보장점검 대상:
- src/features/event/ui/TextEditor.tsx:
eventState.description의 정의 및 출처- 서버 API/백엔드 저장 로직: description 필드 sanitization 유무
- 클라이언트 정제 로직 추가 여부
src/pages/dashboard/ui/mail/MailBoxPage.tsx (2)
22-29: 검색 기능 구현 우수함이메일 검색 기능이 잘 구현되어 있습니다:
useMemo를 사용한 성능 최적화- 대소문자 구분 없는 검색
- 제목과 대상 이름 모두 검색 가능
41-46: 제어 컴포넌트 패턴 올바른 적용SearchBar 컴포넌트가 제어 컴포넌트로 올바르게 구현되었습니다.
value와onChange를 통해 상태를 적절히 관리하고 있습니다.src/entities/event/api/event.ts (1)
90-90: 코드 포맷팅 개선 확인파일 끝에 개행 문자 추가는 일반적인 코딩 표준을 따르는 좋은 개선입니다.
src/pages/dashboard/ui/ticket/TicketOptionPage.tsx (1)
69-69: 대시보드 헤더 라벨 일관성 개선"DASHBOARDs"를 "DASHBOARD"로 수정하여 다른 대시보드 페이지들과 일관성을 맞춘 것은 좋은 개선입니다.
src/features/home/ui/EventTags.tsx (1)
12-13: 이벤트 섹션 제목 시각적 개선이모지 추가로 사용자 인터페이스의 시각적 매력도를 향상시킨 좋은 개선입니다. 기존 세 번째 섹션의 이모지 패턴과 일관성도 유지됩니다.
src/shared/ui/EventCard.tsx (2)
55-55: 빈 해시태그 필터링 로직 추가빈 문자열이나 공백만 있는 해시태그를 필터링하는 로직을 추가한 것은 좋은 방어적 프로그래밍 사례입니다.
98-103: 필터링된 해시태그 사용필터링된 해시태그를 사용하여 빈 해시태그가 UI에 렌더링되는 것을 방지한 것은 사용자 경험 개선에 도움이 됩니다.
src/pages/dashboard/ui/ticket/TIcketConfirmPage.tsx (1)
10-10: 헤더 네비게이션 개선 승인홈 버튼 아이콘으로 변경하고 루트 경로로 직접 이동하는 것은 일관된 사용자 경험을 제공합니다. 다른 페이지들과 통일성을 유지하는 좋은 변경입니다.
Also applies to: 23-23, 37-37
src/pages/event/ui/EventDetailsPage.tsx (2)
21-21: 헤더 네비게이션 통일성 개선다른 페이지들과 동일한 홈 버튼 패턴을 적용하여 일관성을 개선했습니다.
Also applies to: 62-63
113-115: Typography 플러그인 적용으로 콘텐츠 스타일링 개선Tailwind의 typography 플러그인을 사용하여 이벤트 설명 콘텐츠의 가독성을 향상시켰습니다.
max-w-none클래스로 너비 제한을 해제한 것도 적절합니다.src/pages/dashboard/ui/EventDetailPage.tsx (3)
12-12: 캐시 무효화 로직 추가 승인이벤트 업데이트 후 React Query 캐시를 무효화하여 데이터 일관성을 보장하는 것은 좋은 구현입니다.
Also applies to: 24-24, 61-61
30-30: 배너 이미지 URL 상태 관리 개선기존 값을 보존하는 로직과 빈 값 체크를 통한 fallback 처리가 잘 구현되었습니다. 사용자 입력을 우선시하면서도 안전한 기본값을 제공합니다.
Also applies to: 44-44
76-76: TextEditor onChange 핸들러 추가TextEditor에 onChange 핸들러를 추가하여 실시간 상태 업데이트를 가능하게 한 것은 적절합니다.
src/pages/dashboard/ui/EventTagPage.tsx (4)
1-1: 필수 의존성 추가 및 훅 통합이벤트 태그 관리를 위한 필수 훅들과 의존성을 잘 추가했습니다. Funnel 상태 관리와 이벤트 API 훅들의 통합이 적절합니다.
Also applies to: 6-9, 13-16
17-24: 이벤트 데이터 기반 초기화 로직기존 이벤트 데이터에서 해시태그를 가져와 상태를 초기화하는 로직이 잘 구현되었습니다. 의존성 배열도 적절히 설정되어 있습니다.
25-45: 이벤트 태그 저장 핸들러 구현빈 태그 필터링, 요청 데이터 구성, 성공/실패 콜백 처리가 체계적으로 구현되었습니다. 사용자 피드백과 네비게이션 처리도 적절합니다.
53-53: 컴포넌트 상태 연결 및 저장 기능 활성화EventTag 컴포넌트에 상태 props를 전달하고 저장 버튼에 실제 저장 기능을 연결한 것은 완벽한 구현입니다.
Also applies to: 58-58
2 participants
Summary by CodeRabbit
신규 기능
버그 수정
UI/UX 개선
기능 개선
오류 메시지 및 알림
스타일 및 기타