[Feature/#257] 타임라인 성과 요약 패널 UI 구현#261
Merged
Merged
Conversation
jjjsun
added
🎨 Html&css
|
Warning Review limit reached
More reviews will be available in 45 minutes and 4 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the 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 credits. 🚦 How do rate 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 see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthrough타임라인 레이아웃/성과 상태 상수를 신규 정의하고, Changes타임라인 성과 요약 패널 및 그리드 UI
Sequence Diagram(s)sequenceDiagram
participant User as 사용자
participant TimelineBar as TimelineBar
participant TimelinePerformancePanel as TimelinePerformancePanel
participant TimelinePeriodSelector as TimelinePeriodSelector
User->>TimelineBar: 캠페인 바 클릭 (onBarClick)
TimelineBar->>TimelinePerformancePanel: bar 데이터 전달, isOpen=true
TimelinePerformancePanel->>TimelinePerformancePanel: aiState 초기화 (idle 또는 done)
User->>TimelinePerformancePanel: "요약하기 생성" 버튼 클릭
TimelinePerformancePanel->>TimelinePerformancePanel: aiState = loading (스켈레톤 표시)
TimelinePerformancePanel->>TimelinePerformancePanel: AI_SUMMARY_LOADING_MS 경과 후 aiState = done
User->>TimelinePeriodSelector: 보기 단위 변경 (DAY/WEEK/MONTH)
TimelinePeriodSelector->>TimelinePerformancePanel: onViewUnitChange(unit)
TimelinePerformancePanel->>TimelinePerformancePanel: viewUnit 갱신, chartPeriodIndex = 0
User->>TimelinePeriodSelector: 이전/다음 기간 버튼 클릭
TimelinePeriodSelector->>TimelinePerformancePanel: onPrevPeriod / onNextPeriod
TimelinePerformancePanel->>TimelinePerformancePanel: chartPeriodIndex 갱신
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
📚 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: 5
🧹 Nitpick comments (4)
src/components/timeline/TimelinePeriodSelector.tsx (1)
90-121: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win
role="menu"를 유지할 거면 키보드 상호작용을 함께 맞춰주세요.현재 구조는
menu/menuitem역할을 선언했는데, 화살표 키 이동·ESC 닫기·초기 포커스 이동 처리가 없어 ARIA 기대 동작과 어긋납니다.
두 가지 중 하나로 정리하는 걸 권장합니다: (1) menu 패턴에 맞는 키보드 핸들링 추가, (2) 단순 리스트 선택 UI에 맞는 role로 단순화.As per path instructions, "접근성: 시맨틱 HTML, ARIA 속성 사용 확인."
🤖 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/components/timeline/TimelinePeriodSelector.tsx` around lines 90 - 121, The TimelinePeriodSelector component declares menu and menuitem roles but lacks required keyboard interactions for the menu pattern. Either implement proper keyboard navigation (arrow keys to move between TIMELINE_VIEW_UNIT_OPTIONS items, ESC to close the menu, and initial focus management) in the menu structure with role="menu" and the button elements with role="menuitem", or simplify the roles to role="listbox" with appropriate ARIA attributes if a full menu pattern is unnecessary for this simple selection UI. Choose whichever approach better matches your component's interaction design.Source: Path instructions
src/components/timeline/TimelinePerformancePanel.stories.tsx (2)
26-26: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
ClosedPreivew오탈자는ClosedPreview로 정리하는 게 좋아요.동작에는 영향 없지만 스토리 가독성과 검색성이 좋아집니다.
Also applies to: 52-52
🤖 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/components/timeline/TimelinePerformancePanel.stories.tsx` at line 26, Fix the typo in the function name ClosedPreivew by renaming it to ClosedPreview. Update all references to this function throughout the file to use the correct spelling, including where the function is defined and where it is called or exported.
10-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win여기도
@/alias import 규칙으로 맞춰주세요.상대경로 import 대신 alias import를 사용해야 규칙과 일관됩니다.
제안 패치
-import TimelinePerformancePanel from "./TimelinePerformancePanel"; +import TimelinePerformancePanel from "`@/components/timeline/TimelinePerformancePanel`";As per coding guidelines, "
**/*.{ts,tsx}: Use@/alias for all imports."🤖 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/components/timeline/TimelinePerformancePanel.stories.tsx` at line 10, The import statement for TimelinePerformancePanel in TimelinePerformancePanel.stories.tsx is using a relative path import instead of the `@/` alias pattern. Replace the relative import path "./TimelinePerformancePanel" with the corresponding `@/` alias import path to maintain consistency with the project's import guidelines. Update the import statement to use `@/components/timeline/TimelinePerformancePanel`.Source: Coding guidelines
src/components/timeline/TimelineCanvas.stories.tsx (1)
7-9: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win로컬 컴포넌트 import를
@/alias로 통일해주세요.현재 상대경로 import가 프로젝트 규칙과 불일치합니다.
제안 패치
-import TimelineAxis from "./TimelineAxis"; -import TimelineBar from "./TimelineBar"; -import TimelineGrid from "./TimelineGrid"; +import TimelineAxis from "`@/components/timeline/TimelineAxis`"; +import TimelineBar from "`@/components/timeline/TimelineBar`"; +import TimelineGrid from "`@/components/timeline/TimelineGrid`";As per coding guidelines, "
**/*.{ts,tsx}: Use@/alias for all imports."🤖 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/components/timeline/TimelineCanvas.stories.tsx` around lines 7 - 9, The relative path imports for TimelineAxis, TimelineBar, and TimelineGrid components in the import statements are not following the project's coding guideline that requires using the `@/` alias for all imports. Replace all three relative import paths (./) with the `@/` alias import format, using the appropriate path to each component through the components directory structure to maintain consistency with project standards.Source: Coding guidelines
🤖 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 119-123: In the DropdownMenu component, when constructing the
className for menu items, the `danger` state only applies red color styling to
the button/label text, but the icon color rules remain in the default blue hover
state, breaking semantic consistency. Update the icon styling logic to also
check the `danger` condition (it.danger) and apply red color classes to the icon
when danger is true, ensuring the icon styling is aligned with the button/label
styling. This same fix should be applied to all similar locations in the
component where this pattern occurs (also check around lines 144-146).
In `@src/components/timeline/TimelineBar.tsx`:
- Around line 14-21: The ITimelineBarProps interface is missing an onBarClick
callback handler that is needed to implement the timeline bar click
functionality. Add an onBarClick property to the interface that accepts a
callback with the ITimelineCampaignBar parameter. In the TimelineBar component,
add an onClick handler to the clickable bar/card element (in the section around
lines 40-47) that invokes the onBarClick callback when the bar is clicked.
Additionally, ensure the menu button click handler (around lines 65-70) calls
stopPropagation to prevent the bar click event from being triggered when the
menu button is clicked, keeping these two interactions separate.
In `@src/components/timeline/TimelinePerformancePanel.stories.tsx`:
- Line 35: The className in the button element contains a typo with
"rounded-log" which is not a valid Tailwind utility class and will not apply the
intended border-radius styling. Replace "rounded-log" with "rounded-lg" in the
className prop to apply the correct Tailwind utility for large rounded corners.
In `@src/components/timeline/TimelinePerformancePanel.tsx`:
- Around line 137-141: The handleGenerateSummary function changes aiState to
"done" after the timeout, but it doesn't actually populate data.aiSummary with
any content. Since the summary content rendering depends on data.aiSummary being
populated, the UI shows a done state with no actual summary to display. Modify
the handleGenerateSummary function to call the actual summary generation logic
(such as an API call or data fetching mechanism) during the loading period, and
ensure that data.aiSummary is properly populated with the generated summary
before setting aiState to "done". This way the display condition and state
transition will align correctly.
In `@src/types/timeline/timeline.mock.ts`:
- Line 36: The summary field in the mock object contains Korean text that
references "1월 23일" (January 23rd), but the period and trend data in the same
mock object is based on 2026-06 (June 2026), causing a mismatch between the
summary description and the actual mock data. Update the summary field to
reference dates that are consistent with the June 2026 time period, replacing
the January date reference with appropriate dates from the June 2026 period so
the mock summary accurately reflects the data being provided.
---
Nitpick comments:
In `@src/components/timeline/TimelineCanvas.stories.tsx`:
- Around line 7-9: The relative path imports for TimelineAxis, TimelineBar, and
TimelineGrid components in the import statements are not following the project's
coding guideline that requires using the `@/` alias for all imports. Replace all
three relative import paths (./) with the `@/` alias import format, using the
appropriate path to each component through the components directory structure to
maintain consistency with project standards.
In `@src/components/timeline/TimelinePerformancePanel.stories.tsx`:
- Line 26: Fix the typo in the function name ClosedPreivew by renaming it to
ClosedPreview. Update all references to this function throughout the file to use
the correct spelling, including where the function is defined and where it is
called or exported.
- Line 10: The import statement for TimelinePerformancePanel in
TimelinePerformancePanel.stories.tsx is using a relative path import instead of
the `@/` alias pattern. Replace the relative import path
"./TimelinePerformancePanel" with the corresponding `@/` alias import path to
maintain consistency with the project's import guidelines. Update the import
statement to use `@/components/timeline/TimelinePerformancePanel`.
In `@src/components/timeline/TimelinePeriodSelector.tsx`:
- Around line 90-121: The TimelinePeriodSelector component declares menu and
menuitem roles but lacks required keyboard interactions for the menu pattern.
Either implement proper keyboard navigation (arrow keys to move between
TIMELINE_VIEW_UNIT_OPTIONS items, ESC to close the menu, and initial focus
management) in the menu structure with role="menu" and the button elements with
role="menuitem", or simplify the roles to role="listbox" with appropriate ARIA
attributes if a full menu pattern is unnecessary for this simple selection UI.
Choose whichever approach better matches your component's interaction design.
🪄 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
Run ID: 907db7ed-3067-40e1-b8a9-0216ec855b11
📒 Files selected for processing (17)
src/components/common/dropdownmenu/DropdownMenu.tsxsrc/components/timeline/TimelineAxis.tsxsrc/components/timeline/TimelineBar.tsxsrc/components/timeline/TimelineCanvas.stories.tsxsrc/components/timeline/TimelineGrid.tsxsrc/components/timeline/TimelinePerformancePanel.stories.tsxsrc/components/timeline/TimelinePerformancePanel.tsxsrc/components/timeline/TimelinePeriodSelector.stories.tsxsrc/components/timeline/TimelinePeriodSelector.tsxsrc/constants/timeline/layout.tssrc/constants/timeline/statusStyle.tssrc/constants/timeline/viewUnit.tssrc/styles/utilities.csssrc/types/timeline/api.tssrc/types/timeline/summary.tssrc/types/timeline/timeline.mock.tssrc/types/timeline/ui.ts
Collaborator
|
P4: 페이지가 아니라 이미 떠 있는 Drawer안의 내부 콘텐츠라 border-surface-300/(40~50) 정도의 연한 border로 구분하는 것도 좋을 것 같습니다! |
Seojegyeong
approved these changes
Jun 24, 2026
Collaborator
Author
넵 의견 감사합니다! 새로생성한 shadow-Soft-xs 삭제하고 border로 다시 수정작업진행해보겠습니다! |
Seojegyeong
approved these changes
Jun 24, 2026
YermIm
approved these changes
Jun 25, 2026
This was referenced Jun 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🚨 관련 이슈
Closed #257
✨ 변경사항
✏️ 작업 내용
TimelinePerformancePanelUI 구현Drawer재사용하였습니다.AI 요약 영역
idle->loading->done으로 3단계로 UI 상태표시합니다.aiSummary가 비어있으면, 요약하기 버튼을 노출하고, 요약본이 있다면 패널 열때 바로 요약 표시되도록 표시성과 지표/차트/플랫폼 기여
TimelinePeriodSelector사용하였고, 추후 차트 라이브러리 구축예정입니다.공통/타입/mock
ITimelineSummaryPanelData에performanceStatus추가TIMELINE_SUMMARY_PANEL_MOCK, `TIMELINE_SUMMARY_PANEL_NO_AI_MOCK 추가DropdownMenu에 삭제 메뉴 옵션 추가shadow-Soft-xs유틸추가💻 구현 화면
전체 너비
모바일 화면 너비
😅 미완성 작업
N/A
(mock데이터 사용중이어서 날짜기간선택이 안맞는 부분이 있습니다. 해당 부분은 API연동과 같이 진행예정)
📢 논의 사항 및 참고 사항
성과 요약 패널 카드/섹션에 기존에 유틸파일에 존재하는
shadow-Soft를 적용했을때, 그림자가 조금 뚜렷하게 보여서, 유틸파일에 더 약한shadow-Soft-xs유틸을 추가했습니다.기존 것은 변경하지 않았고, 추가만 진행했습니다.
디자인 시스템적 관점에서 추가가 조금 부담스러우시면, 패널을
shadow-Soft로 되돌리거나 다른 방식인 border만으로 진행하는 부분으로 맞출수도 있습니다! 의견 남겨주세요!Summary by CodeRabbit
New Features
Bug Fixes