Skip to content

Conversation

@HarrySeop
Copy link
Member

@HarrySeop HarrySeop commented Aug 4, 2025

🧩 관련 이슈 번호

📌 작업 내용

  • 디자인 QA 때 있었던 부분을 반영했습니다!

✅ 체크리스트

  • PR 하기 전에 이슈에서 빼먹은건 없는지 확인했습니다
    • 라벨 및 마일스톤을 사이드 탭에서 등록했습니다.
  • PR을 보내는 브랜치가 올바른지 확인했습니다.
  • 팀원들이 리뷰하기 쉽도록 설명을 자세하게 작성했습니다.
  • 변경사항을 충분히 테스트 했습니다.
  • (함수를 구현 했을 때) JSDoc을 양식에 맞춰서 작성했습니다.
  • 컨벤션에 맞게 구현했습니다.

📷 UI 변경 사항 (선택)

  • 라이브로 다 보여드렸습니다!

❓무슨 문제가 발생했나요? (선택)

💬 기타 참고 사항 (선택)

Summary by CodeRabbit

  • Style
    • 활동 정보, 리뷰, 예약 바, 인원 선택, 예약 폼 등 주요 컴포넌트의 배경색, 텍스트 색상, 폰트 굵기, 여백, 그림자 등 UI 스타일이 개선되었습니다.
    • 아이콘과 버튼, 가격 표시, 구분선 등 일부 요소의 레이아웃 및 시각적 구성이 변경되어 더욱 일관되고 깔끔한 화면을 제공합니다.

@HarrySeop HarrySeop added this to the 프로젝트 마감 milestone Aug 4, 2025
@HarrySeop HarrySeop self-assigned this Aug 4, 2025
@HarrySeop HarrySeop added the ♻️ Refactor 코드 리팩토링 label Aug 4, 2025
@HarrySeop HarrySeop linked an issue Aug 4, 2025 that may be closed by this pull request
@HarrySeop HarrySeop added the 🎨 Design 마크업 및 스타일링 label Aug 4, 2025
@github-actions
Copy link

github-actions bot commented Aug 4, 2025

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

@coderabbitai
Copy link

coderabbitai bot commented Aug 4, 2025

📝 Walkthrough

Walkthrough

이번 변경은 여러 활동(activities) 관련 컴포넌트의 UI 스타일을 일관성 있게 조정하는 데 집중되었습니다. 주요 변경점은 텍스트 색상, 배경색, 여백, 폰트 굵기, 아이콘 교체, Flexbox 레이아웃 적용 등 시각적 요소에 한정되며, 컴포넌트의 로직, 상태 관리, 이벤트 처리에는 영향을 주지 않습니다.

Changes

Cohort / File(s) Change Summary
ActivitiesInformation 스타일 개선
apps/what-today/src/components/activities/ActivitiesInformation.tsx
텍스트 색상, 배경, 아이콘 색상, 가격 표시 등 시각적 스타일 다수 조정.
ActivitiesReview 마진 조정
apps/what-today/src/components/activities/ActivitiesReview.tsx
최상위 div의 하단 마진(mb-20) 제거.
ReservationBottomBar 스타일
apps/what-today/src/components/activities/ReservationBottomBar.tsx
테두리 및 그림자 색상 변경, 인원수 텍스트 색상 변경.
ReviewSection 레이아웃
apps/what-today/src/components/activities/ReviewSection.tsx
리뷰 목록 컨테이너를 flex column 및 gap-12로 변경, 로딩 스켈레톤 gap-12로 축소.
HeadCountSelector 스타일
apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx
텍스트 클래스 및 버튼/카운트 컨테이너 레이아웃 변경(고정 너비, justify-between 적용).
MobileReservationSheet 스타일 및 아이콘
apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
ArrowIcon → ChevronIcon 교체, 날짜/시간 요약 및 금액 표시 스타일 변경.
ReservationForm 스타일
apps/what-today/src/components/activities/reservation/ReservationForm.tsx
컨테이너 gap 축소, 라벨 텍스트 스타일 및 금액 표시 방식 변경.
TabletReservationSheet 스타일
apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx
시간 및 총합계 텍스트 스타일을 굵게 변경, flex 레이아웃 적용.
Activities 페이지 Divider 제거
apps/what-today/src/pages/activities/index.tsx
비데스크톱 레이아웃에서 ActivityImages 아래 Divider 컴포넌트 제거.

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 Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch refactor/HarrySeop/250

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary or @coderabbitai 요약 to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@coderabbitai
Copy link

coderabbitai bot commented Aug 4, 2025

📝 Walkthrough

Walkthrough

이 변경사항들은 apps/what-today 내 액티비티 상세 페이지와 예약 관련 컴포넌트들의 스타일링을 전반적으로 개선합니다. 텍스트 색상, 배경색, 여백, 폰트 굵기, 아이콘, 박스 그림자 등 UI 요소의 시각적 표현만 조정되었으며, 로직이나 데이터 흐름에는 변경이 없습니다.

Changes

Cohort / File(s) Change Summary
액티비티 정보 스타일 개선
apps/what-today/src/components/activities/ActivitiesInformation.tsx
텍스트 색상, 배경색, 아이콘 색상, 가격 표시 스타일 등 시각적 스타일링 세부 조정
액티비티 리뷰/리뷰 섹션 스타일 조정
apps/what-today/src/components/activities/ActivitiesReview.tsx,
apps/what-today/src/components/activities/ReviewSection.tsx
컨테이너 마진 및 gap 조정, flex 레이아웃 적용 등 레이아웃 및 간격 스타일 수정
예약 하단 바 스타일링
apps/what-today/src/components/activities/ReservationBottomBar.tsx
테두리 색상, 그림자, 인원수 텍스트 색상 등 하단 고정 바의 시각적 스타일 업데이트
인원 선택자 스타일 조정
apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx
텍스트 폰트 굵기 변경, 버튼 래퍼에 고정 너비 및 정렬 스타일 추가
모바일/태블릿 예약 시트 스타일 개선
apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx,
apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx
아이콘 통합 및 교체, 배경색, 텍스트 스타일, flex 레이아웃 등 예약 시트 내 텍스트 및 레이아웃 스타일링 변경
예약 폼 스타일 조정
apps/what-today/src/components/activities/reservation/ReservationForm.tsx
요소 간 gap 축소, 라벨 및 가격 텍스트 스타일링 변경, 가격 표시 구조 분리
액티비티 상세 페이지 디바이더 제거
apps/what-today/src/pages/activities/index.tsx
비데스크톱 레이아웃에서 Divider 컴포넌트 제거

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~4 minutes

Poem

🐰
스타일링 옷을 갈아입고
회색빛 살짝, 굵은 글씨로
예약도 리뷰도 한층 더 예쁘게
그림자도 부드럽게,
토끼는 깡충 뛰며 말해요—
"UI가 더 사랑스러워졌어요!"
🌸

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch refactor/HarrySeop/250

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary or @coderabbitai 요약 to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@coderabbitai
Copy link

coderabbitai bot commented Aug 4, 2025

📝 Walkthrough

Walkthrough

이 변경 사항들은 주로 UI 스타일링과 레이아웃 개선에 집중되어 있습니다. Tailwind CSS 유틸리티 클래스를 활용하여 색상, 여백, 폰트 스타일, 아이콘, 그리드 간격 등이 조정되었으며, 컴포넌트의 로직이나 제어 흐름에는 변동이 없습니다.

Changes

Cohort / File(s) Change Summary
활동 정보 스타일 개선
apps/what-today/src/components/activities/ActivitiesInformation.tsx
배경색, 카테고리·평점·주소·가격 등 텍스트 및 아이콘 스타일, 레이아웃 세부 조정.
활동 리뷰 스타일 조정
apps/what-today/src/components/activities/ActivitiesReview.tsx
최상위 div의 하단 마진(mb-20) 제거.
예약 바 스타일링
apps/what-today/src/components/activities/ReservationBottomBar.tsx
테두리 색상, 그림자, 인원수 텍스트 색상 등 스타일 변경.
리뷰 섹션 레이아웃
apps/what-today/src/components/activities/ReviewSection.tsx
리뷰 목록 및 스켈레톤 컨테이너의 간격 및 flex 레이아웃 조정.
인원 선택기 스타일
apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx
"참여 인원 수" 텍스트 스타일 및 버튼 래퍼의 고정 폭·정렬 변경.
모바일 예약 시트 개선
apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
아이콘 통합, 백버튼 아이콘 및 색상 변경, 날짜/시간 요약 컨테이너·가격 텍스트 스타일 조정.
예약 폼 레이아웃
apps/what-today/src/components/activities/reservation/ReservationForm.tsx
간격 축소, 시간 선택 라벨 및 총 합계 표시 방식·스타일 변경.
태블릿 예약 시트 스타일
apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx
"예약 가능한 시간"과 "총 합계" 레이블의 폰트 및 flex 레이아웃 조정.
액티비티 상세 페이지
apps/what-today/src/pages/activities/index.tsx
모바일/태블릿 레이아웃에서 Divider 컴포넌트 제거.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐇
회색빛 배경에 토끼가 춤추네,
굵은 폰트에 아이콘, 여백도 새로워졌지!
리뷰와 예약, 모두 깔끔하게
작은 변화가 모여
오늘의 활동이 더 빛이 나네.
토끼는 방긋,
"UI가 예뻐서 당근 좋아!" 🥕

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch refactor/HarrySeop/250

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary or @coderabbitai 요약 to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between fc6fade and aa1adcc.

📒 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이면 보통 기준을 충족하므로 문제없어 보입니다.

Copy link

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between fc6fade and aa1adcc.

📒 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 토큰이 포함되어 있는지 확인해 주세요.

Copy link

@coderabbitai coderabbitai bot left a 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: 가격 표시 로케일 및 중복 스타일 정리

  1. price.toLocaleString() 역시 기본 로케일이 브라우저 설정에 따라 달라집니다. toLocaleString('ko-KR')로 명시하면 “34,000”처럼 통일된 표기를 보장할 수 있습니다.
  2. 부모 <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

📥 Commits

Reviewing files that changed from the base of the PR and between fc6fade and aa1adcc.

📒 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로 변경되며

  1. 리스트 컨테이너가 display: flex가 되어 자식 ActivitiesReview 카드들의 width · overflow 동작이 달라질 수 있고
  2. 상·하 간격이 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-textbody-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-24gap-16 축소가 모바일 뷰에서 캘린더/타임셀렉터 툴팁 등의 겹침을 유발하지 않는지 실기기 테스트를 권장합니다.

apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx (1)

55-55: 섹션 라벨 스타일 변경 확인
section-textbody-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로 통일된 것 확인했습니다. 👍🏻

Copy link
Contributor

@MyungJiwoo MyungJiwoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!

@HarrySeop HarrySeop merged commit dcaacbd into develop Aug 4, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🎨 Design 마크업 및 스타일링 ♻️ Refactor 코드 리팩토링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

체험 상세페이지 추가 디자인 수정

4 participants