[Feature/#401] 타임라인 바 필터/정렬 연동

[jjjsun]

🚨 관련 이슈

Closed #401

✨ 변경사항

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

✏️ 작업 내용

타임라인 목록에 성과 상태 필터링과 정렬의 서버 쿼리로연동하고, Sort/Filter UI 활성화하였습니다.

• 목록 API에 status, sort 쿼리 추가
• useTimelineList 쿼리키에 필터/정렬 반영
• Sort/Filter Dropdownmenu UI 구현 후 타임라인 페이지에 연결
• 정렬 라벨을 실제 결과에 맞게 수정 진행

정렬 의미 정리

• DISPLAY_ORDER: 등록/수동 순서 (= 기본순서)
• LATEST: 종료일이 오래 남은 것 맨위로
• OLDEST: 종료일이 가까운 것 맨위로

필터 메뉴

• ON_TRACK
• ABOVE_AVG
• UNDERPERFORM
• 생략 시 ALL

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

• 필터와 정렬은 서버 타임라인 목록 조회로 처리합니다.

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

Summary by CodeRabbit

• 새 기능
  • 타임라인 목록에 성과 상태 필터를 추가했습니다.
  • 기본 순서, 최신 종료일순, 오래된 종료일순으로 정렬할 수 있습니다.
  • 필터와 정렬을 선택하면 해당 조건에 맞는 타임라인 목록이 표시됩니다.
  • 타임라인 표시 순서 정보를 지원합니다.

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 48 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: acab70ce-b7b8-4f15-ab43-3af4aeb603c6

📥 Commits

Reviewing files that changed from the base of the PR and between 08eba53 and 3d16801.

📒 Files selected for processing (3)

• src/components/timeline/TimelineFilterSortMenus.tsx
• src/pages/dashboard/timeline/Timeline.tsx
• src/store/useTimelineStore.ts

📝 Walkthrough

Walkthrough

타임라인 목록 API, 쿼리 키, 조회 훅이 상태 필터와 정렬 파라미터를 지원합니다. 대시보드에 필터·정렬 메뉴를 연결하고 선택값을 목록 조회에 전달합니다.

Changes

타임라인 필터 및 정렬

Layer / File(s)	Summary
필터·정렬 계약 정의 src/types/timeline/api.ts, src/constants/timeline/filterSort.ts, src/types/timeline/timeline.mock.ts	상태 필터와 정렬 옵션, 목록 조회 파라미터, displayOrder 필드를 정의했습니다. 목 데이터에 표시 순서를 추가했습니다.
목록 조회 파라미터 흐름 src/lib/queryKeys.ts, src/api/timeline/timeline.ts, src/hooks/timeline/useTimelineList.ts	쿼리 키와 목록 조회 API 및 훅이 status와 sort를 사용하도록 변경했습니다. 기본 정렬은 DISPLAY_ORDER입니다.
대시보드 메뉴 연동 src/components/timeline/TimelineFilterSortMenus.tsx, src/pages/dashboard/timeline/Timeline.tsx	필터·정렬 드롭다운을 추가했습니다. 선택값을 목록 조회에 전달하고 기존 비활성 UI를 제거했습니다.

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

Sequence Diagram(s)

sequenceDiagram
  participant Timeline
  participant TimelineFilterSortMenus
  participant useTimelineList
  participant getTimelineList
  participant TimelineAPI
  Timeline->>TimelineFilterSortMenus: 필터 또는 정렬 선택
  TimelineFilterSortMenus-->>Timeline: 선택값 변경 콜백
  Timeline->>useTimelineList: status와 sort 전달
  useTimelineList->>getTimelineList: 조회 파라미터 전달
  getTimelineList->>TimelineAPI: 목록 조회 요청
  TimelineAPI-->>getTimelineList: 타임라인 목록 반환
  getTimelineList-->>useTimelineList: 조회 결과 반환

Loading

Possibly related PRs

• WhereYouAd/WhereYouAd-Frontend#281: 동일한 타임라인 API, 훅, 쿼리 키, 타입, 대시보드 화면을 수정합니다.
• WhereYouAd/WhereYouAd-Frontend#251: 타임라인 API 타입과 목 데이터를 추가한 변경을 기반으로 합니다.
• WhereYouAd/WhereYouAd-Frontend#314: 타임라인 성과 상태 타입과 상수를 공유합니다.

Suggested reviewers: seojegyeong, yermim

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	필터·정렬 기능과 직접 관련이 낮은 표시 순서 변경 요청 인터페이스가 추가되었습니다.	IUpdateTimelineDisplayOrderRequest 추가를 제거하거나, 이번 기능에서 필요한 이유와 사용처를 명확히 제시해 주세요.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	목록 API 파라미터, 쿼리 키, 필터·정렬 UI 연동 등 #401의 코딩 요구사항을 구현했습니다.
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/#401

---

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

[coderabbitai]

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/components/timeline/TimelineFilterSortMenus.tsx`:
- Around line 10-13: Replace the relative DropdownMenu import in
src/components/timeline/TimelineFilterSortMenus.tsx#L10-L13 with the specified
`@/components/common/dropdownmenu/DropdownMenu` alias. Also replace the relative
statusStyle import in src/constants/timeline/filterSort.ts#L6 with
`@/constants/timeline/statusStyle`, ensuring both files use the `@/` alias
convention.

In `@src/pages/dashboard/timeline/Timeline.tsx`:
- Around line 72-74: Move the statusFilter and sort state from the Timeline
component into the timeline UI Zustand store under src/store/. Expose the
store’s current values and setters, then update Timeline and its menu callbacks
to read from and update that store so selections persist across unmounts.

🪄 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: eef0918e-cf3c-4b87-9fef-227cf2c8b7fa

📥 Commits

Reviewing files that changed from the base of the PR and between e4c35ba and 08eba53.

📒 Files selected for processing (8)

• src/api/timeline/timeline.ts
• src/components/timeline/TimelineFilterSortMenus.tsx
• src/constants/timeline/filterSort.ts
• src/hooks/timeline/useTimelineList.ts
• src/lib/queryKeys.ts
• src/pages/dashboard/timeline/Timeline.tsx
• src/types/timeline/api.ts
• src/types/timeline/timeline.mock.ts

[YermIm]

P4: 확인했습니다!