[Feature/#295] 타임라인 그리드 열 너비 뷰포트 균등 분배

[jjjsun]

🚨 관련 이슈

Closed #295

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

• 타임라인 그리드 열 너비 컨테이너 너비 / 열 수로 동적 계산해서 일/주/월 모두 가로 공간을 채우도록 수정
• useContainerWidth로 리사이즈시 재계산
• 최소 너비 92px 유지, 부족하면 가로 스크롤되도록 구현

💻 작업 화면

MONTH 단위

WEEK 단위

DAY 단위

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

• 개선 사항
  • 타임라인이 표시 영역의 너비를 자동으로 감지해 열 너비와 전체 레이아웃을 동적으로 조정합니다.
  • 창 크기나 컨테이너 크기가 변경될 때 타임라인 축, 그리드, 막대가 동일한 기준으로 정렬됩니다.
  • 다양한 화면 크기에서 타임라인이 더욱 자연스럽고 일관되게 표시됩니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

타임라인 컨테이너의 너비를 관찰하는 훅을 추가하고, 컨테이너 너비와 열 개수에 따라 colWidth와 totalWidth를 계산하도록 변경했습니다. 계산된 열 너비는 타임라인 축, 그리드, 바 렌더링에 전달됩니다.

Changes

타임라인 반응형 열 너비

Layer / File(s)	Summary
컨테이너 너비 관찰 src/hooks/timeline/useContainerWidth.ts	clientWidth를 초기 상태로 설정하고, enabled가 활성화된 경우 ResizeObserver로 너비 변화를 추적합니다.
타임라인 동적 열 너비 통합 src/constants/timeline/layout.ts, src/pages/dashboard/timeline/Timeline.tsx	컨테이너 너비를 열 개수로 나눠 최소 열 너비와 비교한 뒤 colWidth와 totalWidth를 계산하고, 축·그리드·바에 전달합니다. 관련 레이아웃 상수 주석도 추가되었습니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Timeline
  participant useContainerWidth
  participant ResizeObserver
  participant TimelineAxis
  participant TimelineGrid
  participant TimelineBar
  Timeline->>useContainerWidth: scrollRef 전달
  useContainerWidth->>ResizeObserver: 컨테이너 관찰
  ResizeObserver-->>useContainerWidth: 너비 변경 전달
  useContainerWidth-->>Timeline: containerWidth 반환
  Timeline->>Timeline: colWidth와 totalWidth 계산
  Timeline->>TimelineAxis: colWidth 전달
  Timeline->>TimelineGrid: colWidth 전달
  TimelineGrid->>TimelineBar: colWidth 전달

Loading

Possibly related PRs

• WhereYouAd/WhereYouAd-Frontend#253: 타임라인 컴포넌트에 colWidth 기반 포지셔닝을 도입한 변경과 직접 연결됩니다.
• WhereYouAd/WhereYouAd-Frontend#256: TimelineAxis, TimelineGrid, TimelineBar의 colWidth prop 사용과 맞물립니다.
• WhereYouAd/WhereYouAd-Frontend#261: 축·그리드·바의 열 레이아웃이 colWidth를 기준으로 렌더링되는 변경과 연결됩니다.

Suggested reviewers: Seojegyeong, YermIm

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	#295의 컨테이너 너비 기준 동적 열 너비 계산과 리사이즈 재계산 요구를 구현해 목적에 부합합니다.
Out of Scope Changes check	✅ Passed	추가된 훅과 타임라인 레이아웃 수정은 모두 열 너비 동적 계산이라는 목표 범위 안에 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	제목이 타임라인 그리드 열 너비를 균등 분배하는 핵심 변경을 잘 요약합니다.
Description check	✅ Passed	관련 이슈, 변경사항, 작업 내용, 미완성 작업, 논의 사항이 템플릿 구조를 대부분 충족합니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/#295

---

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

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

📚 Storybook 배포 완료

항목	링크
📖 Storybook	https://69a147b60a56365d9e2185ef-vhrqnapgiv.chromatic.com/
🔍 Chromatic	https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=409

[coderabbitai]

🧹 Nitpick comments (1)

src/hooks/timeline/useContainerWidth.ts (1)

15-18: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

불필요한 리렌더 방지를 위해 width 변경 시에만 setState 호출

update()가 el.clientWidth가 변경되지 않아도 setWidth를 호출합니다. ResizeObserver는 크기 변화 시에만 트리거되지만, 초기 호출(update())과 연속 리사이즈에서 동일한 값이 설정될 수 있어 불필요한 리렌더가 발생합니다.

♻️ 제안하는 수정

   const update = () => {
-    setWidth(el.clientWidth);
+    setWidth((prev) => (prev === el.clientWidth ? prev : el.clientWidth));
   };

🤖 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/hooks/timeline/useContainerWidth.ts` around lines 15 - 18, Update the
update function in useContainerWidth so it calls setWidth only when
el.clientWidth differs from the current width state. Preserve the initial
measurement and ResizeObserver behavior while avoiding state updates for
unchanged width values.

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

Nitpick comments:
In `@src/hooks/timeline/useContainerWidth.ts`:
- Around line 15-18: Update the update function in useContainerWidth so it calls
setWidth only when el.clientWidth differs from the current width state. Preserve
the initial measurement and ResizeObserver behavior while avoiding state updates
for unchanged width values.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 409f628e-008d-493a-8b7b-39abf993e28e

📥 Commits

Reviewing files that changed from the base of the PR and between 03c72f5 and a90e928.

📒 Files selected for processing (3)

• src/constants/timeline/layout.ts
• src/hooks/timeline/useContainerWidth.ts
• src/pages/dashboard/timeline/Timeline.tsx

[YermIm]

P4: 확인했습니다. 수고하셨습니다!!