[Feature/#66] 통합 대시보드 공용 카드 UI 컴포넌트 추출 및 레이아웃 구현 - #72
Merged
Conversation
2 tasks
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughCard 및 StatCard UI 컴포넌트를 추가하고 Storybook 스토리와 대시보드 개요 페이지(모의 데이터 포함)를 구현하여 KPI 그리드와 카드 레이아웃을 렌더링합니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Suggested labels
Suggested reviewers
리뷰 포인트구조 및 타입 안정성
접근성
성능 및 안정성
데이터 구조
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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: 1
🧹 Nitpick comments (2)
src/pages/dashboard/overview/OverviewDashboard.tsx (1)
15-17: 날짜 텍스트는<time>태그로 시맨틱하게 표현해 주세요.현재는 단순
<p>라서 보조기기/파서 친화성이 떨어집니다.dateTime을 함께 주는 쪽이 접근성 측면에서 더 좋습니다.♿ 제안 변경
- <p className="font-caption text-text-sub mt-1"> - 데이터 기준 | 2026.01.06 09:13 - </p> + <p className="font-caption text-text-sub mt-1"> + 데이터 기준 |{" "} + <time dateTime="2026-01-06T09:13:00+09:00">2026.01.06 09:13</time> + </p>As per coding guidelines,
접근성: 시맨틱 HTML, ARIA 속성 사용 확인.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/dashboard/overview/OverviewDashboard.tsx` around lines 15 - 17, 해당 날짜 텍스트가 단순 <p> 태그로 되어 있어 시맨틱성과 접근성이 떨어집니다; OverviewDashboard 컴포넌트에서 문제 되는 <p className="font-caption text-text-sub mt-1">데이터 기준 | 2026.01.06 09:13</p>를 시맨틱한 <time> 태그로 교체하고 기존 className은 유지하되 time에 적절한 dateTime 속성(예: "2026-01-06T09:13:00" 같은 ISO 8601 형식)을 추가해 보조기기와 파서가 정확히 해석하도록 수정하세요.src/types/dashboard/overview.ts (1)
1-10: 공통ITrend타입을 단일 소스로 통합해 주세요.
src/types/dashboard/overview.ts와src/components/common/card/StatCard.tsx에 동일한ITrend가 중복 선언되어 있어서, 한쪽 수정 시 타입 드리프트가 생길 수 있습니다. 여기서ITrend를export하고StatCard에서 import해서 재사용하는 편이 안전합니다.♻️ 제안 변경
-interface ITrend { +export interface ITrend { direction: "up" | "down"; value: string; }-// src/components/common/card/StatCard.tsx -export interface ITrend { - direction: "up" | "down"; - value: string; -} +// src/components/common/card/StatCard.tsx +import type { ITrend } from "@/types/dashboard/overview";As per coding guidelines,
타입 안정성: TypeScript 타입의 명확성 확인. any 사용 지양, 제네릭 활용 검토.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/types/dashboard/overview.ts` around lines 1 - 10, Export the shared ITrend type from the overview file and remove the duplicate declaration in StatCard; specifically, update interface ITrend in overview.ts to be exported (export interface ITrend { direction: "up" | "down"; value: string; }) and then import that ITrend into src/components/common/card/StatCard.tsx and use it in the StatCard props/type definitions instead of the local duplicate; ensure IKpiMetric remains using the exported ITrend where needed and delete the redundant ITrend declaration in StatCard to avoid type drift.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/dashboard/overview/OverviewDashboard.tsx`:
- Around line 30-35: The mobile divider condition is hardcoded to 2; update the
bottom-divider check to use the actual KPI count by replacing the literal 2 with
a computation based on kpis.length (e.g., use Math.ceil(kpis.length / 2) so
items in the first row get the bottom divider). Keep the vertical-divider logic
(index % 2 === 0) as-is but ensure the bottom divider uses kpis.length (refer to
index and kpis.length in OverviewDashboard.tsx where the two divs are rendered).
---
Nitpick comments:
In `@src/pages/dashboard/overview/OverviewDashboard.tsx`:
- Around line 15-17: 해당 날짜 텍스트가 단순 <p> 태그로 되어 있어 시맨틱성과 접근성이 떨어집니다;
OverviewDashboard 컴포넌트에서 문제 되는 <p className="font-caption text-text-sub
mt-1">데이터 기준 | 2026.01.06 09:13</p>를 시맨틱한 <time> 태그로 교체하고 기존 className은 유지하되
time에 적절한 dateTime 속성(예: "2026-01-06T09:13:00" 같은 ISO 8601 형식)을 추가해 보조기기와 파서가
정확히 해석하도록 수정하세요.
In `@src/types/dashboard/overview.ts`:
- Around line 1-10: Export the shared ITrend type from the overview file and
remove the duplicate declaration in StatCard; specifically, update interface
ITrend in overview.ts to be exported (export interface ITrend { direction: "up"
| "down"; value: string; }) and then import that ITrend into
src/components/common/card/StatCard.tsx and use it in the StatCard props/type
definitions instead of the local duplicate; ensure IKpiMetric remains using the
exported ITrend where needed and delete the redundant ITrend declaration in
StatCard to avoid type drift.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
src/assets/icon/dashboard/trend-down.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/dashboard/trend-up.svgis excluded by!**/*.svgand included bysrc/**
📒 Files selected for processing (8)
src/components/common/card/Card.stories.tsxsrc/components/common/card/Card.tsxsrc/components/common/card/StatCard.stories.tsxsrc/components/common/card/StatCard.tsxsrc/index.csssrc/pages/dashboard/overview/OverviewDashboard.tsxsrc/pages/dashboard/overview/overview.mock.tssrc/types/dashboard/overview.ts
YermIm
approved these changes
Mar 1, 2026
jjjsun
approved these changes
Mar 1, 2026
📚 Storybook 배포 완료
|
jjjsun
approved these changes
Mar 2, 2026
This was referenced Mar 8, 2026
This was referenced Mar 13, 2026
9 tasks
9 tasks
9 tasks
9 tasks
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.
🚨 관련 이슈
#66
✨ 변경사항
✏️ 작업 내용
공용 컴포넌트 추출
😅 미완성 작업
통합 대시보드는 컴포넌트 구조 확인을 위해 레이아웃까지만 구성했습니다.
차트, AI 요약 버튼 등 내부 콘텐츠 구현은 추후 이슈에서 진행할 예정입니다.
📢 논의 사항 및 참고 사항
N/A
Summary by CodeRabbit
New Features
Documentation
Style