Fix/130 QA사항 수정/리팩토링 #136
Fix/130 QA사항 수정/리팩토링 #136
Conversation
|
Caution Review failedThe pull request is closed. Walkthrough이 변경사항들은 주로 UI/UX 개선과 스타일링, 사용자 피드백 향상, 그리고 일부 예외 처리 로직 추가에 초점을 맞추고 있습니다. 여러 컴포넌트의 레이아웃, 애니메이션, 메시지, 접근성, 숫자 포맷팅, z-index 등이 조정되었으며, 일부 컴포넌트에서는 예외 상황(404 등)에 대한 처리가 보강되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MobileBookingModal
participant Toast
User->>MobileBookingModal: "다음" 버튼 클릭 (date-time 단계)
alt 시간 선택됨
MobileBookingModal->>MobileBookingModal: 단계 전환
else 시간 미선택
MobileBookingModal->>Toast: 에러 토스트("시간을 선택하세요")
end
User->>MobileBookingModal: "확인" 버튼 클릭 (confirm 단계)
MobileBookingModal->>MobileBookingModal: 모달 닫기, 단계 초기화
sequenceDiagram
participant User
participant ImageGrid
User->>ImageGrid: 모바일 슬라이더에서 "다음" or "이전" 클릭
ImageGrid->>ImageGrid: direction 상태 변경
ImageGrid->>ImageGrid: AnimatePresence + motion.div로 슬라이드 애니메이션
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
✨ 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. 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: 4
🔭 Outside diff range comments (4)
src/components/LocationMap.tsx (1)
67-76: 로딩 상태와 실제 맵 높이 불일치로딩 상태에서는 고정 높이 500px을 사용하지만, 실제 맵은 400px/480px을 사용합니다. 이로 인해 레이아웃 시프트가 발생할 수 있습니다.
- <div className='flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg shadow-md lg:max-w-[800px]'> + <div className='flex h-[400px] w-full items-center justify-center overflow-hidden rounded-lg shadow-md md:h-[480px] lg:max-w-[1200px]'>src/app/(with-header)/activities/[id]/components/ReviewTitle.tsx (1)
35-35: useEffect 의존성 배열 불완전useEffect 내부에서
rating값을 사용하지만 의존성 배열에는reviewCount만 포함되어 있습니다.rating이 변경될 때도 요약이 업데이트되어야 합니다.- }, [reviewCount]); + }, [reviewCount, rating]);src/components/FloatingBox/BookingInterface.tsx (1)
117-129: 버튼 요소에 type 속성 추가 필요태블릿 뷰의 날짜 선택 버튼에
type="button"속성을 추가해야 합니다. 또한 레이아웃 개선(flex,items-center,justify-center)과 애니메이션 효과(animate-pulse) 추가로 사용자 경험이 향상되었습니다.다음과 같이 수정하세요:
<button + type="button" onClick={() => setIsOpen(true)} className='flex w-full items-center justify-center rounded-lg border border-gray-300 p-3 py-8 text-left text-black hover:bg-gray-50' >src/ui/MobileBookingModal.tsx (1)
97-118: 버튼 요소에 type 속성 추가 필요푸터의 gap 증가(
gap-20)로 버튼 간격이 개선되었습니다. 하지만 정적 분석 도구가 지적한 대로 "다음" 버튼에type="button"속성을 추가해야 합니다.다음과 같이 수정하세요:
<button + type="button" onClick={next} className='flex-1 rounded-lg bg-green-800 px-10 py-10 font-medium text-white hover:bg-green-900' > 다음 </button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/(with-header)/activities/[id]/components/ActivityDetailForm.tsx(1 hunks)src/app/(with-header)/activities/[id]/components/ImageGrid.tsx(2 hunks)src/app/(with-header)/activities/[id]/components/ReviewSection.tsx(2 hunks)src/app/(with-header)/activities/[id]/components/ReviewTitle.tsx(1 hunks)src/app/(with-header)/activities/[id]/components/Skeleton.tsx(0 hunks)src/app/(with-header)/activities/[id]/components/Title.tsx(2 hunks)src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts(2 hunks)src/components/FloatingBox/BookingButton.tsx(1 hunks)src/components/FloatingBox/BookingInterface.tsx(2 hunks)src/components/FloatingBox/PriceDisplay.tsx(1 hunks)src/components/LocationMap.tsx(1 hunks)src/components/Modal/Content.tsx(1 hunks)src/ui/MobileBookingModal.tsx(5 hunks)
💤 Files with no reviewable changes (1)
- src/app/(with-header)/activities/[id]/components/Skeleton.tsx
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/components/FloatingBox/BookingButton.tsx (1)
src/app/(non-header)/oauth/kakao/components/KakaoLoading.tsx (1)
KakaoLoading(7-16)
src/app/(with-header)/activities/[id]/components/ImageGrid.tsx (1)
src/types/activityDetailType.ts (1)
ImageGridProps(1-4)
src/ui/MobileBookingModal.tsx (3)
src/components/FloatingBox/TotalPriceDisplay.tsx (1)
TotalPriceDisplay(3-12)src/components/FloatingBox/BookingButton.tsx (1)
BookingButton(10-36)src/ui/BookingModal.tsx (1)
BookingModal(8-22)
🪛 Biome (2.1.2)
src/app/(with-header)/activities/[id]/components/ImageGrid.tsx
[error] 67-73: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
[error] 76-81: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
src/ui/MobileBookingModal.tsx
[error] 109-114: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
src/components/FloatingBox/BookingInterface.tsx
[error] 117-121: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🔇 Additional comments (21)
src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts (2)
11-11: 새로운 import가 올바르게 추가되었습니다.Next.js의
notFound함수를 가져오는 것이 404 에러 처리에 적합합니다.
36-39: useQuery 구조분해할당이 적절히 업데이트되었습니다.에러 처리를 위해
status와error를 추가로 구조분해할당한 것이 좋습니다.src/components/LocationMap.tsx (1)
80-80: 반응형 높이 변경 잘 적용됨모바일 우선 반응형 디자인으로 높이를 조정한 것은 좋은 개선사항입니다.
src/components/FloatingBox/PriceDisplay.tsx (1)
5-6: 한국어 숫자 형식 적용 우수
toLocaleString('ko-KR')를 사용하여 가격에 천단위 구분자를 추가한 것은 훌륭한 현지화 개선사항입니다. 사용자 가독성이 크게 향상됩니다.src/components/FloatingBox/BookingButton.tsx (1)
29-29: 로딩 텍스트 단순화에 대한 접근성 고려"예약 중..."에서 "..."로 변경한 것이 시각적으로는 간단해 보이지만, 접근성 측면에서는 명확성이 떨어질 수 있습니다. 스크린 리더 사용자나 시각적 컨텍스트를 놓칠 수 있는 사용자들에게는 명시적인 텍스트가 더 도움이 됩니다.
원래 텍스트를 유지하는 것을 고려해보세요:
- <p>...</p> + <p>예약 중...</p>src/app/(with-header)/activities/[id]/components/ReviewTitle.tsx (1)
18-21: 후기 없음 상태 처리 개선 우수후기가 없을 때 명확한 메시지를 표시하는 것은 좋은 UX 개선사항입니다.
src/app/(with-header)/activities/[id]/components/Title.tsx (2)
49-49: 코드 가독성 개선 확인함수 사이의 빈 줄 추가로 코드 가독성이 향상되었습니다.
59-67: 레이아웃 및 시맨틱 HTML 개선 확인
flex-nowrap과gap-30을 통한 레이아웃 개선과<span>에서<p>태그로의 변경을 통한 시맨틱 HTML 개선이 잘 적용되었습니다. 평점과 주소 표시의 가독성과 접근성이 향상되었습니다.src/app/(with-header)/activities/[id]/components/ActivityDetailForm.tsx (1)
99-99: 여백 및 패딩 조정 확인상단 여백(
mt-30)과 수평 패딩(px-20) 추가로 레이아웃의 일관성과 가독성이 개선되었습니다. 모든 화면 크기에서 적절한 여백이 적용됩니다.src/app/(with-header)/activities/[id]/components/ImageGrid.tsx (3)
6-6: framer-motion 애니메이션 추가 확인모바일 이미지 슬라이더에 부드러운 애니메이션 효과를 추가하여 사용자 경험이 크게 향상되었습니다.
12-37: 애니메이션 로직 구현 확인
directionstate와variants객체를 통한 애니메이션 로직이 잘 구현되었습니다. 슬라이드 방향에 따른 자연스러운 전환 효과가 구현되어 사용자 경험이 개선되었습니다.
43-65: 애니메이션 적용 확인
AnimatePresence와motion.div를 통한 이미지 전환 애니메이션이 잘 구현되었습니다. spring 물리학과 opacity 전환을 통해 자연스러운 슬라이드 효과가 적용되었습니다.src/components/FloatingBox/BookingInterface.tsx (1)
148-179: 모바일 UI 개선 확인모바일 뷰의 높이 고정(
h-150)과 패딩 조정(px-20), 그리고animate-pulse와cursor-pointer스타일 추가로 사용자 인터페이스가 개선되었습니다.PriceDisplay컴포넌트 사용으로 코드 재사용성도 향상되었습니다.src/ui/MobileBookingModal.tsx (5)
12-12: 토스트 알림 import 추가 확인사용자 피드백을 위한 토스트 알림 라이브러리 import가 추가되었습니다.
31-35: 시간 선택 검증 로직 추가 확인날짜-시간 단계에서 시간이 선택되지 않은 상태로 다음 단계로 진행하는 것을 방지하는 검증 로직이 추가되어 사용자 경험이 개선되었습니다. 명확한 에러 메시지 제공으로 사용성이 향상되었습니다.
43-46: 모달 닫기 함수 추가 확인
handleConfirm함수를 통해 모달을 닫고 단계를 초기화하는 로직이 잘 구현되었습니다. 사용자 플로우 관리가 개선되었습니다.
56-56: z-index 증가 확인모달 콘텐츠의 z-index를 9999로 증가시켜 다른 UI 요소들과의 레이어링 충돌을 방지하였습니다. 이는 다른 모달 컴포넌트와의 일관성을 위한 좋은 변경사항입니다.
83-93: 확인 단계 UI 개선 확인날짜/시간 표시 방식 개선과 총 가격 표시를 우측 하단으로 정렬하여 레이아웃이 더욱 직관적으로 변경되었습니다.
src/app/(with-header)/activities/[id]/components/ReviewSection.tsx (3)
90-96: 빈 상태 UI 개선이 잘 되었습니다."리뷰"에서 "후기"로 변경한 것이 더 자연스러운 한국어 표현이며, 그림자, 테두리, 상호작용 방지 등의 스타일링 추가로 사용자 경험이 향상되었습니다.
103-103: 에러 메시지 개선이 좋습니다.기존의 "에러발생"보다 구체적이고 정보를 제공하는 메시지로 변경되어 디버깅과 사용자 경험에 도움이 됩니다.
114-120: 비로그인 사용자를 위한 오버레이 스타일링이 우수합니다.빈 상태와 일관된 디자인으로 사용자에게 명확한 시각적 피드백을 제공하며, 로그인을 유도하는 메시지가 적절히 배치되었습니다.
| <button | ||
| onClick={prevSlide} | ||
| aria-label='이전 이미지' | ||
| className='absolute top-1/2 left-2 -translate-y-1/2 rounded-full bg-black/50 px-6 py-10 text-white' | ||
| > | ||
| ‹ | ||
| </button> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
버튼 요소에 type 속성 추가 필요
정적 분석 도구가 지적한 대로 버튼 요소에 명시적인 type 속성이 필요합니다. 폼 내부에서 의도하지 않은 제출을 방지하기 위해 type="button"을 추가해야 합니다.
다음과 같이 수정하세요:
<button
+ type="button"
onClick={prevSlide}
aria-label='이전 이미지'
className='absolute top-1/2 left-2 -translate-y-1/2 rounded-full bg-black/50 px-6 py-10 text-white'
>
‹
</button>
<button
+ type="button"
onClick={nextSlide}
aria-label='다음 이미지'
className='absolute top-1/2 right-2 -translate-y-1/2 rounded-full bg-black/50 px-6 py-10 text-white'
>
›
</button>Also applies to: 75-81
🧰 Tools
🪛 Biome (2.1.2)
[error] 67-73: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🤖 Prompt for AI Agents
In src/app/(with-header)/activities/[id]/components/ImageGrid.tsx around lines
67 to 73 and also lines 75 to 81, the button elements lack an explicit type
attribute, which can cause unintended form submissions. Add type="button" to
each button element to explicitly define their behavior and prevent accidental
form submissions.
| <ReviewTitle reviewCount={reviewCount} rating={rating} /> | ||
|
|
||
| <div className='relative min-h-350'> | ||
| <div className='pointer-events-none relative min-h-350 select-none'> |
There was a problem hiding this comment.
사용자 상호작용 제한을 재검토해주세요.
pointer-events-none과 select-none 클래스가 전체 리뷰 컨테이너에 적용되어 로그인한 사용자도 리뷰 내용과 상호작용(텍스트 선택, 클릭 등)할 수 없게 됩니다. 이 제한이 로그인하지 않은 사용자에게만 적용되도록 조건부로 적용하는 것을 고려해보세요.
다음과 같이 수정하는 것을 제안합니다:
- <div className='pointer-events-none relative min-h-350 select-none'>
+ <div className={`relative min-h-350 ${!user ? 'pointer-events-none select-none' : ''}`}>📝 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.
| <div className='pointer-events-none relative min-h-350 select-none'> | |
| <div className={`relative min-h-350 ${!user ? 'pointer-events-none select-none' : ''}`}> |
🤖 Prompt for AI Agents
In src/app/(with-header)/activities/[id]/components/ReviewSection.tsx at line
110, the classes 'pointer-events-none' and 'select-none' are applied
unconditionally to the review container, preventing all users from interacting
with the review content. Modify the code to apply these classes conditionally
only when the user is not logged in, allowing logged-in users to interact with
the review section normally.
| if (status === 'error') { | ||
| const axiosError = error as AxiosError; | ||
| const httpStatus = axiosError.response?.status; | ||
|
|
||
| if (httpStatus === 404) { | ||
| console.log('404 에러임'); | ||
| notFound(); | ||
| } | ||
| } |
There was a problem hiding this comment.
404 에러 처리 로직의 위치를 수정해주세요.
현재 에러 처리 로직이 컴포넌트 본문 외부에 위치하여 렌더링 중에 실행됩니다. 이는 React의 규칙을 위반하고 예상치 못한 동작을 일으킬 수 있습니다.
다음과 같이 수정하여 에러 처리를 useEffect 내부로 이동시키거나 별도의 효과로 분리하는 것을 권장합니다:
- if (status === 'error') {
- const axiosError = error as AxiosError;
- const httpStatus = axiosError.response?.status;
-
- if (httpStatus === 404) {
- console.log('404 에러임');
- notFound();
- }
- }
+ useEffect(() => {
+ if (status === 'error') {
+ const axiosError = error as AxiosError;
+ const httpStatus = axiosError.response?.status;
+
+ if (httpStatus === 404) {
+ console.log('Activity not found (404)');
+ notFound();
+ }
+ }
+ }, [status, error]);추가 개선사항:
- 디버깅을 위해 콘솔 메시지를 영어로 변경
- useEffect를 사용하여 부수효과를 적절히 관리
📝 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.
| if (status === 'error') { | |
| const axiosError = error as AxiosError; | |
| const httpStatus = axiosError.response?.status; | |
| if (httpStatus === 404) { | |
| console.log('404 에러임'); | |
| notFound(); | |
| } | |
| } | |
| useEffect(() => { | |
| if (status === 'error') { | |
| const axiosError = error as AxiosError; | |
| const httpStatus = axiosError.response?.status; | |
| if (httpStatus === 404) { | |
| console.log('Activity not found (404)'); | |
| notFound(); | |
| } | |
| } | |
| }, [status, error]); |
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts around
lines 47 to 55, the 404 error handling logic is currently placed outside of a
React effect, causing it to run during rendering which violates React rules.
Move this error handling code inside a useEffect hook that depends on the status
and error variables to properly manage side effects. Also, change the console
log message to English for consistency and clarity.
| const [isMounted, setIsMounted] = useState(false); | ||
|
|
||
| const zIndexClass = zIndex ? `z-[${zIndex}]` : 'z-50'; | ||
| const zIndexClass = zIndex ? `z-[${zIndex}]` : 'z-999'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
z-index 값 관리 체계화 필요
z-index를 50에서 999로 크게 증가시킨 것은 즉각적인 레이어링 문제는 해결할 수 있지만, 향후 유지보수에 어려움을 줄 수 있습니다.
z-index 값들을 체계적으로 관리하는 것을 권장합니다:
- 기본 컨텐츠: 1-99
- 드롭다운/툴팁: 100-199
- 모달/오버레이: 200-299
- 최상위 알림: 300+
- const zIndexClass = zIndex ? `z-[${zIndex}]` : 'z-999';
+ const zIndexClass = zIndex ? `z-[${zIndex}]` : 'z-200';🤖 Prompt for AI Agents
In src/components/Modal/Content.tsx at line 34, the zIndex value is set directly
to 999 or a custom value, which lacks a structured management approach. Refactor
the code to use a defined zIndex scale for different UI layers, such as 1-99 for
base content, 100-199 for dropdowns/tooltips, 200-299 for modals/overlays, and
300+ for top-level notifications. Replace the hardcoded 'z-999' with a constant
or enum representing the modal layer range (200-299) to ensure consistent and
maintainable z-index usage.
minimo-9
left a comment
minimo-9
left a comment
There was a problem hiding this comment.
QA 때 나온 부분 수정하시느라 고생많으셨습니다!
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
QA사항 수정/리팩토링 하시느라 고생많으셨습니다! 내일까지 화이팅입니다.
BokyungCodes
left a comment
BokyungCodes
left a comment
There was a problem hiding this comment.
수정하시느라 고생하셨습니다! 이제 끝나가네요ㅠㅠ
📌 변경 사항 개요
QA사항 수정/리팩토링
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
💡 참고 사항
Summary by CodeRabbit
신규 기능
버그 수정
UI/스타일 개선
기타