[Feature/#413] 타임라인 생성 모달/그리드/성과 패널 UX 개선

[jjjsun]

🚨 관련 이슈

Closed #413

✨ 변경사항

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

✏️ 작업 내용

생성/수정 모달

• 비교 기간 드롭다운 오픈시에 높이 확장되도록 수정(inFlow)
• 성과 지표 칩 클릭시 움직임 추가

타임라인 바

• TIMELINE_ROW_HEIGHT 조정하여 바 세로 간격 축소

성과 패널

• badge 색 변경
• AI 요약 타이틀 추가 및 컬러 정리
• KPI 카드 디자인 및 간격 개선
• 일별 변화 추이 차트를 패널 열었을때, startDate 기준으로 나오도록 UX 개선

💻 작업 화면

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

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

Summary by CodeRabbit

• 새로운 기능

  • 드롭다운 메뉴를 일반 문서 흐름에 배치할 수 있는 옵션을 추가했습니다.
  • 타임라인 성과 패널에 상태별 AI 요약 카드와 요약 생성 UI를 추가했습니다.
  • 날짜를 기준으로 타임라인 기간을 계산하는 기능을 추가했습니다.

• 개선 사항

  • 타임라인 차트 기간이 패널 상태와 시작일에 맞게 초기화됩니다.
  • KPI 카드와 성과 배지의 레이아웃 및 시각적 스타일을 개선했습니다.
  • 지표 선택 버튼에 클릭 효과와 전환 애니메이션을 추가했습니다.
  • 타임라인 행 높이를 줄여 화면 활용도를 높였습니다.

[coderabbitai]

Warning

Review limit reached

@jjjsun, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 46 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: dabfaf00-b1ea-471e-9e9b-f57b4f018e8b

📥 Commits

Reviewing files that changed from the base of the PR and between 4df5821 and 0096aa4.

📒 Files selected for processing (2)

• src/components/common/dropdownmenu/DropdownMenu.tsx
• src/components/timeline/TimelinePerformancePanel.tsx

📝 Walkthrough

Walkthrough

타임라인 생성 모달에 일반 문서 흐름 메뉴 배치를 추가했습니다. 성과 패널의 기간 초기화 기준을 시작일로 변경했습니다. AI 요약과 KPI UI를 개편하고, 배지 색상과 타임라인 행 높이를 조정했습니다.

Changes

타임라인 UX 개선

Layer / File(s)	Summary
DropdownMenu 일반 흐름 배치 src/components/common/dropdownmenu/DropdownMenu.tsx	inFlow 속성을 추가했습니다. 활성화하면 위치 계산을 생략하고 메뉴를 일반 문서 흐름에 배치합니다.
비교 기간 메뉴 연결 src/components/timeline/TimelineCreateModal.tsx	비교 기간 메뉴에 inFlow를 적용했습니다. 지표 버튼에 전체 전환과 클릭 축소 효과를 추가했습니다.
성과 패널 기간 초기화 src/utils/timeline/period.ts, src/components/timeline/TimelinePerformancePanel.tsx	시작일을 포함하는 일·주·월 기간 인덱스를 계산합니다. 패널이 열리거나 시작일이 변경되면 주간 보기와 해당 기간으로 초기화합니다.
성과 패널 UI와 타임라인 레이아웃 src/components/timeline/TimelinePerformancePanel.tsx, src/constants/timeline/layout.ts	AI 요약을 idle/loading/done 상태별 카드로 구성했습니다. KPI 카드 배치와 색상을 변경하고, 타임라인 행 높이를 92로 조정했습니다.

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

Possibly related PRs

• WhereYouAd/WhereYouAd-Frontend#264: DropdownMenu와 TimelineCreateModal의 비교 기간 메뉴 흐름과 직접 연결됩니다.
• WhereYouAd/WhereYouAd-Frontend#301: TimelinePerformancePanel과 기간 계산 로직을 함께 변경합니다.
• WhereYouAd/WhereYouAd-Frontend#253: 타임라인 레이아웃 상수와 타임라인 컴포넌트 변경이 연결됩니다.

Suggested reviewers: yermim, seojegyeong

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 타임라인 생성 모달, 그리드, 성과 패널의 UX 개선이라는 주요 변경 사항을 명확하게 요약합니다.
Description check	✅ Passed	관련 이슈, 변경 항목, 작업 내용, 화면, 미완성 작업을 포함해 템플릿의 주요 요구 사항을 충족합니다.
Linked Issues check	✅ Passed	구현 내용이 이슈 #413의 드롭다운, 지표 상호작용, 타임라인 간격, 성과 패널, KPI, startDate 요구 사항을 충족합니다.
Out of Scope Changes check	✅ Passed	변경된 컴포넌트와 유틸리티가 모두 이슈 #413의 타임라인 모달, 그리드, 성과 패널 UX 개선 범위에 포함됩니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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/#413

---

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-evfhfudcwy.chromatic.com/
🔍 Chromatic	https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=582

[coderabbitai]

Actionable comments posted: 3

🤖 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/components/common/dropdownmenu/DropdownMenu.tsx`:
- Around line 188-196: Update the DropdownMenu class composition so
height-limiting classes such as max-h-60 and overflow-y-auto are applied for
fullWidth only when inFlow is false. Keep the full-width positioning classes
unchanged, and preserve the existing scroll-limited behavior for non-inFlow
menus.

In `@src/components/timeline/TimelinePerformancePanel.tsx`:
- Around line 299-309: Update the button label in the TimelinePerformancePanel
summary request Button from “요약하기 생성” to the clearer action text “AI 요약 생성하기”,
keeping the existing click behavior and disabled state unchanged.
- Around line 354-367: Update the metric card layout in TimelinePerformancePanel
so narrow screens use two columns with wrapping and each KPI value remains fully
visible without truncation; configure the existing section and metric card
classes for a two-column small-screen layout and four columns only at wider
breakpoints, and remove or adjust the min-w-0/truncate styling that clips KPI
content.

🪄 Autofix

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: CHILL

Plan: Pro Plus

Run ID: b025bd7e-9565-4f1d-b909-4465b5c6298f

📥 Commits

Reviewing files that changed from the base of the PR and between 66c2431 and 4df5821.

📒 Files selected for processing (5)

• src/components/common/dropdownmenu/DropdownMenu.tsx
• src/components/timeline/TimelineCreateModal.tsx
• src/components/timeline/TimelinePerformancePanel.tsx
• src/constants/timeline/layout.ts
• src/utils/timeline/period.ts

[YermIm]

P4: 확인했습니다!