[Feature/#263] 타임라인 생성 모달 UI 구현#264
Conversation
jjjsun
added
🎨 Html&css
|
Warning Review limit reached
More reviews will be available in 59 minutes and 14 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 (4)
📝 WalkthroughWalkthrough타임라인 생성 모달( Changes타임라인 생성 모달 및 성과 패널 기능 추가
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)
✏️ 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: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/timeline/TimelineBar.tsx (1)
42-49: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win카드 클릭 인터랙션에 키보드 접근성을 추가해 주세요.
현재
div에onClick만 있어 키보드(Enter/Space)로onBarClick을 실행할 수 없습니다.role,tabIndex,onKeyDown을 함께 추가해 접근성을 보장해 주세요.접근성 보완 예시
<div + role={onBarClick ? "button" : undefined} + tabIndex={onBarClick ? 0 : undefined} className={twMerge( "absolute z-20 flex cursor-pointer items-start gap-2.5 rounded-xl px-3 py-2.5 transition-shadow hover:z-30 hover:shadow-Soft", status.barBg, className, )} onClick={() => onBarClick?.(bar)} + onKeyDown={(event) => { + if (!onBarClick) return; + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + onBarClick(bar); + } + }} style={{ left, top, width, height: TIMELINE_BAR_HEIGHT }} >As per path instructions,
src/**: "7. 접근성: 시맨틱 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/TimelineBar.tsx` around lines 42 - 49, `TimelineBar`의 클릭 가능한 `div`에 키보드 접근성이 빠져 있습니다. `onClick`이 있는 요소를 `role="button"`과 `tabIndex={0}`로 만들고, `onKeyDown`에서 Enter/Space 입력 시 `onBarClick`이 실행되도록 추가하세요. `TimelineBar` 컴포넌트의 해당 카드 요소에 시맨틱/ARIA 속성을 함께 적용해 마우스와 키보드 모두 동일하게 동작하도록 수정하면 됩니다.Source: Path instructions
🧹 Nitpick comments (2)
src/components/timeline/TimelineCreateModal.tsx (1)
19-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win상대 경로 import가 팀 규칙(
@/alias)과 다릅니다.Line 19-25의
../common/...import를@/components/common/...형태로 통일해 주세요.As per coding guidelines, "Use
@/alias for all imports. Automatic sorting viaeslint-plugin-simple-import-sorton save (no manual sorting needed)."🤖 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 follow the repo’s "`@/`” alias convention instead of relative paths. Update the Button, DropdownMenu/TMenuItem, Input, and Modal imports in TimelineCreateModal to use "`@/components/common/`..." so they match the team guideline and stay consistent with simple-import-sort ordering.Source: Coding guidelines
src/components/timeline/TimelineCreateModal.stories.tsx (1)
5-5: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win스토리 파일도
@/alias import 규칙으로 맞춰주세요.Line 5의 상대 경로 import를 alias로 통일하면 경로 일관성과 이동 안정성이 좋아집니다.
As per coding guidelines, "Use
@/alias for all imports. Automatic sorting viaeslint-plugin-simple-import-sorton save (no manual sorting needed)."🤖 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 story file is using a relative import instead of the required `@/` alias, so update the `TimelineCreateModal` import in `TimelineCreateModal.stories.tsx` to use the alias-based path. Keep the import consistent with the project’s `simple-import-sort`/alias convention and verify no other imports in this story file still use relative paths.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/TimelineCreateModal.stories.tsx`:
- Around line 69-91: The story auto-fill in TimelineCreateModal is bypassing RHF
and relying on brittle selectors, so update the play function to target the
actual name input and trigger real change/input events instead of assigning
.value directly. Use the existing inputs in the submit flow to set values in a
way RHF observes, guard the second date input access in the
TimelineCreateModal.stories.tsx scenario, and keep the metric button and submit
click steps after the form state is properly updated.
In `@src/components/timeline/TimelinePerformancePanel.tsx`:
- Around line 133-154: The summary generation timer in TimelinePerformancePanel
can still fire after the panel is closed and overwrite aiState/generatedSummary
unexpectedly. Update handleGenerateSummary and the isOpen-related useEffect so
any existing summaryTimerRef timeout is cleared before starting a new one and
again when the panel closes. Keep the cleanup in the unmount effect, and make
sure the timer is reset through summaryTimerRef.current in both the close path
and the regenerate path.
In `@src/constants/timeline/formOptions.ts`:
- Around line 22-24: The comparison period options in formOptions have a
duplicated value, causing the “지난주 대비” choice to submit the wrong enum. Update
the option array in the timeline form options so the label “지난주 대비” uses the
correct unique value referenced by the API contract, matching the enum in the
timeline types, and keep “지난달 대비” mapped to its own distinct value.
In `@src/types/timeline/timeline.mock.ts`:
- Line 36: The summary text in the timeline mock is inconsistent with the mocked
period, since it mentions “1월 23일” while the period is 2026년 6월. Update the
Korean narrative in timeline.mock.ts to use dates that match the mocked
timeframe, keeping the same meaning but replacing the January reference with a
June-aligned date in the existing summary string.
---
Outside diff comments:
In `@src/components/timeline/TimelineBar.tsx`:
- Around line 42-49: `TimelineBar`의 클릭 가능한 `div`에 키보드 접근성이 빠져 있습니다. `onClick`이
있는 요소를 `role="button"`과 `tabIndex={0}`로 만들고, `onKeyDown`에서 Enter/Space 입력 시
`onBarClick`이 실행되도록 추가하세요. `TimelineBar` 컴포넌트의 해당 카드 요소에 시맨틱/ARIA 속성을 함께 적용해
마우스와 키보드 모두 동일하게 동작하도록 수정하면 됩니다.
---
Nitpick comments:
In `@src/components/timeline/TimelineCreateModal.stories.tsx`:
- Line 5: The story file is using a relative import instead of the required `@/`
alias, so update the `TimelineCreateModal` import in
`TimelineCreateModal.stories.tsx` to use the alias-based path. Keep the import
consistent with the project’s `simple-import-sort`/alias convention and verify
no other imports in this story file still use relative paths.
In `@src/components/timeline/TimelineCreateModal.tsx`:
- Around line 19-25: The imports in TimelineCreateModal should follow the repo’s
"`@/`” alias convention instead of relative paths. Update the Button,
DropdownMenu/TMenuItem, Input, and Modal imports in TimelineCreateModal to use
"`@/components/common/`..." so they match the team guideline and stay consistent
with simple-import-sort ordering.
🪄 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: 7a027c42-3913-4341-8c43-9c7cfeb90502
📒 Files selected for processing (10)
src/components/common/dropdownmenu/DropdownMenu.tsxsrc/components/timeline/TimelineBar.tsxsrc/components/timeline/TimelineCreateModal.stories.tsxsrc/components/timeline/TimelineCreateModal.tsxsrc/components/timeline/TimelinePerformancePanel.stories.tsxsrc/components/timeline/TimelinePerformancePanel.tsxsrc/constants/timeline/formOptions.tssrc/types/timeline/summary.tssrc/types/timeline/timeline.mock.tssrc/utils/timeline/timeline.ts
|
P4: 여기도 충돌 났습니다... |
넵 여기도 해결중입니다..!! |
2 participants
🚨 관련 이슈
Closed #263
✨ 변경사항
✏️ 작업 내용
TimelineCreateModal구현Modal공통 컴포넌트 사용하여 타임라인 생성 모달 UI 추가timelineCreateSchema) 폼 구조 적용Input과Button,DropdownMenu공통 컴포넌트 재활용하여 구현하였습니다.setTimeout+sonnertoast), 제출 중 닫기/오버레이 클릭 방지Storybook
Timeline/CreateModal스토리 추가Default— 기본 열림 상태ValidationErrors— 빈 폼 제출 시 유효성 에러Submitting— 제출 중 로딩 상태💻 작업 화면
전체 화면
모바일 화면
😅 미완성 작업
N/A
📢 논의 사항 및 참고 사항
type="date"와showPicker()이용해서 구현하였습니다. Firefox 등 미지원 브라우저에서는 호환되지 않아 호출이 제한될수 있어서 아이콘 클릭으로만 열릴 수 있습니다.Summary by CodeRabbit
New Features
Bug Fixes