Conversation
Walkthrough이 PR은 UI 스타일 수정, API 기능 추가 및 데이터 구조 개선을 포함합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant P as EventDetailsPage
participant API as readEventDetail
participant S as State (event)
P->>API: readEventDetail(eventId) 호출
API-->>P: 이벤트 상세 데이터 반환
P->>S: event state 업데이트
S-->>P: 조건부 렌더링으로 업데이트된 이벤트 표시
sequenceDiagram
participant T as TicketInfo
participant API as readTicket.getAll
participant S as State (tickets & quantity)
T->>API: readTicket.getAll(eventId) 호출
API-->>T: 티켓 데이터 반환
T->>S: tickets state 업데이트
T->>S: 각 티켓에 대해 수량(1) 초기화
Suggested reviewers
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (10)
src/features/event-manage/event-create/api/event.ts (1)
9-12: 이벤트 상세 조회 함수 추가가 좋아 보입니다.새로운
readEventDetail함수가 추가되어 이벤트 상세 정보를 조회할 수 있게 되었습니다. 함수 구현이 간결하고 명확합니다.다만, 다음과 같은 개선사항을 고려해 보시면 좋을 것 같습니다:
- 반환 타입을 명시하면 타입 안전성이 향상됩니다.
- 에러 처리 로직을 추가하면 더 견고한 코드가 될 수 있습니다.
-export const readEventDetail = async (eventId: number) => { +export const readEventDetail = async (eventId: number): Promise<EventDetailResponse> => { const response = await axiosClient.get(`/events/${eventId}`); return response.data; };여기서
EventDetailResponse인터페이스를 정의하여 API 응답 구조를 명확히 할 수 있습니다.design-system/ui/modals/QrModal.tsx (1)
69-74: IconText 컴포넌트의 children 사용 방식 개선이 필요합니다.React에서 children을 전달하는 표준 방식은 props로 전달하는 것이 아니라 JSX 요소 내부에 배치하는 것입니다. 현재 코드를 다음과 같이 수정하면 React의 관행에 더 적합하게 됩니다:
-<IconText - size="xSmall" - iconPath={<img src={qr_calendar} alt="qr_calendar" className='mr-1'/>} - children={formattedDate} - className="text-11" -></IconText> +<IconText + size="xSmall" + iconPath={<img src={qr_calendar} alt="qr_calendar" className='mr-1'/>} + className="text-11" +> + {formattedDate} +</IconText>다른 IconText 컴포넌트들도 같은 방식으로 수정하는 것이 좋습니다.
Also applies to: 75-80, 81-86, 89-94, 95-100
src/widgets/event/ui/OrganizerInfo.tsx (2)
19-20: 전화번호 표시 로직
전화번호가 표기되지 않을 경우에 대한 예외 처리가 필요할지 검토해보세요.
23-24: 이메일 표시 로직
이메일도 마찬가지로 필드가 비어있을 때 예외 처리가 필요할 수 있습니다.src/widgets/event/ui/TicketInfo.tsx (3)
7-7: 컴포넌트 시그니처
({ eventId }: { eventId: number })형태로 필요한 데이터를 명시적으로 전달받도록 변경되어 유지보수성이 향상되었습니다.
12-27: 티켓 목록 불러오기 로직
readTicket.getAll(eventId)호출 시 에러 처리 후setTickets([])로 대체하는 접근은 안전합니다. 필요하다면 로딩 상태 여부도 별도로 관리해보는 것을 고려해보세요.
28-36: 초기 수량 설정 로직
티켓을 불러온 뒤 자동으로 수량을 1로 맞추는 구조가 합리적입니다. 다만, 다량의 티켓이 있을 경우 성능을 고려해야 할 수도 있습니다.src/pages/event/ui/EventDetailsPage.tsx (2)
20-41: 이벤트 상세 타입 정의
ReadEvent인터페이스로 이벤트 구조를 명확히 기술했습니다. 다만, 실제 API가 여러 링크를 반환한다면referenceLinks의 배열화 등 확장 가능성도 고려해 주세요.
93-158: 이벤트 상세 화면 렌더링
이벤트가 존재할 때와 로딩 중일 때를 구분하는 조건부 렌더링이 깔끔합니다. 다만,event.location이나 배너 URL 등이 비어 있을 때의 예외 처리도 신중히 고려해 주세요.src/pages/menu/ui/MyTicketPage.tsx (1)
42-42: 개발용 console.log 제거 필요프로덕션 코드에 디버깅용 console.log가 남아있습니다. 배포 전에 제거하는 것이 좋습니다.
- console.log(response.result);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
design-system/ui/modals/QrModal.tsx(1 hunks)src/features/event-manage/event-create/api/event.ts(1 hunks)src/features/ticket/api/order.ts(1 hunks)src/pages/event/ui/EventDetailsPage.tsx(4 hunks)src/pages/menu/ui/MyTicketPage.tsx(4 hunks)src/shared/ui/EventCard.tsx(1 hunks)src/widgets/event/ui/OrganizerInfo.tsx(1 hunks)src/widgets/event/ui/TicketInfo.tsx(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/pages/event/ui/EventDetailsPage.tsx (1)
src/features/event-manage/event-create/api/event.ts (1)
readEventDetail(9-12)
🪛 Biome (1.9.4)
design-system/ui/modals/QrModal.tsx
[error] 76-76: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 82-82: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 87-87: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 94-95: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🔇 Additional comments (19)
design-system/ui/modals/QrModal.tsx (1)
71-71: 아이콘에 여백 추가로 UI가 개선되었습니다.각 아이콘 이미지에
mr-1클래스를 추가하여 오른쪽 여백을 적용한 것이 일관성 있게 적용되었습니다. 이를 통해 아이콘과 텍스트 사이의 간격이 적절해져 가독성이 향상됩니다.Also applies to: 77-77, 83-83, 91-91, 97-97
src/shared/ui/EventCard.tsx (1)
53-53: 해시태그 렌더링 로직 개선 - 안전한 처리 방식으로 변경hashtags 값이 null이나 undefined일 경우에도 오류 없이 동작하도록 nullish coalescing 연산자(
??)를 추가한 것은 좋은 개선입니다. 이를 통해 코드의 견고성이 향상되고 예상치 못한 런타임 오류를 방지할 수 있습니다.src/features/ticket/api/order.ts (1)
3-8:Details
❓ Verification inconclusive
에러 처리 로직 제거에 대한 검토 필요
readMyTickets.get메소드에서 에러 처리 로직이 제거되었습니다. 이로 인해 API 호출 중 발생하는 오류가 직접 호출자에게 전파됩니다.이러한 변경이 의도적인 것인지 확인하고, 상위 레벨에서 적절한 에러 처리가 구현되어 있는지 확인하는 것이 좋습니다. 일반적으로 API 호출 레벨에서 기본적인 에러 처리를 제공하는 것이 견고한 애플리케이션 구축에 도움이 됩니다.
🏁 Script executed:
#!/bin/bash # 이 애플리케이션에서 API 에러 처리가 어떻게 구현되어 있는지 확인 echo "API 에러 처리 패턴 검색:" rg "try\s*{.*axiosClient" -A 10 --type ts echo "\n전역 에러 핸들링 검색:" rg "catch\s*\(" -A 5 --type ts -g "*/shared/*.ts"Length of output: 438
검증 요청: 전역 에러 핸들링 확인 필요
현재
src/features/ticket/api/order.ts파일의get메소드에서는 try/catch 블록이나 기타 에러 처리 로직 없이 API 호출 결과를 바로 반환하고 있습니다. 이로 인해, axios 호출 시 발생하는 오류가 상위 호출자로 전파됩니다. 글로벌 에러 핸들링(예: axios 인터셉터 또는 전역 catch 블록)이 존재하는지, 또는 의도적으로 해당 메소드 내에서 에러 처리를 제거한 것인지 명확하지 않습니다.
- 해당 파일(
src/features/ticket/api/order.ts)의get메소드에 try/catch나 에러 처리 로직이 제거되었습니다.- 제공된 검색 스크립트에서는 글로벌 에러 핸들링이 적용된 코드(예:
catch()구문 등)를 찾지 못했습니다.- 이 변경사항이 의도된 것인지, 아니면 상위 레벨에서 에러 처리를 보완하는 구조인지 추가 확인이 필요합니다.
추가 검증 후, 의도된 변경사항이라면 글로벌 에러 핸들링 로직이 제대로 구현되어 있는지, 아니라면 해당 메소드 수준에서 에러 처리를 재도입하는 것을 검토해주시기 바랍니다.
src/widgets/event/ui/OrganizerInfo.tsx (4)
1-2: 이미지 임포트 확인
해당 이미지 경로가 정상적으로 동작하며 의미 있는alt텍스트가 제공되어 있어 좋습니다.
4-9: Props 인터페이스 정의
OrganizerInfoProps를 통해 컴포넌트에 필요한 모든 필드를 명시적으로 정의해두어 가독성과 유지보수성이 향상되었습니다.
11-11: 컴포넌트 시그니처 개선
props로 필요한 데이터를 받도록 작성되어 재사용성이 높아졌습니다.
16-17: 주최자 정보 출력
name과description이 명확히 표기되어 사용자 입장에서 이해하기 좋습니다.src/widgets/event/ui/TicketInfo.tsx (6)
1-1: React 훅 임포트
useEffect,useState훅을 적절히 사용하기 위한 임포트가 잘 추가되었습니다.
4-4: API 모듈 임포트
readTicket함수를 불러오는 임포트가 정상적으로 추가되었습니다.
5-5: 타입 임포트
ReadTicket타입 임포트를 통해 API 결과를 명확히 처리하는 점이 좋습니다.
9-10: State 변수 선언
tickets와quantity를 분리하여 관리하는 구조가 직관적입니다. 티켓별 수량 관리를 유연하게 처리할 수 있습니다.
53-54: 티켓 정보 렌더링
tickets.map(ticket => ...)구조가 깔끔합니다. key로ticket.ticketId를 사용해 중복 없이 렌더링하는 점도 적절합니다.
71-77: 수량 조절 핸들러
handleDecrement와handleIncrement에서 최소·최대 제한을 두어 의도치 않은 값이 들어가길 막는 로직이 잘 짜여 있습니다.src/pages/event/ui/EventDetailsPage.tsx (2)
13-18: 새로운 임포트 추가
readEventDetail,participantsImg,dateImg,timeImg,locationImg,KakaoMap등 이벤트 상세 화면에 필요한 리소스들이 잘 임포트되었습니다.
71-81: 이벤트 상세 요청 로직
readEventDetail함수가 반환하는 데이터 구조와setEvent(response.result)사용이 일치하는지 확인이 필요합니다. API 응답 구조가 다를 경우response.data등을 처리하도록 수정해야 합니다.src/pages/menu/ui/MyTicketPage.tsx (4)
13-30: Ticket 타입의 구조 개선이 잘 이루어졌습니다.이벤트 관련 속성들을
event객체로 그룹화하여 코드의 가독성과 유지보수성이 향상되었습니다. 또한hashtags를 빈 배열에서 string 배열로 변경하고,onlineType을 유니온 타입으로 추가한 것은 타입 안정성 측면에서 좋은 개선입니다.
57-63: event 객체를 통한 속성 접근이 잘 적용되었습니다.Ticket 타입 변경에 따라 EventCard 컴포넌트에 전달되는 속성들이
ticket.event.*로 올바르게 업데이트되었습니다.
93-97: QrModal 컴포넌트에도 event 객체를 통한 속성 접근이 잘 적용되었습니다.Ticket 타입 변경에 따라 QrModal 컴포넌트에 전달되는 속성들이
selectedTicket.event.*로 올바르게 업데이트되었습니다.Also applies to: 102-102
86-107: 하나의 티켓만 선택 가능한 모달 확인현재 구현에서는 한 번에 하나의 티켓만 QrModal에 표시할 수 있습니다. 이는 의도된 동작인지, 아니면 여러 티켓을 한 번에 볼 수 있는 기능이 필요한지 확인해보세요.
| const [event, setEvent] = useState<ReadEvent | null>(null); | ||
| const eventId = 1; //수정 필요 |
There was a problem hiding this comment.
🛠️ Refactor suggestion
하드코딩된 이벤트 ID
현재 eventId 값이 1로 고정되어 있습니다. 추후 라우트 파라미터 등을 통해 동적으로 받아오도록 개선이 필요합니다.
| remainDays: string; | ||
| ticketPrice: number; | ||
| ticketQrCode: string; | ||
| orderStatus: "COMPLETED" | "PENDING" | "CANCELED"; |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
취소된 티켓 상태 처리 필요
orderStatus에 "CANCELED" 상태가 정의되어 있지만, UI에서는 완료("COMPLETED")와 대기 중("PENDING") 상태만 처리하고 있습니다. 취소된 티켓의 표시 방법도 구현해야 합니다.
69-80줄의 렌더링 로직에서 취소된 티켓에 대한 처리가 누락되어 있습니다. 아래 코드가 필요할 수 있습니다:
🏁 Script executed:
#!/bin/bash
# 프로젝트 내에서 취소된 티켓 상태를 처리하는 로직이 존재하는지 확인
rg "CANCELED.*orderStatus" --type tsLength of output: 38
취소된 티켓 상태 UI 처리 추가 필요
orderStatus타입에 "CANCELED" 상태가 포함되어 있으나, 현재src/pages/menu/ui/MyTicketPage.tsx파일의 렌더링 로직(대략 69-80줄)에서는 "CANCELED" 상태에 대한 처리가 누락되어 있습니다.- 취소된 티켓에 대해 별도의 UI 처리를 추가해 주시기 바랍니다. 예를 들어, 아래와 같이 분기 처리를 추가하는 것을 고려해 보세요:
{orderStatus === "CANCELED" && (
// 취소된 티켓에 대한 UI 처리 로직 추가
)}해당 변경이 다른 컴포넌트나 페이지와 연계되어 있는지 추가 검토하시고, 필요한 부분에 반영해 주시기 바랍니다.
2 participants
이벤트 상세 조회 페이지 API 연동
티켓 조회 API 연동
카카오맵 추가
Summary by CodeRabbit