[Bugfix/#313] 타임라인 성과 상태 UnderPerform/Pending 정리

[jjjsun]

🚨 관련 이슈

Closed #313

✨ 변경사항

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

✏️ 작업 내용

• AT_RISK API 값 UNDERPERFORM으로 타입/스타일 키 정렬
• performanceStatus가 null/미지 값일때, ON_TRACK fallback 제거 -> UI는 회색으로 Pending 표시
• 범례에 Pending 설명 추가, 한줄로 보이도록 영역이랑 간격 수정

💻 작업 화면

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

• 기존에는 null이나 미지값일때는 ON_TRACK(파란색)으로 표시되도록 진행했는데, 사용자에게 혼동을 줄수 있고, UX적으로 맞지 않다고 판단되어서 추가로 Pending 값을 추가했습니다.
• API 성과 상태 3종: ON_TRACK / ABOVE_AVERAGE / UNDERPERFORM
• Pending은 API enum 값이 아니라 FE에서 UX 개선을 위한 상태표시 입니다.

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

Summary by CodeRabbit

• 새 기능

  • 타임라인 성과 상태에 ‘미정(PENDING)’ 표시를 추가했습니다.
  • 성과가 낮은 상태를 ‘위험(AT_RISK)’에서 ‘저조(UNDERPERFORM)’로 변경했습니다.

• 개선

  • 타임라인 상태 범례와 상단 툴바의 간격 및 너비 배치를 조정해 화면 내 표시 영역을 개선했습니다.
  • 알 수 없거나 누락된 상태를 ‘미정’으로 표시하도록 변경했습니다.

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 53 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

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: eca0fd0c-e7f1-4445-a55a-bd0264302a58

📥 Commits

Reviewing files that changed from the base of the PR and between 322973b and dc32a74.

📒 Files selected for processing (1)

• src/components/timeline/TimelineStatusLegend.tsx

📝 Walkthrough

Walkthrough

타임라인 성과 상태를 UNDERPERFORM 중심으로 정렬하고, 미정 상태를 PENDING으로 정규화하도록 타입·스타일·목업을 갱신했습니다. 상태 범례의 폭과 간격도 조정했습니다.

Changes

타임라인 성과 상태 처리

Layer / File(s)	Summary
성과 상태 타입 계약 src/types/timeline/api.ts, src/types/timeline/summary.ts, src/types/timeline/ui.ts, src/types/timeline/timeline.mock.ts	API 상태에서 AT_RISK를 UNDERPERFORM으로 변경하고, UI 전용 PENDING 상태를 추가했습니다. 관련 패널·바 타입과 목업 값도 갱신했습니다.
상태 정규화와 스타일 매핑 src/constants/timeline/statusStyle.ts	범례와 스타일 맵을 UI 상태 기준으로 전환하고 UNDERPERFORM, PENDING 스타일을 추가했습니다. null, undefined 또는 미등록 상태는 PENDING으로 정규화됩니다.
타임라인 상태 표시 레이아웃 src/components/timeline/TimelineStatusLegend.tsx, src/pages/dashboard/timeline/Timeline.tsx	상태 범례가 전체 가용 폭을 사용하고 축소될 수 있도록 변경했으며, 상단 영역과 범례의 가로 간격을 줄였습니다.

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

Possibly related PRs

• WhereYouAd/WhereYouAd-Frontend#251: 타임라인 성과 상태 정의와 AT_RISK 관련 타입을 수정합니다.
• WhereYouAd/WhereYouAd-Frontend#253: 타임라인 바와 범례의 성과 상태 스타일 사용 흐름과 직접 연결됩니다.
• WhereYouAd/WhereYouAd-Frontend#293: resolveTimelinePerformanceStatus 및 스타일 해결 함수의 실제 호출 흐름과 연관됩니다.

Suggested labels: 📬 API

Suggested reviewers: seojegyeong, yermim

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 타임라인 성과 상태 정리와 Pending 추가를 직접적으로 요약합니다.
Description check	✅ Passed	필수 섹션인 관련 이슈, 변경사항, 작업 내용, 미완성 작업, 논의 사항이 모두 포함되어 있습니다.
Linked Issues check	✅ Passed	#313의 Underperform가 On Track으로 표시되는 문제를 타입·스타일 정렬과 Pending fallback 제거로 해결했습니다.
Out of Scope Changes check	✅ Passed	범례 레이아웃 조정과 Pending 표시는 모두 이슈의 표시 오류 수정 범위 안에 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch bugfix/#313

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/constants/timeline/statusStyle.ts (1)

69-80: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

상태 정규화 회귀 테스트를 추가해 주세요.

ON_TRACK, ABOVE_AVERAGE, UNDERPERFORM은 그대로 반환되고, null·undefined·알 수 없는 문자열은 모두 PENDING으로 반환되는지 테스트하면 이번 버그가 재발하는 것을 막을 수 있습니다. PR 목표의 핵심 동작인 미정 상태 정규화를 직접 검증하는 테스트가 필요합니다.

🤖 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/constants/timeline/statusStyle.ts` around lines 69 - 80, Add regression
tests for resolveTimelinePerformanceStatus covering ON_TRACK, ABOVE_AVERAGE, and
UNDERPERFORM as unchanged results, plus null, undefined, and unknown strings
returning PENDING. Keep the tests focused on the normalization behavior and use
the project’s existing test conventions.

🤖 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/timeline/TimelineStatusLegend.tsx`:
- Around line 22-26: TimelineStatusLegend의 최상위 및 내부 컨테이너에서 flex-wrap 의존성을 제거해
범례가 항상 한 줄로 유지되도록 조정하세요. 각 범례 항목에는 whitespace-nowrap과 shrink-0을 적용하고, 좁은 화면에서는
가로 스크롤 등 명시적인 오버플로 동작을 추가하세요.

---

Nitpick comments:
In `@src/constants/timeline/statusStyle.ts`:
- Around line 69-80: Add regression tests for resolveTimelinePerformanceStatus
covering ON_TRACK, ABOVE_AVERAGE, and UNDERPERFORM as unchanged results, plus
null, undefined, and unknown strings returning PENDING. Keep the tests focused
on the normalization behavior and use the project’s existing test conventions.

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

Plan: Pro Plus

Run ID: 060f8d4e-8691-427c-b5dc-7af792cc7955

📥 Commits

Reviewing files that changed from the base of the PR and between f8e2342 and 322973b.

📒 Files selected for processing (7)

• src/components/timeline/TimelineStatusLegend.tsx
• src/constants/timeline/statusStyle.ts
• src/pages/dashboard/timeline/Timeline.tsx
• src/types/timeline/api.ts
• src/types/timeline/summary.ts
• src/types/timeline/timeline.mock.ts
• src/types/timeline/ui.ts

[Seojegyeong]

P4: 확인했습니다!