Conversation
Walkthrough이 변경사항은 참가자 및 응답 관련 데이터 모델, API 함수, 훅, 그리고 UI 컴포넌트의 타입 정의와 함수 시그니처를 전반적으로 리팩토링합니다. 주요 내용은 데이터 구조 일원화, 함수 파라미터 방식 변경, 검색/필터링 기능 추가, 그리고 UI에서 데이터 접근 방식 일치화 등입니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ParticipantsManagementPage
participant ParticipantsList
User->>ParticipantsManagementPage: 검색어 입력
ParticipantsManagementPage->>ParticipantsManagementPage: participants 배열 필터링 (이름, 이메일, 전화번호, ticketId)
ParticipantsManagementPage->>ParticipantsList: filteredParticipants 전달
ParticipantsList->>User: 필터링된 참가자 목록 표시
sequenceDiagram
participant UIComponent
participant useParticipants
participant getParticipants
participant API
UIComponent->>useParticipants: (tags, page, size) 호출
useParticipants->>getParticipants: eventId, tags, page, size 전달
getParticipants->>API: GET /participants?eventId=...&tags=...&page=...&size=...
API-->>getParticipants: 참가자 데이터 반환
getParticipants-->>useParticipants: 데이터 반환
useParticipants-->>UIComponent: 데이터 반환
Possibly related issues
Possibly related PRs
Poem
✨ 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: 1
🧹 Nitpick comments (1)
src/pages/dashboard/ui/ParticipantsMangementPage.tsx (1)
23-31: 타입 안전성을 개선하세요.인라인 타입 주석 대신
ParticipantResponse타입을 사용하는 것이 좋겠습니다.다음과 같이 수정하는 것을 권장합니다:
- const filteredParticipants = participants.filter((p: { participant: string; email: string; phoneNumber: string; ticketId: number; }) => { + const filteredParticipants = participants.filter((p) => {
useParticipants훅에서 이미 타입이 지정되어 있으므로 별도의 타입 주석이 불필요합니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
src/features/dashboard/api/participants.ts(1 hunks)src/features/dashboard/hook/useParticipants.ts(2 hunks)src/features/dashboard/model/participantInformation.ts(1 hunks)src/features/dashboard/ui/MultiplePieCharts.tsx(2 hunks)src/features/dashboard/ui/ParicipantCard.tsx(2 hunks)src/features/dashboard/ui/PariticipantsList.tsx(2 hunks)src/features/dashboard/ui/ResponsesList.tsx(2 hunks)src/features/ticket/api/ticketOption.ts(1 hunks)src/features/ticket/hooks/useTicketOptionHook.ts(1 hunks)src/features/ticket/model/ticketInformation.ts(1 hunks)src/pages/dashboard/ui/ParticipantsMangementPage.tsx(1 hunks)src/pages/dashboard/ui/ResponseManagementPage.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (7)
src/features/ticket/api/ticketOption.ts (1)
src/features/ticket/model/ticketInformation.ts (1)
TicketOptionAnswerResponse(54-57)
src/features/dashboard/ui/PariticipantsList.tsx (1)
src/features/dashboard/model/participantInformation.ts (1)
ParticipantResponse(1-14)
src/features/ticket/hooks/useTicketOptionHook.ts (1)
src/features/ticket/model/ticketInformation.ts (1)
TicketOptionAnswerResponse(54-57)
src/features/dashboard/ui/MultiplePieCharts.tsx (1)
src/features/ticket/model/ticketInformation.ts (1)
TicketOption(48-53)
src/features/dashboard/ui/ResponsesList.tsx (1)
src/features/ticket/model/ticketInformation.ts (1)
TicketOption(48-53)
src/features/dashboard/hook/useParticipants.ts (1)
src/features/dashboard/api/participants.ts (1)
getParticipants(3-12)
src/pages/dashboard/ui/ParticipantsMangementPage.tsx (1)
src/features/dashboard/hook/useParticipants.ts (1)
useParticipants(9-32)
🔇 Additional comments (27)
src/features/dashboard/hook/useParticipants.ts (2)
9-13: 함수 시그니처 개선이 잘 되었습니다.타입이 명시된 매개변수와 기본값 설정이 적절하며, API 함수와의 일관성을 유지하고 있습니다.
22-25: 쿼리 키와 조건부 활성화가 적절합니다.모든 매개변수를 포함한 쿼리 키는 캐시 무효화에 도움이 되고,
enabled: !!eventId조건은 불필요한 쿼리를 방지합니다.src/features/dashboard/ui/PariticipantsList.tsx (2)
7-7: 타입 정의 업데이트가 적절합니다.
ParticipantResponse인터페이스로의 변경이 새로운 데이터 구조와 잘 맞습니다.Also applies to: 12-12
61-62: 필터링 로직 업데이트가 올바릅니다.
checkIn에서checkedIn으로 변경된 속성명이 새로운ParticipantResponse인터페이스와 일치합니다.src/pages/dashboard/ui/ParticipantsMangementPage.tsx (3)
17-17: 검색 기능 추가가 좋습니다.검색 상태 관리를 위한
searchTerm추가가 적절합니다.
20-21: 동적 카운트 계산이 개선되었습니다.정적 값 대신 실제 참가자 데이터를 기반으로 한 동적 계산이 더 정확하고 유용합니다.
44-49: 제어된 검색 입력이 올바르게 구현되었습니다.
value와onChange프로퍼티를 통한 제어된 컴포넌트 패턴이 적절합니다.src/features/dashboard/api/participants.ts (1)
3-8: API 함수 시그니처 개선이 적절합니다.위치 매개변수와 기본값을 사용한 함수 시그니처가 더 직관적이며,
useParticipants훅의 변경사항과 일치합니다.src/features/dashboard/model/participantInformation.ts (1)
1-14: 잘 구조화된 인터페이스 정의입니다!
ParticipantResponse인터페이스가 참가자 데이터 구조를 명확하고 일관성 있게 정의하고 있습니다. 특히orderStatus와ticketType에 대한 유니온 타입 사용이 타입 안전성을 보장합니다.src/features/dashboard/ui/ParicipantCard.tsx (4)
4-5: 새로운 타입 정의와 유틸리티 함수 도입이 좋습니다!
ParticipantResponse인터페이스와 날짜 포맷팅 함수들의 도입으로 코드의 타입 안전성과 가독성이 향상되었습니다.
27-27: 날짜 포맷팅 개선이 훌륭합니다!
formatDate와formatTime함수를 사용하여 구매 일자 표시가 더욱 가독성 있게 개선되었습니다.
41-41: 속성명 변경이 일관성 있게 적용되었습니다.
checkIn에서checkedIn으로 변경된 속성명이 올바르게 반영되었습니다.
43-55: 승인 로직이 명확하고 효율적으로 개선되었습니다!새로운 승인 로직의 장점들:
participant.approved를 직접 사용하여 코드 단순화FIRST_COME티켓 타입에 대한 명확한 처리invisible클래스를 사용한 UI 정렬 유지가 우아함티켓 타입에 따른 조건부 렌더링이 사용자 경험을 향상시킵니다.
src/pages/dashboard/ui/ResponseManagementPage.tsx (2)
19-19: 데이터 구조 변경에 맞춘 올바른 업데이트입니다.새로운
TicketOptionAnswerResponse타입에서orderCount필드를 사용하는 것이 적절합니다. 이는 응답 개수를 더 명확하게 표현합니다.
23-23: 안전한 데이터 접근과 타입 일치성이 우수합니다.
ticketOptions필드를 명시적으로 접근하고 null/undefined 케이스에 대해 빈 배열로 fallback하는 것이 좋습니다. 이는ResponsesList컴포넌트가 예상하는TicketOption[]타입과 일치합니다.src/features/ticket/hooks/useTicketOptionHook.ts (1)
40-40:Details
❓ Verification inconclusive
API 응답 구조 변경에 맞춘 올바른 타입 업데이트입니다.
반환 타입이 배열에서 단일 객체로 변경된 것이 새로운
TicketOptionAnswerResponse구조와 일치합니다. 이제 응답은orderCount와ticketOptions배열을 포함하는 단일 객체를 반환합니다.이 타입 변경이 기존 훅 사용처에 영향을 주지 않는지 확인해보겠습니다:
🏁 Script executed:
#!/bin/bash # 설명: usePurchaserAnswers 훅을 사용하는 모든 곳을 찾아 타입 변경의 영향을 확인 # 테스트: usePurchaserAnswers 훅 사용처 검색 rg -A 10 "usePurchaserAnswers" --type ts --type tsxLength of output: 79
다음과 같이
useTicketOptionHook훅의 사용처를 검색해 타입 변경 영향 범위를 확인해 주세요:
🏁 Script executed:
#!/bin/bash # useTicketOptionHook 훅이 호출되거나 임포트된 모든 위치 검색 rg -n -A 5 "useTicketOptionHook" -g '*.ts' -g '*.tsx'Length of output: 2582
아래 스크립트로 각 훅 사용처에서 반환된
data객체의 속성 접근 방식을 확인해 주세요:#!/bin/bash echo "=== usePurchaserAnswers 사용 위치 ===" rg -n -C 5 "usePurchaserAnswers" -g '*.tsx' echo "=== useTicketOptions 사용 위치 ===" rg -n -C 5 "useTicketOptions" -g '*.tsx' echo "=== usePersonalTicketOptionAnswers 사용 위치 ===" rg -n -C 5 "usePersonalTicketOptionAnswers" -g '*.tsx'
아래 스크립트를 실행해 훅 호출부에서
data객체의 속성에 어떻게 접근하는지 확인해 주세요:#!/bin/bash set -e for hook in usePurchaserAnswers useTicketOptions usePersonalTicketOptionAnswers; do echo "=== ${hook} 호출 및 data 접근 예시 ===" rg -n -C 5 "${hook}" -g '*.ts' -g '*.tsx' \ | sed -e 's/^/ /' echo done
훅 사용처 반환 구조 확인 요망
API 응답이 배열 → 단일 객체(
{ isSuccess, result: TicketOptionAnswerResponse })로 변경됨에 따라, 기존 호출부에서data를 배열로 다루는 부분이 없는지 확인이 필요합니다. 특히 아래 파일들을 점검해 주세요:
- src/pages/dashboard/ui/ResponseManagementPage.tsx
• usePurchaserAnswers 호출 후data접근 방식- src/pages/dashboard/ui/ticket/TicketOptionResponsePage.tsx
• useTicketOptions 호출 시data.result·data.orderCount참조 여부- src/features/dashboard/ui/ResponsesList.tsx
- src/features/dashboard/ui/PariticipantsList.tsx
• usePersonalTicketOptionAnswers 호출부data처리 로직확인이 완료되면 문제가 없음을 코멘트로 알려주시거나, 필요한 경우 호출부를 단일 객체 구조에 맞춰 수정해 주세요.
src/features/ticket/api/ticketOption.ts (1)
17-17: API 응답 타입이 훅과 일치하도록 올바르게 업데이트되었습니다.반환 타입을
TicketOptionAnswerResponse[]에서TicketOptionAnswerResponse로 변경한 것이 새로운 데이터 구조와 일치합니다. 이는usePurchaserAnswers훅의 타입 변경과 완벽하게 일치합니다.src/features/dashboard/ui/MultiplePieCharts.tsx (4)
2-2: 타입 임포트가 새로운 데이터 구조에 맞게 정확히 업데이트되었습니다.
TicketOptionAnswerResponse대신TicketOption타입을 사용하는 것이 새로운 데이터 모델과 일치합니다.
7-7: 컴포넌트 props 타입이 올바르게 업데이트되었습니다.이제
TicketOption[]배열을 직접 받아서 처리하는 것이 더 명확하고 일관된 구조입니다.
27-28: 데이터 접근 경로가 새로운 타입 구조에 맞게 정확히 변경되었습니다.
option.answers에서option.ticketOptionAnswers로 변경한 것이 새로운TicketOption타입의 속성명과 일치합니다.
31-31: React key 유니크성 개선이 우수합니다.
option.optionId만 사용하던 것에서${option.optionId}-${index}로 변경하여 key의 유니크성을 보장한 것이 좋습니다. 이는 동일한optionId를 가진 항목들이 있을 경우 발생할 수 있는 React 렌더링 이슈를 방지합니다.src/features/dashboard/ui/ResponsesList.tsx (4)
3-3: 타입 import 변경이 올바르게 적용되었습니다.새로운
TicketOption타입 정의에 맞춰 import가 정확히 업데이트되었습니다.
10-10: props 타입 정의가 새로운 데이터 구조와 일치합니다.
ticketOptionResponses의 타입이TicketOption[]로 변경되어 리팩토링된 타입 정의와 일관성을 유지합니다.
26-26: 함수 파라미터 타입이 올바르게 업데이트되었습니다.
renderTextResponses함수의 파라미터 타입이 새로운TicketOption[]타입과 일치하도록 변경되었습니다.
32-53: 프로퍼티 접근 방식이 새로운 타입 정의와 일치하도록 올바르게 변경되었습니다.
answers에서ticketOptionAnswers로 프로퍼티 이름이 변경되어 새로운TicketOption타입 정의와 일관성을 유지합니다. 또한 key에 index를 추가하여 고유성을 보장한 것도 좋은 개선사항입니다.src/features/ticket/model/ticketInformation.ts (2)
48-53: 새로운 TicketOption 타입 정의가 잘 구조화되었습니다.개별 티켓 옵션을 나타내는 명확한 타입으로,
ticketOptionAnswers프로퍼티명이 목적을 잘 표현하고 있습니다. 타입 안전성과 가독성이 향상되었습니다.
54-57: TicketOptionAnswerResponse 타입이 전체 응답 구조를 명확히 나타냅니다.
orderCount와ticketOptions배열을 포함한 구조로, API 응답의 전체적인 형태를 잘 표현하고 있습니다. 기존 타입을 두 개로 분리한 것은 단일 책임 원칙에 부합하는 좋은 설계입니다.
2 participants
티켓 종류에 맞게 UI 수정/체크박스 삭제/시간 형식 수정/승인 API 테스트
체크인, 미승인 수
응답 개수 수정
검색 기능 구현