Conversation
Closed
## Walkthrough
이 변경 사항은 여러 컴포넌트와 API 모듈에 걸쳐 UI, 상태 관리, 폼 검증, API 요청 헤더, 드래그 앤 드롭 기능, 이벤트 필터링 및 렌더링 로직을 개선합니다. 인증 관련 HTTP 헤더 키가 통일되었고, 이벤트 및 참가자 리스트의 렌더링 방식, 폼 검증, 드래그 앤 드롭 삭제 기능 등이 추가·수정되었습니다.
## Changes
| 파일/그룹 | 변경 요약 |
|-------------------------------------------------|-----------|
| src/entities/event/api/event.ts, src/features/join/api/user.ts, src/shared/types/api/http-client.ts | API 요청 헤더를 `{ skipAuth: true }`에서 `{ isPublicApi: true }`로 변경; 인터셉터 로직도 해당 키로 수정 |
| src/features/dashboard/ui/MultiplePieCharts.tsx | Pie 차트 컨테이너에 배경색 추가, import 및 JSX 포맷 개선 |
| src/features/dashboard/ui/ParicipantCard.tsx | 참가자 카드의 레이아웃, 폰트 사이즈, 버튼 렌더링 방식 개선 |
| src/features/dashboard/ui/PariticipantsList.tsx | useParticipantStore 구조분해 문법 및 헤더 gap 값 수정, order 추출 로직 단순화 |
| src/features/dashboard/ui/ResponsesList.tsx | 텍스트 응답 렌더링 로직을 요약 케이스 내부로 통합, 코드 간결화 및 스타일 소폭 변경 |
| src/features/event/ui/DatePicker.tsx | 초기 날짜 상태를 eventState 또는 initial 값으로 설정, useEffect에서 state가 null일 때만 업데이트 |
| src/features/event/ui/EventList.tsx, src/features/home/ui/EventSliderSection.tsx | 이벤트 리스트에서 종료된 이벤트 필터링, 클릭 시 상세 페이지 이동 추가, 슬라이더 레이아웃 보정 |
| src/features/ticket/hooks/useTicketOptionDnD.ts | 드래그 앤 드롭으로 티켓 옵션 삭제 기능 추가, attach/detach 로직 정제 |
| src/features/ticket/hooks/useTicketOptionHook.ts| 삭제 성공 시 쿼리 무효화 추가, 에러 메시지에 따른 알림 분기 처리 |
| src/pages/dashboard/ui/EventInfoPage.tsx | 저장 후 페이지 이동 대신 React Query 캐시 무효화로 동작 변경 |
| src/pages/event/ui/EventDetailsPage.tsx | 로그인 상태에 따라 북마크 버튼 표시, 주소 및 웹사이트 링크 렌더링 개선, 검색 아이콘 클릭 시 이동 추가 |
| src/pages/menu/ui/MenuPage.tsx | 헤더 내 검색 아이콘에 명시적 width 클래스 추가 |
| src/shared/lib/formValidation.ts | 전화번호 검증을 길이 13자(하이픈 포함)로 엄격화, 에러 메시지 명확화 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant EventList
participant Router
User->>EventList: 이벤트 카드 클릭
EventList->>Router: /event-details/{event.id}로 이동sequenceDiagram
participant User
participant TicketOptionDnD
participant useDeleteTicketOptionMutation
User->>TicketOptionDnD: 옵션을 '삭제' 영역으로 드래그
TicketOptionDnD->>useDeleteTicketOptionMutation: 삭제 뮤테이션 실행
useDeleteTicketOptionMutation-->>TicketOptionDnD: 성공/실패 콜백
sequenceDiagram
participant Form
participant formValidation
Form->>formValidation: 전화번호 입력값 검증
formValidation-->>Form: 13자리(하이픈 포함) 아니면 에러 반환
Possibly related PRs
Suggested reviewers
Poem
|
![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 (1)
src/features/home/ui/EventSliderSection.tsx (1)
93-93: 💡 Verification agent🧩 Analysis chain
네비게이션 로직의 일관성을 확인하세요.
네비게이션 버튼이 여전히 원본
events.length를 사용하고 있는데, 이는filteredEvents.length와 다를 수 있습니다. 이로 인해 인덱스 범위를 벗어나는 문제가 발생할 수 있습니다.다음 스크립트를 실행하여 이벤트 슬라이더 컴포넌트에서 필터링된 이벤트와 네비게이션 로직의 일관성을 확인하세요:
Also applies to: 98-98
🏁 Script executed:
#!/bin/bash # 이벤트 슬라이더에서 네비게이션 로직과 필터링된 이벤트 사용 패턴 확인 echo "=== EventSliderSection에서 events와 filteredEvents 사용 패턴 분석 ===" rg -A 10 -B 5 "handleNext|handlePrev" src/features/home/ui/EventSliderSection.tsx echo "=== 유사한 슬라이더 컴포넌트에서 네비게이션 패턴 확인 ===" rg -A 5 -B 5 "startIndex.*length" src/Length of output: 3635
네비게이션 로직:
filteredEvents.length사용으로 일관성 유지하세요.현재
handlePrev/handleNext에events.length를 넘겨주고 있어, 전체 이벤트 개수를 기준으로 인덱스를 순환합니다. 하지만 화면에 표시되는 건filteredEvents이기 때문에, 필터된 이벤트 개수(filteredEvents.length)로 순환해야 일부 인덱스에서 빈 배열이 반환되는 문제를 방지할 수 있습니다.수정 위치:
- 파일:
src/features/home/ui/EventSliderSection.tsx- 라인: onClick 호출부 (약 93, 98번째 줄)
제안하는 변경 사항:
- <IconButton - onClick={() => handlePrev(setStartIndex, startIndex, events.length)} - ... - /> + <IconButton + onClick={() => handlePrev(setStartIndex, startIndex, filteredEvents.length)} + ... +/> - <IconButton - onClick={() => handleNext(setStartIndex, startIndex, events.length)} - ... - /> + <IconButton + onClick={() => handleNext(setStartIndex, startIndex, filteredEvents.length)} + ... +/>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
src/entities/event/api/event.ts(5 hunks)src/features/dashboard/ui/MultiplePieCharts.tsx(3 hunks)src/features/dashboard/ui/ParicipantCard.tsx(1 hunks)src/features/dashboard/ui/PariticipantsList.tsx(3 hunks)src/features/dashboard/ui/ResponsesList.tsx(1 hunks)src/features/event/ui/DatePicker.tsx(2 hunks)src/features/event/ui/EventList.tsx(3 hunks)src/features/home/ui/EventSliderSection.tsx(2 hunks)src/features/join/api/user.ts(1 hunks)src/features/ticket/hooks/useTicketOptionDnD.ts(3 hunks)src/features/ticket/hooks/useTicketOptionHook.ts(2 hunks)src/pages/dashboard/ui/EventInfoPage.tsx(2 hunks)src/pages/event/ui/EventDetailsPage.tsx(6 hunks)src/pages/menu/ui/MenuPage.tsx(1 hunks)src/shared/lib/formValidation.ts(1 hunks)src/shared/types/api/http-client.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/features/join/api/user.ts (2)
src/features/join/model/userInformation.ts (2)
UserInfoRequest(8-12)UserInfoResponse(1-6)src/shared/types/api/http-client.ts (1)
axiosClient(6-13)
src/features/dashboard/ui/ParicipantCard.tsx (1)
src/shared/lib/date.ts (2)
formatDate(1-9)formatTime(10-15)
src/features/dashboard/ui/ResponsesList.tsx (1)
src/features/dashboard/model/store/ResponseStore.tsx (1)
useResponseStore(21-61)
src/pages/event/ui/EventDetailsPage.tsx (1)
src/app/provider/authStore.ts (1)
useAuthStore(16-28)
🪛 ESLint
src/features/event/ui/EventList.tsx
[error] 6-6: 'ReactQueryDevtools' is defined but never used.
(@typescript-eslint/no-unused-vars)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (35)
src/pages/menu/ui/MenuPage.tsx (1)
23-23: UI 일관성 개선이 적절합니다.검색 아이콘에
w-4클래스를 추가하여 버튼 컨테이너(w-5) 내에서 적절한 여백을 확보한 것이 좋습니다.src/features/dashboard/ui/MultiplePieCharts.tsx (3)
2-2: 코드 포맷팅 개선이 좋습니다.import 문에 적절한 공백을 추가하여 가독성을 향상시켰습니다.
26-26: 명시적인 배경색 설정이 좋습니다.
bg-white클래스를 추가하여 컨테이너의 배경색을 명확히 설정한 것이 UI 일관성에 도움이 됩니다.
35-35: 코드 정리가 적절합니다.Pie 컴포넌트의 props를 한 줄로 정리하여 코드를 더 간결하게 만들었습니다.
src/entities/event/api/event.ts (1)
10-10: 인증 헤더 키 통일화가 적절합니다.모든 공개 API 호출에서
skipAuth: true를isPublicApi: true로 일관되게 변경한 것이 좋습니다. 이는 http-client.ts의 인터셉터 로직과 일치하는 변경사항입니다.Also applies to: 28-28, 52-52, 66-66, 79-79
src/shared/types/api/http-client.ts (1)
17-17:Details
✅ Verification successful
인증 헤더 키 변경이 올바릅니다.
skipAuth에서isPublicApi로 헤더 키를 변경한 것이 다른 API 파일들의 변경사항과 일치합니다. 이 변경으로 공개 API 요청이 인증을 우회할 수 있습니다.모든 API 파일에서 일관되게 헤더 키가 업데이트되었는지 확인하기 위해 다음 스크립트를 실행합니다:
🏁 Script executed:
#!/bin/bash # 설명: skipAuth 헤더를 사용하는 다른 API 호출이 있는지 확인 # 예상 결과: skipAuth 사용 사례가 없어야 함 echo "=== skipAuth 헤더를 사용하는 파일 검색 ===" rg -A 2 -B 2 "skipAuth.*true" --type ts --type tsx echo "=== isPublicApi 헤더를 사용하는 파일 검색 ===" rg -A 2 -B 2 "isPublicApi.*true" --type ts --type tsxLength of output: 316
rg에서--type tsx를 인식하지 못해 글롭(glob) 패턴으로.ts와.tsx파일을 모두 검색하도록 스크립트를 수정합니다.
🏁 Script executed:
#!/bin/bash echo "=== skipAuth 사용 여부 확인 ===" rg -n 'skipAuth' --glob '*.ts' --glob '*.tsx' echo "=== isPublicApi 사용 여부 확인 ===" rg -n 'isPublicApi' --glob '*.ts' --glob '*.tsx'Length of output: 794
인증 헤더 키 변경 일관성 확인 완료
skipAuth관련 코드를 모두 제거했고, 모든 API 호출이isPublicApi를 사용하도록 업데이트된 것을 확인했습니다.
- 발견된
isPublicApi사용 위치:
• src/entities/event/api/event.ts (라인 10, 28, 52, 66, 79)
• src/features/join/api/user.ts (라인 6, 13)
• src/shared/types/api/http-client.ts (라인 17)더 이상의 조치가 필요 없습니다.
src/features/join/api/user.ts (1)
6-6:Details
✅ Verification successful
인증 헤더 키 변경이 올바르게 적용되었습니다.
skipAuth에서isPublicApi로의 헤더 키 변경이 일관되게 적용되었습니다. 이 변경은 HTTP 클라이언트 인터셉터의 업데이트와 일치합니다.Also applies to: 13-13
🏁 Script executed:
#!/bin/bash # HTTP 클라이언트가 새로운 isPublicApi 헤더를 올바르게 처리하는지 확인 rg -A 10 -B 5 "isPublicApi" --type tsLength of output: 6617
isPublicApi 헤더 처리 일관 적용 확인
인터셉터에서
isPublicApi헤더를 정상 처리하며, 관련 API 호출에도 일관되게 적용되었습니다.
src/shared/types/api/http-client.ts: 요청 인터셉터에서config.headers?.isPublicApi확인src/features/join/api/user.ts,src/entities/event/api/event.ts등:headers: { isPublicApi: true }로 일관 적용src/features/dashboard/ui/PariticipantsList.tsx (3)
22-22: 구문 일관성 개선이 좋습니다.후행 쉼표 추가로 코드 일관성이 향상되었습니다.
41-41: 코드 가독성 향상이 좋습니다.다중 라인 체이닝을 단일 라인으로 리팩토링하여 가독성이 향상되었습니다. 로직은 동일하게 유지되었습니다.
69-69: UI 간격 조정이 적절합니다.CSS gap 값 조정 (
gap-15 md:gap-24에서gap-3 md:gap-16으로)으로 더 적절한 간격을 제공합니다.src/pages/dashboard/ui/EventInfoPage.tsx (2)
13-13: React Query 캐시 관리 도입이 좋습니다.
useQueryClient도입으로 더 나은 상태 관리가 가능해졌습니다.Also applies to: 16-16
63-63: UX 동작 변경 검증이 필요합니다.성공 후 페이지 이동 대신 캐시 무효화로 변경되었습니다. 이로 인해 사용자가 동일한 페이지에 머무르게 되는데, 이것이 의도된 UX인지 확인이 필요합니다.
이벤트 정보 저장 후 사용자가 동일한 페이지에 머무르는 것이 올바른 UX 플로우인지 확인해주세요. 일반적으로 저장 후 대시보드나 목록 페이지로 이동하는 것이 예상되는 동작일 수 있습니다.
src/features/ticket/hooks/useTicketOptionHook.ts (3)
78-78: 코드 정리가 좋습니다.불필요한 빈 줄 제거로 코드가 더 깔끔해졌습니다.
127-127: 캐시 무효화 로직 추가가 좋습니다.티켓 옵션 삭제 시
attachedTicketOptions쿼리도 무효화하여 데이터 일관성을 보장합니다.
129-137: 에러 처리 개선이 훌륭합니다.특정 에러 메시지에 따른 맞춤형 알림 제공으로 사용자 경험이 크게 향상되었습니다. "이미 응답된 티켓 옵션입니다." 에러에 대한 명확한 안내는 특히 유용합니다.
src/features/event/ui/EventList.tsx (3)
7-7: 네비게이션 구현이 잘 되었습니다.
useNavigate훅을 올바르게 임포트하고 초기화했습니다.Also applies to: 21-21
70-78: 이벤트 필터링 로직이 일관성 있게 구현되었습니다.종료된 이벤트를 제외하는 필터링 로직이
EventSliderSection.tsx와 일관성 있게 구현되었습니다. 오늘 날짜를 자정으로 설정하고 이벤트의 종료일(또는 시작일)과 비교하는 방식이 적절합니다.
82-98: 클릭 가능한 이벤트 카드 구현이 우수합니다.각 이벤트 카드를 클릭했을 때 상세 페이지로 이동하는 기능이 올바르게 구현되었습니다.
div컨테이너에onClick핸들러를 추가하여 전체 카드 영역을 클릭 가능하게 만든 것이 좋은 UX 개선입니다.src/shared/lib/formValidation.ts (1)
12-15: 전화번호 유효성 검사가 더 정확해졌습니다.기존의
.min(1)검사 대신.refine()메소드를 사용하여 정확히 13자 길이를 강제하는 것이 한국 휴대폰 번호 형식("010-1234-5678")에 적합합니다. 에러 메시지도 더 구체적이고 사용자 친화적입니다.src/features/dashboard/ui/ParicipantCard.tsx (4)
20-21: 레이아웃 간격 개선이 잘 되었습니다.요소 간 간격을 늘리고(
gap-8 md:gap-20) 주문 ID에 왼쪽 마진을 추가하여 가독성이 향상되었습니다.
26-28: 구매 일자 표시 개선이 우수합니다.구매 일자를 별도
div로 감싸서 멀티라인으로 표시하는 것이 가독성을 향상시킵니다.formatDate와formatTime함수의 활용도 적절합니다.
34-34: 버튼 렌더링이 간소화되었습니다.불필요한 중괄호와 줄바꿈을 제거하여 코드가 더 깔끔해졌습니다.
36-36: 일관된 폰트 크기 적용이 우수합니다.모든 상태 텍스트("완료", "미완료", "승인됨")에 동일한 반응형 폰트 크기 클래스(
text-10 md:text-12)를 적용하여 UI 일관성이 향상되었습니다.Also applies to: 38-38, 42-42, 44-44
src/features/home/ui/EventSliderSection.tsx (4)
29-36: 이벤트 필터링 로직이 일관성 있게 구현되었습니다.
EventList.tsx와 동일한 방식으로 종료된 이벤트를 필터링하는 로직이 구현되었습니다. 날짜를 자정으로 정규화하여 비교하는 방식이 적절합니다.
38-47: 이벤트 표시 로직이 올바르게 수정되었습니다.
filteredEvents를 사용하도록 슬라이싱 및 연결 로직이 적절히 수정되었습니다.
53-53: 빈 상태 조건이 올바르게 수정되었습니다.
filteredEvents.length를 확인하도록 변경한 것이 논리적으로 올바릅니다.
73-88: 레이아웃 일관성을 위한 placeholder 추가가 우수합니다.단일 이벤트일 때 invisible placeholder 카드를 추가하여 레이아웃 일관성을 유지하는 것이 좋은 UX 개선입니다.
src/features/ticket/hooks/useTicketOptionDnD.ts (1)
51-58: 새로운 삭제 기능이 잘 구현되었습니다.드래그 앤 드롭으로 옵션을 삭제하는 새로운 기능이 올바르게 구현되었습니다. ID 검증과 삭제 뮤테이션 호출이 적절합니다.
src/pages/event/ui/EventDetailsPage.tsx (3)
66-68: 검색 아이콘 상호작용성 개선이 훌륭합니다.검색 아이콘에 클릭 이벤트와 커서 스타일을 추가하여 사용자 경험이 크게 개선되었습니다.
88-93: 인증 상태에 따른 조건부 렌더링이 적절합니다.로그인하지 않은 사용자에게는 좋아요 버튼을 숨기는 것이 적절한 UX 개선입니다.
useAuthStore를 활용한 구현도 올바릅니다.
142-150: 동적 참조 링크 렌더링으로 유연성이 향상되었습니다.하드코딩된 정적 링크에서
referenceLinks배열을 순회하는 동적 렌더링으로 변경되어 데이터 기반의 유연한 UI가 구현되었습니다.src/features/event/ui/DatePicker.tsx (2)
29-35: 상태 초기화 로직이 개선되었습니다.
initialStartDate와initialEndDate로의 폴백 로직 추가로 더 유연한 초기화가 가능해졌습니다.
44-57: 함수형 상태 업데이트와 변수 네이밍 개선이 훌륭합니다.
prev => prev ?? value패턴 사용으로 불필요한 상태 업데이트를 방지하고,startDateObj와endDateObj로 변수명을 변경하여 상태 변수와의 섀도잉을 방지한 것이 좋은 개선입니다.src/features/dashboard/ui/ResponsesList.tsx (2)
17-17: 스토어 구조분해할당 단순화가 좋습니다.필요한 프로퍼티만 구조분해하여 코드가 더 명확해졌습니다.
25-60: 렌더링 로직 통합으로 가독성이 향상되었습니다.별도의
renderTextResponses함수를 제거하고 인라인으로 처리하여 코드 흐름이 더 명확해졌습니다. 텍스트 응답과 차트 렌더링이 조건부로 잘 처리되어 있습니다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
신규 기능
버그 수정
스타일
리팩터
skipAuth에서isPublicApi로 일괄 변경해 인증 처리 방식을 일관성 있게 조정하였습니다.기타