-
Notifications
You must be signed in to change notification settings - Fork 1
체험 상세페이지 추가 디자인 수정 #257
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
체험 상세페이지 추가 디자인 수정 #257
Conversation
|
🚀 오늘뭐해 Preview Deploy 완료! |
📝 WalkthroughWalkthrough이번 변경은 여러 활동(activities) 관련 컴포넌트의 UI 스타일을 일관성 있게 조정하는 데 집중되었습니다. 주요 변경점은 텍스트 색상, 배경색, 여백, 폰트 굵기, 아이콘 교체, Flexbox 레이아웃 적용 등 시각적 요소에 한정되며, 컴포넌트의 로직, 상태 관리, 이벤트 처리에는 영향을 주지 않습니다. Changes
Sequence Diagram(s)(해당 변경들은 모두 스타일 및 마크업에 한정되므로, 시퀀스 다이어그램 생략) Estimated code review effort🎯 1 (Trivial) | ⏱️ ~4분 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
Documentation and Community
|
📝 WalkthroughWalkthrough이 변경사항들은 Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~4 minutes 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
Documentation and Community
|
📝 WalkthroughWalkthrough이 변경 사항들은 주로 UI 스타일링과 레이아웃 개선에 집중되어 있습니다. Tailwind CSS 유틸리티 클래스를 활용하여 색상, 여백, 폰트 스타일, 아이콘, 그리드 간격 등이 조정되었으며, 컴포넌트의 로직이나 제어 흐름에는 변동이 없습니다. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 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
Documentation and Community
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (5)
apps/what-today/src/components/activities/reservation/ReservationForm.tsx (1)
118-122: 부모section-text클래스가 새 자식 스타일과 충돌할 수 있습니다
<p>태그에 여전히section-text가 남아 있어 내부body-text font-bold스타일과 우선순위 충돌이 날 가능성이 있습니다. 불필요하다면 상위 클래스 제거를 권장합니다.-<p className='section-text flex max-w-155 flex-col'> +<p className='flex max-w-155 flex-col'>apps/what-today/src/components/activities/ActivitiesInformation.tsx (1)
95-98: 가격 표시 텍스트 색상 중복 지정부모
<p>에text-gray-400, 자식 두 번째<span>에text-gray-950을 주어 색상 우선순위가 섞여 있습니다. 의도된 디자인이라면 문제 없지만, 불필요한 중복일 경우 부모 색상을 제거해 명시적 정의만 남기는 편이 깔끔합니다.apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx (1)
160-163: 총 금액 라벨과 값의 폰트 계층 통일Label 에
body-text font-bold, 값에section-text가 혼재되어 있어 데스크톱/태블릿 컴포넌트와 미세한 불일치가 있습니다. 통일을 고려해 보세요.apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx (1)
70-72: 부모section-text클래스 유지 시 스타일 중복 가능성Label 을
body-text font-bold로 분리했지만 부모<p>에section-text가 남아 있습니다. 상위 클래스를 제거해 불필요한 스타일 중첩을 줄이는 것을 권장합니다.-<p className='section-text flex items-center gap-6'> +<p className='flex items-center gap-6'>apps/what-today/src/components/activities/ReservationBottomBar.tsx (1)
28-28: 임의 shadow 값 토큰화 검토
shadow-[0px_-4px_24px_rgba(156,180,202,0.2)]와 같이 임의값을 직접 입력하면 디자인 토큰 체계와 괴리가 생깁니다. 동일한 효과를 제공하는 Tailwind 프리셋 또는 사내 shadow 토큰이 있다면 교체를 권장합니다.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/what-today/src/components/activities/ActivitiesInformation.tsx(2 hunks)apps/what-today/src/components/activities/ActivitiesReview.tsx(1 hunks)apps/what-today/src/components/activities/ReservationBottomBar.tsx(1 hunks)apps/what-today/src/components/activities/ReviewSection.tsx(2 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(2 hunks)apps/what-today/src/pages/activities/index.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- apps/what-today/src/pages/activities/index.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx (1)
packages/design-system/src/components/icons/ChevronIcon.tsx (1)
ChevronIcon(30-49)
apps/what-today/src/components/activities/ActivitiesInformation.tsx (1)
packages/design-system/src/components/icons/LocationIcon.tsx (1)
LocationIcon(27-36)
🔇 Additional comments (11)
apps/what-today/src/components/activities/ReviewSection.tsx (2)
60-68: gap 기반 레이아웃 전환으로 간격 일관성 확보 👍
flex flex-col gap-12로 전환하면서 요소 간 간격을gap으로 통제해 마지막 카드 아래에 불필요한 여백이 남지 않게 되었습니다. 디자인 QA 피드백을 충실히 반영한 것으로 보이며 추가적인 로직 변경도 없어 안정적입니다.
74-78: 로딩 스켈레톤 컨테이너도 동일한 간격으로 통일로딩 상태에서도
gap-12를 적용해 실제 리뷰 리스트와 동일한 수직 간격을 유지했습니다. UI 흔들림이 줄어들어 사용자 경험이 개선됩니다.apps/what-today/src/components/activities/ActivitiesReview.tsx (1)
23-23: 카드 자체 여백 제거 — 다른 사용처 영향 확인 필요
mb-20제거로 부모 컨테이너(gap-12)에서만 간격을 관리하게 되었습니다. ReviewSection 외 다른 화면에서ActivitiesReview가 단독으로 사용된다면 예상보다 간격이 좁아질 수 있으니 사용처를 한 번 더 점검해주세요.apps/what-today/src/components/activities/reservation/ReservationForm.tsx (1)
90-92: gap-16 변경 사항 확인 완료레이아웃·간격 조정만 이루어진 것으로 보이며, 동작에 영향 없습니다.
apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx (1)
13-16: 비표준 Tailwind spacing 유틸리티 사용 여부 확인 필요
w-138,gap-23,px-15등은 기본 Tailwind 프리셋에 존재하지 않습니다.
프로젝트 설정에 커스텀 값이 없으면 빌드 시 purge 대상이 되어 적용되지 않을 수 있으니 확인 부탁드립니다.apps/what-today/src/components/activities/ActivitiesInformation.tsx (1)
66-68:bg-gray-25토큰 정의 여부 확인신규 배경색 토큰이 디자인 시스템에 실제로 정의되어 있는지 확인해 주세요. 미정의 시 런타임에 class-not-found 경고가 발생할 수 있습니다.
apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx (2)
132-134:ChevronIcon방향·색상 적용 확인 완료
direction='left'및 CSS 변수 색상 전달이 아이콘 컴포넌트 구현과 일치합니다. 기능적 문제 없습니다.
142-143:bg-gray-25클래스 사용다른 파일과 동일하게 신규 색상 토큰이 필요합니다. 디자인 시스템에 정의돼 있는지 한번 더 확인 부탁드립니다.
apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx (1)
55-56: 라벨 폰트 계층 변경 LGTM
예약 가능한 시간라벨을 굵게 처리해 가독성이 향상되었습니다.apps/what-today/src/components/activities/ReservationBottomBar.tsx (2)
28-28: border-gray-50 사용은 실효성이 떨어질 수 있습니다
border-gray-50은 거의 흰색에 가까워 실제 단말기에서 테두리가 보이지 않을 가능성이 높습니다. 디자인 의도라면 무관하지만, QA 단계에서 시각적 구분이 필요한지 한 번 더 확인해 주세요.
33-33: 보조 정보 색상 변경 LGTM
text-gray-400적용으로 주‧부 정보 계층이 명확해졌습니다. 접근성 대비(contrast)도 gray-400이면 보통 기준을 충족하므로 문제없어 보입니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (6)
apps/what-today/src/components/activities/ReviewSection.tsx (1)
60-68:mb-24제거로 인한 하단 여백 소실 여부를 확인해주세요.리스트 래퍼가
flex flex-col gap-12로 교체되면서 기존의mb-24가 사라졌습니다.
gap-12는 각 카드 사이 간격만 제어하기 때문에, 리스트 블록과 그 아래 무한스크롤 트리거(div.h-4) 사이 하단 여백이 줄어들 수 있습니다. 디자인 QA에서 의도한 간격이 유지되는지 한번 더 확인 부탁드립니다.
필요하다면mb-24를 유지하거나pb-클래스로 하단 패딩을 주는 방법을 고려해 주세요.apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx (1)
133-134: 아이콘-전용 버튼에 접근성 레이블 추가 제안
화면 판독기는ChevronIcon의 의미를 알 수 없습니다.aria-label="뒤로"와 같이 레이블을 추가하면 접근성이 향상됩니다.apps/what-today/src/components/activities/ReservationBottomBar.tsx (1)
28-34: 임의 box-shadow 값, 디자인 토큰화 고려
shadow-[0px_-4px_24px_rgba(156,180,202,0.2)]처럼 인라인 지정하면 나중에 테마 변경 시 일괄 수정이 어렵습니다. design-system 에서 제공하는 shadow 토큰으로 추출하거나 CSS 변수로 관리하는 방식이 유지보수에 유리합니다.apps/what-today/src/components/activities/reservation/ReservationForm.tsx (2)
91-91:gap-16적용 확인
gap-16으로 간격이 축소되었습니다. 다른 예약·상세 페이지 컴포넌트들도 동일한 간격 토큰을 사용하고 있는지 한번 더 점검해 통일성을 유지해주세요.
103-103: 텍스트 계층 구조 재검토 제안
예약 가능한 시간레이블이body-text font-bold로 변경되었습니다. 시맨틱 계층(예: section-text, subtitle-text 등)과 시각적 굵기가 뒤섞이면 스타일 가이드 일관성이 흐려질 수 있습니다. 디자인 시스템에서 의도한 계층인지 한 번 더 확인 바랍니다.apps/what-today/src/components/activities/ActivitiesInformation.tsx (1)
95-97: 가격 표시 시각 개선통화 기호와 금액을 분리한 것은 가독성 측면에서 좋습니다. 빈 공백(₩ 뒤 스페이스)에 의도치 않은 줄바꿈이 생기지 않는지만 반응형에서 한 번 더 테스트해주세요.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/what-today/src/components/activities/ActivitiesInformation.tsx(2 hunks)apps/what-today/src/components/activities/ActivitiesReview.tsx(1 hunks)apps/what-today/src/components/activities/ReservationBottomBar.tsx(1 hunks)apps/what-today/src/components/activities/ReviewSection.tsx(2 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(2 hunks)apps/what-today/src/pages/activities/index.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- apps/what-today/src/pages/activities/index.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx (1)
packages/design-system/src/components/icons/ChevronIcon.tsx (1)
ChevronIcon(30-49)
apps/what-today/src/components/activities/ActivitiesInformation.tsx (1)
packages/design-system/src/components/icons/LocationIcon.tsx (1)
LocationIcon(27-36)
🔇 Additional comments (12)
apps/what-today/src/components/activities/ReviewSection.tsx (1)
74-78: 로딩 스켈레톤 간격을 실제 카드와 동일하게 맞춘 점 👍
gap-12로 카드와 동일한 세로 간격을 적용하여 일관된 시각적 흐름을 유지한 점이 좋습니다.apps/what-today/src/components/activities/ActivitiesReview.tsx (1)
22-24: 여백 제거 변경 사항 문제 없음
mb-20제거가 다른 레이아웃에 영향을 주지 않는다면 추가 조치가 필요 없어 보입니다.apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx (1)
13-16: 커스텀 Tailwind 유틸리티(w-138,gap-23,px-15) 정의 여부 확인 필요
프로덕션 빌드 시 JIT 모드가 해당 값을 추론하지 못하면 스타일이 적용되지 않습니다.tailwind.config.js에 실제로 정의되어 있는지, 아니면theme.spacing확장을 통해 숫자 단위를 등록했는지 다시 한 번 확인해 주세요.apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx (2)
1-1: 불필요한 중복 import 제거 깔끔합니다
ChevronIcon으로 통합해 가독성이 좋아졌습니다.
142-143:bg-gray-25클래스 정의 확인
Tailwind 기본 팔레트에는 존재하지 않는 값입니다. 디자인 시스템 프리셋에 포함돼 있는지 확인해 주세요.apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx (2)
55-56: 텍스트 강조 스타일 일관성 확보 👍
라벨을body-text font-bold로 통일해 일관성이 개선되었습니다.
70-72: 총 합계 레이아웃 분리 깔끔합니다
금액과 라벨을 분리해 가독성이 좋아졌습니다.apps/what-today/src/components/activities/reservation/ReservationForm.tsx (1)
120-121: 총합계 레이아웃 분리 👍라벨과 금액을 분리하여 가독성이 향상되었습니다. 줄바꿈·말줄임 처리가 과도하지 않은지 실제 긴 금액(예: 10억 이상)으로도 시각 테스트만 진행하면 좋을 것 같습니다.
apps/what-today/src/components/activities/ActivitiesInformation.tsx (4)
72-72: 카테고리 색상 변경 승인
caption-text text-gray-400로 색상·계층이 명확해졌습니다.
87-87: 평점 옆 리뷰 수 회색 처리 👍정보 구분이 명확해졌습니다.
91-93: LocationIcon 색상 변수 사용 확인
color='var(--color-gray-400)'사용으로 테마 대응력이 좋아졌습니다. 변수 정의 여부도 함께 확인 부탁드립니다(위 스크립트로 검증 가능).
67-67: design-system CSS 변수(map)에 ‘gray-25’ 토큰 정의 확인 필요
bg-gray-25적용은 무방해 보이나, design-system 쪽에서 해당 토큰이 정의된 파일을 찾을 수 없습니다.
packages/design-system내에 Tailwind 설정 파일(tailwind.config.*)이 없습니다.- CSS 변수(map) 정의 파일(예: tokens, variables 등)에서도
gray-25토큰이 발견되지 않았습니다.design-system 테마 확장 혹은 CSS 변수 맵에 실제로
gray-25토큰이 포함되어 있는지 확인해 주세요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (6)
apps/what-today/src/components/activities/ActivitiesInformation.tsx (2)
87-88: 평점 숫자 로케일 형식화 제안
rating.toFixed(1)은 항상.(dot)을 사용하므로 한국어 페이지에서는3.5형태로 표기됩니다.Intl.NumberFormat을 활용하면 쉼표/마침표 규칙을 자동 적용할 수 있습니다.- {rating.toFixed(1)} + {new Intl.NumberFormat('ko-KR', { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(rating)}
95-98: 가격 표시 로케일 및 중복 스타일 정리
price.toLocaleString()역시 기본 로케일이 브라우저 설정에 따라 달라집니다.toLocaleString('ko-KR')로 명시하면 “34,000”처럼 통일된 표기를 보장할 수 있습니다.- 부모
<p>와 자식<span>모두text-gray-400를 지정하여 중복입니다. 외부p의 컬러를 제거하거나 내부span만 유지해도 됩니다.- <p className='body-text text-gray-400'> - <span className='font-bold text-gray-400'>₩</span> + <p className='body-text'> + <span className='font-bold text-gray-400'>₩</span> <span className='font-bold text-gray-950'> {price.toLocaleString('ko-KR')}</span> / 인apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx (1)
15-15: 고정 폭·간격 유틸 클래스 사용 시 반응형 영향 확인
w-138,gap-23,px-15처럼 픽셀 기반 커스텀 Tailwind 유틸 클래스를 사용하면 작은 화면에서 오버플로우가 발생할 수 있습니다.-<div className='flex w-138 items-center justify-between gap-23 rounded-3xl border border-gray-50 px-15'> +<div className='flex min-w-[138px] items-center justify-between gap-4 rounded-3xl border border-gray-50 px-4'>필요 시 유틸 값들을 디자인 시스템 토큰으로 치환하여 반응형 유연성을 높여주세요.
apps/what-today/src/components/activities/reservation/ReservationForm.tsx (1)
119-122: 텍스트 클래스 혼용으로 인한 일관성 저하
<p className='section-text ...'>내부에body-text font-bold가 혼재되어 있습니다. 상위 레벨을body-text로 통일하면 불필요한 상속·오버라이드가 줄어듭니다.-<p className='section-text flex max-w-155 flex-col'> +<p className='flex max-w-155 flex-col body-text'>apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx (1)
70-72: 컨테이너 클래스 불일치
여기서는 여전히section-text를 유지하면서 내부만body-text로 감쌌습니다.ReservationForm와 동일하게 외부도body-text로 변경해 일관성을 확보하는 것이 좋습니다.apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx (1)
133-134: 접근성(ARIA) 고려
뒤로가기ChevronIcon버튼에aria-label="뒤로가기"등을 부여하면 스크린리더 사용자가 더 쉽게 인식할 수 있습니다.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/what-today/src/components/activities/ActivitiesInformation.tsx(2 hunks)apps/what-today/src/components/activities/ActivitiesReview.tsx(1 hunks)apps/what-today/src/components/activities/ReservationBottomBar.tsx(1 hunks)apps/what-today/src/components/activities/ReviewSection.tsx(2 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(2 hunks)apps/what-today/src/pages/activities/index.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- apps/what-today/src/pages/activities/index.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/what-today/src/components/activities/ActivitiesInformation.tsx (1)
packages/design-system/src/components/icons/LocationIcon.tsx (1)
LocationIcon(27-36)
🔇 Additional comments (13)
apps/what-today/src/components/activities/ReviewSection.tsx (2)
60-68: 간격 조정 및 flex 레이아웃 도입 영향 점검 필요기존
mb-24에서flex flex-col gap-12로 변경되며
- 리스트 컨테이너가
display: flex가 되어 자식ActivitiesReview카드들의 width · overflow 동작이 달라질 수 있고- 상·하 간격이 margin 기반에서 gap 기반으로 바뀌면서 전체 세로 리듬이 변동됩니다.
디자인 QA에서 의도한 레이아웃인지, 모바일·태블릿 환경에서도 카드 폭이 100%로 유지되는지 확인 부탁드립니다.
74-77: 스켈레톤 간 간격 통일 👍로딩 스켈레톤 구간도
gap-12로 맞춰 일관성을 확보한 점 좋습니다.apps/what-today/src/components/activities/ActivitiesReview.tsx (1)
23-23: 카드 하단 여백 제거가 다른 레이아웃에 미치는 영향 확인 필요
mb-20클래스를 제거함에 따라 카드 간 세로 간격을 상위 컨테이너가 전적으로 책임지게 됩니다. 이 컴포넌트가 여러 화면에서 재사용된다면, 예상치 못한 밀착 현상이 발생할 수 있으니 상위 레이어(리스트, 섹션 등)에서gap-y-*또는 적절한 마진이 설정돼 있는지 한번 더 확인해주세요.apps/what-today/src/components/activities/ActivitiesInformation.tsx (2)
67-69: 배경색 추가 👍
bg-gray-25클래스로 카드의 시각적 위계가 명확해졌습니다. 코드도 깔끔하게 병합되어 문제 없습니다.
72-72:text-gray-400대비 검증 필요배경색
bg-gray-25(≈#FCFCFD)에 회색 텍스트(text-gray-400) 조합이 WCAG AA 대비(4.5:1) 이하로 떨어질 가능성이 있습니다. 디자인 토큰이 이미 기준을 만족하는지 확인 부탁드립니다.apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx (1)
13-13: 텍스트 스타일 통일성 확보 필요
상위 컴포넌트들(ReservationForm,TabletReservationSheet등)에서는 동일 레이블에section-text→body-text font-bold로 변경되었습니다. 이 파일도 동일하게 수정되었으나, 혹시 남아있는 다른 스타일과 불일치가 없는지 한 번 더 확인 부탁드립니다.apps/what-today/src/components/activities/ReservationBottomBar.tsx (2)
28-28: 섀도 & 보더 색상 변경에 따른 시각적 영향 검증 권장
신규 섀도(rgba(156,180,202,0.2))가 다크·라이트 모드 및 저해상도 기기에서 과도하게 두드러지지 않는지 QA 환경에서 다시 확인해 주세요.
33-33: 보조 텍스트 대비(contrast) 점검
text-gray-400(≈#98A2B3)로 표시되는 인원 수가 배경색#FFF대비 WCAG AA(4.5:1) 요건을 충족하는지 확인이 필요합니다.apps/what-today/src/components/activities/reservation/ReservationForm.tsx (1)
91-91: gap 감소로 인한 컴포넌트 간 간섭 체크
gap-24→gap-16축소가 모바일 뷰에서 캘린더/타임셀렉터 툴팁 등의 겹침을 유발하지 않는지 실기기 테스트를 권장합니다.apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx (1)
55-55: 섹션 라벨 스타일 변경 확인
section-text→body-text font-bold로 통일된 것은 👍🏻입니다. 다른 시트 컴포넌트에도 동일 규칙이 적용됐는지 크로스체크해주세요.apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx (3)
1-1: 아이콘 정리
ArrowIcon미사용으로 import 정리가 완료된 것 확인했습니다. 빌드 오류 방지 차원에서 다른 파일들도 불필요한 아이콘 import가 남아있지 않은지 grep 확인 부탁드립니다.
142-142: 신규 색상 토큰 사용 검증
bg-gray-25가 디자인 시스템에 추가된 토큰이라면 OK입니다. 미정의 색상일 경우 Tailwind 컴파일 실패가 발생하므로 확인 바랍니다.
161-162: 텍스트 계층 구조 일관성
다른 컴포넌트와 동일하게body-text font-bold로 통일된 것 확인했습니다. 👍🏻
MyungJiwoo
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생하셨습니다!
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit