fix/140 3차 QA수정사항수정 #142
fix/140 3차 QA수정사항수정 #142
Conversation
Walkthrough리뷰 날짜 포맷팅 방식이 문자열 슬라이싱과 치환으로 단순화되었고, 활동 편집 시 일정 변경 로직이 개선되어, 기존 일정의 필드가 변경된 경우 해당 일정을 제거 후 새 일정으로 추가하는 방식으로 처리됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EditFormHook
participant Server
User->>EditFormHook: 제출(수정된 일정 포함)
EditFormHook->>EditFormHook: 기존 일정과 비교<br>필드 변경된 일정 식별
EditFormHook->>Server: 변경된 일정 제거 요청
EditFormHook->>Server: 새 일정 추가 요청
Server-->>EditFormHook: 응답
EditFormHook-->>User: 결과 반환
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes 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. 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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/app/(with-header)/activities/[id]/components/ReviewSection.tsx(1 hunks)src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts(1 hunks)
🔇 Additional comments (2)
src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts (1)
150-166: 일정 수정 감지 로직이 잘 구현되었습니다기존 일정과 현재 일정을 비교하여 변경된 필드(날짜, 시작시간, 종료시간)를 정확히 감지하고, 변경된 일정을 새로 추가하면서 기존 일정을 삭제 목록에 추가하는 로직이 올바르게 구현되었습니다. 이는 일정 수정 시 데이터 일관성을 보장합니다.
src/app/(with-header)/activities/[id]/components/ReviewSection.tsx (1)
61-61: createdAt 필드 포맷 일관성 확인 필요날짜 포맷팅을 위해 string 슬라이싱(
slice(0, 10).replace(/-/g, '.'))을 사용하는 것은 성능 상 이점이 있지만,createdAt이 항상 ‘YYYY-MM-DD’ 형태의 ISO 8601 문자열이라는 보장이 없습니다. 타입 정의(src/types/...)에서는 단순히string으로 선언되어 있어 포맷 안정성이 보장되지 않으므로, API 응답 형식을 재확인하거나 런타임 검증 로직을 추가하는 것을 권장합니다.
- src/app/(with-header)/activities/[id]/components/ReviewSection.tsx:61
review.createdAt.slice(0, 10).replace(/-/g, '.')사용 부분- src/types/**/* 에서
createdAt: string으로만 선언되어 포맷 검증이 없음
| .map((d) => d.id!) | ||
| .filter(Boolean); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
타입 안전성 개선 제안
d.id!의 non-null assertion 사용은 런타임 에러 위험이 있습니다. 더 안전한 타입 가드를 사용하는 것을 권장합니다.
다음과 같이 수정하세요:
- .map((d) => d.id!)
- .filter(Boolean);
+ .map((d) => d.id)
+ .filter((id): id is number => id !== undefined);📝 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.
| .map((d) => d.id!) | |
| .filter(Boolean); | |
| .map((d) => d.id) | |
| .filter((id): id is number => id !== undefined); |
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts at lines
147-148, the use of non-null assertion `d.id!` can cause runtime errors if `id`
is null or undefined. Replace the non-null assertion with a type-safe guard by
filtering out items where `d.id` is falsy before mapping, or use a conditional
check within the map to ensure only defined `id`s are processed. This will
improve type safety and prevent potential runtime exceptions.
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
src/app/(with-header)/activities/[id]/components/ReviewSection.tsx(5 hunks)src/app/(with-header)/myactivity/components/InfoSection.tsx(1 hunks)src/components/Button.tsx(1 hunks)src/components/FloatingBox/BookingButton.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/components/Button.tsx (5)
src/app/(non-header)/oauth/kakao/components/KakaoLoading.tsx (2)
KakaoLoading(7-16)KakaoLoadingProps(3-5)src/components/Loading.tsx (1)
Loading(3-29)src/app/(with-header)/mypage/page.tsx (1)
i(67-72)src/app/(with-header)/mypage/reservations/page.tsx (1)
i(167-172)src/app/(with-header)/activities/[id]/components/Skeletons/ActivityDetailSkeleton.tsx (1)
_(76-85)
src/app/(with-header)/activities/[id]/components/ReviewSection.tsx (3)
src/lib/utils.ts (1)
cn(4-6)src/app/(with-header)/activities/[id]/components/ReviewCard.tsx (1)
ReviewCard(4-30)src/types/activityDetailType.ts (1)
ReviewCardProps(6-12)
| date={review.createdAt.slice(0, 10).replace(/-/g, '.')} | ||
| reviewText={review.content} |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
날짜 포맷팅 방식 견고성 부족
slice(0, 10).replace(/-/g, '.') 는 ISO-8601 형식이 아닐 경우 깨질 수 있습니다.
dayjs, date-fns 등의 라이브러리 사용을 권장합니다.
- date={review.createdAt.slice(0, 10).replace(/-/g, '.')}
+ import dayjs from 'dayjs';
+ ...
+ date={dayjs(review.createdAt).format('YYYY.MM.DD')}🤖 Prompt for AI Agents
In src/app/(with-header)/activities/[id]/components/ReviewSection.tsx around
lines 62 to 63, the current date formatting uses slice and replace on
review.createdAt, which is fragile if the date is not in ISO-8601 format.
Replace this manual string manipulation with a robust date formatting method by
importing and using a library like dayjs or date-fns to parse and format the
date safely.
| <div className='pointer-events-none relative min-h-300 select-none'> | ||
| <div className={cn(user ? '' : 'blur-sm', 'mt-10')}> | ||
| {ReviewComponent()} | ||
| </div> |
There was a problem hiding this comment.
pointer-events-none 무조건 적용으로 상호작용 차단
pointer-events-none 가 로그인 여부와 무관하게 적용되어 리뷰 영역 내 링크·텍스트 선택이 모두 비활성화됩니다.
로그인한 사용자는 정상적으로 상호작용할 수 있도록 조건부로 적용해 주세요.
- <div className='pointer-events-none relative min-h-300 select-none'>
+ <div
+ className={cn(!user && 'pointer-events-none select-none', 'relative min-h-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.
| <div className='pointer-events-none relative min-h-300 select-none'> | |
| <div className={cn(user ? '' : 'blur-sm', 'mt-10')}> | |
| {ReviewComponent()} | |
| </div> | |
| <div | |
| className={cn(!user && 'pointer-events-none select-none', 'relative min-h-300')} | |
| > | |
| <div className={cn(user ? '' : 'blur-sm', 'mt-10')}> | |
| {ReviewComponent()} | |
| </div> |
🤖 Prompt for AI Agents
In src/app/(with-header)/activities/[id]/components/ReviewSection.tsx around
lines 107 to 110, the class 'pointer-events-none' is applied unconditionally,
blocking all interactions in the review area regardless of login status. Modify
the code to apply 'pointer-events-none' only when the user is not logged in,
allowing logged-in users to interact normally with links and text selection.
| maxLength={20} | ||
| onChange={(e) => onTitleChange(e.target.value)} |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
글자 수 제한 UX 보완 제안
maxLength={20} 설정으로 입력이 조용히 차단됩니다.
남은 글자 수 표시(예: “12/20”) 또는 경고 메시지를 추가하면 사용자 경험이 향상됩니다. 또한 백엔드에서도 동일한 제한이 적용되는지 확인해 주세요.
글자 수 제한 UX 보완 필요
InfoSection.tsx (src/app/(with-header)/myactivity/components/InfoSection.tsx) 42–43행에서
maxLength={20}
onChange={(e) => onTitleChange(e.target.value)}현재 입력이 20자를 넘으면 조용히 막히기만 하므로, 아래를 검토해 주세요:
- 남은 글자 수 표시 추가 (예: “12/20”)
- 초과 입력 시 경고 또는 비활성화 상태 안내
- 백엔드에서도 동일한 20자 제한이 정상적으로 적용되는지 확인
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/InfoSection.tsx around lines
42-43, the input field limits text to 20 characters silently without user
feedback. Enhance the UX by adding a visible character count display (e.g.,
"12/20") near the input, provide a warning or disable further input when the
limit is exceeded, and verify that the backend enforces the same 20-character
limit to maintain consistency.
| {isLoading ? <span className='animate-pulse'>...</span> : children} | ||
| </button> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
로딩 텍스트 접근성 개선 필요
'...' 만으로는 스크린리더가 의미 있는 읽기를 하지 못합니다.
aria-label 또는 visually-hidden span 으로 “로딩 중” 과 같은 문구를 추가하여 접근성을 보완해 주세요.
- {isLoading ? <span className='animate-pulse'>...</span> : children}
+ {isLoading ? (
+ <span
+ className='animate-pulse'
+ aria-label='로딩 중'
+ role='status'
+ >
+ ...
+ <span className='sr-only'>로딩 중</span>
+ </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} | |
| </button> | |
| {isLoading ? ( | |
| <span | |
| className='animate-pulse' | |
| aria-label='로딩 중' | |
| role='status' | |
| > | |
| ... | |
| <span className='sr-only'>로딩 중</span> | |
| </span> | |
| ) : ( | |
| children | |
| )} | |
| </button> |
🤖 Prompt for AI Agents
In src/components/Button.tsx around lines 48 to 49, the loading indicator
currently uses only '...' which is not accessible for screen readers. To improve
accessibility, add an aria-label with a descriptive text like "Loading" to the
span or include a visually hidden span containing the text "로딩 중" alongside the
dots. This will ensure screen readers convey meaningful information during
loading states.
| {onBooking ? ( | ||
| <div className='flex items-center justify-center gap-2'> | ||
| <span className='h-10 w-10 animate-spin rounded-full border-2 border-white border-t-transparent' /> | ||
| <p>...</p> | ||
| <p>요청전송중...</p> | ||
| </div> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
로딩 문구 일관성 유지 검토
요청전송중... 과 Button 컴포넌트의 '...' 가 불일치합니다.
사용자에게 동일한 로딩 경험을 제공하기 위해 메시지·스타일을 공통 util 로 추출하거나 최소한 문구를 통일하는 방안을 고려해 주세요.
🤖 Prompt for AI Agents
In src/components/FloatingBox/BookingButton.tsx around lines 31 to 35, the
loading text "요청전송중..." inside the div is inconsistent with the ellipsis style
used in the Button component. To fix this, unify the loading message and style
by either extracting the loading text and animation into a shared utility or
constant used by both places, or at minimum, make sure the ellipsis and wording
match exactly to provide a consistent user experience.
minimo-9
left a comment
minimo-9
left a comment
There was a problem hiding this comment.
마지막까지 수정하시느라 고생 많으셨습니다!
📌 변경 사항 개요
fix: 일정수정로직수정/후기 일자 표기 수정
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
💡 참고 사항
Summary by CodeRabbit
버그 수정
기능 개선