feat: SP2 history state에 날짜 정보 저장 - #439
Conversation
WalkthroughLayout Outlet 컨텍스트에 홈 캘린더 상태를 추가하고 Home의 날짜 변경·토스트 처리 흐름을 컨텍스트 기반으로 전환했습니다. 헤더 로고 이동 방식과 게임 카드 버튼 스타일도 함께 조정했습니다. Changes홈 캘린더 상태 공유
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Layout
participant Home
participant CalendarSection
Layout->>Home: homeCalendarState 제공
Home->>CalendarSection: selectedDate와 handleDateChange 전달
CalendarSection->>Home: 날짜 변경 이벤트 전달
Home->>Layout: setHomeCalendarState 호출
Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: private package registry requires authentication. Disable ESLint in CodeRabbit settings or use public packages. 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 |
|
MATEBALL-STORYBOOK |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/pages/home/home.tsx (1)
33-38: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win
entryDate가 렌더링마다 새로 생성됨.
entryDate = new Date()가 컴포넌트 바디에서 매 렌더링마다 실행되어 매번 다른Date참조가CalendarSection에entryDateprop으로 전달됩니다.homeCalendarState변경(날짜 선택 등)으로 Home이 리렌더될 때마다 값도 새로 계산되어, 하위 컴포넌트의 참조 동일성 기반 최적화(memo등)를 무력화시킬 수 있고 불필요한 연산이 반복됩니다.Layout의 초기homeCalendarState설정 시 사용된 "entry" 시점 날짜와도 개념적으로 분리되어 있어, 마운트 시점에 한 번만 고정하는 편이 의미상으로도 더 안전합니다.♻️ 제안
- const entryDate = new Date(); + const [entryDate] = useState(() => new Date());🤖 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/pages/home/home.tsx` around lines 33 - 38, Update the entryDate initialization in the Home component to capture the current date only once for the component’s lifetime, preserving the initial entry-time value across re-renders caused by homeCalendarState changes. Continue passing this stable value to CalendarSection.src/shared/routes/layout.tsx (2)
49-70: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winLGTM (동작 자체는 문제 없음), 다만 위 코멘트와 동일한 결합도 우려.
초기화 로직(lazy initializer,
addDays사용)과Outletcontext 전달 자체는 정확합니다. 다만 이 블록은 Home 전용 상태를 모든 하위 라우트에 무조건 전달하는 지점으로, Line 14-24 코멘트에서 제안한 구조 분리와 함께 개선하는 것을 권장합니다.🤖 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/shared/routes/layout.tsx` around lines 49 - 70, Separate the Home-specific calendar state initialization and Outlet context from the shared layout path, following the structure proposed for the related block around the layout state. Keep the lazy initializer using addDays and preserve the existing HomeCalendarState values, but expose this context only to Home routes rather than unconditionally to every child route.
14-24: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Layout가 Home 전용 캘린더 상태 계약까지 소유하게 됨.
Layout은 헤더/푸터/로딩 등 앱 셸 역할을 담당하는 라우트인데, 이번 변경으로 Home 도메인에 특화된HomeCalendarState/LayoutOutletContext를 직접 정의하고 모든 하위 라우트(Game, Result, Onboarding 등)에 강제로 전달하게 됩니다. Home 외 라우트는homeCalendarState/setHomeCalendarState를 전혀 사용하지 않으므로, 향후 캘린더 관련 상태가 늘어날수록Layout이 계속 비대해질 위험이 있습니다.별도의 캘린더 상태 훅/컨텍스트로 분리해
Layout은 조합만 담당하도록 하는 편이 유지보수에 유리합니다.♻️ 참고용 구조 예시
// src/pages/home/hooks/use-home-calendar-state.ts export const useHomeCalendarState = () => { const [state, setState] = useState<HomeCalendarState>(() => { const entryDate = new Date(); return { selectedDate: entryDate, baseWeekDate: addDays(entryDate, WEEK_CALENDAR_START_OFFSET) }; }); return { homeCalendarState: state, setHomeCalendarState: setState }; };🤖 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/shared/routes/layout.tsx` around lines 14 - 24, LayoutOutletContext가 Home 전용 캘린더 상태까지 소유하지 않도록 HomeCalendarState와 관련 상태 관리 로직을 별도의 Home 캘린더 훅 또는 컨텍스트로 이동하세요. Layout은 기존 셸 상태와 해당 캘린더 제공 구성을 조합하는 역할만 담당하고, Game·Result·Onboarding 등 Home 외 라우트에는 homeCalendarState와 setHomeCalendarState를 강제 전달하지 않도록 LayoutOutletContext 및 하위 라우트 연결을 조정하세요.
🤖 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/pages/home/home.tsx`:
- Around line 63-79: Update the navigation inside the useEffect to preserve the
current URL query string by including location.search with location.pathname;
also retain location.hash if present, while keeping the existing replace and
state-reset behavior unchanged.
---
Nitpick comments:
In `@src/pages/home/home.tsx`:
- Around line 33-38: Update the entryDate initialization in the Home component
to capture the current date only once for the component’s lifetime, preserving
the initial entry-time value across re-renders caused by homeCalendarState
changes. Continue passing this stable value to CalendarSection.
In `@src/shared/routes/layout.tsx`:
- Around line 49-70: Separate the Home-specific calendar state initialization
and Outlet context from the shared layout path, following the structure proposed
for the related block around the layout state. Keep the lazy initializer using
addDays and preserve the existing HomeCalendarState values, but expose this
context only to Home routes rather than unconditionally to every child route.
- Around line 14-24: LayoutOutletContext가 Home 전용 캘린더 상태까지 소유하지 않도록
HomeCalendarState와 관련 상태 관리 로직을 별도의 Home 캘린더 훅 또는 컨텍스트로 이동하세요. Layout은 기존 셸 상태와
해당 캘린더 제공 구성을 조합하는 역할만 담당하고, Game·Result·Onboarding 등 Home 외 라우트에는
homeCalendarState와 setHomeCalendarState를 강제 전달하지 않도록 LayoutOutletContext 및 하위
라우트 연결을 조정하세요.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 4d9dc035-996a-4c8b-bfea-6c6b58908f23
📒 Files selected for processing (5)
src/pages/game/components/game-card.tsxsrc/pages/game/game.tsxsrc/pages/home/home.tsxsrc/shared/components/header/utils/get-header.tsxsrc/shared/routes/layout.tsx
1 participant
#️⃣ Related Issue
Closes #438
☀️ New-insight
처음에는 선택한 날짜를 URL Query Parameter로 관리하려고 했지만 구현하면서 고려해야 할 경우의 수가 예상보다 많았다.
이번 기능은 이전 화면으로 돌아왔을 때 선택했던 날짜만 유지하면 되는 요구사항이었기 때문에 URL을 변경하는 방식보다 history state를 활용해 화면 상태를 전달하는 방식이 목적에 더 적합하다고 판단했다.
이를 통해 필요한 화면 상태만 유지하면서 URL은 그대로 유지할 수 있었고, 불필요한 예외 처리도 줄일 수 있었다.
💎 PR Point
history state에 저장하도록 변경📸 Screenshot
2026-07-16.5.03.17.mov
Summary by CodeRabbit