[Feature/#74] 통합 대시보드 UI 구현 - #85
Merged
Merged
Conversation
📝 WalkthroughWalkthrough대시보드의 실시간 트래픽과 예산 소진 차트 UI를 ApexCharts로 구현하고, 이를 표시할 새로운 공통 컴포넌트들(Drawer, Toast, ChartLegend)과 AI 보고서 패널을 추가했습니다. 기존 카드 컴포넌트들도 스타일 업그레이드와 타입 개선을 진행했습니다. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Dashboard as OverviewDashboard
participant Drawer
participant Toast
participant Panel as OverviewAiReportPanel
User->>Dashboard: AI 버튼 클릭
Dashboard->>Dashboard: isAiPanelOpen = true
Dashboard->>Drawer: isOpen = true
Drawer->>Drawer: 슬라이드-인 애니메이션
Drawer->>Panel: OverviewAiReportPanel 렌더링
User->>Drawer: 드롭다운 메뉴 선택<br/>(링크 공유 또는 PDF 저장)
alt 링크 공유
Drawer->>Drawer: 클립보드 복사
Drawer->>Toast: showToast('success')
Toast->>User: 성공 토스트 표시
else PDF 저장
Drawer->>Drawer: body print 클래스 토글
Drawer->>Window: window.print()
Window->>Drawer: 인쇄 완료 후 cleanup
end
User->>Drawer: 패널 닫기
Dashboard->>Dashboard: isAiPanelOpen = false
Drawer->>Drawer: 슬라이드-아웃 애니메이션
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 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: 4
🧹 Nitpick comments (15)
src/pages/dashboard/overview/aiReport.mock.ts (1)
1-31: 타입 정의 추가를 권장합니다Mock 데이터의 구조를 명시하는 인터페이스를 추가하면 타입 안정성이 향상됩니다. 소비하는 컴포넌트(
OverviewAiReportPanel)에서 타입 추론이 명확해지고, 구조 변경 시 타입 체크가 가능해집니다.♻️ 타입 정의 추가 제안
+interface IAiReportSection { + title: string; + content: string; +} + +export interface IAiReportData { + label: string; + title: string; + strategySuggestion: IAiReportSection; + sections: IAiReportSection[]; + warning: IAiReportSection; +} + -export const aiReportMockData = { +export const aiReportMockData: IAiReportData = { label: "오늘의 데이터 분석 중", // ... rest of the data🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/dashboard/overview/aiReport.mock.ts` around lines 1 - 31, Add explicit TypeScript interfaces for the mock shape (e.g., AiReport with nested StrategySuggestion, Section, Warning types), export them and annotate the mock: declare interfaces matching the properties used in aiReportMockData (label, title, strategySuggestion, sections[], warning), then change the declaration to const aiReportMockData: AiReport = { ... } so OverviewAiReportPanel and other consumers can import the AiReport type and get compile-time validation when the structure changes.src/components/dashboard/platform/PlatformComparisonChart.tsx (1)
87-91: API 연동 시 고려사항PR 설명에 API 연동이 예정되어 있다고 하셨는데, 현재
series가 모듈 레벨 상수로 정의되어 있어 mock 데이터가 동적으로 변경되어도 반영되지 않습니다. API 연동 시에는series를 컴포넌트 내부에서useMemo로 계산하거나 props로 받도록 변경이 필요합니다.♻️ API 연동을 위한 구조 제안 (추후 작업용)
// API 연동 시 아래와 같이 변경 고려 interface IPlatformComparisonChartProps { data: IPlatformStats[]; } export default function PlatformComparisonChart({ data }: IPlatformComparisonChartProps) { const series = useMemo(() => [ { name: "클릭률", data: data.map((p) => p.clickRate) }, { name: "전환률", data: data.map((p) => p.conversionRate) }, { name: "노출수", data: data.map((p) => p.impressionRate) }, ], [data]); // ... }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/dashboard/platform/PlatformComparisonChart.tsx` around lines 87 - 91, The series array is defined at module scope using platformComparisonMock so updates from API or props won't re-render; move creation of series into the PlatformComparisonChart component and derive it from incoming data (or state) using useMemo to avoid recomputation. Specifically, replace the module-level const series with a memoized value inside PlatformComparisonChart (depend on the prop or API data array) and build objects named "클릭률"/"전환률"/"노출수" from that data (reference symbols: series, PlatformComparisonChart, platformComparisonMock, useMemo, data prop).src/components/dashboard/platform/PlatformRoasTable.tsx (1)
9-13: 타입 안정성 강화 권장
platformLogoMap의 키 타입을IPlatformStats["name"]으로 명시하면 mock 데이터와의 타입 일관성이 보장됩니다.♻️ 타입 명시 제안
+import type { IPlatformStats } from "./platformComparison.mock"; + -const platformLogoMap = { +const platformLogoMap: Record<IPlatformStats["name"], JSX.Element> = { Google: <GoogleLogo className="h-7 w-auto" />, NAVER: <NaverLogo className="h-7 w-auto" />, kakao: <KakaoLogo className="h-7 w-auto" />, };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/dashboard/platform/PlatformRoasTable.tsx` around lines 9 - 13, The platformLogoMap object uses platform name keys but lacks an explicit key type; update its declaration to type the keys as IPlatformStats["name"] to enforce consistency with mock data and ensure type safety—locate the platformLogoMap constant in PlatformRoasTable.tsx and declare it with an index signature or mapped type using IPlatformStats["name"] so keys like "Google", "NAVER", and "kakao" are validated by TypeScript.src/pages/dashboard/overview/OverviewDashboard.tsx (3)
127-163:dropdownItems배열이 매 렌더링마다 재생성됩니다.현재 규모에서는 성능 이슈가 없지만, Drawer가 자주 열리거나 복잡해질 경우
useMemo로 메모이제이션하면 불필요한 재계산을 방지할 수 있습니다.♻️ useMemo 적용 예시
const dropdownItems = useMemo(() => [ { label: "링크 공유하기", icon: <LinkIcon ... />, onClick: () => { ... }, }, { label: "PDF로 저장하기", icon: <DownloadIcon ... />, onClick: () => { ... }, }, ], [showToast]); // showToast가 의존성이면 useCallback으로 안정화 필요🤖 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 127 - 163, The dropdownItems array is recreated on every render; wrap its creation in React's useMemo to memoize it (e.g., create a memoized dropdownItems via useMemo(() => [...], [showToast])) and stabilize any callbacks it depends on (e.g., wrap showToast usage with useCallback or include only stable deps) so the items (with LinkIcon/DownloadIcon and their onClick handlers) are not rebuilt unnecessarily when OverviewDashboard rerenders.
46-54: 날짜/시간이 컴포넌트 렌더링 시점에 갱신됩니다.
new Date()가 렌더링마다 호출되어 시간이 변경될 수 있습니다. "실시간" 업데이트가 의도라면 interval로 주기적 갱신이 필요하고, 초기 로드 시점 고정이 의도라면 상태나 ref로 캡처하는 것이 좋습니다.💡 시간 고정 방식 예시
// 컴포넌트 마운트 시점 고정 const [timestamp] = useState(() => new Date()); // 또는 실시간 갱신 const [timestamp, setTimestamp] = useState(() => new Date()); useEffect(() => { const interval = setInterval(() => setTimestamp(new Date()), 60000); return () => clearInterval(interval); }, []);🤖 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 46 - 54, The JSX in OverviewDashboard currently calls new Date() during render causing the displayed timestamp to change on every render; capture the timestamp at mount or set up a timer instead: in the OverviewDashboard component initialize state or a ref (e.g., timestamp via useState(() => new Date()) or useRef(new Date())) to freeze the value for initial load, or if real-time updates are intended add a useEffect that sets an interval to update the timestamp state (and clears it on unmount) and replace the direct new Date() call in the JSX with that state/ref.
23-36: 컴포넌트 로직이 다소 복잡해지고 있습니다.AI 패널 관련 상태(
isAiPanelOpen, 토스트, 드롭다운 액션 등)를 커스텀 훅(useAiReportPanel)으로 분리하면 컴포넌트 가독성이 향상됩니다. 현재 규모에서는 필수는 아니지만, 향후 기능 추가 시 고려해 주세요. As per coding guidelines, 페이지에 비즈니스 로직이 과도하지 않은지 확인하고 커스텀 훅으로의 분리 여부를 검토합니다.🤖 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 23 - 36, OverviewDashboard contains AI panel state and toast logic (isAiPanelOpen, setIsAiPanelOpen, toast, setToast, showToast) which bloats the component; extract these into a custom hook named useAiReportPanel that encapsulates panel open/close, toast state and showToast behavior and any dropdown/action handlers, then replace the inline state in OverviewDashboard with calls to useAiReportPanel to return {isAiPanelOpen, openAiPanel, closeAiPanel, toast, showToast, ...actions} so the component simply consumes the hook and renders UI.src/components/common/chart/ChartLegend.tsx (1)
17-24: 색상 표시 요소에 대한 접근성 개선을 고려해 주세요.색상 점(dot)은 시각적 정보만 제공하므로, 스크린 리더에서 불필요하게 읽히지 않도록
aria-hidden="true"를 추가하면 좋습니다.♿ 접근성 개선 제안
<div key={index} className="flex items-center gap-1.5"> <div + aria-hidden="true" className={twMerge("w-1.5 h-1.5 rounded-full", item.colorClass)} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/chart/ChartLegend.tsx` around lines 17 - 24, The color dot div in the ChartLegend component is purely decorative and should not be announced by assistive tech; update the element rendered for the color marker (the div using twMerge("w-1.5 h-1.5 rounded-full", item.colorClass) inside the map in ChartLegend.tsx) to include aria-hidden="true" (or role="presentation") so screen readers ignore it, leaving the accessible label span ({item.label}) as the only announced content.src/pages/dashboard/overview/OverviewAiReportPanel.tsx (1)
35-47: 섹션 렌더링에서 key로 index를 사용하고 있습니다.현재 목업 데이터가 정적이라 문제가 없지만, 향후 API 연동 시 섹션 데이터에 고유 ID가 있다면 해당 값을 key로 사용하는 것이 좋습니다. 데이터 재정렬이나 필터링 시 React 재조정(reconciliation) 최적화에 도움이 됩니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/dashboard/overview/OverviewAiReportPanel.tsx` around lines 35 - 47, The map in data.sections.map is using the array index (key={idx}) which can break reconciliation; change the key to a stable unique identifier from each section (e.g., use section.id or section.uuid) inside the OverviewAiReportPanel rendering, falling back to the index only if no unique id exists. Update the key prop on the mapped <div> (currently key={idx}) to use that unique field (section.id) and ensure the source data mapping or type reflects the id field so future API-backed sections use stable keys.src/components/dashboard/charts/BudgetGaugeChart.tsx (3)
64-71: 상태별 색상 로직이 중복됨
statusPointClasses(라인 16-20)에서 이미 상태별 색상을 정의했는데, 라인 66-70에서 동일한 조건문으로 색상을 다시 결정하고 있습니다.statusPointClasses[status]를 재사용하면 유지보수성이 향상됩니다.♻️ 중복 제거 제안
<div className={twMerge( "absolute top-0 left-0 h-full rounded-full transition-all duration-1000 ease-out", - status === "안정" - ? "bg-status-green" - : status === "주의" - ? "bg-status-yellow" - : "bg-status-red", + statusPointClasses[status], )} style={{ width: `${Math.min(percentage, 100)}%` }} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/dashboard/charts/BudgetGaugeChart.tsx` around lines 64 - 71, The status color decision is duplicated: instead of re-evaluating status in the className block inside the BudgetGaugeChart JSX, reuse the existing mapping statusPointClasses by replacing the ternary chain with statusPointClasses[status]; update the className expression (the element with className={twMerge(...)} that currently uses status === "안정" ? ... : ...) to reference statusPointClasses[status] so the component uses the single source of truth for status colors and eliminates the duplicated logic.
10-20: Record 타입을 더 명확한 유니온 타입으로 개선 가능
Record<string, string>대신 명시적인 상태 타입을 사용하면 타입 안정성이 향상됩니다. 현재는 존재하지 않는 키로 접근해도 컴파일 에러가 발생하지 않습니다.🔧 타입 개선 제안
+type TBudgetStatus = "안정" | "주의" | "위험"; + -const statusBadgeClasses: Record<string, string> = { +const statusBadgeClasses: Record<TBudgetStatus, string> = { 안정: "bg-status-green/[0.08] text-status-green", 주의: "bg-status-yellow/[0.08] text-status-yellow", 위험: "bg-status-red/[0.08] text-status-red", }; -const statusPointClasses: Record<string, string> = { +const statusPointClasses: Record<TBudgetStatus, string> = { 안정: "bg-status-green", 주의: "bg-status-yellow", 위험: "bg-status-red", };
getStatus함수의 반환 타입도TBudgetStatus로 명시하면 됩니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/dashboard/charts/BudgetGaugeChart.tsx` around lines 10 - 20, Replace the loose Record<string,string> typings with a concrete union-keyed mapping using the TBudgetStatus union: change statusBadgeClasses and statusPointClasses to use Record<TBudgetStatus, string> (or a mapped type like { [K in TBudgetStatus]: string }) and update the getStatus function signature to return TBudgetStatus so lookups are type-safe; ensure any code that derives or uses status values is adjusted to produce TBudgetStatus to avoid indexing with unknown keys.
62-74: Progress bar에 접근성 속성 추가 필요시각적으로만 진행률을 표시하고 있어 스크린 리더 사용자가 정보를 인식하기 어렵습니다. 코딩 가이드라인에 따라 시맨틱 HTML과 ARIA 속성 사용을 확인해 주세요.
♿ 접근성 개선 제안
- <div className="relative h-3 w-full bg-bg-disabled/50 rounded-full overflow-hidden"> + <div + role="progressbar" + aria-valuenow={percentage} + aria-valuemin={0} + aria-valuemax={100} + aria-label={`예산 소진율 ${percentage}%`} + className="relative h-3 w-full bg-bg-disabled/50 rounded-full overflow-hidden" + > <div className={twMerge( "absolute top-0 left-0 h-full rounded-full transition-all duration-1000 ease-out", status === "안정" ? "bg-status-green" : status === "주의" ? "bg-status-yellow" : "bg-status-red", )} style={{ width: `${Math.min(percentage, 100)}%` }} /> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/dashboard/charts/BudgetGaugeChart.tsx` around lines 62 - 74, The progress bar in BudgetGaugeChart.tsx is purely visual; update the rendered element (the inner div that uses twMerge and style width) to be an accessible progressbar by adding role="progressbar" plus aria-valuenow={Math.min(percentage,100)}, aria-valuemin={0}, aria-valuemax={100} and an informative aria-label or aria-labelledby that includes the current status and percentage (use existing status and percentage props/variables); ensure any decorative outer container remains non-interactive and consider adding a visually hidden text node for screen readers if more context is needed.src/components/common/drawer/Drawer.tsx (3)
11-20:dropdownItems타입과TMenuItem간의 일관성
DropdownMenu의itemsprop은TMenuItem[]타입을 기대하는데(관련 코드 스니펫 참조),IDrawerProps.dropdownItems에는active필드가 없습니다. 현재는 구조적 타이핑으로 호환되지만,TMenuItem타입을 import해서 재사용하면 타입 일관성이 향상됩니다.🔧 타입 일관성 개선 제안
+import { type TMenuItem, DropdownMenu } from "@/components/common/dropdownmenu/DropdownMenu"; -import { DropdownMenu } from "@/components/common/dropdownmenu/DropdownMenu"; export interface IDrawerProps { isOpen: boolean; onClose: () => void; title?: ReactNode; children: ReactNode; className?: string; hideHeader?: boolean; - dropdownItems?: { label: string; icon?: ReactNode; onClick: () => void }[]; + dropdownItems?: TMenuItem[]; disableScroll?: boolean; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/drawer/Drawer.tsx` around lines 11 - 20, IDrawerProps.dropdownItems should use the same menu item type as DropdownMenu to ensure type consistency: import TMenuItem and change the dropdownItems declaration on the IDrawerProps interface from "{ label: string; icon?: ReactNode; onClick: () => void }[]" to "TMenuItem[]", keeping it optional; update any code that constructs dropdownItems to satisfy TMenuItem (e.g., add an optional active field if required) so DropdownMenu(items={...}) no longer relies on structural typing mismatches.
67-73: Drawer 패널에 포커스 트랩 고려현재 구현에서는 Drawer가 열렸을 때 포커스가 Drawer 내부에 갇히지 않아, Tab 키로 Drawer 외부 요소에 접근할 수 있습니다. 접근성 관점에서 포커스 트랩 구현을 고려해 주세요.
focus-trap-react같은 라이브러리를 사용하거나 직접 구현할 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/drawer/Drawer.tsx` around lines 67 - 73, The Drawer component currently allows focus to escape when open; update the Drawer (component named Drawer, the root panel div that uses isOpen and className) to implement a focus trap so keyboard Tab/Shift+Tab stay within the drawer while open. Integrate a focus-trap solution (e.g., wrap the panel contents with FocusTrap from focus-trap-react and enable options like escapeDeactivates and clickOutsideDeactivates as appropriate) or add an internal focus-trapping mechanism that mounts when isOpen is true, sets initial focus to a logical element inside, cycles Tab/Shift+Tab, and restores focus on close; ensure Escape handling and cleanup are preserved.
38-47: Escape 키로 Drawer 닫기 기능 추가 필요접근성 가이드라인에 따라 모달/드로어는 Escape 키로 닫을 수 있어야 합니다. 현재는 오버레이 클릭이나 닫기 버튼으로만 닫을 수 있습니다.
♿ Escape 키 핸들러 추가 제안
useEffect(() => { if (isOpen) { document.body.style.overflow = "hidden"; + + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Escape") { + onClose(); + } + }; + document.addEventListener("keydown", handleKeyDown); + return () => { + document.body.style.overflow = ""; + document.removeEventListener("keydown", handleKeyDown); + }; } else { document.body.style.overflow = ""; } - return () => { - document.body.style.overflow = ""; - }; }, [isOpen]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/drawer/Drawer.tsx` around lines 38 - 47, The Drawer component's useEffect should also register a keydown listener for the Escape key when isOpen is true and call the component's close handler (e.g., onClose or closeDrawer) to close the drawer; add an event listener inside the existing useEffect that checks e.key === "Escape" (or e.keyCode === 27 for broader support) and invokes the same close function used by the overlay/close button, and ensure you remove the listener in the effect's cleanup and only attach it while isOpen is true so it doesn't run when the drawer is closed; keep the existing body overflow toggling logic and ensure both the overflow reset and the removed keydown listener happen in the cleanup.src/components/dashboard/charts/TrafficChart.tsx (1)
6-11: 모듈 레벨에서 데이터 바인딩으로 인해 재사용 불가
labels,clicks,yAxisMax,options,series가 모듈 로드 시점에 고정되어 다른 데이터로 차트를 렌더링할 수 없습니다. 현재 목업 데이터 연동 단계라면 괜찮지만, API 연동 시 컴포넌트가 props를 통해 데이터를 받도록 리팩토링이 필요합니다.또한
clicks배열이 빈 경우Math.max(...clicks)가-Infinity를 반환하여 차트가 깨질 수 있습니다.♻️ Props 기반 구조로 개선 제안
+interface ITrafficChartProps { + labels: string[]; + clicks: number[]; +} -const { labels, clicks } = trafficChartMock; - -// x축 시간대 -const LABEL_HOURS = new Set(["00:00", "06:00", "12:00", "18:00", "24:00"]); - -const yAxisMax = Math.ceil(Math.max(...clicks) / 10000) * 10000; +const LABEL_HOURS = new Set(["00:00", "06:00", "12:00", "18:00", "24:00"]); -export default function TrafficChart() { +export default function TrafficChart({ labels, clicks }: ITrafficChartProps) { + const yAxisMax = clicks.length > 0 + ? Math.ceil(Math.max(...clicks) / 10000) * 10000 + : 10000; + + const options: ApexOptions = useMemo(() => ({ + // ... 기존 options 내용 + }), [yAxisMax]); + + const series = useMemo(() => [ + { + name: "클릭수", + data: labels.map((label, i) => ({ x: label, y: clicks[i] })), + }, + ], [labels, clicks]); + return ( <ReactApexChart type="area" options={options} series={series} height={360} /> ); }PR 목표에 API 연동이 남은 작업으로 명시되어 있으니, 해당 작업 시 참고해 주세요.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/dashboard/charts/TrafficChart.tsx` around lines 6 - 11, Move the module-level bindings into the TrafficChart component and accept chart data via props: stop using the top-level labels, clicks, yAxisMax, options, and series constants and instead add props (e.g., labels: string[], clicks: number[]) to the TrafficChart component, compute yAxisMax inside the component (e.g., guard against empty clicks by using Math.max(0, ...clicks) or a fallback like 0), and build options and series from those props (use useMemo keyed on labels/clicks to avoid unnecessary recompute). Ensure references to LABEL_HOURS remain constant if needed but compute any values that depend on data (yAxisMax, series, options) inside the component so the chart can be reused with different datasets.
🤖 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/components/common/toast/Toast.tsx`:
- Around line 25-28: 현재 Toast 컴포넌트의 useEffect는 duration과 onClose를 의존성으로 하여 부모가
onClose를 매 렌더마다 새로 생성하면 타이머가 재설정됩니다; 이를 고치려면 Toast.tsx 내부에서 onClose를 useRef (예:
const onCloseRef = useRef(onClose))에 저장하고 useEffect에서 onCloseRef.current를 호출하도록
변경해 duration만 의존성 배열에 남기거나, useEffect에서 onClose를 의존성으로 유지하되 부모에 useCallback으로
핸들러를 전달하도록 문서화하세요; 참고 심볼: useEffect (타이머 생성), duration, onClose, onCloseRef,
clearTimeout.
- Around line 30-45: The Toast component currently calls createPortal with
document.body on initial render which can cause SSR hydration issues; introduce
an isMounted boolean state in the Toast component (useState(false)) and flip it
to true inside useEffect(() => setIsMounted(true), []) so the portal is only
created on the client; then guard the render so that if !isMounted you return
null (or a non-portal fallback) and only call createPortal(...) to document.body
when isMounted is true, keeping the existing props/variantClasses and aria
attributes intact.
In `@src/components/dashboard/charts/BudgetGaugeChart.tsx`:
- Around line 28-29: Guard against totalBudget being zero or negative in
BudgetGaugeChart by changing the percentage and remaining calculations: compute
percentage as totalBudget > 0 ? Math.round((spent / totalBudget) * 100) : 0, and
compute remaining as Math.max(0, totalBudget - spent) so the UI never shows NaN
or negative remaining; update the variables named percentage and remaining in
the BudgetGaugeChart component (where spent and totalBudget are used)
accordingly.
In `@src/components/dashboard/platform/PlatformRoasTable.tsx`:
- Around line 39-66: The clickable row in PlatformRoasTable.tsx uses a plain
<div> with onClick (the block keyed by platform.name that calls
navigate("/platform")), which is not keyboard-accessible; change it to a
semantic interactive element (preferably a <button>) or add role="button",
tabIndex={0}, and an onKeyDown handler that triggers the same navigation on
Enter/Space, and ensure the element has an accessible name (e.g., include
platform.name in an aria-label) while preserving existing classes and
platformLogoMap usage so style and visuals remain unchanged.
---
Nitpick comments:
In `@src/components/common/chart/ChartLegend.tsx`:
- Around line 17-24: The color dot div in the ChartLegend component is purely
decorative and should not be announced by assistive tech; update the element
rendered for the color marker (the div using twMerge("w-1.5 h-1.5 rounded-full",
item.colorClass) inside the map in ChartLegend.tsx) to include
aria-hidden="true" (or role="presentation") so screen readers ignore it, leaving
the accessible label span ({item.label}) as the only announced content.
In `@src/components/common/drawer/Drawer.tsx`:
- Around line 11-20: IDrawerProps.dropdownItems should use the same menu item
type as DropdownMenu to ensure type consistency: import TMenuItem and change the
dropdownItems declaration on the IDrawerProps interface from "{ label: string;
icon?: ReactNode; onClick: () => void }[]" to "TMenuItem[]", keeping it
optional; update any code that constructs dropdownItems to satisfy TMenuItem
(e.g., add an optional active field if required) so DropdownMenu(items={...}) no
longer relies on structural typing mismatches.
- Around line 67-73: The Drawer component currently allows focus to escape when
open; update the Drawer (component named Drawer, the root panel div that uses
isOpen and className) to implement a focus trap so keyboard Tab/Shift+Tab stay
within the drawer while open. Integrate a focus-trap solution (e.g., wrap the
panel contents with FocusTrap from focus-trap-react and enable options like
escapeDeactivates and clickOutsideDeactivates as appropriate) or add an internal
focus-trapping mechanism that mounts when isOpen is true, sets initial focus to
a logical element inside, cycles Tab/Shift+Tab, and restores focus on close;
ensure Escape handling and cleanup are preserved.
- Around line 38-47: The Drawer component's useEffect should also register a
keydown listener for the Escape key when isOpen is true and call the component's
close handler (e.g., onClose or closeDrawer) to close the drawer; add an event
listener inside the existing useEffect that checks e.key === "Escape" (or
e.keyCode === 27 for broader support) and invokes the same close function used
by the overlay/close button, and ensure you remove the listener in the effect's
cleanup and only attach it while isOpen is true so it doesn't run when the
drawer is closed; keep the existing body overflow toggling logic and ensure both
the overflow reset and the removed keydown listener happen in the cleanup.
In `@src/components/dashboard/charts/BudgetGaugeChart.tsx`:
- Around line 64-71: The status color decision is duplicated: instead of
re-evaluating status in the className block inside the BudgetGaugeChart JSX,
reuse the existing mapping statusPointClasses by replacing the ternary chain
with statusPointClasses[status]; update the className expression (the element
with className={twMerge(...)} that currently uses status === "안정" ? ... : ...)
to reference statusPointClasses[status] so the component uses the single source
of truth for status colors and eliminates the duplicated logic.
- Around line 10-20: Replace the loose Record<string,string> typings with a
concrete union-keyed mapping using the TBudgetStatus union: change
statusBadgeClasses and statusPointClasses to use Record<TBudgetStatus, string>
(or a mapped type like { [K in TBudgetStatus]: string }) and update the
getStatus function signature to return TBudgetStatus so lookups are type-safe;
ensure any code that derives or uses status values is adjusted to produce
TBudgetStatus to avoid indexing with unknown keys.
- Around line 62-74: The progress bar in BudgetGaugeChart.tsx is purely visual;
update the rendered element (the inner div that uses twMerge and style width) to
be an accessible progressbar by adding role="progressbar" plus
aria-valuenow={Math.min(percentage,100)}, aria-valuemin={0}, aria-valuemax={100}
and an informative aria-label or aria-labelledby that includes the current
status and percentage (use existing status and percentage props/variables);
ensure any decorative outer container remains non-interactive and consider
adding a visually hidden text node for screen readers if more context is needed.
In `@src/components/dashboard/charts/TrafficChart.tsx`:
- Around line 6-11: Move the module-level bindings into the TrafficChart
component and accept chart data via props: stop using the top-level labels,
clicks, yAxisMax, options, and series constants and instead add props (e.g.,
labels: string[], clicks: number[]) to the TrafficChart component, compute
yAxisMax inside the component (e.g., guard against empty clicks by using
Math.max(0, ...clicks) or a fallback like 0), and build options and series from
those props (use useMemo keyed on labels/clicks to avoid unnecessary recompute).
Ensure references to LABEL_HOURS remain constant if needed but compute any
values that depend on data (yAxisMax, series, options) inside the component so
the chart can be reused with different datasets.
In `@src/components/dashboard/platform/PlatformComparisonChart.tsx`:
- Around line 87-91: The series array is defined at module scope using
platformComparisonMock so updates from API or props won't re-render; move
creation of series into the PlatformComparisonChart component and derive it from
incoming data (or state) using useMemo to avoid recomputation. Specifically,
replace the module-level const series with a memoized value inside
PlatformComparisonChart (depend on the prop or API data array) and build objects
named "클릭률"/"전환률"/"노출수" from that data (reference symbols: series,
PlatformComparisonChart, platformComparisonMock, useMemo, data prop).
In `@src/components/dashboard/platform/PlatformRoasTable.tsx`:
- Around line 9-13: The platformLogoMap object uses platform name keys but lacks
an explicit key type; update its declaration to type the keys as
IPlatformStats["name"] to enforce consistency with mock data and ensure type
safety—locate the platformLogoMap constant in PlatformRoasTable.tsx and declare
it with an index signature or mapped type using IPlatformStats["name"] so keys
like "Google", "NAVER", and "kakao" are validated by TypeScript.
In `@src/pages/dashboard/overview/aiReport.mock.ts`:
- Around line 1-31: Add explicit TypeScript interfaces for the mock shape (e.g.,
AiReport with nested StrategySuggestion, Section, Warning types), export them
and annotate the mock: declare interfaces matching the properties used in
aiReportMockData (label, title, strategySuggestion, sections[], warning), then
change the declaration to const aiReportMockData: AiReport = { ... } so
OverviewAiReportPanel and other consumers can import the AiReport type and get
compile-time validation when the structure changes.
In `@src/pages/dashboard/overview/OverviewAiReportPanel.tsx`:
- Around line 35-47: The map in data.sections.map is using the array index
(key={idx}) which can break reconciliation; change the key to a stable unique
identifier from each section (e.g., use section.id or section.uuid) inside the
OverviewAiReportPanel rendering, falling back to the index only if no unique id
exists. Update the key prop on the mapped <div> (currently key={idx}) to use
that unique field (section.id) and ensure the source data mapping or type
reflects the id field so future API-backed sections use stable keys.
In `@src/pages/dashboard/overview/OverviewDashboard.tsx`:
- Around line 127-163: The dropdownItems array is recreated on every render;
wrap its creation in React's useMemo to memoize it (e.g., create a memoized
dropdownItems via useMemo(() => [...], [showToast])) and stabilize any callbacks
it depends on (e.g., wrap showToast usage with useCallback or include only
stable deps) so the items (with LinkIcon/DownloadIcon and their onClick
handlers) are not rebuilt unnecessarily when OverviewDashboard rerenders.
- Around line 46-54: The JSX in OverviewDashboard currently calls new Date()
during render causing the displayed timestamp to change on every render; capture
the timestamp at mount or set up a timer instead: in the OverviewDashboard
component initialize state or a ref (e.g., timestamp via useState(() => new
Date()) or useRef(new Date())) to freeze the value for initial load, or if
real-time updates are intended add a useEffect that sets an interval to update
the timestamp state (and clears it on unmount) and replace the direct new Date()
call in the JSX with that state/ref.
- Around line 23-36: OverviewDashboard contains AI panel state and toast logic
(isAiPanelOpen, setIsAiPanelOpen, toast, setToast, showToast) which bloats the
component; extract these into a custom hook named useAiReportPanel that
encapsulates panel open/close, toast state and showToast behavior and any
dropdown/action handlers, then replace the inline state in OverviewDashboard
with calls to useAiReportPanel to return {isAiPanelOpen, openAiPanel,
closeAiPanel, toast, showToast, ...actions} so the component simply consumes the
hook and renders UI.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b5273931-c1b8-470f-a7e3-9e3dcb236e24
⛔ Files ignored due to path filters (19)
package-lock.jsonis excluded by!**/package-lock.jsonand included by nonepackage.jsonis excluded by none and included by nonesrc/assets/icon/ads/google-circle.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ads/google-wordmark.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ads/kakao-circle.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ads/kakao-wordmark.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ads/naver-circle.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ads/naver-logo.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ads/naver-wordmark.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ai-report/close.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ai-report/download.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ai-report/link.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ai-report/more.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ai-report/sparkle-circle.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ai-report/sparkle.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/ai-report/warning.svgis excluded by!**/*.svgand included bysrc/**src/assets/icon/common/chevron-double-right.svgis excluded by!**/*.svgand included bysrc/**src/assets/logo/ai-요약버튼.svgis excluded by!**/*.svgand included bysrc/**vite.config.tsis excluded by none and included by none
📒 Files selected for processing (20)
src/components/ads/CampaignRow.tsxsrc/components/common/card/Card.tsxsrc/components/common/card/StatCard.tsxsrc/components/common/chart/ChartLegend.tsxsrc/components/common/drawer/Drawer.tsxsrc/components/common/dropdownmenu/DropdownMenu.tsxsrc/components/common/toast/Toast.tsxsrc/components/dashboard/charts/BudgetGaugeChart.tsxsrc/components/dashboard/charts/TrafficChart.tsxsrc/components/dashboard/charts/budgetGaugeChart.mock.tssrc/components/dashboard/charts/trafficChart.mock.tssrc/components/dashboard/platform/PlatformComparison.tsxsrc/components/dashboard/platform/PlatformComparisonChart.tsxsrc/components/dashboard/platform/PlatformRoasTable.tsxsrc/components/dashboard/platform/platformComparison.mock.tssrc/index.csssrc/pages/dashboard/overview/OverviewAiReportPanel.tsxsrc/pages/dashboard/overview/OverviewDashboard.tsxsrc/pages/dashboard/overview/aiReport.mock.tssrc/vite-env.d.ts
Comment on lines
+39
to
+66
| <div | ||
| key={platform.name} | ||
| onClick={() => navigate("/platform")} | ||
| className="group grid grid-cols-[2.5rem_9rem_5rem_1fr] gap-4 items-center px-3 py-4 rounded-component-lg transition-all duration-300 hover:bg-bg-surface hover:shadow-Medium border border-transparent hover:border-white active:scale-[0.98] cursor-pointer" | ||
| > | ||
| <span className="text-center font-extrabold text-text-placeholder font-body1 group-hover:text-status-blue transition-colors"> | ||
| {index + 1} | ||
| </span> | ||
| <div className="flex items-center gap-3"> | ||
| <div className="shrink-0 transform group-hover:scale-110 transition-transform duration-300"> | ||
| {platformLogoMap[platform.name]} | ||
| </div> | ||
| <span className="font-bold text-text-main font-body1 tracking-tight"> | ||
| {platform.name} | ||
| </span> | ||
| </div> | ||
| <span className="text-right font-black text-text-main font-body1 tracking-tighter"> | ||
| {platform.roas}% | ||
| </span> | ||
| <div className="flex flex-col items-end text-right"> | ||
| <span className="font-body2 font-extrabold text-text-main leading-tight"> | ||
| ₩{platform.revenue.toLocaleString()} | ||
| </span> | ||
| <span className="font-caption font-medium text-text-sub opacity-70 tracking-tight"> | ||
| ₩{platform.adCost.toLocaleString()} | ||
| </span> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
접근성 개선 필요: 키보드 네비게이션 지원
클릭 가능한 행이 <div>로 구현되어 있어 키보드 사용자가 접근할 수 없습니다. tabIndex, role, onKeyDown 핸들러를 추가하거나 <button>으로 변경해 주세요.
♿ 접근성 개선 제안
<div
key={platform.name}
onClick={() => navigate("/platform")}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ navigate("/platform");
+ }
+ }}
+ role="button"
+ tabIndex={0}
className="group grid grid-cols-[2.5rem_9rem_5rem_1fr] gap-4 items-center px-3 py-4 rounded-component-lg transition-all duration-300 hover:bg-bg-surface hover:shadow-Medium border border-transparent hover:border-white active:scale-[0.98] cursor-pointer"
>코딩 가이드라인에 따라 시맨틱 HTML과 ARIA 속성 사용을 확인합니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div | |
| key={platform.name} | |
| onClick={() => navigate("/platform")} | |
| className="group grid grid-cols-[2.5rem_9rem_5rem_1fr] gap-4 items-center px-3 py-4 rounded-component-lg transition-all duration-300 hover:bg-bg-surface hover:shadow-Medium border border-transparent hover:border-white active:scale-[0.98] cursor-pointer" | |
| > | |
| <span className="text-center font-extrabold text-text-placeholder font-body1 group-hover:text-status-blue transition-colors"> | |
| {index + 1} | |
| </span> | |
| <div className="flex items-center gap-3"> | |
| <div className="shrink-0 transform group-hover:scale-110 transition-transform duration-300"> | |
| {platformLogoMap[platform.name]} | |
| </div> | |
| <span className="font-bold text-text-main font-body1 tracking-tight"> | |
| {platform.name} | |
| </span> | |
| </div> | |
| <span className="text-right font-black text-text-main font-body1 tracking-tighter"> | |
| {platform.roas}% | |
| </span> | |
| <div className="flex flex-col items-end text-right"> | |
| <span className="font-body2 font-extrabold text-text-main leading-tight"> | |
| ₩{platform.revenue.toLocaleString()} | |
| </span> | |
| <span className="font-caption font-medium text-text-sub opacity-70 tracking-tight"> | |
| ₩{platform.adCost.toLocaleString()} | |
| </span> | |
| </div> | |
| </div> | |
| <div | |
| key={platform.name} | |
| onClick={() => navigate("/platform")} | |
| onKeyDown={(e) => { | |
| if (e.key === "Enter" || e.key === " ") { | |
| e.preventDefault(); | |
| navigate("/platform"); | |
| } | |
| }} | |
| role="button" | |
| tabIndex={0} | |
| className="group grid grid-cols-[2.5rem_9rem_5rem_1fr] gap-4 items-center px-3 py-4 rounded-component-lg transition-all duration-300 hover:bg-bg-surface hover:shadow-Medium border border-transparent hover:border-white active:scale-[0.98] cursor-pointer" | |
| > | |
| <span className="text-center font-extrabold text-text-placeholder font-body1 group-hover:text-status-blue transition-colors"> | |
| {index + 1} | |
| </span> | |
| <div className="flex items-center gap-3"> | |
| <div className="shrink-0 transform group-hover:scale-110 transition-transform duration-300"> | |
| {platformLogoMap[platform.name]} | |
| </div> | |
| <span className="font-bold text-text-main font-body1 tracking-tight"> | |
| {platform.name} | |
| </span> | |
| </div> | |
| <span className="text-right font-black text-text-main font-body1 tracking-tighter"> | |
| {platform.roas}% | |
| </span> | |
| <div className="flex flex-col items-end text-right"> | |
| <span className="font-body2 font-extrabold text-text-main leading-tight"> | |
| ₩{platform.revenue.toLocaleString()} | |
| </span> | |
| <span className="font-caption font-medium text-text-sub opacity-70 tracking-tight"> | |
| ₩{platform.adCost.toLocaleString()} | |
| </span> | |
| </div> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/dashboard/platform/PlatformRoasTable.tsx` around lines 39 -
66, The clickable row in PlatformRoasTable.tsx uses a plain <div> with onClick
(the block keyed by platform.name that calls navigate("/platform")), which is
not keyboard-accessible; change it to a semantic interactive element (preferably
a <button>) or add role="button", tabIndex={0}, and an onKeyDown handler that
triggers the same navigation on Enter/Space, and ensure the element has an
accessible name (e.g., include platform.name in an aria-label) while preserving
existing classes and platformLogoMap usage so style and visuals remain
unchanged.
This was referenced Mar 8, 2026
9 tasks
9 tasks
9 tasks
8 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
1 participant
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.
🚨 관련 이슈
Closes #74
✨ 변경사항
✏️ 작업 내용
통합 대시보드 UI 구현
1. TrafficChart — 실시간 트래픽 차트
(1) 왼쪽: PlatformComparisonChart — Google/NAVER/kakao 바 차트
(2) 오른쪽: PlatformRoasTable — ROAS 순위 테이블
스크린샷
📂 폴더 구조
😅 미완성 작업
📢 논의 사항 및 참고 사항
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일