[Feature/#312] 대시보드 예산 소진 UI 스펙 반영 (통합·플랫폼) - #375
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 Plus Run ID: 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (5)
📝 WalkthroughWalkthrough예산 응답을 전체·일일 예산 게이지 모델로 변환합니다. 통합·플랫폼 대시보드는 게이지 배열을 렌더링합니다. 트래픽 차트는 화면별 높이와 Changes대시보드 예산 및 레이아웃
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Dashboard
participant useBudget
participant toBudgetQueryData
participant BudgetGaugeChart
Dashboard->>useBudget: 예산 데이터 요청
useBudget->>toBudgetQueryData: 응답과 provider 전달
toBudgetQueryData-->>useBudget: gauges 배열 반환
useBudget-->>Dashboard: 변환된 예산 데이터 전달
Dashboard->>BudgetGaugeChart: 각 gauge 렌더링
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 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 배포 완료
|
jjjsun
reviewed
Aug 1, 2026
jjjsun
approved these changes
Aug 1, 2026
Collaborator
|
P4: 저는 아래와 같이 진행하면 좋을 것 같습니다!
|
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/dashboard/charts/BudgetGaugeChart.tsx (1)
70-90: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
totalBudget이 0이면 화면 정보가 서로 모순됩니다.
getSpentPercentage는totalBudget <= 0이면0을 반환합니다. 따라서totalBudget = 0,spent > 0인 응답에서 다음이 동시에 나타납니다.
remainingPct는100→ 게이지는 "100% 남음"으로 가득 참status는getBudgetStatus(0, ...)→ 배지는 "안정"isOverBudget은true→ 인사이트는 "예산을 초과했습니다"- 남은 예산 값은
-{spent}예산 미설정 계정에서 실제로 발생할 수 있는 조합입니다. 사용자는 어느 값을 믿어야 할지 알 수 없습니다.
isOverBudget을 상태 계산에도 반영해 주세요.🐛 제안 수정
const slice = { totalBudget, spent }; const spentPct = getSpentPercentage(slice); - const remainingPct = getRemainingPercentage(slice); const isOverBudget = spent > totalBudget; + const remainingPct = isOverBudget ? 0 : getRemainingPercentage(slice); const remainingAmount = isOverBudget ? spent - totalBudget : totalBudget - spent; - const status = getBudgetStatus(spentPct, warningThreshold, dangerThreshold); + const status = isOverBudget + ? "위험" + : getBudgetStatus(spentPct, warningThreshold, dangerThreshold);🤖 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/dashboard/charts/BudgetGaugeChart.tsx` around lines 70 - 90, Update the status calculation in the budget gauge flow to incorporate the existing isOverBudget result, especially when totalBudget is zero and spent is positive. Ensure getBudgetStatus and the displayed gauge, badge, and insight remain consistent with the over-budget state, while preserving normal calculations for configured budgets.
🧹 Nitpick comments (9)
src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx (1)
64-70: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win조건부 클래스를
twMerge로 정리해 주세요.두 분기의 차이는
gap-5하나입니다. 나머지 클래스는 동일합니다. 또한gap-5는 게이지가 1개일 때만 적용됩니다. 자식이 1개이면gap은 효과가 없습니다. 즉 현재 분기는 화면에 아무 차이를 만들지 않습니다.코딩 가이드라인은 조건부 클래스에
twMerge를 쓰도록 정하고 있습니다.♻️ 제안 리팩터링
- <div - className={ - budget.gauges.length > 1 - ? "flex min-h-0 flex-1 flex-col overflow-y-auto" - : "flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto" - } - > + <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">코딩 가이드라인의 "Use
twMergefor conditional classes" 항목에 따른 제안입니다.🤖 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/pages/dashboard/overview/sections/OverviewBudgetSection.tsx` around lines 64 - 70, Update the conditional className on the gauge container div to use the project’s twMerge utility, removing the redundant gap-5 branch while preserving the shared flex, sizing, and overflow classes.Source: Coding guidelines
src/utils/dashboard/budget.ts (1)
125-140: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
SHOW_BUDGET_GAUGE_INSIGHT상수가 사용되지 않습니다.16행에서 기본값 상수를 선언했습니다. 그러나 133행은
showInsight: true를 직접 넣습니다. 값이 같아도 두 곳을 따로 바꿔야 하는 상태가 됩니다. 상수를 사용해 주세요.♻️ 제안 리팩터링
const gauges = viewModel.slices.map((slice) => - toGaugeProps(slice, { compact: isCompact, showInsight: true }), + toGaugeProps(slice, { + compact: isCompact, + showInsight: SHOW_BUDGET_GAUGE_INSIGHT, + }), );🤖 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/utils/dashboard/budget.ts` around lines 125 - 140, Update toBudgetQueryData to use the existing SHOW_BUDGET_GAUGE_INSIGHT constant for the toGaugeProps showInsight option instead of the hardcoded true value, keeping the behavior unchanged while centralizing the default.src/hooks/dashboard/useBudget.ts (2)
20-27: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win
select결과가 렌더마다 새 객체가 됩니다.
select에 인라인 화살표 함수를 넘깁니다. react-query는select함수의 참조가 바뀌면 결과를 다시 계산합니다.toBudgetQueryData는 매번 새gauges배열과 새 gauge 객체를 만듭니다. 그 결과BudgetGaugeChart의memo가 무효화됩니다.SinglePlatformView의resetKeys={[budgetData]}도 매 렌더 변경으로 인식될 수 있습니다.
useCallback으로select참조를 고정해 주세요.♻️ 제안 리팩터링
+import { useCallback } from "react"; + export function useBudget(provider?: TProviderType) { const orgId = useWorkspaceStore((s) => s.selectedOrgId); const queryKey = provider ? QUERY_KEYS.platform.budget(orgId, provider) : QUERY_KEYS.overview.budget(orgId); + const select = useCallback( + (data: IBudgetResponse) => toBudgetQueryData(data, provider), + [provider], + ); + return useCoreQuery<IBudgetResponse, IBudgetQueryData>( queryKey, () => getBudget(orgId!, provider), { enabled: !!orgId, - select: (data) => toBudgetQueryData(data, provider), + select, }, ); }경로 지침의 "useCallback, useMemo의 적절한 사용", "불필요한 리렌더링 체크" 항목에 따른 제안입니다.
🤖 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/hooks/dashboard/useBudget.ts` around lines 20 - 27, useBudget의 useCoreQuery 호출에서 인라인 select 콜백을 useCallback으로 메모이제이션해 참조가 렌더마다 바뀌지 않도록 수정하세요. 콜백은 기존처럼 toBudgetQueryData(data, provider)를 호출하고 provider 변경 시 갱신되도록 의존성을 설정하며, queryKey와 enabled 동작은 유지하세요.Source: Path instructions
3-3: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
TProviderType을 정의 파일로 직접 가져오세요.
TProviderType은src/types/dashboard/provider.ts에 정의되어 있고,overview.ts는 이를 re-export하고 있을 뿐입니다.src/hooks/dashboard/useBudget.ts도 정의 위치와 같은@/types/dashboard/provider에서 가져와 경로를 일관되게 유지해 주세요.🤖 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/hooks/dashboard/useBudget.ts` at line 3, Update the TProviderType import in useBudget.ts to use the defining module "`@/types/dashboard/provider`" instead of the overview re-export, keeping the imported type and surrounding hook logic unchanged.src/components/dashboard/platform/SinglePlatformView.tsx (2)
147-155: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win이중 게이지 높이 값을 상수로 빼 주세요.
단일 게이지 높이는
PLATFORM_MID_SECTION_HEIGHT_SINGLE상수를 씁니다. 이중 게이지 높이min-h-120 h-full은 두 카드에 문자열로 직접 들어 있습니다. 값이 바뀌면 두 곳을 함께 고쳐야 합니다. 단일 게이지와 동일하게src/constants/dashboard/trafficChartHeights.ts에 상수를 추가해 주세요.♻️ 제안 리팩터링
src/constants/dashboard/trafficChartHeights.ts에 추가:export const PLATFORM_MID_SECTION_HEIGHT_DUAL = "min-h-120 h-full" as const;
SinglePlatformView.tsx:-import { PLATFORM_MID_SECTION_HEIGHT_SINGLE } from "`@/constants/dashboard/trafficChartHeights`"; +import { + PLATFORM_MID_SECTION_HEIGHT_DUAL, + PLATFORM_MID_SECTION_HEIGHT_SINGLE, +} from "`@/constants/dashboard/trafficChartHeights`";hasDualBudgetGauges - ? "min-h-120 h-full overflow-hidden" + ? `${PLATFORM_MID_SECTION_HEIGHT_DUAL} overflow-hidden` : PLATFORM_MID_SECTION_HEIGHT_SINGLE,hasDualBudgetGauges - ? "min-h-120 h-full" + ? PLATFORM_MID_SECTION_HEIGHT_DUAL : PLATFORM_MID_SECTION_HEIGHT_SINGLE,Also applies to: 187-194
🤖 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/dashboard/platform/SinglePlatformView.tsx` around lines 147 - 155, Extract the duplicated dual-gauge height string into a new PLATFORM_MID_SECTION_HEIGHT_DUAL constant in trafficChartHeights.ts, then replace both inline "min-h-120 h-full" usages in SinglePlatformView with that constant while preserving the existing conditional styling.
232-243: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value게이지 구분선 조건에 항상 참인 검사가 들어 있습니다. 두 파일이 같은 렌더링 패턴을 사용합니다.
index > 0이 참이면 배열 길이는 이미 2 이상입니다. 따라서gauges.length > 1검사는 결과에 영향을 주지 않습니다. 조건을 읽는 사람이 "1개일 때 예외가 있나"라고 오해합니다.
src/components/dashboard/platform/SinglePlatformView.tsx#L232-L243:index > 0 && budgetData.gauges.length > 1 && "mt-5 border-t border-surface-300 pt-5"를index > 0 && "mt-5 border-t border-surface-300 pt-5"로 줄여 주세요.src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx#L71-L83:index > 0 && budget.gauges.length > 1 ? "mt-5 border-t border-surface-300 pt-5" : undefined를index > 0 ? "mt-5 border-t border-surface-300 pt-5" : undefined로 줄여 주세요.두 곳의 구분선 클래스 문자열이 동일합니다. 공통 상수로 빼 두면 이후 간격을 한 번에 조정할 수 있습니다.
🤖 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/dashboard/platform/SinglePlatformView.tsx` around lines 232 - 243, Remove the redundant gauges.length > 1 check from the gauge separator condition in src/components/dashboard/platform/SinglePlatformView.tsx lines 232-243, leaving index > 0 as the condition. Apply the same simplification in src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx lines 71-83. Extract the identical separator class string into a shared constant and reuse it at both sites.src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx (2)
70-74: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win컴포넌트 props 타입에
I*Props네이밍을 적용해 주세요.
PlatformBudgetGaugeCompactSkeleton과PlatformDualBudgetGaugeSkeleton은 props 타입을 인라인 익명 객체로 선언합니다. 코딩 가이드라인은 컴포넌트 props에I*Props형태의 명명된 타입을 쓰도록 정하고 있습니다. 두 컴포넌트가 같은 형태를 쓰므로 하나의 타입으로 정의해 재사용해 주세요.♻️ 제안 리팩터링
+interface IBudgetGaugeSkeletonProps { + /** 라벨 행에 전체 예산 금액을 함께 표시하는 레이아웃 */ + mergedBudgetHeader?: boolean; +} + /** compact BudgetGaugeChart 1칸 */ function PlatformBudgetGaugeCompactSkeleton({ mergedBudgetHeader = true, -}: { - mergedBudgetHeader?: boolean; -}) { +}: IBudgetGaugeSkeletonProps) {export function PlatformDualBudgetGaugeSkeleton({ mergedBudgetHeader = true, -}: { - mergedBudgetHeader?: boolean; -} = {}) { +}: IBudgetGaugeSkeletonProps = {}) {코딩 가이드라인의 "component props use
I*Props" 항목에 따른 제안입니다.Also applies to: 142-146
🤖 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/dashboard/platform/skeleton/PlatformSkeleton.tsx` around lines 70 - 74, PlatformBudgetGaugeCompactSkeleton과 PlatformDualBudgetGaugeSkeleton의 인라인 props 객체 타입을 제거하고, 두 컴포넌트가 공유할 수 있는 I*Props 명명 타입을 정의해 재사용하도록 변경하세요. 해당 타입에는 mergedBudgetHeader의 선택적 boolean 설정과 기본값 동작을 유지하세요.Source: Coding guidelines
142-159: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win통합 대시보드가 플랫폼 스켈레톤에 의존합니다.
src/components/dashboard/overview/skeleton/OverviewSkeleton.tsx:32-34의OverviewBudgetGaugeSkeleton은 이 파일의PlatformDualBudgetGaugeSkeleton을 감쌉니다. overview 도메인이 platform 도메인을 참조하는 구조입니다. 이후 플랫폼 레이아웃만 바꾸면 통합 대시보드 로딩 화면이 함께 바뀝니다.두 대시보드가 공유하는 게이지 스켈레톤이므로
components/common/skeleton/아래 공통 컴포넌트로 옮기고, 두 도메인이 각각 그것을 사용하도록 정리해 주세요.코딩 가이드라인의 "Reusable components ... prioritize
components/common/" 항목에 따른 제안입니다.🤖 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/dashboard/platform/skeleton/PlatformSkeleton.tsx` around lines 142 - 159, Move the shared PlatformDualBudgetGaugeSkeleton implementation into components/common/skeleton/ and expose it as a common gauge skeleton component. Update both PlatformSkeleton and OverviewSkeleton, including OverviewBudgetGaugeSkeleton, to import and use the common component directly, removing the overview-to-platform dependency while preserving the mergedBudgetHeader behavior and layout.Source: Coding guidelines
src/components/dashboard/platform/PlatformTrafficChart.tsx (1)
175-317: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winchartOptions/series를 useMemo로 감싸는 것을 권장합니다.
ResizeObserver가updateHeight를 통해chartHeight를 자주 갱신합니다(297-317행).chartOptions(175행)와series(266행)는 매 렌더마다 새 객체로 생성되므로, 높이가 바뀔 때마다ReactApexChart가 새options/series참조를 받아 불필요하게 다시 그려질 수 있습니다.TrafficChart.tsx는 이미buildChartOptions결과를useMemo로 감싸고 있으니, 같은 패턴을 이 파일에도 적용하면 일관성과 렌더링 성능이 개선됩니다.🤖 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/dashboard/platform/PlatformTrafficChart.tsx` around lines 175 - 317, Wrap the chartOptions object and series array in useMemo to preserve their references across chartHeight updates from updateHeight and ResizeObserver. Include all values used inside each memo’s construction, such as platformColor, fillHeight, anomalyTimestamp, anomalyY, xMin, xMax, yMax, seriesData, and the relevant M labels, in the dependency arrays; keep the existing Apex configuration and data unchanged.
🤖 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/dashboard/charts/BudgetGaugeChart.tsx`:
- Around line 187-198: Update the budget summary block rendering the “남은 예산”
label so it uses an over-budget label when isOverBudget is true, matching the
displayed remainingAmount as an excess amount; preserve the existing label and
value formatting for budgets that are not over.
In `@src/components/dashboard/charts/TrafficChart.tsx`:
- Around line 34-38: Update the height comment in ITrafficChartProps to state
the actual default value of 590 instead of 520, matching
OVERVIEW_TRAFFIC_CHART_HEIGHT.
In `@src/components/dashboard/platform/PlatformTrafficChart.tsx`:
- Around line 412-457: Update both chart container divs in the fillHeight and
non-fillHeight branches around containerRef to include role="group" and the same
aria-label used by TrafficChart.tsx: "실시간 트래픽 변화 차트: 시간대별 클릭수 추이". Keep the
existing classes, refs, and tooltip attributes unchanged.
In `@src/components/dashboard/platform/SinglePlatformView.tsx`:
- Around line 205-209: Update the wrapper div around the budget gauge content in
SinglePlatformView so it always applies the required flex container classes,
while retaining the dual-gauge-specific sizing and column behavior. Ensure the
single-gauge loading, error, and empty child states can use flex-1 and remain
vertically centered.
In `@src/utils/dashboard/budget.ts`:
- Around line 76-86: The mapOverviewBudgetViewModel fallback makes a missing
NAVER value appear as an unused budget. Update the naver handling in
mapOverviewBudgetViewModel so absent NAVER data causes the NAVER gauge/slice to
be omitted rather than substituted with zero, while preserving the existing
Google·Meta legacy fallback behavior.
- Around line 89-105: Update mapPlatformBudgetViewModel so the daily budget
gauge is only created when data.daily exists; do not let toAmountSlice fall back
to the top-level totalBudget/totalSpend for the daily path. Preserve the
lifetime gauge and unsupported-provider behavior, while omitting the daily slice
when its source data is unavailable.
---
Outside diff comments:
In `@src/components/dashboard/charts/BudgetGaugeChart.tsx`:
- Around line 70-90: Update the status calculation in the budget gauge flow to
incorporate the existing isOverBudget result, especially when totalBudget is
zero and spent is positive. Ensure getBudgetStatus and the displayed gauge,
badge, and insight remain consistent with the over-budget state, while
preserving normal calculations for configured budgets.
---
Nitpick comments:
In `@src/components/dashboard/platform/PlatformTrafficChart.tsx`:
- Around line 175-317: Wrap the chartOptions object and series array in useMemo
to preserve their references across chartHeight updates from updateHeight and
ResizeObserver. Include all values used inside each memo’s construction, such as
platformColor, fillHeight, anomalyTimestamp, anomalyY, xMin, xMax, yMax,
seriesData, and the relevant M labels, in the dependency arrays; keep the
existing Apex configuration and data unchanged.
In `@src/components/dashboard/platform/SinglePlatformView.tsx`:
- Around line 147-155: Extract the duplicated dual-gauge height string into a
new PLATFORM_MID_SECTION_HEIGHT_DUAL constant in trafficChartHeights.ts, then
replace both inline "min-h-120 h-full" usages in SinglePlatformView with that
constant while preserving the existing conditional styling.
- Around line 232-243: Remove the redundant gauges.length > 1 check from the
gauge separator condition in
src/components/dashboard/platform/SinglePlatformView.tsx lines 232-243, leaving
index > 0 as the condition. Apply the same simplification in
src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx lines 71-83.
Extract the identical separator class string into a shared constant and reuse it
at both sites.
In `@src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx`:
- Around line 70-74: PlatformBudgetGaugeCompactSkeleton과
PlatformDualBudgetGaugeSkeleton의 인라인 props 객체 타입을 제거하고, 두 컴포넌트가 공유할 수 있는 I*Props
명명 타입을 정의해 재사용하도록 변경하세요. 해당 타입에는 mergedBudgetHeader의 선택적 boolean 설정과 기본값 동작을
유지하세요.
- Around line 142-159: Move the shared PlatformDualBudgetGaugeSkeleton
implementation into components/common/skeleton/ and expose it as a common gauge
skeleton component. Update both PlatformSkeleton and OverviewSkeleton, including
OverviewBudgetGaugeSkeleton, to import and use the common component directly,
removing the overview-to-platform dependency while preserving the
mergedBudgetHeader behavior and layout.
In `@src/hooks/dashboard/useBudget.ts`:
- Around line 20-27: useBudget의 useCoreQuery 호출에서 인라인 select 콜백을 useCallback으로
메모이제이션해 참조가 렌더마다 바뀌지 않도록 수정하세요. 콜백은 기존처럼 toBudgetQueryData(data, provider)를 호출하고
provider 변경 시 갱신되도록 의존성을 설정하며, queryKey와 enabled 동작은 유지하세요.
- Line 3: Update the TProviderType import in useBudget.ts to use the defining
module "`@/types/dashboard/provider`" instead of the overview re-export, keeping
the imported type and surrounding hook logic unchanged.
In `@src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx`:
- Around line 64-70: Update the conditional className on the gauge container div
to use the project’s twMerge utility, removing the redundant gap-5 branch while
preserving the shared flex, sizing, and overflow classes.
In `@src/utils/dashboard/budget.ts`:
- Around line 125-140: Update toBudgetQueryData to use the existing
SHOW_BUDGET_GAUGE_INSIGHT constant for the toGaugeProps showInsight option
instead of the hardcoded true value, keeping the behavior unchanged while
centralizing the default.
🪄 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 Plus
Run ID: 15b52d8e-d2c2-4406-bdf7-ffdde5e2e8e3
📒 Files selected for processing (15)
src/components/dashboard/charts/BudgetGaugeChart.tsxsrc/components/dashboard/charts/TrafficChart.tsxsrc/components/dashboard/charts/trafficChart.config.tssrc/components/dashboard/overview/skeleton/OverviewSkeleton.tsxsrc/components/dashboard/platform/PlatformTrafficChart.tsxsrc/components/dashboard/platform/SinglePlatformView.tsxsrc/components/dashboard/platform/skeleton/PlatformSkeleton.tsxsrc/constants/dashboard/trafficChartHeights.tssrc/hooks/dashboard/useBudget.tssrc/pages/dashboard/overview/OverviewDashboard.tsxsrc/pages/dashboard/overview/sections/OverviewBudgetSection.tsxsrc/pages/dashboard/overview/sections/OverviewKpiSection.tsxsrc/types/dashboard/budget.tssrc/types/dashboard/common.tssrc/utils/dashboard/budget.ts
💤 Files with no reviewable changes (1)
- src/pages/dashboard/overview/OverviewDashboard.tsx
Seojegyeong
approved these changes
Aug 3, 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.
🚨 관련 이슈
close #312
✨ 변경사항
✏️ 작업 내용
데이터
IBudgetResponse분리 필드 →budget.ts어댑터 →useBudget이{ gauges[] }반환BudgetGaugeChart
label·Badge,compact/showInsight분리통합 대시보드
pt-3플랫폼 대시보드
fillHeight😅 미완성 작업
📢 논의 사항 및 참고 사항
통합 실시간 트래픽 height (520px)
예산 게이지가 2개로 늘면서 세로 길이가 길어졌고, 그에 맞춰 왼쪽 실시간 트래픽 차트의 height을 고정(520px)으로 키웠습니다.
예산 게이지 UI
기존: 소진 % · 소진 비율 바 · (사용|전체) · 남은 예산 박스
변경: 남음 % · 남은 비율 바 · (사용|전체, 라벨 2줄) · 남은 예산 박스 유지
주 지표가 소진 → 남음으로 바뀌면서, 남은 금액을 바 하단에 작게 두는 방식을 생각했으나 남은 예산 박스가 이미 있어서 박스는 유지하고 하단은 사용|전체 보조 스케일로 정리했습니다. 금액 위치·박스 역할 변경 등 의견 주시면 반영하겠습니다.
인사이트 UI (1게이지 / 2게이지)
플랫폼 Naver처럼 1게이지일 때는 인사이트를 빼면 세로가 비어 보여서, 당장은 1게이지만 인사이트 영역을 두었습니다. 2게이지(통합·Google/Meta)는 전체가 길어져서 인사이트는 뺐고, compact + showInsight로 분리해 두었습니다.
카드 제목
예산 소진 현황오른쪽에 한 줄로 넣는 것도 생각했는데, 이미 게이지마다 안정/주의/위험 Badge가 있어서 인사이트가 얼마나 필요한지 잘 모르겠습니다. 어떤 쪽이 나을지 의견 주시면 반영하겠습니다. (현재 SHOW_BUDGET_GAUGE_INSIGHT = false로 off)API / 백엔드
백엔드 예산 스펙 변경이 아직 반영되지 않은 것 같아 실제 API 규격은 확인하지 못했습니다. IBudgetResponse 분리 필드·어댑터 매핑은 프론트 가정으로 붙여 둔 상태이고, 백 완료 후 스펙에 맞게 수정 예정입니다.
Summary by CodeRabbit
새 기능
개선