[Feature/#265] 타임라인 페이지 레이아웃 조립 및 디자인 수정 및 UI 구현#266
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthrough타임라인 페이지가 실제 데이터와 상호작용하도록 조립되었습니다. 드롭다운 메뉴, 상태 범례, 기간 선택, 축/그리드/바 렌더링, 생성 모달, 선택 패널이 연결되며, mock 데이터와 바 계약은 다중 provider 구조로 바뀌었습니다. Changes타임라인 화면 조립
Sequence Diagram(s)sequenceDiagram
participant User
participant Timeline
participant TimelinePeriodSelector
participant TimelineBar
participant TimelineCreateModal
participant TimelinePerformancePanel
User->>Timeline: /timeline 열기
Timeline->>TimelinePeriodSelector: viewUnit, periodIndex 렌더
User->>TimelinePeriodSelector: 단위/기간 변경
TimelinePeriodSelector->>Timeline: onViewUnitChange / onGoToToday
Timeline->>TimelineBar: bars, 선택 상태 렌더
User->>TimelineBar: 바 클릭
TimelineBar->>Timeline: onBarClick(bar)
Timeline->>TimelinePerformancePanel: panelData 표시
User->>Timeline: 생성 버튼 클릭
Timeline->>TimelineCreateModal: isOpen=true
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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: 6
🧹 Nitpick comments (4)
src/components/timeline/TimelinePerformancePanel.stories.tsx (1)
10-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win스토리 import도
@/alias로 통일하는 편이 좋습니다.지금처럼 상대 경로가 섞이면 파일 이동 시 스토리만 따로 깨지기 쉬워집니다.
As per coding guidelines, "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 story file is using a relative import instead of the project-wide `@/` alias, which breaks the import convention. Update the `TimelinePerformancePanel` import in `TimelinePerformancePanel.stories.tsx` to use the same alias style as the rest of the codebase, matching the existing component name and preserving the current import target.Source: Coding guidelines
src/components/timeline/TimelineCreateModal.stories.tsx (1)
5-5: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win스토리에서도 import는
@/alias로 맞춰주세요.프로덕션 코드와 스토리북 코드가 다른 import 규칙을 쓰기 시작하면, 이후 이동/검색/자동 정리에서 일관성이 깨집니다.
As per coding guidelines, "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/TimelineCreateModal.stories.tsx` at line 5, The Storybook story import is using a relative path instead of the required `@/` alias. Update the `TimelineCreateModal.stories.tsx` import to match the project-wide alias convention, following the same pattern used in other components and stories so `TimelineCreateModal` is referenced through `@/` rather than a local path.Source: Coding guidelines
src/components/timeline/TimelineCreateModal.tsx (1)
19-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win상대 경로 import를
@/alias로 통일해주세요.이 파일만
../common/...상대 경로를 쓰고 있어서, 이동/리팩터링 시 경로가 가장 먼저 깨지는 지점이 됩니다.예시 수정
-import Button from "../common/button/Button"; -import { - DropdownMenu, - type TMenuItem, -} from "../common/dropdownmenu/DropdownMenu"; -import Input from "../common/input/Input"; -import Modal from "../common/modal/Modal"; +import Button from "`@/components/common/button/Button`"; +import { + DropdownMenu, + type TMenuItem, +} from "`@/components/common/dropdownmenu/DropdownMenu`"; +import Input from "`@/components/common/input/Input`"; +import Modal from "`@/components/common/modal/Modal`";As per coding guidelines, "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/TimelineCreateModal.tsx` around lines 19 - 25, The imports in TimelineCreateModal should be updated to use the "`@/`” alias instead of "../common/..." relative paths. Replace the current Button, DropdownMenu, Input, and Modal imports with equivalent "`@/`..." imports so this file follows the project-wide import convention and is less fragile during moves or refactors.Source: Coding guidelines
src/components/timeline/TimelineBar.tsx (1)
14-14: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win상대 경로 대신
@/별칭으로 맞춰 주세요.이 파일만 상대 경로를 쓰면 이동/분리할 때 경로가 먼저 깨지기 쉽습니다.
🔧 제안
-import { DropdownMenu } from "../common/dropdownmenu/DropdownMenu"; +import { DropdownMenu } from "`@/components/common/dropdownmenu/DropdownMenu`";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/TimelineBar.tsx` at line 14, The import in TimelineBar should use the project’s `@/` alias instead of a relative path. Update the DropdownMenu import in TimelineBar.tsx to reference the same module through `@/` so it matches the coding guideline for all ts/tsx imports and avoids path fragility when files move.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/timeline/TimelineAxis.tsx`:
- Line 23: The timeline axis layer is too low and can be overlapped by the first
bar during scroll. Update the axis styling in TimelineAxis and, if needed, the
Timeline.tsx caller so the sticky axis sits above TimelineBar’s hover/selected
z-index (for example by raising the axis z-index consistently with the existing
sticky top-0 setup).
In `@src/components/timeline/TimelineBar.tsx`:
- Around line 53-66: TimelineBar의 바 선택 동작이 마우스 클릭에만 연결되어 있어 키보드 접근성이 빠져 있습니다.
`TimelineBar` 컴포넌트의 루트 div에 `role="button"`과 `tabIndex`를 추가하고, `onKeyDown`에서
Enter/Space로도 `onBarClick`이 실행되게 처리하세요. 또한 내부 케밥 메뉴에서 발생한 키 이벤트가 바 선택을 트리거하지 않도록
이벤트 전파를 막는 방식을 함께 적용하세요.
In `@src/components/timeline/TimelineCreateModal.tsx`:
- Around line 83-95: The comparison period menu in TimelineCreateModal still
changes while isSubmitting is true because comparisonMenuItems keeps wiring
onClick to setValue; update the useMemo that builds
TIMELINE_COMPARISON_PERIOD_OPTIONS so the menu items are disabled or no-op
during submission, matching the other form controls. Use the existing symbols
comparisonMenuItems, isSubmitting, setValue, and comparisonPeriodType to locate
and guard the click handler.
In `@src/pages/dashboard/timeline/Timeline.tsx`:
- Around line 47-78: The view unit switch in Timeline only updates the toolbar
label and does not change the rendered grid. Update Timeline to derive the
rendered `columns` and `bars` from `viewUnit` instead of always using
`TIMELINE_GRID_MOCK`, and make sure `periodLabels`/`periodLabel` stay in sync
with the same source. Use the existing `handleViewUnitChange` and `viewUnit`
state to drive the actual axis, grid, and bar data so DAY/MONTH selection
changes the canvas layout, not just the label.
- Around line 92-100: The panel data in Timeline is mostly disconnected from the
selected bar because handleBarClick only sets selectedBarId while the
performance panel still uses TIMELINE_SUMMARY_PANEL_MOCK for performanceStatus,
metrics, periodLabel, and platformShare. Update the Timeline component so the
selected bar drives the full panel payload by looking up or deriving the panel
mock from the clicked ITimelineCampaignBar, and make sure the panel’s status and
other displayed fields stay in sync with the selected bar rather than remaining
fixed to the shared mock.
---
Nitpick comments:
In `@src/components/timeline/TimelineBar.tsx`:
- Line 14: The import in TimelineBar should use the project’s `@/` alias instead
of a relative path. Update the DropdownMenu import in TimelineBar.tsx to
reference the same module through `@/` so it matches the coding guideline for all
ts/tsx imports and avoids path fragility when files move.
In `@src/components/timeline/TimelineCreateModal.stories.tsx`:
- Line 5: The Storybook story import is using a relative path instead of the
required `@/` alias. Update the `TimelineCreateModal.stories.tsx` import to
match the project-wide alias convention, following the same pattern used in
other components and stories so `TimelineCreateModal` is referenced through `@/`
rather than a local path.
In `@src/components/timeline/TimelineCreateModal.tsx`:
- Around line 19-25: The imports in TimelineCreateModal should be updated to use
the "`@/`” alias instead of "../common/..." relative paths. Replace the current
Button, DropdownMenu, Input, and Modal imports with equivalent "`@/`..." imports
so this file follows the project-wide import convention and is less fragile
during moves or refactors.
In `@src/components/timeline/TimelinePerformancePanel.stories.tsx`:
- Line 10: The story file is using a relative import instead of the project-wide
`@/` alias, which breaks the import convention. Update the
`TimelinePerformancePanel` import in `TimelinePerformancePanel.stories.tsx` to
use the same alias style as the rest of the codebase, matching the existing
component name and preserving the current import target.
🪄 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: 79da50c6-96ad-48a8-9d21-603934a6ce06
⛔ Files ignored due to path filters (1)
src/assets/icon/common/plus.svgis excluded by!**/*.svgand included bysrc/**
📒 Files selected for processing (19)
src/components/common/dropdownmenu/DropdownMenu.tsxsrc/components/timeline/TimelineAxis.tsxsrc/components/timeline/TimelineBar.tsxsrc/components/timeline/TimelineCreateModal.stories.tsxsrc/components/timeline/TimelineCreateModal.tsxsrc/components/timeline/TimelineEmptyState.tsxsrc/components/timeline/TimelineGrid.tsxsrc/components/timeline/TimelinePerformancePanel.stories.tsxsrc/components/timeline/TimelinePerformancePanel.tsxsrc/components/timeline/TimelinePeriodSelector.tsxsrc/components/timeline/TimelineStatusLegend.tsxsrc/constants/timeline/formOptions.tssrc/constants/timeline/layout.tssrc/constants/timeline/statusStyle.tssrc/pages/dashboard/timeline/Timeline.tsxsrc/types/timeline/summary.tssrc/types/timeline/timeline.mock.tssrc/types/timeline/ui.tssrc/utils/timeline/timeline.ts
Collaborator
|
P4: 충돌났습니다... |
Collaborator
Author
넵 해결중입니다! |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/timeline/TimelineAxis.tsx (1)
24-27: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win인라인 z-index 스타일 대신 Tailwind 유틸리티로 통일해주세요.
Line 27에서
zIndex를 인라인으로 주입하면 스타일 규칙 일관성이 깨집니다.z-30클래스로 옮기고 인라인 스타일에는 높이만 남기는 쪽이 가이드와 맞습니다.변경 제안
- className={twMerge( - "relative flex shrink-0 border-b border-surface-400/80 bg-surface-100", - className, - )} - style={{ height: TIMELINE_AXIS_HEIGHT, zIndex: TIMELINE_AXIS_Z_INDEX }} + className={twMerge( + "relative z-30 flex shrink-0 border-b border-surface-400/80 bg-surface-100", + className, + )} + style={{ height: TIMELINE_AXIS_HEIGHT }}As per coding guidelines
**/*.{ts,tsx}: Use only Tailwind utility classes (bg-*,text-*,border-*) for styling.🤖 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/TimelineAxis.tsx` around lines 24 - 27, The TimelineAxis component is setting zIndex inline in the style prop, which conflicts with the Tailwind-only styling guideline. Update TimelineAxis to move the stacking order to a Tailwind utility class such as z-30 on the root element, and keep the inline style limited to TIMELINE_AXIS_HEIGHT. Refer to the TimelineAxis component and its style/className composition when making the change.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.
Nitpick comments:
In `@src/components/timeline/TimelineAxis.tsx`:
- Around line 24-27: The TimelineAxis component is setting zIndex inline in the
style prop, which conflicts with the Tailwind-only styling guideline. Update
TimelineAxis to move the stacking order to a Tailwind utility class such as z-30
on the root element, and keep the inline style limited to TIMELINE_AXIS_HEIGHT.
Refer to the TimelineAxis component and its style/className composition when
making the change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 2a990064-17c5-4604-957e-866b4362d75e
📒 Files selected for processing (6)
src/components/timeline/TimelineAxis.tsxsrc/components/timeline/TimelineBar.tsxsrc/components/timeline/TimelineCreateModal.tsxsrc/constants/timeline/layout.tssrc/pages/dashboard/timeline/Timeline.tsxsrc/types/timeline/timeline.mock.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/pages/dashboard/timeline/Timeline.tsx
- src/components/timeline/TimelineBar.tsx
- src/components/timeline/TimelineCreateModal.tsx
Seojegyeong
approved these changes
Jun 26, 2026
YermIm
approved these changes
Jun 27, 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 #265
✨ 변경사항
✏️ 작업 내용
페이지 조립 (
Timeline)ComingSoonPlaceholder제거 후 타임라인 페이지 본문 구현완료했습니다.헤더 영역
?hover 시에는 평균 기준 설명 툴팁 첨부하였습니다.캔버스 /그리드
TimelineAxissticky 상단 고정TimelineGrid세로선 연하게, 캔버스 높이에 맞춰 세로선·오늘 칸 배경 전체 확장타임라인 바
DropdownMenuplacement="auto"— 하단 공간이 좁아 잘림이 발생할 때에는 위로 펼쳐지도록 수정하였고, 메뉴 너비 축소했습니다.빈 상태
만약 타임라인 바가 없다면,
bars.length === 0일때 안내 문구 + 생성 CTATIMELINE_GRID_EMPTY_MOCK추가💻 작업 화면
😅 미완성 작업
N/A
📢 논의 사항 및 참고 사항
providers는 연결된 캠페인/광고 플랫폼 목록으로 API에서 내려올 예정입니다. (mock: 리타겟팅 캠페인 = Google·Meta·Naver 3개)TIMELINE_GRID_EMPTY_MOCK으로 import 교체 후 확인 가능columns.length × COL_WIDTH— API 연동 시 기간·viewUnit에 따라 칸 수 증가 → 가로 스크롤Summary by CodeRabbit
New Features
Bug Fixes