Conversation
|
""" Walkthrough이 변경 사항들은 이벤트 삭제, 호스트 삭제 및 초대, 티켓 QR 코드 검증 등에서 발생하는 에러 처리의 타입을 구체화하고, 에러 코드에 따라 사용자에게 더 명확한 알림을 제공하도록 개선되었습니다. 또한, 관련 타입 인터페이스가 신설되었으며, 일부 스타일 및 포맷팅 정비가 이루어졌습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI_Component
participant Mutation_Hook
participant API
User->>UI_Component: 삭제/초대/QR 검증 요청
UI_Component->>Mutation_Hook: mutate() 호출
Mutation_Hook->>API: API 요청
API-->>Mutation_Hook: 성공/에러 응답 (code, message 포함)
alt 성공
Mutation_Hook-->>UI_Component: 성공 콜백 실행
UI_Component-->>User: 성공 알림/처리
else 에러 (특정 code)
Mutation_Hook-->>UI_Component: onError 콜백 실행 (code 확인)
UI_Component-->>User: code별 맞춤 알림
else 에러 (기타)
Mutation_Hook-->>UI_Component: onError 콜백 실행 (기본 메시지)
UI_Component-->>User: 기본 에러 알림
end
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/entities/event/hook/useEventHook.ts(2 hunks)src/entities/event/model/event.ts(1 hunks)src/features/host/hook/useHostHook.ts(2 hunks)src/features/host/hook/useHostInvitation.ts(1 hunks)src/features/host/hook/useInviteHostHook.ts(1 hunks)src/features/host/model/host.ts(1 hunks)src/features/host/model/hostInvitation.ts(1 hunks)src/features/ticket/hooks/useOrderHook.ts(1 hunks)src/features/ticket/ui/QrScanner.tsx(1 hunks)src/pages/menu/ui/MyTicketPage.tsx(1 hunks)
🧰 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 명세의 불일치로 인한 의도적인 차이입니다.
🧬 Code Graph Analysis (6)
src/features/ticket/ui/QrScanner.tsx (1)
src/features/ticket/hooks/useOrderHook.ts (1)
useTicketQrCodeValidate(51-68)
src/features/host/hook/useHostInvitation.ts (1)
src/features/host/model/hostInvitation.ts (2)
HostInvitationResponse(5-9)HostInvitationRequest(1-3)
src/features/host/hook/useHostHook.ts (3)
src/shared/types/api/apiResponse.ts (1)
ApiResponse(1-5)src/features/host/model/host.ts (2)
HostCreationRequest(1-6)HostDeletionResponse(15-18)src/features/host/api/host.ts (2)
createHost(4-7)deleteHost(14-17)
src/entities/event/hook/useEventHook.ts (3)
src/shared/types/api/apiResponse.ts (1)
ApiResponse(1-5)src/entities/event/model/event.ts (1)
EventDeletionResponse(1-4)src/entities/event/api/event.ts (1)
eventDeletion(86-89)
src/features/host/hook/useInviteHostHook.ts (1)
src/features/host/api/hostInvitation.ts (1)
inviteMember(4-7)
src/features/ticket/hooks/useOrderHook.ts (1)
src/features/ticket/api/order.ts (1)
ticketQrCode(34-40)
🪛 ESLint
src/features/ticket/hooks/useOrderHook.ts
[error] 57-57: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
🔇 Additional comments (17)
src/pages/menu/ui/MyTicketPage.tsx (1)
15-15: Import 순서 정리가 적절합니다.기능적 변경 없이 import 구문의 순서만 정리된 변경사항으로 문제없습니다.
src/features/host/model/host.ts (1)
15-18: 에러 응답 타입 정의가 잘 구성되었습니다.
HostDeletionResponse인터페이스가 에러 핸들링의 타입 안정성을 향상시키며, 다른 도메인의 응답 인터페이스와 일관된 구조를 가지고 있습니다.src/entities/event/model/event.ts (1)
1-4: 에러 응답 타입이 일관되게 정의되었습니다.
EventDeletionResponse인터페이스가 호스트 삭제 응답과 동일한 구조로 정의되어 일관성 있는 에러 핸들링 패턴을 유지하고 있습니다.src/features/ticket/hooks/useOrderHook.ts (1)
53-53: mutationFn 포맷팅이 개선되었습니다.매개변수 구조분해할당을 한 줄로 정리하여 가독성이 향상되었습니다.
src/features/ticket/ui/QrScanner.tsx (1)
1-77: 코드 포맷팅이 일관성 있게 개선되었습니다.쌍따옴표를 홑따옴표로 변경하고 들여쓰기를 정리하여 코드 스타일의 일관성이 향상되었습니다. 기능적 변경사항은 없으며,
useTicketQrCodeValidate훅의 개선된 에러 핸들링 혜택을 받게 됩니다.src/features/host/model/hostInvitation.ts (1)
5-9: 새로운 응답 인터페이스 추가가 적절합니다.
HostInvitationResponse인터페이스가 다른 도메인의 응답 인터페이스(EventDeletionResponse,HostDeletionResponse)와 일관된 구조를 가지고 있어 코드베이스 전체의 일관성을 향상시킵니다.src/entities/event/hook/useEventHook.ts (2)
7-8: 타입 임포트 추가가 적절합니다.
AxiosError와EventDeletionResponse임포트를 통해 더 구체적인 에러 타입 지정이 가능해졌습니다.
28-28: 에러 타입 개선이 우수합니다.제네릭
Error타입에서AxiosError<EventDeletionResponse>로 변경하여 타입 안전성이 크게 향상되었습니다.src/features/host/hook/useHostInvitation.ts (2)
2-4: 임포트 변경이 적절합니다.
ApiResponse제거와HostInvitationResponse,AxiosError추가로 더 구체적인 타입 지정이 가능해졌습니다.
7-7: mutation 타입 개선이 우수합니다.제네릭 타입들을 더 구체적으로 지정하여 타입 안전성이 향상되었습니다. 특히
AxiosError<HostInvitationResponse>를 사용하여 에러 응답의 구조를 명확히 정의했습니다.src/features/host/hook/useHostHook.ts (4)
2-5: 임포트 변경이 적절합니다.
HostDeletionResponse와AxiosError임포트 추가로 더 정확한 타입 지정이 가능해졌습니다.
12-14: 코드 포맷팅 개선입니다.에러 로깅 부분의 포맷팅이 개선되었습니다.
26-26: 에러 타입 개선이 우수합니다.
AxiosError<HostDeletionResponse>타입 사용으로 타입 안전성이 향상되었습니다.
30-37: 호스트 에러 코드 처리 확인 완료
현재HOST_CHANNEL4002와HOST_CHANNEL4005만 정의되어 있으며, 안전한 null 체크가 적용되어 있습니다.
- 파일: src/features/host/hook/useHostHook.ts (30–37줄)
추가로 사용자 경험을 위해
alert대신 모달 또는 토스트 같은 UI 컴포넌트 사용을 고려해 보세요.src/features/host/hook/useInviteHostHook.ts (3)
16-16: Promise 타입 명시가 좋습니다.
Promise<void>타입을 명시적으로 지정하여 타입 안전성을 향상시켰습니다.
20-21: 콜백 호출 방식 개선이 우수합니다.직접 콜백을 전달하는 대신 명시적으로
resolve()와reject(error)를 호출하는 방식으로 변경하여 코드의 의도가 더 명확해졌습니다.
27-50: Promise 처리 로직 개선이 매우 우수합니다.
Promise.all에서Promise.allSettled로 변경하여 하나의 실패로 인해 전체가 중단되지 않도록 개선했습니다. 에러 메시지 추출 로직도 AxiosError, 일반 Error, 기본 메시지 순으로 폴백을 제공하여 견고합니다.이러한 변경으로:
- 부분 실패 시에도 성공한 초대들이 처리됩니다
- 사용자에게 더 구체적인 에러 메시지를 제공합니다
- 에러 처리가 더 예측 가능하고 안정적입니다
| onError: error => { | ||
| const code = error.response?.data?.code; | ||
|
|
||
| if (code === 'EVENT4002') { | ||
| const message = error.response?.data?.message || '알 수 없는 오류가 발생했습니다.'; | ||
| alert(message); | ||
| } | ||
| }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
특정 에러 코드 처리 로직을 검토해주세요.
에러 응답 구조에 대한 안전한 접근과 특정 에러 코드(EVENT4002) 처리가 잘 구현되었습니다. 다만 사용자 경험 측면에서 alert 사용을 토스트나 모달 등의 더 나은 UI 컴포넌트로 대체하는 것을 고려해보세요.
다음 스크립트로 다른 에러 코드들도 처리가 필요한지 확인해보세요:
🏁 Script executed:
#!/bin/bash
# 이벤트 관련 API에서 반환될 수 있는 다른 에러 코드들 검색
rg -A 3 -B 3 "EVENT[0-9]+" --type tsLength of output: 1054
이벤트 에러 코드 처리 검증 및 UX 개선 제안
- 코드베이스 전역에서
EVENT[0-9]+패턴을 검색한 결과, 대응 로직이 필요한 에러 코드는 현재EVENT4002하나뿐입니다. - 해당 코드(
EVENT4002)는src/entities/event/hook/useEventHook.ts(onError 콜백)src/shared/ui/EventCard.tsx(삭제 불가 경고)
두 곳에서 일관되게 처리되고 있음을 확인했습니다.
→ 추가 처리해야 할 다른 에러 코드는 없습니다.
다만, 사용자 경험 측면에서
alert호출 대신 토스트(Toast)나 모달(Modal) 같은 비차단 UI 컴포넌트로 교체할 것을 권장드립니다.
🤖 Prompt for AI Agents
In src/entities/event/hook/useEventHook.ts around lines 32 to 39, the onError
callback currently uses alert to notify users of the EVENT4002 error. To improve
user experience, replace the alert call with a non-blocking UI component such as
a toast notification or modal dialog. Implement this by integrating the existing
toast or modal system used in the project, ensuring the error message is
displayed in a user-friendly, non-intrusive manner.
2 participants
Summary by CodeRabbit
버그 수정
스타일
기타