체험 상세페이지 UI 리팩토링 #232
Merged
체험 상세페이지 UI 리팩토링 #232
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
📝 WalkthroughWalkthrough이 변경사항은 액티비티 상세 페이지와 관련된 여러 컴포넌트에 대해 프리디파인드 CSS 클래스 도입, 가격 정보 표시 추가, UI 스켈레톤 컴포넌트 도입, 그리고 스타일 일관성 개선을 포함합니다. 또한, 예약 및 리뷰 섹션의 UI 구조와 스타일이 업데이트되었으며, 로딩 상태에서 스피너 대신 스켈레톤 UI가 사용됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ActivityDetailPage
participant Skeletons
participant ActivitiesInformation
participant ReservationForm
User->>ActivityDetailPage: 페이지 진입
ActivityDetailPage->>Skeletons: 데이터 로딩 중 스켈레톤 렌더링
ActivityDetailPage->>ActivitiesInformation: 데이터 수신 후 price 등 prop 전달
ActivityDetailPage->>ReservationForm: price 등 prop 전달
ActivitiesInformation-->>User: 액티비티 정보 + 가격 표시
ReservationForm-->>User: 예약 폼 UI 표시
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20분 Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (6)📓 Common learnings📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...Applied to files:
📚 Learning: kjhyun0830은 what-today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 u...Applied to files:
📚 Learning: in packages/design-system/src/components/button/index.tsx, harryseop uses handleclick wrapper for se...Applied to files:
📚 Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 reservationstatus 타입이 calendar/index.ts에서 re-export...Applied to files:
📚 Learning: packages/design-system/src/components/datepicker.tsx에서 taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세...Applied to files:
🔇 Additional comments (6)
✨ 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
Documentation and Community
|
|
🚀 오늘뭐해 Preview Deploy 완료! |
![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
🧹 Nitpick comments (8)
apps/what-today/src/components/skeletons/activities/DividerSkeleton.tsx (1)
1-3: 스켈레톤 div에 접근성 속성 추가 제안스크린 리더가 불필요하게
div를 읽지 않도록aria-hidden="true"혹은role="presentation"을 부여하는 것이 좋습니다.
스켈레톤 UI 전반에 동일한 패턴을 적용하면 접근성 품질을 쉽게 유지할 수 있습니다.- return <div className='h-1 w-full animate-pulse rounded bg-gray-200' />; + return <div aria-hidden='true' role='presentation' className='h-1 w-full animate-pulse rounded bg-gray-200' />;apps/what-today/src/components/skeletons/activities/ActivitiesDescriptionSkeleton.tsx (1)
3-15: 고정 높이보다 유동 레이아웃·접근성 속성 고려 필요
h-16,h-20같은 픽스드 높이는 실제 폰트·디바이스 조합에 따라 깨질 수 있습니다.min-h,aspect-*혹은 flex-grow 조합으로 유동화를 검토해 주세요.- 스켈레톤 요소에
aria-hidden="true"를 부여해 스크린 리더 노이즈를 줄이는 것을 권장합니다.apps/what-today/src/components/skeletons/activities/ActivityImagesSkeleton.tsx (1)
3-27: 고정 픽셀 레이아웃은 반응형에서 깨질 수 있음
h-400,grid-rows-[196px_196px]등 절대값 클래스는 모바일 기기에서 이미지가 잘리는 원인이 될 수 있습니다.
aspect-[4/3],min-h-[200px],md:h-[400px]같은 responsive height나object-cover조합으로 리팩터링을 고려해 주세요.apps/what-today/src/components/activities/ReservationBottomBar.tsx (1)
28-36: 가격·인원 텍스트에 aria-live 영역 추가 검토날짜·인원 선택 시 실시간으로 변하는 금액이 시각 장애인에게는 전달되지 않습니다.
aria-live="polite"를 가격 래퍼에 추가하면 변경 사항을 스크린 리더가 공지할 수 있습니다.apps/what-today/src/components/activities/ActivitiesReview.tsx (1)
16-20:formattedDate계산을useMemo로 감싸 렌더링 비용 최소화
createdAt는 props로 고정값이므로useMemo로 포맷팅을 캐싱하면 불필요한 날짜 재계산을 피할 수 있습니다.
큰 이슈는 아니지만 리뷰 목록이 잦은 리렌더를 일으킬 경우 미세한 성능 차이가 누적될 수 있습니다.- const formattedDate = new Date(createdAt).toLocaleDateString('ko-KR', { … }); + const formattedDate = useMemo( + () => + new Date(createdAt).toLocaleDateString('ko-KR', { + year: 'numeric', + month: 'numeric', + day: 'numeric', + }), + [createdAt], + );apps/what-today/src/components/activities/ActivitiesMap.tsx (1)
16-19: 시맨틱 마크업 적용 및 Tailwind 커스텀 클래스 유효성 확인
"오시는 길"헤더가 단순div라서 시맨틱 구조가 약합니다.<h2>(또는 적절한 heading)로 변경하면 접근성과 SEO가 개선됩니다.h-511은 Tailwind 기본 스케일에 없으므로 config 확장 값이 맞는지 확인이 필요합니다. 누락 시 빌드 타임에 클래스가 제거됩니다.- <section className={twMerge(`section-text flex h-511 …`, className)}> - <div>오시는 길</div> + <section className={twMerge(`section-text flex h-[511px] …`, className)}> + <h2 className='section-text'>오시는 길</h2>apps/what-today/src/components/skeletons/activities/ReviewSectionSkeleton.tsx (1)
12-20:mb-34– Tailwind 기본 스케일에 없는 여백 값
mb-34는 기본 스케일(단위 4) 범위를 벗어납니다. config 확장 값이 없다면 클래스를mb-[34px]로 대체하거나 디자인 측과 간격을 재조정해 주세요.apps/what-today/src/components/skeletons/activities/index.ts (1)
1-9: 내보내기 순서를 알파벳 기준으로 정렬하면 유지보수 용이추가·삭제 시 merge conflict 확률을 줄이고 가독성이 개선됩니다.
(예:ActivitiesDescriptionSkeleton,ActivitiesInformationSkeleton,ActivitiesMapSkeleton,ActivityDetailPageSkeleton,ActivityImagesSkeleton,DividerSkeleton,ReservationFormSkeleton,ReviewCardSkeleton,ReviewSectionSkeleton)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
apps/what-today/src/components/activities/ActivitiesDescription.tsx(1 hunks)apps/what-today/src/components/activities/ActivitiesInformation.tsx(3 hunks)apps/what-today/src/components/activities/ActivitiesMap.tsx(1 hunks)apps/what-today/src/components/activities/ActivitiesReview.tsx(1 hunks)apps/what-today/src/components/activities/ActivityImages.tsx(7 hunks)apps/what-today/src/components/activities/Divider.tsx(1 hunks)apps/what-today/src/components/activities/ReservationBottomBar.tsx(1 hunks)apps/what-today/src/components/activities/ReviewSection.tsx(5 hunks)apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx(1 hunks)apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx(4 hunks)apps/what-today/src/components/activities/reservation/ReservationForm.tsx(3 hunks)apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx(1 hunks)apps/what-today/src/components/activities/reservation/TimeSelector.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/ActivitiesDescriptionSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/ActivitiesInformationSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/ActivitiesMapSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/ActivityImagesSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/DividerSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/ReviewCardSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/ReviewSectionSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/activities/index.ts(1 hunks)apps/what-today/src/pages/activities/index.tsx(6 hunks)
🧰 Additional context used
🧠 Learnings (15)
📓 Common learnings
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#220
File: apps/what-today/src/pages/activities/index.tsx:64-70
Timestamp: 2025-08-02T20:26:03.149Z
Learning: HarrySeop 프로젝트에서 예약 플로우는 디바이스별로 다르게 구현됨: 데스크톱은 ReservationForm 컴포넌트의 내부 토스트를 사용하고, 태블릿/모바일은 바텀시트 → handleSubmitReservation → 페이지 레벨 토스트를 사용하는 구조임.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#169
File: apps/what-today/src/hooks/useMyActivitiesQuery.ts:23-25
Timestamp: 2025-07-29T14:50:14.117Z
Learning: kjhyun0830은 What-Today 프로젝트에서 토스터 알림과 같은 UI 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#119
File: apps/what-today/src/pages/mypage/edit-profile/index.tsx:63-92
Timestamp: 2025-07-24T08:30:12.556Z
Learning: MyungJiwoo indicated they will implement validation checks for the edit profile page (password confirmation validation) immediately after PR #119 is merged, following their incremental development approach.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#89
File: packages/design-system/src/components/bottomsheet/hooks/index.ts:44-51
Timestamp: 2025-07-21T04:36:28.477Z
Learning: HarrySeop encountered a scroll restoration issue in the useBodyScrollLock hook where the base page jumps to the top during mount/unmount of the bottom sheet component. They tried adding isLocked check in cleanup function and ref-based approaches but both failed to resolve the issue. They decided to defer this fix to a later refactoring.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#129
File: apps/what-today/src/pages/mypage/reservations-list/index.tsx:13-25
Timestamp: 2025-07-24T19:36:15.516Z
Learning: HarrySeop은 What-Today 프로젝트에서 API 에러 처리를 토스터(toast notification)로 처리하는 방식을 선호하며, 핸들러 함수 구현 시점에 함께 연결하는 접근 방식을 취함.
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Applied to files:
apps/what-today/src/components/activities/Divider.tsxapps/what-today/src/components/activities/ActivitiesDescription.tsxapps/what-today/src/components/activities/ActivityImages.tsxapps/what-today/src/components/activities/ActivitiesMap.tsxapps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsxapps/what-today/src/components/activities/ReservationBottomBar.tsxapps/what-today/src/components/skeletons/activities/DividerSkeleton.tsxapps/what-today/src/pages/activities/index.tsxapps/what-today/src/components/skeletons/activities/ActivitiesDescriptionSkeleton.tsxapps/what-today/src/components/activities/reservation/TimeSelector.tsxapps/what-today/src/components/skeletons/activities/ActivityImagesSkeleton.tsxapps/what-today/src/components/activities/ActivitiesReview.tsxapps/what-today/src/components/skeletons/activities/ActivitiesMapSkeleton.tsxapps/what-today/src/components/activities/reservation/HeadCountSelector.tsxapps/what-today/src/components/skeletons/activities/ReviewSectionSkeleton.tsxapps/what-today/src/components/skeletons/activities/index.tsapps/what-today/src/components/activities/ReviewSection.tsxapps/what-today/src/components/skeletons/activities/ReviewCardSkeleton.tsxapps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsxapps/what-today/src/components/activities/reservation/TabletReservationSheet.tsxapps/what-today/src/components/activities/reservation/ReservationForm.tsxapps/what-today/src/components/skeletons/activities/ActivitiesInformationSkeleton.tsxapps/what-today/src/components/activities/reservation/MobileReservationSheet.tsxapps/what-today/src/components/activities/ActivitiesInformation.tsx
📚 Learning: packages/design-system/src/components/datepicker.tsx에서 taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#125
File: packages/design-system/src/components/DatePicker.tsx:25-28
Timestamp: 2025-07-24T13:33:33.202Z
Learning: packages/design-system/src/components/DatePicker.tsx에서 Taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
Applied to files:
apps/what-today/src/components/activities/Divider.tsxapps/what-today/src/components/activities/ActivitiesDescription.tsxapps/what-today/src/components/activities/ActivityImages.tsxapps/what-today/src/components/activities/ActivitiesMap.tsxapps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsxapps/what-today/src/components/activities/ReservationBottomBar.tsxapps/what-today/src/components/skeletons/activities/DividerSkeleton.tsxapps/what-today/src/pages/activities/index.tsxapps/what-today/src/components/activities/reservation/TimeSelector.tsxapps/what-today/src/components/activities/ActivitiesReview.tsxapps/what-today/src/components/activities/reservation/HeadCountSelector.tsxapps/what-today/src/components/activities/ReviewSection.tsxapps/what-today/src/components/skeletons/activities/ReviewCardSkeleton.tsxapps/what-today/src/components/activities/reservation/TabletReservationSheet.tsxapps/what-today/src/components/activities/reservation/ReservationForm.tsxapps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
📚 Learning: kjhyun0830은 what-today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 u...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Applied to files:
apps/what-today/src/components/activities/ActivitiesDescription.tsxapps/what-today/src/components/activities/ActivitiesMap.tsxapps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsxapps/what-today/src/pages/activities/index.tsxapps/what-today/src/components/skeletons/activities/ActivitiesDescriptionSkeleton.tsxapps/what-today/src/components/skeletons/activities/ActivityImagesSkeleton.tsxapps/what-today/src/components/skeletons/activities/ActivitiesMapSkeleton.tsxapps/what-today/src/components/skeletons/activities/ReviewSectionSkeleton.tsxapps/what-today/src/components/skeletons/activities/index.tsapps/what-today/src/components/activities/ReviewSection.tsxapps/what-today/src/components/skeletons/activities/ReviewCardSkeleton.tsxapps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsxapps/what-today/src/components/activities/reservation/TabletReservationSheet.tsxapps/what-today/src/components/activities/reservation/ReservationForm.tsxapps/what-today/src/components/skeletons/activities/ActivitiesInformationSkeleton.tsxapps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
📚 Learning: profileimageinput 컴포넌트(packages/design-system/src/components/profileimageinput.tsx)에서 previewurl은 의도...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#79
File: packages/design-system/src/components/ProfileImageInput.tsx:44-45
Timestamp: 2025-07-19T17:03:39.193Z
Learning: ProfileImageInput 컴포넌트(packages/design-system/src/components/ProfileImageInput.tsx)에서 previewUrl은 의도적으로 내부 상태로 관리됩니다. 이는 미리보기 이미지 관리와 API로 받아온 원본 이미지와의 비교를 위한 용도로, 외부에서 제어할 필요가 없는 uncontrolled 컴포넌트 + 콜백 패턴입니다.
Applied to files:
apps/what-today/src/components/activities/ActivityImages.tsx
📚 Learning: taeil08이 what-today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 ...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
Applied to files:
apps/what-today/src/components/activities/ActivitiesMap.tsxapps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsxapps/what-today/src/components/skeletons/activities/ActivitiesMapSkeleton.tsxapps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsxapps/what-today/src/components/activities/reservation/ReservationForm.tsx
📚 Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 reservationstatus 타입이 calendar/index.ts에서 re-export...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#91
File: apps/what-today/src/pages/mypage/reservations-status/index.tsx:2-2
Timestamp: 2025-07-22T03:59:52.657Z
Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 ReservationStatus 타입이 calendar/index.ts에서 re-export되지 않아 메인 엔트리 포인트에서 접근할 수 없는 문제가 있음. DayCell.tsx에서 정의된 타입들을 calendar 모듈에서 명시적으로 export해야 함.
Applied to files:
apps/what-today/src/components/activities/ActivitiesMap.tsxapps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsxapps/what-today/src/components/activities/ReservationBottomBar.tsxapps/what-today/src/pages/activities/index.tsxapps/what-today/src/components/activities/reservation/TimeSelector.tsxapps/what-today/src/components/activities/reservation/HeadCountSelector.tsxapps/what-today/src/components/skeletons/activities/index.tsapps/what-today/src/components/activities/ReviewSection.tsxapps/what-today/src/components/activities/reservation/TabletReservationSheet.tsxapps/what-today/src/components/activities/reservation/ReservationForm.tsxapps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
📚 Learning: harryseop 프로젝트에서 예약 플로우는 디바이스별로 다르게 구현됨: 데스크톱은 reservationform 컴포넌트의 내부 토스트를 사용하고, 태블릿/모바일은 바텀시트 → h...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#220
File: apps/what-today/src/pages/activities/index.tsx:64-70
Timestamp: 2025-08-02T20:26:03.149Z
Learning: HarrySeop 프로젝트에서 예약 플로우는 디바이스별로 다르게 구현됨: 데스크톱은 ReservationForm 컴포넌트의 내부 토스트를 사용하고, 태블릿/모바일은 바텀시트 → handleSubmitReservation → 페이지 레벨 토스트를 사용하는 구조임.
Applied to files:
apps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsxapps/what-today/src/components/activities/ReservationBottomBar.tsxapps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsxapps/what-today/src/components/activities/reservation/TabletReservationSheet.tsxapps/what-today/src/components/activities/reservation/ReservationForm.tsxapps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
📚 Learning: in packages/design-system/src/components/button/index.tsx, harryseop uses handleclick wrapper for se...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:32-41
Timestamp: 2025-07-16T06:51:15.152Z
Learning: In packages/design-system/src/components/button/index.tsx, HarrySeop uses handleClick wrapper for security purposes to prevent execution when users remove disabled attributes via developer tools. The onClick handler should be extracted from rest props before spreading to avoid being overwritten.
Applied to files:
apps/what-today/src/components/activities/ReservationBottomBar.tsxapps/what-today/src/components/activities/reservation/TimeSelector.tsxapps/what-today/src/components/activities/reservation/HeadCountSelector.tsxapps/what-today/src/components/activities/ReviewSection.tsx
📚 Learning: what-today 프로젝트는 react + vite로 구성된 클라이언트 사이드 애플리케이션이며 ssr(server-side rendering)을 사용하지 않는다....
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#97
File: apps/what-today/src/hooks/useResponsive.ts:16-16
Timestamp: 2025-07-22T03:59:53.290Z
Learning: What-Today 프로젝트는 React + Vite로 구성된 클라이언트 사이드 애플리케이션이며 SSR(Server-Side Rendering)을 사용하지 않는다.
Applied to files:
apps/what-today/src/pages/activities/index.tsx
📚 Learning: myungjiwoo encountered multiple api calls when adding all dependencies to useeffect in oauth callbac...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#98
File: apps/what-today/src/hooks/useKakaoOAuth.ts:37-65
Timestamp: 2025-07-21T13:40:52.209Z
Learning: MyungJiwoo encountered multiple API calls when adding all dependencies to useEffect in OAuth callback hooks. The solution is to use useRef to prevent duplicate requests and useCallback to memoize the async function, keeping only essential dependencies (searchParams and the memoized function) in the dependency array.
Applied to files:
apps/what-today/src/pages/activities/index.tsx
📚 Learning: in the selectroot component (packages/design-system/src/components/select/selectroot.tsx), myungjiwo...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#57
File: packages/design-system/src/components/select/SelectRoot.tsx:37-38
Timestamp: 2025-07-17T01:20:26.915Z
Learning: In the SelectRoot component (packages/design-system/src/components/select/SelectRoot.tsx), MyungJiwoo questioned the need for implementing controlled component pattern. The current implementation only handles internal→external state changes via onChangeValue callback, but doesn't handle external→internal changes when the value prop is updated, which breaks the typical React controlled component contract.
Applied to files:
apps/what-today/src/components/activities/reservation/TimeSelector.tsxapps/what-today/src/components/activities/reservation/HeadCountSelector.tsxapps/what-today/src/components/activities/reservation/ReservationForm.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), the input type s...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:18:33.545Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), the input type should be 'checkbox' rather than 'radio' to support the intended toggle behavior where users can click a selected option again to deselect it. The handleChange function already implements this toggle logic with `onSelect?.(isSelected ? '' : value);`.
Applied to files:
apps/what-today/src/components/activities/reservation/TimeSelector.tsxapps/what-today/src/components/activities/reservation/HeadCountSelector.tsx
📚 Learning: in the button component (packages/design-system/src/components/button/index.tsx), the children filte...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:63-70
Timestamp: 2025-07-15T16:38:40.310Z
Learning: In the Button component (packages/design-system/src/components/button/index.tsx), the children filtering logic that only allows strings and Icon components is intentional design decision by HarrySeop. The validChildren filter is meant to restrict button content to only text strings and Icon components for consistency and to prevent component misuse.
Applied to files:
apps/what-today/src/components/activities/reservation/HeadCountSelector.tsxapps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
📚 Learning: in korean react calendar components, it's common to use english weekday abbreviations (s, m, t, etc....
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#31
File: packages/design-system/src/components/calendar/CalendarGrid.tsx:13-13
Timestamp: 2025-07-12T16:11:37.214Z
Learning: In Korean React calendar components, it's common to use English weekday abbreviations (S, M, T, etc.) while keeping month/year displays in Korean format. CalendarGrid can use dayjs.locale('en') for weekdays while CalendarHeader uses hardcoded Korean format strings like 'YYYY년 MM월', and these don't conflict since the Korean text is hardcoded in the format string.
Applied to files:
apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
🧬 Code Graph Analysis (5)
apps/what-today/src/components/activities/ActivitiesMap.tsx (1)
apps/what-today/src/components/map/index.tsx (1)
KakaoMap(34-129)
apps/what-today/src/pages/activities/index.tsx (4)
apps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsx (1)
ActivityDetailPageSkeleton(11-64)apps/what-today/src/components/activities/Divider.tsx (1)
Divider(7-9)apps/what-today/src/components/activities/ActivitiesDescription.tsx (1)
ActivitiesDescription(11-18)apps/what-today/src/components/activities/ActivitiesMap.tsx (1)
ActivitiesMap(14-24)
apps/what-today/src/components/skeletons/activities/ReviewSectionSkeleton.tsx (1)
apps/what-today/src/components/skeletons/activities/ReviewCardSkeleton.tsx (1)
ReviewCardSkeleton(1-27)
apps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsx (1)
apps/what-today/src/hooks/useResponsive.ts (1)
useResponsive(15-35)
apps/what-today/src/components/activities/reservation/ReservationForm.tsx (4)
apps/what-today/src/components/activities/reservation/CalendarSelector.tsx (1)
CalendarSelector(9-30)apps/what-today/src/components/activities/reservation/TimeSelector.tsx (1)
TimeSelector(14-36)apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx (1)
HeadCountSelector(10-26)apps/what-today/src/components/activities/Divider.tsx (1)
Divider(7-9)
🔇 Additional comments (46)
apps/what-today/src/components/activities/Divider.tsx (1)
8-8: UI 일관성 개선을 위한 적절한 스타일 변경
border-gray-100에서border-gray-50으로 변경하여 더 미묘하고 일관된 시각적 구분선을 제공합니다. 전체적인 UI 리팩토링 목표에 부합하는 변경사항입니다.apps/what-today/src/components/skeletons/activities/ActivitiesMapSkeleton.tsx (1)
1-16: 스켈레톤 UI 구현이 잘 되어 있습니다지도 섹션에 대한 적절한 스켈레톤 플레이스홀더를 제공합니다. 섹션 제목, 주소, 지도 영역을 위한 구조화된 레이아웃과 애니메이션이 올바르게 구현되어 있습니다.
apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx (2)
13-13: 시맨틱 CSS 클래스 도입으로 일관성 개선
section-text클래스 사용으로 타이포그래피 일관성이 향상되었습니다.
15-22: 스타일 일관성 및 접근성 개선
border-gray-50사용으로 더 미묘한 UI 제공- CSS 변수를 통한 아이콘 색상 관리로 테마 일관성 확보
body-text클래스로 타이포그래피 표준화apps/what-today/src/components/activities/ActivityImages.tsx (1)
15-15: 일관된 테두리 스타일 개선모든 이미지 컨테이너에서
border-gray-200을border-gray-50으로 변경하여 더 미묘하고 일관된 시각적 구분을 제공합니다. 메인 배너 이미지와 모든 서브 이미지 레이아웃에 일관되게 적용되었습니다.Also applies to: 24-24, 38-38, 46-46, 63-63, 73-73, 83-83, 100-100
apps/what-today/src/components/activities/ActivitiesDescription.tsx (1)
14-15: 시맨틱 CSS 클래스 도입으로 타이포그래피 표준화
section-text와body-text클래스 사용으로 일관된 타이포그래피 스타일이 적용되었습니다. 명시적인 Tailwind 유틸리티 클래스에서 시맨틱 클래스로의 전환이 유지보수성을 향상시킵니다.apps/what-today/src/components/activities/ReservationBottomBar.tsx (1)
39-41: 디자인 시스템에 없는size="none"사용 여부 확인
Button컴포넌트 prop 타입에none이 정의돼 있지 않다면 TS 오류나 런타임 스타일 미적용이 발생할 수 있습니다.
타입 정의를 재확인하거나, 별도unstyledvariant를 추가하는 편이 명확합니다.apps/what-today/src/components/activities/ActivitiesReview.tsx (1)
38-42: 별점 아이콘에 접근성 레이블 추가 필요
StarIcon이 단순 SVG일 경우 스크린리더가 아무 정보도 읽지 못합니다.
aria-hidden처리 + 별점 컨테이너에aria-label={${rating}점}등을 부여해 시각장애인도 평가값을 파악할 수 있게 해 주세요.apps/what-today/src/components/skeletons/activities/ActivitiesInformationSkeleton.tsx (1)
3-26: Tailwind 확장 값(w-200,w-120) 컴파일 여부 확인
w-200,w-120등은 기본 Tailwind 폭 스케일에 존재하지 않습니다.
config에spacing: { 120: '120px', 200: '200px' }등을 선언하지 않았다면 해당 클래스가 제거되어 스켈레톤이 보이지 않을 수 있습니다. 필요 시 임의 값 문법을 사용하세요.- <div className='h-16 w-200 animate-pulse …' /> + <div className='h-16 w-[200px] animate-pulse …' />apps/what-today/src/pages/activities/index.tsx (5)
18-18: 스켈레톤 UI 도입으로 로딩 UX 개선
ActivityDetailPageSkeleton컴포넌트 도입으로 기존 스피너 대신 구조화된 스켈레톤 UI를 제공하여 사용자 경험이 향상되었습니다.
40-40: 일관된 로딩 상태 처리스켈레톤 컴포넌트 사용으로 로딩 상태가 일관되게 처리되고 있습니다.
95-95: 그리드 레이아웃 조정데스크톱 그리드 컬럼 너비를 410px에서 350px로 조정하여 더 나은 레이아웃 균형을 제공합니다.
110-110: 가격 정보 일관성 확보모든 관련 컴포넌트에
priceprop을 전달하여 가격 정보 표시의 일관성을 확보했습니다.Also applies to: 133-133
138-142: Divider 컴포넌트 단순화
classNameprop 제거로 Divider 컴포넌트 사용이 단순화되었으며, 기본 스타일링으로 통일성을 확보했습니다.apps/what-today/src/components/skeletons/activities/ReviewCardSkeleton.tsx (1)
1-27: 리뷰 카드 스켈레톤 구현 우수리뷰 카드의 구조를 잘 반영한 스켈레톤 컴포넌트입니다:
- 아바타, 제목, 별점, 컨텐츠 영역을 적절히 표현
- 일관된 애니메이션과 색상 사용
- 반응형 레이아웃 구조 잘 구현
apps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsx (1)
1-46: 예약 폼 스켈레톤 완성도 높음예약 폼의 모든 주요 섹션을 포괄하는 우수한 스켈레톤 구현입니다:
- 캘린더 그리드 (7x5 레이아웃)
- 인원 선택 컨트롤
- 구분선 및 총합계 섹션
- 실제 폼 구조와 정확히 일치
일관된 애니메이션과 간격으로 로딩 상태에서 사용자 경험이 크게 개선될 것입니다.
apps/what-today/src/components/activities/reservation/ReservationForm.tsx (6)
4-4: Divider 컴포넌트 통합섹션 구분을 위한 Divider 컴포넌트 추가로 UI 일관성이 향상되었습니다.
93-95: 가격 표시 임시 비활성화인당 가격 표시가 주석 처리되었습니다. 의도적인 디자인 변경인지 확인이 필요합니다.
이 변경이 의도적인 디자인 결정인지 확인해주세요.
103-111: 시간 선택 UI 개선시간 선택 영역에 스크롤 컨테이너와 최대 높이 제한을 추가하여 긴 시간 목록의 UX가 개선되었습니다.
116-116: 섹션 구분선 추가인원 선택과 총합계 섹션 사이에 Divider를 추가하여 시각적 구분이 명확해졌습니다.
119-121: 타이포그래피 및 레이아웃 개선
section-text클래스로 일관된 타이포그래피 적용- 가격 텍스트 오버플로우 처리 개선
- 플렉스 레이아웃으로 정렬 향상
137-137: 컨테이너 스타일링 단순화섀도우 제거 및 경계선 색상 조정으로 더 깔끔한 디자인을 구현했습니다.
apps/what-today/src/components/activities/ReviewSection.tsx (5)
1-3: 컴포넌트 임포트 최적화
NoResult와ReviewCardSkeleton컴포넌트 도입으로 더 나은 빈 상태와 로딩 상태를 제공합니다.
42-42: 일관된 타이포그래피 적용
section-text와body-text클래스 사용으로 타이포그래피 일관성이 크게 향상되었습니다.Also applies to: 53-53, 65-67
71-76: 평점 표시 스타일링 개선
title-text로 평점 강조section-text로 만족도 텍스트 일관성 확보- 별점 아이콘과 텍스트의 시각적 정렬 개선
84-86: 빈 상태 UX 개선텍스트 메시지 대신
NoResult컴포넌트 사용으로 더 나은 빈 상태 경험을 제공합니다.
94-97: 로딩 상태 UX 향상텍스트 로딩 메시지 대신
ReviewCardSkeleton컴포넌트 사용으로 더 자연스러운 로딩 경험을 제공합니다.apps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsx (3)
1-10: 스켈레톤 컴포넌트 구조가 잘 설계되었습니다.작은 스켈레톤 컴포넌트들을 조합하여 전체 페이지 스켈레톤을 구성하는 방식이 좋습니다. 각 컴포넌트의 역할이 명확하고 재사용성이 높습니다.
11-34: 반응형 레이아웃 구현이 적절합니다.데스크톱에서는 2컬럼 그리드와 sticky 사이드바를 사용하고, 모바일/태블릿에서는 단일 컬럼 레이아웃을 사용하는 것이 사용자 경험에 적합합니다.
useResponsive훅을 활용한 조건부 렌더링도 깔끔합니다.
50-61: 모바일 하단바 스켈레톤 구현이 좋습니다.실제 예약 하단바와 일치하는 fixed 포지셔닝과 z-index 설정이 적절합니다. 가격과 버튼 영역을 시각적으로 구분한 레이아웃도 실제 컴포넌트와 일관성을 유지합니다.
apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx (5)
41-41: 패딩 조정이 적절합니다.
px-20에서px-10으로, 하단 패딩 제거하고 상단만pt-24로 설정한 것이 태블릿 바텀시트의 공간 활용을 개선합니다.
55-55: 시맨틱 타이포그래피 클래스 적용이 좋습니다.기존의 개별 스타일링 대신
section-text클래스를 사용하여 디자인 시스템의 일관성을 높였습니다.
57-63: 스크롤 가능한 시간 선택 영역 구현이 우수합니다.
max-h-290과overflow-y-auto를 통해 많은 시간 옵션이 있을 때 사용성을 크게 개선했습니다. 우측 패딩(pr-4)으로 스크롤바와의 시각적 간격도 적절히 확보했습니다.
65-65: 플레이스홀더 텍스트 스타일링 개선.
caption-text text-gray-400로 변경하여 디자인 시스템의 시맨틱 클래스를 활용하고 시각적 계층을 명확히 했습니다.
70-72: 가격 표시 스타일 간소화가 적절합니다.
section-text클래스 사용으로 일관된 타이포그래피를 적용하고, 불필요한 bold 스타일링을 제거하여 깔끔해졌습니다.apps/what-today/src/components/activities/ActivitiesInformation.tsx (5)
17-17: 가격 프로퍼티 추가가 적절합니다.
price: number프로퍼티를 인터페이스와 컴포넌트에 추가하여 다른 예약 관련 컴포넌트들과 일관된 가격 정보 표시가 가능해졌습니다.Also applies to: 32-32
65-70: 컨테이너 스타일링 개선이 좋습니다.
rounded-xl border border-gray-50 p-20스타일로 시각적 구분과 패딩을 적절히 적용했습니다.twMerge를 사용한 조건부 클래스 병합도 깔끔합니다.
72-72: 시맨틱 타이포그래피 클래스 적용이 일관됩니다.
caption-text,title-text,body-text등 시맨틱 클래스를 일관되게 적용하여 디자인 시스템의 타이포그래피 체계를 잘 따르고 있습니다.Also applies to: 83-83, 84-84, 90-90
94-98: 가격 표시 형식이 사용자 친화적입니다.
toLocaleString()을 사용한 천 단위 구분과 원화 기호, 굵은 글씨 스타일링으로 가격 정보를 명확하게 표시했습니다. "/ 인" 단위 표시도 직관적입니다.
104-104: 모달 제목 스타일 일관성 유지.삭제 확인 모달의 제목도
section-text클래스로 변경하여 전체적인 타이포그래피 일관성을 유지했습니다.apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx (6)
1-1: ClockIcon 임포트 추가가 적절합니다.시계 아이콘을 추가하여 선택된 날짜/시간 정보의 시각적 인식성을 높였습니다.
84-85: 단계별 패딩과 타이포그래피 개선.
gap-24 px-10 py-14로 적절한 간격을 설정하고,subtitle-text클래스로 제목의 시각적 계층을 명확히 했습니다.
101-119: 시간 선택 영역 UX 개선이 우수합니다.
section-text클래스 적용과max-h-290스크롤 컨테이너로 사용성을 향상시켰습니다. 확인 버튼을 시간 선택 블록 내부로 이동시켜 논리적 그룹핑도 개선했습니다.
130-136: 인원 선택 단계 헤더 스타일링 개선.
subtitle-text text-gray-950클래스로 일관된 타이포그래피를 적용하고, 뒤로가기 버튼과의 시각적 조화도 좋습니다.
144-152: 날짜/시간 요약 정보의 시각적 개선이 훌륭합니다.ClockIcon과 함께
caption-text,body-text클래스를 사용하여 정보 계층을 명확히 하고, 시각적 인식성을 크게 향상시켰습니다.
161-164: 총 금액 표시 단순화가 적절합니다.배경과 둥근 모서리를 제거하고
section-text클래스로 간소화하여 정보 전달에 집중한 디자인이 좋습니다.
|
🚀 오늘뭐해 Preview Deploy 완료! |
Taeil08
approved these changes
Aug 4, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
2025-08-04.103432.1.mp4
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
New Features
Style
Bug Fixes
Chores