fix: 캘린더 페이지 기본 선택 날짜 및 스타일 수정#76
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthrough캘린더의 초기 선택 날짜를 서울 시간대의 현재 날짜에서 계산해 전달하고, 이를 기준으로 월과 선택 상태를 초기화합니다. 날짜 유틸리티의 공개 API를 갱신하고 선택된 날짜 셀의 배경 스타일을 브랜드 색상으로 변경했습니다. Changes캘린더 날짜 선택
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/features/manage-calendar/model/calendar-utils.ts`:
- Around line 39-44: Update the CalendarView initial-state flow that uses
getInitialSelectedCalendarDate and the current-date utility so it does not
evaluate new Date() during SSR and client hydration. Prefer calculating the
reference date in the server component and passing it through an initialDate
prop; otherwise initialize with a stable value and set the current date in
useEffect after mount, preserving the existing date format.
In `@src/features/manage-calendar/ui/CalendarView.tsx`:
- Line 231: Replace the hardcoded rgba selection background in the CalendarView
selection class with Tailwind’s brand color alpha utility bg-brand/12,
preserving the existing conditional application of the selected-state styling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 930d9e57-5789-4fa4-a7ec-311e61ab9d9b
📒 Files selected for processing (2)
src/features/manage-calendar/model/calendar-utils.tssrc/features/manage-calendar/ui/CalendarView.tsx
| const now = new Date(); | ||
| return new Date(now.getFullYear(), now.getMonth(), 1); | ||
| } | ||
|
|
||
| export function getInitialSelectedCalendarDate() { | ||
| return formatIsoDate(new Date()); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Next.js SSR 환경에서의 Hydration 불일치 위험
이 유틸리티 함수들은 CalendarView의 초기 상태(useState) 설정에 사용되고 있습니다. new Date()를 클라이언트 컴포넌트의 초기값으로 직접 평가하면, 서버 렌더링 시점(보통 UTC)과 클라이언트 하이드레이션 시점(유저 로컬 타임존)의 날짜가 다를 경우(예: 자정 부근) 렌더링된 마크업이 일치하지 않아 React Hydration 에러가 발생할 수 있습니다.
권장 해결 방안:
안전한 렌더링을 위해 서버 컴포넌트에서 기준 날짜를 계산하여 CalendarView에 props(예: initialDate)로 주입하는 구조를 권장합니다. 부득이하게 클라이언트에서만 동적으로 날짜를 설정해야 한다면, 초기에는 고정된 값이나 빈 상태를 유지하고 useEffect를 통해 마운트된 이후에 현재 날짜를 설정해 주세요.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/features/manage-calendar/model/calendar-utils.ts` around lines 39 - 44,
Update the CalendarView initial-state flow that uses
getInitialSelectedCalendarDate and the current-date utility so it does not
evaluate new Date() during SSR and client hydration. Prefer calculating the
reference date in the server component and passing it through an initialDate
prop; otherwise initialize with a stable value and set the current date in
useEffect after mount, preserving the existing date format.
There was a problem hiding this comment.
동의합니다. 서버 컴포넌트에서 기준 날짜를 계산해 initialDate로 전달하거나, 클라이언트에서 처리해야 한다면 초기값을 고정한 뒤 마운트 이후 현재 날짜를 설정하도록 보완하면 좋겠습니다.
There was a problem hiding this comment.
@seongjinss555 네, 감사합니다. 서버 컴포넌트에서 기준 날짜를 계산해 initialDate로 전달하는 방식이 SSR과 hydration 간 일관성을 가장 잘 보장합니다. 해당 구조가 어려우면, 클라이언트에서는 안정적인 초기값으로 렌더링한 뒤 useEffect에서 오늘 날짜를 설정하는 대안도 괜찮습니다.
수정 후에는 자정 전후 및 서로 다른 타임존에서도 hydration 경고 없이 선택 날짜와 월이 정상 표시되는지 확인하면 좋겠습니다. 🐰
There was a problem hiding this comment.
클라이언트 컴포넌트 초기 상태에서 new Date()를 직접 평가하면 SSR/CSR 타임존 차이로 hydration mismatch가 발생할 수 있어, 초기 날짜 계산을 서버 컴포넌트로 이동했습니다.
/workspaces/[workspaceId]/calendar/page.tsx에서 Asia/Seoul 기준 날짜 문자열을 계산해 initialSelectedDate props로 내려주고, CalendarView는 해당 값을 초기 상태로만 사용하도록 수정했습니다.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/workspaces/`[workspaceId]/calendar/page.tsx:
- Around line 9-22: 간단한 날짜 포맷 반환을 위해 getSeoulTodayIsoDate의 formatToParts 및 수동 조합
로직을 제거하고, 동일한 Asia/Seoul 옵션으로 Intl.DateTimeFormat의 format() 결과를 직접 반환하도록 정리하세요.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 79f65958-b5d1-4c0b-8c4d-ee9fcb2fd30d
📒 Files selected for processing (4)
src/app/workspaces/[workspaceId]/calendar/page.tsxsrc/features/manage-calendar/model/calendar-utils.tssrc/features/manage-calendar/ui/CalendarView.tsxsrc/views/calendar/ui/CalendarPage.tsx
2 participants
Pull Request
작업 내용
2025-07-30)로 고정되던 문제를 수정했습니다.작업 결과
npm run typecheck통과했습니다.변경 사항
Added
Changed
Fixed
실행화면
테스트
리뷰 체크리스트
feature/*->develop, 배포 시develop또는release/*->main)Type/#issue-number/description형식을 따릅니다.console.log, 주석, 임시 코드를 제거했습니다.리뷰 요청사항
관련 이슈
Closes #75
Summary by CodeRabbit