🐛 [bug/fix] : 체험등록시 입력한 날짜와 체험상세페이지에서 보여지는 날짜가 다른 버그 발생

[seong5]

Resolve: #231

📌 변경 사항 개요

체험예약하기 달력에서 버그가 발생했습니다.

📝 상세 내용

체험 등록시 체험가능일을 예를들어 월/화 로 등록했는데 체험상세에서는 화/수 로 나오는 문제점이었습니다.
KST 로 시간을 통일해서 수정했더니 정상적으로 동작합니다.

🔗 관련 이슈

#176 #231

🖼️ 스크린샷(선택사항)

버그발생부분

• 달력에서 화 / 수로 보입니다.

해결된 UI

• 정상적으로 월 / 화로 잘 보입니다
• 월요일은 지현님이 예약테스트 하셔서 안보입니다.

💡 참고 사항

Summary by CodeRabbit

• 버그 수정

  • 날짜 선택 및 비교 시 날짜 형식이 한국 표준시(KST)에 맞춰 일관되게 표시되도록 개선되었습니다.

• 신규 기능

  • KST(한국 표준시) 기준으로 날짜 문자열을 반환하는 기능이 추가되었습니다.

• 스타일

  • UI 내 섹션 구분을 위한 주석이 제거되어 코드가 더 깔끔해졌습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

기존에 UTC 기준으로 날짜를 문자열로 변환하던 부분을, KST(한국 표준시) 기준의 날짜 문자열을 반환하는 getKSTDateString 유틸리티 함수 사용으로 일괄 변경했습니다. 해당 함수는 신규로 추가되었으며, 관련 컴포넌트에서 날짜 비교 및 렌더링에 적용되었습니다. JSX 주석도 제거되었습니다.

Changes

Cohort / File(s)	Change Summary
KST 날짜 포맷 유틸리티 도입 src/app/[activityId]/_utils/activityDetailDates.ts	getKSTDateString 함수 신규 추가. Date 객체를 KST 기준 날짜 문자열로 변환.
컴포넌트 내 날짜 포맷 일괄 변경 src/app/[activityId]/_components/MobileReserveModal.tsx, src/app/[activityId]/_components/TabletReserveModal.tsx, src/app/[activityId]/_components/ReserveCalender.tsx	기존 date.toISOString().split('T')[0] 사용 부분을 getKSTDateString(date)로 교체하여 KST 기준 날짜 비교 및 렌더링. 일부 JSX 주석 제거.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CalendarComponent
    participant activityDetailDatesUtil

    User->>CalendarComponent: 날짜 선택
    CalendarComponent->>activityDetailDatesUtil: getKSTDateString(date)
    activityDetailDatesUtil-->>CalendarComponent: KST 기준 날짜 문자열 반환
    CalendarComponent->>CalendarComponent: 예약 가능 여부 등 비교/렌더링

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Assessment against linked issues

Objective	Addressed	Explanation
체험 등록 요일과 예약 달력 날짜가 하루씩 밀리는 버그 수정 (#231)	✅

Assessment against linked issues: Out-of-scope changes

(해당 변경사항 중, 명확히 요구사항과 무관한 기능적 코드 변경은 발견되지 않았습니다.)

Possibly related PRs

• ✨feat : 체험예약 캘린더 구현 #204: 기존 캘린더 컴포넌트와 날짜 선택 로직의 최초 도입 PR로, 본 PR에서 수정된 컴포넌트들과 직접적으로 연관됨.

Suggested reviewers

• two678
• Yun-Jinwoo

Poem

🐇
날짜가 달라 속상했지,
UTC에서 KST로 바꿨으니,
하루씩 밀리던 예약의 슬픔도
이제는 칼같이 맞춰지리!
달력 속 체험도, 토끼도 방긋—
시간의 마법, 우리 손끝!
🌙✨

Note

⚡️ Unit Test Generation is now available in beta!

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

---

📜 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 3db02fc and e601d3e.

📒 Files selected for processing (4)

• src/app/[activityId]/_components/MobileReserveModal.tsx (2 hunks)
• src/app/[activityId]/_components/ReserveCalender.tsx (3 hunks)
• src/app/[activityId]/_components/TabletReserveModal.tsx (2 hunks)
• src/app/[activityId]/_utils/activityDetailDates.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (3)

📚 Learning: moon-ju-young explained that in dateinput component at src/app/mypage/add-activity/_components/datei...

Learnt from: Moon-ju-young
PR: Act-It-FE/global-nomad#218
File: src/app/mypage/add-activity/_components/DateInput.tsx:59-63
Timestamp: 2025-08-04T01:22:23.509Z
Learning: Moon-ju-young explained that in DateInput component at src/app/mypage/add-activity/_components/DateInput.tsx, the time validation only checks if start and end times are different (not requiring end time to be after start time) because this additional validation is not part of the requirements and the current implementation successfully sends API requests.

Applied to files:

• src/app/[activityId]/_components/TabletReserveModal.tsx
• src/app/[activityId]/_components/MobileReserveModal.tsx
• src/app/[activityId]/_components/ReserveCalender.tsx

📚 Learning: in the daycell component for reservation calendar, completed reservations are intentionally excluded...

Learnt from: two678
PR: Act-It-FE/global-nomad#171
File: src/app/mypage/reserve-status/_components/calendar/DayCell.tsx:29-30
Timestamp: 2025-07-30T11:37:50.905Z
Learning: In the DayCell component for reservation calendar, completed reservations are intentionally excluded from the hasReservations check because completed reservations don't display meaningful content in the modal, making those dates clickable would be unnecessary.

Applied to files:

• src/app/[activityId]/_components/TabletReserveModal.tsx
• src/app/[activityId]/_components/MobileReserveModal.tsx
• src/app/[activityId]/_components/ReserveCalender.tsx

📚 Learning: in the datecustominput component within src/components/input.tsx, complex date validation logic is i...

Learnt from: Moon-ju-young
PR: Act-It-FE/global-nomad#187
File: src/components/Input.tsx:276-316
Timestamp: 2025-08-01T05:51:58.853Z
Learning: In the DateCustomInput component within src/components/Input.tsx, complex date validation logic is intentionally kept minimal at the component level. The component only restricts input to digits and '/' characters, while actual date existence validation (like checking if the date is valid) is handled at the parent/page level as part of the separation of concerns approach.

Applied to files:

• src/app/[activityId]/_components/TabletReserveModal.tsx
• src/app/[activityId]/_components/MobileReserveModal.tsx
• src/app/[activityId]/_components/ReserveCalender.tsx

🧬 Code Graph Analysis (1)

src/app/[activityId]/_components/TabletReserveModal.tsx (1)

src/app/[activityId]/_utils/activityDetailDates.ts (1)

• getKSTDateString (12-16)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: deploy-preview

🔇 Additional comments (8)

src/app/[activityId]/_utils/activityDetailDates.ts (1)

12-16: getKSTDateString 함수는 현 구현을 유지해도 됩니다

테스트 결과 UTC에 9시간 고정 오프셋을 더해 생성한 YYYY-MM-DD 문자열이 기대한 값과 일치하며, 제안된 toLocaleDateString 방식은 오히려 DD-MM-YYYY 형식으로 출력되어 부적합함을 확인했습니다.
따라서 추가 변경 없이 현 구현을 그대로 사용하셔도 됩니다.

src/app/[activityId]/_components/MobileReserveModal.tsx (2)

9-9: 새로운 유틸리티 함수 import가 올바르게 추가되었습니다.

KST 날짜 문자열 변환을 위한 유틸리티 함수를 올바르게 import했습니다.

---

155-155: 타임존 버그 수정이 올바르게 적용되었습니다.

기존의 UTC 기반 날짜 문자열 변환(date.toISOString().split('T')[0])을 KST 기반 변환(getKSTDateString(date))으로 교체하여 체험 등록 시 입력한 날짜와 상세 페이지의 표시 날짜 불일치 문제를 해결했습니다.

src/app/[activityId]/_components/ReserveCalender.tsx (3)

10-10: 새로운 유틸리티 함수 import가 올바르게 추가되었습니다.

KST 날짜 문자열 변환을 위한 유틸리티 함수를 올바르게 import했습니다.

---

56-56: 날짜 클릭 핸들러의 타임존 변환이 올바르게 수정되었습니다.

handleDateClick 함수에서 날짜 비교를 위한 문자열 변환이 UTC에서 KST로 올바르게 변경되었습니다. 이는 스케줄 가용성 확인 시 정확한 날짜 매칭을 보장합니다.

---

150-150: 캘린더 렌더링의 타임존 변환이 올바르게 수정되었습니다.

캘린더 날짜 렌더링 시 날짜 문자열 변환이 UTC에서 KST로 올바르게 변경되어 선택된 날짜와 가용한 스케줄 간의 정확한 비교가 가능합니다.

src/app/[activityId]/_components/TabletReserveModal.tsx (2)

9-9: 새로운 유틸리티 함수 import가 올바르게 추가되었습니다.

KST 날짜 문자열 변환을 위한 유틸리티 함수를 올바르게 import했습니다.

---

148-148: 태블릿 모달의 타임존 변환이 올바르게 수정되었습니다.

캘린더 날짜 렌더링에서 UTC 기반 날짜 문자열 변환을 KST 기반으로 교체하여 다른 컴포넌트들과 일관된 타임존 처리를 보장합니다. 이는 체험 예약 시 날짜 표시 불일치 문제를 해결합니다.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/231-calender-bug

---

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

[two678]

수고하셨습니다!

[github-actions]

🧷 배포 미리보기: https://global-nomad-psfzhnk15-yun-jinwoos-projects.vercel.app
⏰ 최종 업데이트: 2025년 08월 04일 19시 35분

[Yun-Jinwoo]

고생하셨습니다 성오님!

혹시 그럼 시간이 지난 예약은 안보이게 처리도 가능한가요?? 지금은 지난 예약도 보이네요! 아니면 지난 예약시간에 예약하려고 했을때 기간이 지났다는 경고 문구를 줘도 괜찮을것 같아요!

현재

[Moon-ju-young]

수고하셨습니다~

[seong5]

고생하셨습니다 성오님!

혹시 그럼 시간이 지난 예약은 안보이게 처리도 가능한가요?? 지금은 지난 예약도 보이네요! 아니면 지난 예약시간에 예약하려고 했을때 기간이 지났다는 경고 문구를 줘도 괜찮을것 같아요!

현재

엇 그렇네요.. 그러면 지난 날짜를 선택은 가능하되 모달로 처리하도록 해보겠습니다!