체험관리, 예약현황 페이지 스켈레톤 UI 구현

[kjhyun0830]

🧩 관련 이슈 번호

• 이슈 번호 체험관리, 예약현황 페이지 스켈레톤 UI 작업 #221

📌 작업 내용

• 체험관리 페이지 스켈레톤 UI 구현
• 예약현황 페이지 스켈레톤 UI 구현

✅ 체크리스트

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

📷 UI 변경 사항 (선택)

2025-08-03.10.59.01.mov

2025-08-03.10.54.58.mov

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

💬 기타 참고 사항 (선택)

• api 요청이 가는 곳에 스켈레톤 UI 적용하였습니다.
• 일단 만들긴 했는데... 모양이 괜찮은지 잘 모르겠네여. 코멘트 주시면 이쁘게 다듬어야 할 것 같습니다!

Summary by CodeRabbit

• 신규 기능

  • 예약 캘린더, 예약 선택, 경험 카드에 대한 스켈레톤(로딩) UI가 추가되었습니다.

• 버그 수정

  • 예약 및 활동 관련 데이터 쿼리가 로그인된 사용자에게만 실행되도록 개선되었습니다.

• 스타일

  • 경험 카드 및 캘린더 컴포넌트의 테두리와 그림자 스타일이 변경되었습니다.
  • 활동 삭제 모달의 텍스트 스타일이 더 크고 굵게 변경되었습니다.

• 리팩터

  • 로딩 중 표시가 기존 텍스트에서 스켈레톤 UI로 교체되어 사용자 경험이 향상되었습니다.

• 문서화

  • 디자인 시스템 내 스켈레톤 컴포넌트가 메인 컴포넌트와 함께 사용할 수 있도록 내보내기가 추가되었습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

로딩 상태에 사용할 스켈레톤 컴포넌트(ExperienceCardSkeleton, ReservationCalendarSkeleton, ReservationSelectSkeleton)가 새로 추가되었습니다. 예약 및 활동 관련 페이지의 로딩 UI가 텍스트에서 스켈레톤 UI로 교체되었습니다. 일부 컴포넌트와 훅에서는 인증된 사용자 여부에 따라 쿼리 실행을 제어하는 enabled 옵션이 추가되었습니다. 디자인 시스템의 카드 스타일이 그림자에서 테두리로 변경되었고, 관련 컴포넌트의 export 구성이 보강되었습니다.

Changes

Cohort / File(s)	Change Summary
예약 상태 스켈레톤 컴포넌트 추가 apps/what-today/src/components/reservations-status/ReservationCalendarSkeleton.tsx, apps/what-today/src/components/reservations-status/ReservationSelectSkeleton.tsx	예약 달력 및 셀렉트 영역에 대한 스켈레톤 컴포넌트 신설. 로딩 시 뼈대 UI 렌더링.
예약 상태 페이지 로딩 UI 개선 apps/what-today/src/pages/mypage/reservations-status/index.tsx	로딩 시 텍스트 대신 ReservationSelectSkeleton, ReservationCalendarSkeleton 스켈레톤 UI로 대체.
예약 달력 반응형 스타일 수정 apps/what-today/src/components/reservations-status/ReservationCalendar.tsx	Calendar.Root의 테두리(border) 스타일을 md 이상에서만 적용하도록 조건부 변경.
내 활동 쿼리: 사용자 인증 기반 활성화 apps/what-today/src/hooks/myActivity/useMyActivitiesQuery.ts, apps/what-today/src/pages/mypage/main/index.tsx	쿼리 훅에 enabled: Boolean(user) 옵션 추가로 인증된 사용자만 쿼리 실행.
내 활동 관리 페이지 로딩 UI 개선 및 텍스트 스타일 변경 apps/what-today/src/pages/mypage/manage-activities/index.tsx	로딩 시 ExperienceCardSkeleton 5개로 구성된 스켈레톤 UI 렌더링, 삭제 모달 텍스트 스타일 변경.
디자인 시스템: 카드 스타일 및 스켈레톤 추가 packages/design-system/src/components/ExperienceCard.tsx, packages/design-system/src/components/skeleton/ExperienceCardSkeleton.tsx	ExperienceCard 컴포넌트의 그림자 제거, 테두리 추가. ExperienceCardSkeleton 스켈레톤 컴포넌트 신설.
디자인 시스템: 스켈레톤 컴포넌트 export packages/design-system/src/components/index.ts, packages/design-system/src/components/skeleton/index.tsx	skeleton 디렉토리 내 컴포넌트들을 index에서 재export하여 외부에서 접근 가능하도록 구성.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Page
    participant SkeletonComponent
    participant QueryHook

    User->>Page: 페이지 접근
    Page->>QueryHook: 데이터 쿼리 요청 (enabled: Boolean(user))
    alt 쿼리 로딩 중
        Page->>SkeletonComponent: 스켈레톤 UI 렌더링
    else 쿼리 완료
        Page->>User: 실제 데이터 렌더링
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~18 minutes

Possibly related PRs

• 예약현황 페이지 기본 UI 생성 #91: ReservationCalendar.tsx 내 Calendar.DayCell에 key prop 추가 등, 동일 컴포넌트의 UI 개선 관련 PR.
• 예약현황 페이지 API 연결 #111: ReservationCalendar.tsx와 예약 상태 페이지에서 props, 콜백 추가 및 API 연동 등, 본 PR과 직접적으로 ReservationCalendar 및 예약 상태 페이지를 함께 다룸.
• 예약 현황 페이지 리팩토링(+체험등록 페이지 hook 수정) #205: ReservationCalendar.tsx의 내부 상태 및 렌더링 로직 변경 등, 동일 파일 내 주요 렌더링 로직을 다루는 관련 PR.

Suggested reviewers

• MyungJiwoo
• Taeil08
• HarrySeop

Poem

🐇
로딩의 구름이 걷히는 날,
뼈대 UI가 반짝반짝 빛나요.
예약도, 활동도 기다림 없이
스켈레톤 친구들이 춤을 춰요!
테두리 두른 카드도 새 옷 입고,
오늘도 토끼는 코드를 타고 폴짝!

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b9c140d and 2f53775.

📒 Files selected for processing (1)

• apps/what-today/src/pages/mypage/reservations-status/index.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/what-today/src/pages/mypage/reservations-status/index.tsx

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/kjhyun/221

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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.
  • @coderabbitai modularize this function.
• 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.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @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.

[github-actions]

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

[github-actions]

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

[MyungJiwoo]

☠️ 고생하셨습니다 !! 💀

[HarrySeop]

고생하셨습니다!