Fix/117 QA사항수정 및 리팩토링 #127
Conversation
Walkthrough이 변경사항은 예약 및 활동 생성/수정 폼의 상태 관리와 제출 로직을 커스텀 훅으로 분리하고, 버튼 컴포넌트에 로딩 상태를 추가하며, 예약 관련 전역 상태 초기화 메서드와 타입을 도입합니다. 일부 UI 구성요소의 스타일 및 prop 타입도 조정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ReservationForm
participant useCreateActivityForm
participant API
User->>ReservationForm: 폼 입력 및 제출
ReservationForm->>useCreateActivityForm: handleSubmit 호출
useCreateActivityForm->>API: 이미지 업로드 및 POST /addActivity
API-->>useCreateActivityForm: 응답(성공/실패)
useCreateActivityForm-->>ReservationForm: 결과 및 로딩 상태 전달
ReservationForm-->>User: 성공/실패 토스트 및 페이지 이동
sequenceDiagram
participant User
participant EditActivityForm
participant useEditActivityForm
participant API
User->>EditActivityForm: 폼 수정 및 제출
EditActivityForm->>useEditActivityForm: handleSubmit 호출
useEditActivityForm->>API: 이미지 업로드 및 PATCH /activities/{id}
API-->>useEditActivityForm: 응답(성공/실패)
useEditActivityForm-->>EditActivityForm: 결과 및 로딩 상태 전달
EditActivityForm-->>User: 성공/실패 토스트 및 페이지 이동
sequenceDiagram
participant User
participant BookingInterface
participant useBookingMutation
participant API
participant BookingStore
User->>BookingInterface: 예약 정보 입력 및 제출
BookingInterface->>useBookingMutation: mutate 호출
useBookingMutation->>API: POST /activities/{id}/reservation
API-->>useBookingMutation: 응답(성공/실패)
useBookingMutation->>BookingStore: setToInitial 호출
useBookingMutation-->>BookingInterface: 결과 및 토스트 전달
BookingInterface-->>User: 성공/실패 토스트 및 UI 초기화
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20분 Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (12)
src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx(3 hunks)src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts(6 hunks)src/app/(with-header)/myactivity/components/InfoSection.tsx(5 hunks)src/app/(with-header)/myactivity/components/ReservationForm.tsx(3 hunks)src/app/(with-header)/myactivity/hooks/useCreateActivityForm.ts(1 hunks)src/components/Button.tsx(2 hunks)src/components/FloatingBox/BookingInterface.tsx(3 hunks)src/components/FloatingBox/hooks/useBookingMutation.ts(1 hunks)src/stores/Booking/useBookingStore.ts(1 hunks)src/types/bookingStoreTypes.ts(1 hunks)src/types/buttonTypes.ts(1 hunks)src/ui/TabletBookingModal.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/types/buttonTypes.ts (1)
src/app/(with-header)/mypage/reservations/components/CancelReservationModal.tsx (1)
CancelReservationModalProps(7-12)
src/components/Button.tsx (2)
src/lib/utils.ts (1)
cn(4-6)src/app/(with-header)/mypage/reservations/components/CancelReservationModal.tsx (1)
CancelReservationModal(14-65)
🪛 GitHub Actions: CI
src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts
[error] 179-179: @typescript-eslint/no-unused-vars: 'error' is defined but never used.
🔇 Additional comments (28)
src/ui/TabletBookingModal.tsx (1)
21-21: UI 일관성 개선이 적절합니다모달 컨테이너에
rounded-md클래스를 추가하여 시각적 일관성을 개선한 변경사항입니다.src/types/buttonTypes.ts (1)
23-23: 로딩 상태 지원을 위한 타입 확장이 적절합니다
isLoading속성 추가로 버튼 컴포넌트의 로딩 상태 표시를 지원하여 사용자 경험을 개선합니다.src/types/bookingStoreTypes.ts (1)
23-23: 상태 초기화 메서드 추가로 코드 품질이 개선됩니다
setToInitial메서드 추가로 여러 개별 setter 호출을 하나의 메서드로 통합하여 상태 관리가 더욱 깔끔해집니다.src/components/FloatingBox/BookingInterface.tsx (3)
38-38: 상태 관리 개선을 위한 적절한 추가입니다통합된 초기화 메서드를 사용하기 위해
setToInitial을 추가했습니다.
52-52: 상태 초기화 로직이 깔끔하게 리팩토링되었습니다여러 개별 setter 호출을
setToInitial()하나로 통합하여 코드가 더욱 간결해지고 유지보수성이 향상되었습니다.
152-152: 하드코딩된 가격을 동적 값으로 수정한 좋은 개선입니다기존 하드코딩된 "₩ 10,000" 문자열을 props로 전달받은 실제
price값으로 변경하여 정확한 가격 표시가 가능해졌습니다.src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx (3)
27-27: 로딩 상태 관리를 위한 적절한 추가입니다폼 제출 중 로딩 상태를 표시하기 위해
editLoading을 추가했습니다.
62-62: 버튼 로딩 상태 추가로 사용자 경험이 개선됩니다
isLoadingprop 추가로 폼 제출 중 중복 클릭 방지 및 로딩 표시가 가능해져 사용자 경험이 향상됩니다.
78-78: 가격 변경 핸들러가 간소화되었습니다
setPrice를 직접 전달하여 코드가 더욱 간결해졌습니다.src/components/Button.tsx (1)
24-24: 로딩 상태 구현이 잘 되었습니다!
isLoadingprop 추가와 disabled 상태 처리가 적절하게 구현되었습니다. 사용자 경험을 위한 좋은 개선사항입니다.Also applies to: 39-39, 48-48
src/app/(with-header)/myactivity/components/InfoSection.tsx (2)
11-11: 가격 타입 변경이 적절합니다입력 처리를 위해
price를 string 타입으로 변경한 것이 좋은 결정입니다. 사용자 입력을 더 유연하게 처리할 수 있습니다.Also applies to: 24-24, 66-71
45-45: 코드 포맷팅 개선불필요한 빈 줄 제거와 AddressInput props 정리가 코드 가독성을 향상시켰습니다.
Also applies to: 63-63, 74-76
src/stores/Booking/useBookingStore.ts (1)
4-21: 상태 초기화 로직 개선이 훌륭합니다!초기 상태를 별도 상수로 분리하고
setToInitial메서드를 추가한 것이 매우 좋은 리팩토링입니다. 이를 통해:
- 초기 상태 관리가 명확해졌습니다
- 상태 리셋이 한 번의 호출로 가능해졌습니다
- 코드 유지보수성이 향상되었습니다
Also applies to: 39-39
src/components/FloatingBox/hooks/useBookingMutation.ts (1)
35-48: 에러 처리가 잘 구현되었습니다다양한 에러 케이스를 고려한 메시지 처리와 폴백 메시지 제공이 좋습니다.
src/app/(with-header)/myactivity/components/ReservationForm.tsx (2)
3-33: 커스텀 훅을 활용한 리팩토링이 훌륭합니다!
useCreateActivityForm훅으로 상태 관리와 로직을 분리한 것이 매우 좋은 리팩토링입니다:
- 컴포넌트가 프레젠테이션 레이어에 집중하게 되었습니다
- 로직 재사용성이 향상되었습니다
- 버튼의 로딩 상태 처리가 깔끔하게 통합되었습니다
PR 목표인 코드 품질 개선이 잘 달성되었습니다.
Also applies to: 45-45, 61-61
39-51: 리다이렉션 로직이 정상적으로 구현되었습니다
useCreateActivityForm훅의onSuccess콜백에서router.push(`/activities/${data.id}`);를 호출하여 등록 성공 시 체험 상세 페이지로 리다이렉션되도록 이미 구현되어 있습니다. 추가 확인이나 수정은 필요하지 않습니다.
• 파일: src/app/(with-header)/myactivity/hooks/useCreateActivityForm.ts
– onSuccess 콜백 (router.push(/activities/${data.id}))src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts (5)
5-5: React Query 훅 추가 확인
useMutation훅이 새로 추가되어 폼 제출 로직이 개선되었습니다.
24-24: 가격 상태 타입 변경 확인가격이 숫자에서 문자열로 변경되었습니다. 이는 입력 필드에서 더 나은 사용자 경험을 제공할 것입니다.
48-48: 가격 초기화 로직 확인
data.price.toString()을 사용하여 숫자를 문자열로 변환하는 것이 적절합니다.
104-173: mutation 구현 검토React Query의
useMutation을 사용한 리팩토링이 잘 구현되었습니다. 에러 처리와 성공 콜백이 적절히 구현되어 있습니다.
193-193: 로딩 상태 노출 확인
editLoading상태가 적절히 노출되어 버튼 컴포넌트에서 사용할 수 있습니다.src/app/(with-header)/myactivity/hooks/useCreateActivityForm.ts (7)
11-15: DateSlot 인터페이스 정의 확인인터페이스가 명확하게 정의되어 있고 필요한 필드들이 포함되어 있습니다.
17-27: 상태 초기화 확인모든 필요한 상태가 적절한 초기값으로 설정되어 있습니다. 가격이 문자열로 관리되는 것도 입력 필드와 일관성이 있습니다.
31-73: mutation 로직 구현 검토React Query의
useMutation을 사용한 구현이 잘 되어 있습니다. 유효성 검사, 에러 처리, 성공 후 네비게이션이 모두 적절히 구현되어 있습니다.
75-91: 날짜 처리 함수들 확인날짜 슬롯 추가, 제거, 수정 함수들이 올바르게 구현되어 있습니다.
93-121: 이미지 처리 로직 검토메인 이미지와 서브 이미지 처리가 잘 구현되어 있습니다. 서브 이미지 개수 제한(4개)도 적절히 적용되어 있습니다.
123-137: 폼 제출 유효성 검사 확인필수 필드들에 대한 유효성 검사가 적절히 구현되어 있습니다.
139-162: 반환값 구조 확인훅이 반환하는 모든 값들이 적절히 구성되어 있고, 로딩 상태도 올바르게 노출되어 있습니다.
| {...props} | ||
| > | ||
| {children} | ||
| {isLoading ? <span className='animate-pulse'>로딩중...</span> : children} |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
로딩 텍스트를 props로 받는 것을 고려해보세요
현재 '로딩중...' 텍스트가 하드코딩되어 있습니다. 다양한 컨텍스트에서 사용될 수 있도록 선택적 prop으로 받는 것을 고려해보세요.
export default function Button({
type = 'button',
className = '',
children,
variant,
selected,
isLoading = false,
+ loadingText = '로딩중...',
...props
}: ButtonProps) {- {isLoading ? <span className='animate-pulse'>로딩중...</span> : children}
+ {isLoading ? <span className='animate-pulse'>{loadingText}</span> : children}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {isLoading ? <span className='animate-pulse'>로딩중...</span> : children} | |
| export default function Button({ | |
| type = 'button', | |
| className = '', | |
| children, | |
| variant, | |
| selected, | |
| isLoading = false, | |
| loadingText = '로딩중...', | |
| ...props | |
| }: ButtonProps) { | |
| return ( | |
| <button | |
| type={type} | |
| className={className} | |
| {...props} | |
| > | |
| {isLoading | |
| ? <span className="animate-pulse">{loadingText}</span> | |
| : children} | |
| </button> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In src/components/Button.tsx at line 48, the loading text '로딩중...' is hardcoded.
Modify the component to accept an optional prop for the loading text, defaulting
to '로딩중...' if not provided, and replace the hardcoded string with this prop to
allow customizable loading messages.
| export function useBookingMutation(onSuccessCallback?: () => void) { | ||
| const { id } = useParams(); | ||
| const { | ||
| selectedTimeId, | ||
| participants, | ||
| setSelectedDate, | ||
| setSelectedTime, | ||
| setSelectedTimeId, | ||
| } = useBookingStore(); | ||
| const setIsOpen = useBookingStore((state) => state.setIsOpen); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
setToInitial 메서드 사용을 권장합니다
useBookingStore에 새로 추가된 setToInitial 메서드를 사용하면 코드가 더 간결해집니다.
const {
selectedTimeId,
participants,
- setSelectedDate,
- setSelectedTime,
- setSelectedTimeId,
+ setToInitial,
} = useBookingStore(); onSuccess: () => {
toast.success('예약되었습니다!');
- setSelectedDate(null);
- setSelectedTime('');
- setSelectedTimeId(null);
+ setToInitial();
setIsOpen(false);
onSuccessCallback?.();
},Also applies to: 26-33
🤖 Prompt for AI Agents
In src/components/FloatingBox/hooks/useBookingMutation.ts around lines 8 to 17
and also lines 26 to 33, replace the multiple individual state setters from
useBookingStore with the newly added setToInitial method. This will simplify the
code by resetting the booking state to its initial values in a single call
instead of setting each state property separately.
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/ui/MobileBookingModal.tsx (1)
51-52: 모바일 예약 모달: 잘못된 Tailwindmin-h-400클래스 수정 필요Tailwind 기본 프리셋에
min-h-400클래스는 정의되어 있지 않습니다. 브라우저에 적용되지 않으므로 아래와 같이 임의 값 유틸리티 방식으로 수정하세요.수정 제안:
- <Modal.Item className='relative min-h-400'> + <Modal.Item className='relative min-h-[400px]'> - <div className='flex min-h-400 items-center justify-center'> + <div className='flex min-h-[400px] items-center justify-center'> - <div className='flex min-h-400 flex-col items-center justify-center gap-20'> + <div className='flex min-h-[400px] flex-col items-center justify-center gap-20'>대상 위치 (파일:
src/ui/MobileBookingModal.tsx):
- 51행
- 64행
- 69행
| return ( | ||
| <Modal isOpen={isOpen} onOpenChange={setIsOpen}> | ||
| <Modal.Content> | ||
| <Modal.Content zIndex={300}> |
There was a problem hiding this comment.
zIndex 속성은 Modal.Content의 정의에 없을 가능성이 높습니다
Modal.Content가 Radix/Dialog 래퍼이거나 styled-component라면, 임의 prop(zIndex)은 타입 오류 또는 DOM 속성 누락 경고를 유발할 수 있습니다. 일관된 유틸리티 사용을 위해 Tailwind CSS 임의 값 또는 style/css prop으로 전달하세요.
- <Modal.Content zIndex={300}>
+ <Modal.Content className='z-[300]'>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Modal.Content zIndex={300}> | |
| <Modal.Content className='z-[300]'> |
🤖 Prompt for AI Agents
In src/ui/MobileBookingModal.tsx at line 45, the zIndex prop is passed directly
to Modal.Content, which likely does not accept it and may cause type errors or
warnings. Remove the zIndex prop from Modal.Content and instead apply the zIndex
using a Tailwind CSS arbitrary value class or by passing it via a style or css
prop to ensure proper styling without type issues.
BokyungCodes
left a comment
BokyungCodes
left a comment
There was a problem hiding this comment.
수정사항도 잘 적용됐고 로직도 깔끔해졌네요! 고생하셨습니다😊
📌 변경 사항 개요
QA사항수정 및 리팩토링
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
💡 참고 사항
Summary by CodeRabbit
신규 기능
버그 수정
스타일
리팩터링