Conversation
|
""" Walkthrough이 PR은 약관 동의, 티켓 취소, 입력 폼 검증, 시간 선택, UI 개선 등 다양한 기능을 추가 및 개선합니다. 여러 컴포넌트와 API 함수의 인터페이스가 확장되었으며, 상태 관리와 유효성 검증 로직이 강화되었습니다. 일부 UI는 사용자 경험을 위해 레이아웃과 스타일이 변경되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant 사용자
participant AgreementPage
participant agreementStore
participant useAgreeTerms
participant agreeTerms API
participant 라우터
사용자->>AgreementPage: "다음" 버튼 클릭
AgreementPage->>agreementStore: getAgreementStates()
AgreementPage->>useAgreeTerms: agreeTerms.mutate(동의 데이터)
useAgreeTerms->>agreeTerms API: POST /terms (동의 데이터)
agreeTerms API-->>useAgreeTerms: 응답
useAgreeTerms-->>AgreementPage: onSuccess 콜백
AgreementPage->>라우터: /join/info-input로 이동
sequenceDiagram
participant 사용자
participant MyTicketPage
participant useCancelTicket
participant cancelTickets API
사용자->>MyTicketPage: 티켓 취소 버튼 클릭
MyTicketPage->>useCancelTicket: cancelTicket(orderIds)
useCancelTicket->>cancelTickets API: POST /orders/cancel (orderIds)
cancelTickets API-->>useCancelTicket: 응답
useCancelTicket-->>MyTicketPage: onSuccess/onError 콜백
MyTicketPage->>MyTicketPage: 티켓 목록 갱신/알림 표시
Possibly related PRs
Suggested labels
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: 10
🧹 Nitpick comments (6)
src/shared/hooks/useImageUpload.ts (1)
21-23: useEffect 의존성 및 이펙트 분리 고려
previewUrl !== basicProfile체크를 위해previewUrl를 의존성 배열에 포함했는데, 이로 인해value나useDefaultImage가 변하지 않아도 불필요한 이펙트가 실행될 수 있습니다. 기본 이미지는 컴포넌트 마운트 시 한 번만 설정해도 충분하니, 이펙트를 분리하거나 의존성에서previewUrl를 제거하여 re-render를 최적화하는 방안을 제안드립니다.src/shared/lib/date.ts (1)
24-37: 시간대 변환 로직이 정확하지만 개선 가능합니다.UTC에서 KST로의 변환 로직과 한국어 포맷팅이 올바르게 구현되었습니다. 다만 더 안전하고 표준적인 방법으로 개선할 수 있습니다.
다음과 같이
Intl.DateTimeFormat을 사용하면 더 안전하고 표준적입니다:export const formatUtcToKst = (utcString: string): string => { - const utcDate = new Date(utcString); - - const kstTimestamp = utcDate.getTime() + 9 * 60 * 60 * 1000; - const kstDate = new Date(kstTimestamp); - - const year = kstDate.getFullYear(); - const month = (kstDate.getMonth() + 1).toString().padStart(2, '0'); - const day = kstDate.getDate().toString().padStart(2, '0'); - const hours = kstDate.getHours().toString().padStart(2, '0'); - const minutes = kstDate.getMinutes().toString().padStart(2, '0'); - - return `${year}년 ${month}월 ${day}일 ${hours}:${minutes}`; + const utcDate = new Date(utcString); + + return new Intl.DateTimeFormat('ko-KR', { + timeZone: 'Asia/Seoul', + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + hour12: false + }).format(utcDate).replace(/\. /g, '년 ').replace(/\. /g, '월 ').replace(/\./, '일'); };src/pages/event/ui/create-event/EventInfoPage.tsx (1)
23-26: useEffect dependency 배열 최적화가 필요합니다.
onValidationChange를 dependency 배열에 포함하면 부모 컴포넌트가 리렌더링될 때마다 불필요하게 이 useEffect가 실행될 수 있습니다.useCallback을 사용하여 최적화하거나 dependency에서 제외하는 것을 고려해보세요:
useEffect(() => { const allValid = isFileValid && isTextValid; onValidationChange?.(allValid); -}, [isFileValid, isTextValid, onValidationChange]); +}, [isFileValid, isTextValid]);또는 부모 컴포넌트에서
onValidationChange를 useCallback으로 감싸는 방법도 있습니다.src/features/join/ui/AgreementList.tsx (1)
6-6: 약관 링크 URL을 환경 변수로 관리하는 것을 고려해보세요.하드코딩된 URL보다는 환경 변수나 설정 파일에서 관리하는 것이 더 유연한 접근법입니다.
- const NOTION_TERMS_LINK = 'https://namu00.notion.site/1a5eaffb9b0e8196b408f986b13aa15d?source=copy_link'; + const NOTION_TERMS_LINK = process.env.REACT_APP_TERMS_LINK || 'https://namu00.notion.site/1a5eaffb9b0e8196b408f986b13aa15d?source=copy_link';src/pages/join/AgreementPage.tsx (1)
7-8: 타입명 오타 확인 필요import 구조는 적절하지만
TermsAgreementRequset에 오타가 있는 것 같습니다.Request가 맞는 것 같습니다.-import { TermsAgreementRequset } from '../../features/join/model/userInformation'; +import { TermsAgreementRequest } from '../../features/join/model/userInformation';design-system/ui/modals/QrModal.tsx (1)
83-83: React children prop 사용 방식 개선 필요정적 분석 도구가 지적한 대로, React에서는
childrenprop보다는 JSX 요소를 직접 사용하는 것이 권장됩니다.다음과 같이 수정하는 것을 권장합니다:
<IconText size="xSmall" iconPath={<img src={qr_calendar} alt="qr_calendar" className='mr-1' />} - children={formattedDate} className="text-11" -></IconText> +> + {formattedDate} +</IconText>다른
IconText컴포넌트들도 동일하게 적용해주세요.Also applies to: 89-89, 95-95, 103-103, 109-109
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
design-system/ui/modals/QrModal.tsx(3 hunks)design-system/ui/textFields/UnderlineTextField.tsx(1 hunks)design-system/ui/texts/Countdown.tsx(1 hunks)src/features/event/ui/EventFunnel.tsx(2 hunks)src/features/event/ui/TextEditor.tsx(3 hunks)src/features/event/ui/TimePicker.tsx(1 hunks)src/features/join/api/user.ts(2 hunks)src/features/join/hooks/useUserHook.ts(2 hunks)src/features/join/model/agreementStore.ts(2 hunks)src/features/join/model/userInformation.ts(1 hunks)src/features/join/ui/AgreementList.tsx(2 hunks)src/features/ticket/api/order.ts(1 hunks)src/features/ticket/hooks/useOrderHook.ts(1 hunks)src/pages/dashboard/ui/mail/EmailEditPage.tsx(1 hunks)src/pages/dashboard/ui/ticket/TIcketConfirmPage.tsx(2 hunks)src/pages/event/ui/EventDetailsPage.tsx(1 hunks)src/pages/event/ui/create-event/EventInfoPage.tsx(1 hunks)src/pages/join/AgreementPage.tsx(2 hunks)src/pages/join/InfoInputPage.tsx(1 hunks)src/pages/menu/ui/MyTicketPage.tsx(4 hunks)src/pages/menu/ui/myHost/HostDetailPage.tsx(2 hunks)src/shared/hooks/useImageUpload.ts(2 hunks)src/shared/lib/date.ts(1 hunks)src/shared/ui/AgreementCard.tsx(2 hunks)src/shared/ui/backgrounds/EventRegisterLayout.tsx(3 hunks)src/widgets/dashboard/ui/email/SentMailCard.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/features/join/api/user.ts (2)
src/features/join/model/userInformation.ts (1)
TermsAgreementRequset(14-19)src/shared/types/api/http-client.ts (1)
axiosClient(6-13)
src/features/ticket/api/order.ts (1)
src/shared/types/api/http-client.ts (1)
axiosClient(6-13)
src/features/join/hooks/useUserHook.ts (1)
src/features/join/api/user.ts (1)
agreeTerms(19-24)
src/pages/join/AgreementPage.tsx (2)
src/features/join/api/user.ts (1)
agreeTerms(19-24)src/features/join/model/userInformation.ts (1)
TermsAgreementRequset(14-19)
🪛 Biome (1.9.4)
design-system/ui/modals/QrModal.tsx
[error] 88-88: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 94-94: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 98-98: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 107-107: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (47)
src/shared/hooks/useImageUpload.ts (1)
3-3: 퍼블릭 자산 가져오기 방식 검토 필요
public 디렉토리의 이미지를 import하는 방식이 번들러 설정에 따라 오류를 일으킬 수 있습니다. Next.js를 사용하는 경우 public 폴더 내 파일은 import가 아닌 절대 URL(/assets/...)로 참조해야 합니다. 현재 프로젝트의 빌드 설정에서 PNG 파일 import가 정상 작동하는지 확인해주세요.src/features/event/ui/TextEditor.tsx (3)
11-11: 검증 콜백 타입 정의가 적절합니다.새로운
onValidationChangeprop이 올바르게 타입 정의되었습니다.
14-14: 상수 정의가 명확합니다.문자 수 제한을 상수로 정의하여 유지보수성을 높였습니다.
112-121: 문자 수 표시 및 경고 메시지 UI가 잘 구현되었습니다.사용자 경험을 위한 실시간 문자 수 표시와 제한 초과 시 경고 메시지가 적절하게 구현되었습니다.
src/pages/event/ui/create-event/EventInfoPage.tsx (3)
5-5: 필요한 React hooks가 적절히 import되었습니다.useState와 useEffect가 추가로 import되어 새로운 기능 구현에 필요한 의존성이 준비되었습니다.
13-22: 검증 상태 관리가 명확하게 구현되었습니다.파일과 텍스트 검증을 위한 별도의 상태와 핸들러 함수들이 관심사의 분리 원칙에 따라 잘 구성되었습니다.
30-31: 자식 컴포넌트에 검증 핸들러가 올바르게 전달되었습니다.FileUpload와 TextEditor 컴포넌트에 각각의 검증 핸들러가 적절히 전달되어 검증 상태를 부모가 통합 관리할 수 있게 되었습니다.
src/pages/dashboard/ui/mail/EmailEditPage.tsx (1)
49-49: TimePicker 초기값 설정이 올바르게 구현되었습니다.기존 예약 날짜를 TimePicker의 초기값으로 전달하여 사용자가 현재 설정된 시간을 확인할 수 있게 되었습니다. 편집 페이지의 사용자 경험이 개선되었습니다.
src/widgets/dashboard/ui/email/SentMailCard.tsx (1)
4-4: 날짜 포맷팅 로직 통합이 잘 되었습니다.
formatDate와formatTime을 분리해서 사용하던 것을 단일 함수formatUtcToKst로 통합한 것은 좋은 리팩토링입니다. 코드 중복을 제거하고 UTC-KST 변환 로직의 일관성을 확보했습니다.Also applies to: 41-41
src/features/event/ui/EventFunnel.tsx (4)
15-15: 타입 임포트가 적절합니다.
HostCreationRequest타입을 추가로 임포트하여 상태 초기화에 사용하는 것이 좋습니다.
19-19: 상태 관리 함수 추출이 적절합니다.
setHostState를 추출하여 호스트 생성 후 상태 초기화에 사용하는 것이 좋은 접근입니다.
37-42: 초기 상태 정의가 명확합니다.
initialHostState상수를 정의하여 폼 리셋에 사용하는 것이 좋습니다. 빈 문자열로 초기화하는 것도 적절합니다.
47-47: 폼 상태 리셋 로직이 좋습니다.호스트 생성 성공 후 폼 상태를 초기화하는 것은 좋은 UX 개선입니다. 사용자가 다시 폼을 사용할 때 이전 데이터가 남아있지 않게 됩니다.
src/features/event/ui/TimePicker.tsx (3)
6-6: value prop 추가가 적절합니다.선택적
valueprop을 추가하여 기존 예약 시간을 표시할 수 있게 한 것이 좋은 개선입니다.
10-14: 🛠️ Refactor suggestion타임존 변환 로직에 개선이 필요합니다.
수동으로 9시간을 더하는 방식은 DST(일광절약시간) 고려가 없어 부정확할 수 있습니다.
더 안전한 타임존 변환을 위해 다음 방법들을 고려해보세요:
-const parseUtcToKst = (utcString: string): Date => { - const utcDate = new Date(utcString); - const kstTimestamp = utcDate.getTime() + 9 * 60 * 60 * 1000; - return new Date(kstTimestamp); -}; +const parseUtcToKst = (utcString: string): Date => { + const utcDate = new Date(utcString); + // 로컬 시간대가 KST인 환경에서는 직접 사용 + return utcDate; +};또는 date-fns나 dayjs 같은 라이브러리의 타임존 지원을 사용하는 것을 권장합니다.
Likely an incorrect or invalid review comment.
17-24:Details
❓ Verification inconclusive
초기 상태 설정 로직을 검증해주세요.
parseUtcToKst함수를 사용한 초기 상태 설정이 올바른지 확인이 필요합니다. 특히 KST 변환 후 시간과 분 추출이 의도한 대로 작동하는지 테스트해보세요.다음 스크립트로 타임존 변환 로직의 정확성을 확인해보세요:
🏁 Script executed:
#!/bin/bash # Description: UTC to KST 변환 로직의 정확성 확인 # 타임존 관련 로직이 있는 다른 파일들을 찾아보기 rg -A 5 -B 5 "formatUtcToKst|parseUtcToKst|KST|UTC"Length of output: 125053
초기 KST 변환 로직 검증 필요
rg검색 결과parseUtcToKst정의·사용처가 나타나지 않았습니다. 해당 함수가 올바른 파일에서 구현·export 되었는지,TimePicker.tsx에서 정확히 import 되었는지 재확인한 뒤, UTC→KST 변환이 기대대로 동작하는지 단위 테스트를 추가해주세요.
- 체크리스트
parseUtcToKst함수가 구현된 파일(예:src/utils/date.ts)과export여부 확인TimePicker.tsx에서 올바른 경로로import { parseUtcToKst } from '...'했는지 확인parseUtcToKst가 UTC 기준 문자열을 KSTDate객체로 올바르게 변환하는지 단위 테스트 작성- 변환된
Date객체에서getHours(),getMinutes()결과가 시나리오별(자정·자정 전·후 등)로 정확한지 검증src/shared/ui/backgrounds/EventRegisterLayout.tsx (2)
4-6: 새로운 홈 네비게이션 기능이 적절히 구현되었습니다.홈 버튼 기능을 위한 필요한 의존성들이 올바르게 추가되었습니다. import 경로와 사용법이 적절합니다.
53-59: 홈 버튼 구현이 사용자 경험을 개선합니다.헤더에 홈 버튼을 추가하여 사용자가 메인 페이지로 쉽게 돌아갈 수 있도록 한 것은 좋은 UX 개선입니다. IconButton과 네비게이션 로직이 적절히 구현되었습니다.
src/pages/join/InfoInputPage.tsx (1)
98-98: 이메일 필드를 읽기 전용으로 설정한 것이 적절합니다.사용자가 검증된 이메일 주소를 실수로 수정하는 것을 방지하는 좋은 UX 패턴입니다. 이메일이 외부 인증 시스템에서 제공되는 경우 특히 중요합니다.
src/features/join/api/user.ts (1)
2-2: LGTM! 타입 import 추가 확인약관 동의 기능에 필요한 타입을 적절히 import했습니다.
src/features/join/hooks/useUserHook.ts (1)
2-2: LGTM! API 함수 import 추가 확인약관 동의 API 함수를 적절히 import했습니다.
src/features/join/model/agreementStore.ts (2)
16-21: LGTM! 인터페이스 확장이 적절합니다API 요청에 필요한 형태로 상태를 변환하는 메서드 추가가 적절합니다.
65-73: LGTM! 상태 매핑 로직이 명확합니다내부 상태를 외부 API 형식으로 변환하는 로직이 명확하고 읽기 쉽게 구현되었습니다.
src/shared/ui/AgreementCard.tsx (3)
9-9: LGTM! 선택적 props 추가가 적절합니다외부 링크 기능을 위한 선택적
link프로퍼티 추가가 적절합니다.
12-12: LGTM! 컴포넌트 시그니처 업데이트 확인새로운
linkprop을 적절히 구조분해할당으로 받아오고 있습니다.
21-30: LGTM! 보안을 고려한 외부 링크 구현조건부 렌더링과 보안 속성들이 잘 구현되었습니다:
target="_blank"로 새 탭 열기rel="noopener noreferrer"로 보안 강화- HTML 엔티티 사용으로 올바른 렌더링
src/pages/join/AgreementPage.tsx (4)
11-11: 적절한 상태 접근 확장스토어에서
getAgreementStates메서드를 추가로 가져오는 것이 적절합니다. 약관 동의 데이터를 구성하는 데 필요한 상태에 접근할 수 있게 됩니다.
13-13: 적절한 훅 사용법
useAgreeTerms훅을 사용하여mutate함수를agreeTerms로 명명한 것이 가독성을 높입니다.
37-37: 네비게이션 동작 변경 확인 필요왼쪽 버튼 클릭 시 이전 페이지로 돌아가는 대신 루트 경로로 이동하도록 변경되었습니다. 이것이 의도된 UX 변경인지 확인이 필요합니다.
사용자 플로우에서 약관 동의 페이지에서 뒤로가기 시 홈으로 이동하는 것이 맞는 동작인지 검토해주세요.
54-54: 적절한 플로우 구현버튼 클릭 시 직접 네비게이션하는 대신
handleAgree를 호출하여 약관 동의 데이터를 먼저 제출하고 성공 시 이동하는 플로우가 올바르게 구현되었습니다.src/pages/event/ui/EventDetailsPage.tsx (2)
141-143: 레이아웃 개선이 잘 적용되었습니다.관련 링크 섹션의 레이아웃을 세로 배치로 변경하고 일관된 간격을 적용한 것이 좋습니다. flex-col과 gap-3을 사용하여 더 명확한 구조를 만들었습니다.
146-153: 코드 가독성이 향상되었습니다.anchor 태그를 멀티라인으로 포맷팅하여 각 속성이 명확하게 구분되어 읽기 쉬워졌습니다.
src/features/ticket/hooks/useOrderHook.ts (1)
25-25:Details
✅ Verification successful
배치 티켓 취소 기능을 위한 좋은 개선입니다.
단일 orderId에서 orderIds 배열로 변경하여 여러 티켓을 한 번에 취소할 수 있게 되었습니다. 이는 사용자 경험 향상에 도움이 됩니다.
모든 useCancelTicket 훅 사용처가 새로운 시그니처에 맞게 업데이트되었는지 확인해보겠습니다:
🏁 Script executed:
#!/bin/bash # useCancelTicket 훅의 모든 사용처를 찾아 새로운 배열 시그니처가 올바르게 사용되는지 확인 ast-grep --pattern 'useCancelTicket'Length of output: 613
🏁 Script executed:
#!/bin/bash echo "=== src/pages/menu/ui/MyTicketPage.tsx ===" rg -n -C2 "cancelTicket" src/pages/menu/ui/MyTicketPage.tsx || true echo -e "\n=== src/pages/dashboard/ui/ticket/TIcketConfirmPage.tsx ===" rg -n -C2 "cancelTicket" src/pages/dashboard/ui/ticket/TIcketConfirmPage.tsx || trueLength of output: 1244
승인: useCancelTicket 훅 사용처 배열 시그니처 검증 완료
검증 결과 모든 호출 지점에서 배열 형태의 인자를 올바르게 전달하고 있음을 확인했습니다:
- src/pages/menu/ui/MyTicketPage.tsx (
cancelTicket(selectedIds, …))- src/pages/dashboard/ui/ticket/TIcketConfirmPage.tsx (
cancelTicket(orderIds, …))배치 티켓 취소 기능이 안정적으로 동작할 것으로 보입니다.
src/pages/menu/ui/myHost/HostDetailPage.tsx (2)
13-13: 안전한 데이터 처리가 잘 구현되었습니다.nullish coalescing 연산자를 사용하여 events가 undefined일 경우 빈 배열로 기본값을 설정한 것이 좋습니다.
24-42: 사용자 경험을 개선하는 빈 상태 처리가 훌륭합니다.이벤트가 없을 때 명확한 안내 메시지를 표시하고, col-span-2로 전체 그리드 영역을 차지하도록 한 것이 좋습니다. 사용자가 현재 상태를 명확하게 인지할 수 있습니다.
src/features/ticket/api/order.ts (1)
26-31: 배치 티켓 취소를 위한 API 구조 개선이 잘 되었습니다.
- 단일 주문 ID에서 배열로 변경하여 여러 티켓을 한 번에 취소할 수 있게 되었습니다
- URL 파라미터에서 요청 본문으로 변경하여 더 많은 데이터를 안전하게 전송할 수 있습니다
- POST 메서드를 사용하여 배치 작업에 적합한 RESTful API 설계가 되었습니다
이러한 변경은 성능 향상과 사용자 경험 개선에 도움이 됩니다.
design-system/ui/textFields/UnderlineTextField.tsx (2)
1-1: 훌륭한 타입 안전성 개선!
InputHTMLAttributes<HTMLInputElement>를 확장함으로써 컴포넌트가 모든 표준 HTML input 속성을 받을 수 있게 되어 재사용성과 유연성이 크게 향상되었습니다.Also applies to: 3-3
14-14: 적절한 props 전달 구현
...restprops를 통해 추가 HTML 속성들이 올바르게 input 요소에 전달되고 있습니다. 이는 접근성 속성(aria-*)이나 데이터 속성(data-*) 등을 쉽게 추가할 수 있게 해줍니다.Also applies to: 24-24
src/pages/dashboard/ui/ticket/TIcketConfirmPage.tsx (2)
77-77: onClick 핸들러 단순화 완료
.then()체이닝을 제거하고onSuccess콜백으로 네비게이션을 처리하도록 변경되어 코드가 더 깔끔해졌습니다.
26-31:Details
❓ Verification inconclusive
효율적인 벌크 취소 로직으로 개선됨
개별 주문 ID를 반복 처리하는 대신 배열 전체를 한 번에 처리하는 방식으로 변경되어 네트워크 효율성이 향상되었습니다.
onSuccess콜백을 통한 네비게이션 처리도 더 명확합니다.다음 스크립트로 관련 API와 훅의 일관성을 확인해주세요:
🏁 Script executed:
#!/bin/bash # Description: cancelTicket API와 useCancelTicket 훅의 인터페이스 일관성 확인 # cancelTicket API 함수 검색 ast-grep --pattern 'export $_ cancelTicket($_) { $$$ }' # useCancelTicket 훅 검색 ast-grep --pattern 'export $_ useCancelTicket($_) { $$$ }'Length of output: 122
다음 스크립트로
cancelTicket함수와useCancelTicket훅 정의 위치를 다시 검색해 주세요:
🏁 Script executed:
#!/bin/bash # cancelTicket 및 useCancelTicket 정의 위치 검색 # 1. export 형태로 선언된 정의 검색 rg -n "export (async )?(const|function) cancelTicket" -t ts -t tsx -C 3 rg -n "export (async )?(const|function) useCancelTicket" -t ts -t tsx -C 3 # 2. 호출 구문이 있는 파일에서 정의 유추 rg -n "cancelTicket\(" -t ts -t tsx -C 3 rg -n "useCancelTicket\(" -t ts -t tsx -C 3Length of output: 351
cancelTicket·useCancelTicket인터페이스 수동 확인 필요벌크 취소 로직으로 네트워크 효율이 개선된 것은 적절하나, 실제 API 함수와 훅 정의를 찾을 수 없어 인터페이스 호환 여부를 수동으로 검증해야 합니다.
cancelTicket이 배열 형태의 주문 ID를 받아 처리하는지 확인useCancelTicket훅이 변경된 호출 시그니처를 지원하는지 확인- 에러 처리와 onSuccess 콜백이 의도한 대로 동작하는지 테스트
design-system/ui/modals/QrModal.tsx (2)
61-71: 훌륭한 UX 개선 - QR 코드 조건부 렌더링QR 코드가 없을 때 적절한 안내 메시지를 표시하는 것은 사용자 경험을 크게 개선합니다. 승인 대기 상태에 대한 명확한 안내가 제공됩니다.
102-102: 동적 상태 아이콘 렌더링 잘 구현됨승인 상태와 체크인 상태에 따라 적절한 아이콘을 동적으로 선택하는 로직이 잘 구현되었습니다.
Also applies to: 108-108
src/pages/menu/ui/MyTicketPage.tsx (5)
70-70: 조건부 렌더링 단순화가 잘 되었습니다.취소 버튼을 표시하는 조건을
tickets.length > 0으로 단순화한 것이 코드 가독성을 개선했습니다.
107-108: 선택된 티켓에 대한 시각적 피드백이 잘 구현되었습니다.취소 모드에서 선택된 티켓에 대한 스케일링과 테두리 효과가 사용자 경험을 개선합니다.
125-128: 빈 상태 메시지의 레이아웃이 개선되었습니다.플렉스 컨테이너를 사용한 중앙 정렬이 사용자 경험을 향상시킵니다.
133-133: 모달 컨테이너 스타일링이 잘 단순화되었습니다.고정 위치와 플렉스 중앙 정렬을 사용한 오버레이가 깔끔하게 구현되었습니다.
160-170: 티켓 취소 로직이 잘 리팩토링되었습니다.단일
cancelTicket뮤테이션을 사용하고 성공/실패 콜백을 통한 적절한 상태 관리와 에러 처리가 구현되었습니다. 이전의 Promise.all 방식보다 더 유지보수하기 쉽고 안정적인 구조입니다.
2 participants
티켓 빈 qr, false, 아이콘 불일치 해결
이벤트 없을 시 문구 추가
이벤트 상세 설명 글자수 제한
사용자 응답 없을 경우 처리
Summary by CodeRabbit
새로운 기능
기능 개선
버그 수정
기타