[Feature/#252] 타임라인 본체 UI 컴포넌트 및 Storybook 구현#253
Merged
Conversation
jjjsun
added
🎨 Html&css
|
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 (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthrough타임라인 기능의 기반 타입( ChangesTimeline Feature Foundation & UI Components
추정 코드 리뷰 노력🎯 3 (Moderate) | ⏱️ ~25 minutes 관련 가능 PR
제안 리뷰어
🚥 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 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: 2
🧹 Nitpick comments (2)
src/components/timeline/TimelineCanvas.stories.tsx (1)
7-9: ⚡ Quick win상대 경로 import를
@/별칭으로 통일해주세요.Line 7-9는 현재 상대 경로(
./...)를 사용하고 있어서 프로젝트 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 imports for TimelineAxis, TimelineBar, and TimelineGrid are using relative paths (./) instead of the `@/` alias, which violates the project's import conventions. Replace all three relative imports with the `@/` alias format by changing the import paths from ./ComponentName to `@/components/timeline/ComponentName` (or the appropriate path based on your project's `@/` alias configuration). This ensures consistency with the project's import guidelines.Source: Coding guidelines
src/types/timeline/api.ts (1)
1-1: ⚡ Quick win
@/alias 규칙과 다른 상대경로 import를 수정해 주세요.Line 1의
../dashboard/provider는 저장소 TS 규칙과 불일치합니다. 같은 도메인 타입 파일들처럼 alias로 통일해 두는 편이 경로 이동/리팩터링 시 안전합니다.변경 제안
-import type { TProviderType } from "../dashboard/provider"; +import type { TProviderType } from "`@/types/dashboard/provider`";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/types/timeline/api.ts` at line 1, The import statement in api.ts for TProviderType from ../dashboard/provider uses a relative path instead of the `@/` alias pattern that should be followed consistently across all TypeScript files in the repository. Replace the relative path import with the `@/` alias path to match the project's coding guidelines and ensure consistency with other type files in the same domain, which will make future refactoring and path changes safer.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/TimelineBar.tsx`:
- Around line 39-45: The TimelineBar component's outer div has a cursor-pointer
style applied in the twMerge call but lacks an actual click handler, creating a
misleading UX. Either remove the cursor-pointer class from the twMerge styling
if only the menu button should be interactive, or add an onClick handler along
with appropriate keyboard event handling (such as Enter/Space key support) to
the outer div if the entire card should be clickable. Ensure the UX matches the
visual affordance provided by the cursor style.
In `@src/types/timeline/timeline.mock.ts`:
- Around line 90-91: The `isWeekend` property for Friday (금) is incorrectly set
to true when it should be false. Locate the object for day "금" with date 26 in
the timeline mock data and change `isWeekend: true` to `isWeekend: false`. The
Saturday entry (토) with isWeekend: true is correct and should remain unchanged.
---
Nitpick comments:
In `@src/components/timeline/TimelineCanvas.stories.tsx`:
- Around line 7-9: The imports for TimelineAxis, TimelineBar, and TimelineGrid
are using relative paths (./) instead of the `@/` alias, which violates the
project's import conventions. Replace all three relative imports with the `@/`
alias format by changing the import paths from ./ComponentName to
`@/components/timeline/ComponentName` (or the appropriate path based on your
project's `@/` alias configuration). This ensures consistency with the project's
import guidelines.
In `@src/types/timeline/api.ts`:
- Line 1: The import statement in api.ts for TProviderType from
../dashboard/provider uses a relative path instead of the `@/` alias pattern that
should be followed consistently across all TypeScript files in the repository.
Replace the relative path import with the `@/` alias path to match the project's
coding guidelines and ensure consistency with other type files in the same
domain, which will make future refactoring and path changes safer.
🪄 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: b30dd2ef-b6ec-43a1-a798-862b0af42973
📒 Files selected for processing (11)
src/components/timeline/TimelineAxis.tsxsrc/components/timeline/TimelineBar.tsxsrc/components/timeline/TimelineCanvas.stories.tsxsrc/components/timeline/TimelineGrid.tsxsrc/constants/timeline/layout.tssrc/constants/timeline/statusStyle.tssrc/types/timeline/api.tssrc/types/timeline/form.tssrc/types/timeline/summary.tssrc/types/timeline/timeline.mock.tssrc/types/timeline/ui.ts
Seojegyeong
approved these changes
Jun 23, 2026
Collaborator
|
P4: 지금은 스타일 자유도가 높아서 직접 구현이 좋은데, 나중에 드래그 앤 드롭이나 날짜 네비게이션 같은 인터랙션 추가될 예정이면 직접 구현 비용이 꽤 커질 것 같습니다! |
Collaborator
Author
좋은것같습니다! 현재 타임라인 구현이 이미 일정수준이상 진행된 상태이기에, 먼저 성과확인/조회/기간확인의 기능을 커스텀 UI로 마무리할 예정입니다. |
Seojegyeong
approved these changes
Jun 24, 2026
Seojegyeong
approved these changes
Jun 24, 2026
YermIm
approved these changes
Jun 24, 2026
YermIm
approved these changes
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 #252
✨ 변경사항
✏️ 작업 내용
성과 타임라인 화면의 본체 UI (날짜 축/그리드/캠페인 바)를 구현했습니다.
기간 선택, 상단 툴바, API연동, 페이지조립은 이번 작업범위에서 제외하고, Storybook과 mock데이터만으로 확인가능하도록 구현하였습니다.
colStart/colEnd/row기준으로 배치하였고, 제목/기간/성과상태/kebab 메뉴아이콘을 넣었습니다.ON_TRACK,ABOVE_AVERAGE,AT_RISK3단계로 재정리하였고, 바 색상/라벨을 적용해두었습니다.😅 미완성 작업
N/A
(후속이슈 예정: 타임라인 페이지 조립, 상단 툴바, API연동, 레이아웃)
📢 논의 사항 및 참고 사항
GuideTimeline은 이번 PR에서 수정하지않고, 추후 이슈생성하여 진행할 예정입니다.Summary by CodeRabbit
릴리스 노트