[Feature/#198] 플랫폼 대시보드(전체) 상/하단 지표 API 연동 - #204
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthrough플랫폼 대시보드의 4개 섹션(성과 우수 플랫폼, 광고 소재 현황, 플랫폼별 성과 효율, 플랫폼 상세)을 목(mock) 데이터에서 API 기반 훅으로 전환합니다. 새 API, 세 데이터 훅, 제공자 정규화(KAKAO→META), 백분율 포맷팅 수정이 포함됩니다. ChangesPlatform Dashboard API Integration
Sequence DiagramsequenceDiagram
participant AllPlatformView
participant useWorkspaceStore
participant usePlatformRoasRankings
participant usePlatformAdCount
participant usePlatformPerformance
participant API
AllPlatformView->>useWorkspaceStore: read selectedOrgId
AllPlatformView->>usePlatformRoasRankings: fetch with orgId
AllPlatformView->>usePlatformAdCount: fetch with orgId
AllPlatformView->>usePlatformPerformance: fetch with orgId
usePlatformRoasRankings->>API: getRoasRankings(orgId)
usePlatformAdCount->>API: getAdCount(orgId)
usePlatformPerformance->>API: getOverview per provider
API-->>usePlatformRoasRankings: rankings data
API-->>usePlatformAdCount: ad status data
API-->>usePlatformPerformance: performance metrics
usePlatformRoasRankings->>usePlatformRoasRankings: normalize provider (KAKAO→META)
usePlatformAdCount->>usePlatformAdCount: normalize provider (KAKAO→META)
usePlatformPerformance->>usePlatformPerformance: normalize provider (KAKAO→META)
usePlatformRoasRankings-->>AllPlatformView: IRoasRanking[]
usePlatformAdCount-->>AllPlatformView: IAdStatusData
usePlatformPerformance-->>AllPlatformView: IPlatformPerformance[]
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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 docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 배포 완료
|
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/hooks/dashboard/usePlatformAdCount.ts (1)
11-14: ⚡ Quick win
normalizeProvider중복 로직은 공용 유틸로 분리해 주세요.같은 매핑 로직이 여러 훅에 분산되어 있어 수정 누락 가능성이 큽니다. 공통 함수로 모으면 임시 로직 제거 시점에도 안전합니다.
♻️ 제안 diff
-// TODO: 추후 제거 -const normalizeProvider = (provider: string): TPlatformProvider => - provider === "KAKAO" ? "META" : (provider as TPlatformProvider); +import { normalizePlatformProvider } from "@/utils/dashboard/normalizePlatformProvider"; ... - provider: normalizeProvider(item.provider), + provider: normalizePlatformProvider(item.provider),// src/utils/dashboard/normalizePlatformProvider.ts import type { TPlatformProvider } from "@/types/dashboard/platform"; export const normalizePlatformProvider = (provider: string): TPlatformProvider => provider === "KAKAO" ? "META" : (provider as TPlatformProvider);As per coding guidelines
src/**: 2. 구조와 책임 분리: 페이지에 비즈니스 로직이 과도하지 않은지 확인. 커스텀 훅으로의 분리 여부 검토.Also applies to: 26-29
🤖 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/usePlatformAdCount.ts` around lines 11 - 14, Extract the duplicated normalizeProvider logic into a shared utility named normalizePlatformProvider and replace all local occurrences (e.g., normalizeProvider in usePlatformAdCount and any other hooks showing the same mapping) with an import from the new utility; create the function signature matching export const normalizePlatformProvider = (provider: string): TPlatformProvider => provider === "KAKAO" ? "META" : (provider as TPlatformProvider) (use that exact symbol name to locate usages), update imports in affected files to import { normalizePlatformProvider } from the new utils module, and remove the local normalizeProvider definitions so only the common utility remains.
🤖 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/platform/AllPlatformView.tsx`:
- Around line 61-63: The ROAS badge's loading condition in AllPlatformView is
only checking isLoading while the main body uses isLoading || isRankingsLoading,
causing the badge to flash when rankings are refetched; update the badge
rendering condition to mirror the main content (use isLoading ||
isRankingsLoading and existing roasRankings/null checks) so both badge and body
enter the loading state together—look for the JSX that renders the badge near
TopPerformanceListSkeleton and change its conditional to include
isRankingsLoading.
In `@src/hooks/dashboard/usePlatformPerformance.ts`:
- Around line 25-35: The code in usePlatformPerformance swallows individual
provider errors by catching and returning null, which lets the UI treat
partial/missing provider data as a successful result; instead, change the logic
in the Promise.all block to surface failures (do not .catch(() => null)
silently) — either let getOverview rejections propagate so the overall call
rejects, or collect per-provider errors and throw a combined error that includes
provider identity (use PROVIDERS, getOverview, normalizeProvider, and
IPlatformPerformance to build context); ensure the returned success path only
contains fully valid IPlatformPerformance items and that failures are reported
upstream for appropriate user feedback.
In `@src/hooks/dashboard/usePlatformRoasRankings.ts`:
- Around line 17-20: The current usePlatformRoasRankings hook calls
getRoasRankings with hardcoded startDate/endDate ("2026-01-22" to "2026-03-22");
change it to accept the date range from the parent/filter (or a sensible
prop/default) and pass those dynamic startDate and endDate values into
getRoasRankings (rather than literals), update the useQuery key to include
orgId, startDate and endDate so caching is correct, and ensure the hook
(usePlatformRoasRankings) falls back to a provided default range if no filter is
supplied; reference the getRoasRankings call, startDate/endDate parameters,
orgId, and the useQuery queryKey when making these edits.
---
Nitpick comments:
In `@src/hooks/dashboard/usePlatformAdCount.ts`:
- Around line 11-14: Extract the duplicated normalizeProvider logic into a
shared utility named normalizePlatformProvider and replace all local occurrences
(e.g., normalizeProvider in usePlatformAdCount and any other hooks showing the
same mapping) with an import from the new utility; create the function signature
matching export const normalizePlatformProvider = (provider: string):
TPlatformProvider => provider === "KAKAO" ? "META" : (provider as
TPlatformProvider) (use that exact symbol name to locate usages), update imports
in affected files to import { normalizePlatformProvider } from the new utils
module, and remove the local normalizeProvider definitions so only the common
utility remains.
🪄 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: f7877e8d-6c8f-42d0-b8f6-6023b1039c4e
📒 Files selected for processing (9)
src/api/dashboard/platform.tssrc/components/dashboard/charts/performanceEfficiencyChart.config.tssrc/components/dashboard/platform/AllPlatformView.tsxsrc/components/dashboard/platform/PlatformDetailCard.tsxsrc/hooks/dashboard/usePlatformAdCount.tssrc/hooks/dashboard/usePlatformPerformance.tssrc/hooks/dashboard/usePlatformRoasRankings.tssrc/pages/dashboard/platform/platformDashboard.mock.tssrc/types/dashboard/platform.ts
💤 Files with no reviewable changes (1)
- src/pages/dashboard/platform/platformDashboard.mock.ts
|
P4: 확인했습니다! 고생하셨어요! |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/hooks/dashboard/usePlatformPerformance.ts (1)
25-43: ⚡ Quick win에러 메시지에 실패한 플랫폼 정보를 추가하면 디버깅이 더 쉬워집니다.
현재는 어떤 플랫폼에서 실패했는지 알 수 없어서, 문제 발생 시 원인 파악이 어려울 수 있습니다. 실패한 플랫폼 이름을 포함하면 개발/운영 시 트러블슈팅에 도움이 됩니다.
🔍 실패 정보를 포함하는 개선안
const success = settled .filter( (r): r is PromiseFulfilledResult<IPlatformPerformance> => r.status === "fulfilled", ) .map((r) => r.value); if (success.length !== PROVIDERS.length) { - throw new Error("일부 플랫폼 성과 데이터를 불러오지 못했습니다."); + const failedProviders = settled + .map((result, index) => + result.status === "rejected" ? PROVIDERS[index] : null + ) + .filter((p): p is TProviderType => p !== null); + throw new Error( + `일부 플랫폼 성과 데이터를 불러오지 못했습니다. (실패: ${failedProviders.join(", ")})` + ); } return success;🤖 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/usePlatformPerformance.ts` around lines 25 - 43, The error currently thrown when not all PROVIDERS succeed lacks which provider(s) failed; update the Promise.allSettled handling in usePlatformPerformance (the block that calls getOverview for each PROVIDER and builds the settled variable) to identify rejected entries and include their provider names in the thrown Error. You can do this by attaching the provider (or normalized provider) to each promise result (or by using the index to map settled entries back to PROVIDERS) and then building an error message like "일부 플랫폼 성과 데이터를 불러오지 못했습니다: [failedProviders]" that lists the failed providers; reference the getOverview calls, PROVIDERS array, normalizeProvider, and the success/rejected filtering when implementing the change.
🤖 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.
Nitpick comments:
In `@src/hooks/dashboard/usePlatformPerformance.ts`:
- Around line 25-43: The error currently thrown when not all PROVIDERS succeed
lacks which provider(s) failed; update the Promise.allSettled handling in
usePlatformPerformance (the block that calls getOverview for each PROVIDER and
builds the settled variable) to identify rejected entries and include their
provider names in the thrown Error. You can do this by attaching the provider
(or normalized provider) to each promise result (or by using the index to map
settled entries back to PROVIDERS) and then building an error message like "일부
플랫폼 성과 데이터를 불러오지 못했습니다: [failedProviders]" that lists the failed providers;
reference the getOverview calls, PROVIDERS array, normalizeProvider, and the
success/rejected filtering when implementing the change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: dde83a9a-6e21-41f1-bd90-be62dafd4936
📒 Files selected for processing (1)
src/hooks/dashboard/usePlatformPerformance.ts
🚨 관련 이슈
close #198
✨ 변경사항
✏️ 작업 내용
API 연동
/api/dashboard/{orgId}/rankings/roasusePlatformRoasRankings생성/api/dashboard/{orgId}/ad-countusePlatformAdCount생성/api/dashboard/{orgId}/metrics?providerType=GOOGLE|NAVER|KAKAOusePlatformPerformance생성 → 3개 플랫폼 병렬 호출 후 하나의 배열로 병합/api/dashboard/{orgId}/metrics?providerType=GOOGLE|NAVER|KAKAO😅 미완성 작업
📢 논의 사항 및 참고 사항
플랫폼 대시보드 일부 지표가 통합 대시보드와 동일한 API를 사용하기 때문에, 기존
api/dashboard/overview.ts·types/dashboard/overview.ts의 함수/타입을 그대로 끌어다 썼습니다.현재 데이터가 아직 메타로 변경되기 전이라 임시로 카카오를 메타로 변경하여 나타냈습니다. 추후 삭제 예정입니다.
Summary by CodeRabbit
새로운 기능
버그 수정
기타