Skip to content

[Feature/#198] 플랫폼 대시보드(전체) 상/하단 지표 API 연동 - #204

Merged
YermIm merged 7 commits into
developfrom
feature/#198
May 13, 2026
Merged

[Feature/#198] 플랫폼 대시보드(전체) 상/하단 지표 API 연동#204
YermIm merged 7 commits into
developfrom
feature/#198

Conversation

@YermIm

@YermIm YermIm commented May 11, 2026

Copy link
Copy Markdown
Collaborator

🚨 관련 이슈

close #198

✨ 변경사항

  • 🐞 BugFix Something isn't working
  • 💻 CrossBrowsing Browser compatibility
  • 🌏 Deploy Deploy
  • 🎨 Design Markup & styling
  • 📃 Docs Documentation writing and editing (README.md, etc.)
  • ✨ Feature Feature
  • 🔨 Refactor Code refactoring
  • ⚙️ Setting Development environment setup
  • ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

screencapture-localhost-5173-platform-2026-05-11-23_16_36

API 연동

성과 우수 플랫폼 (ROAS 순위)

  • /api/dashboard/{orgId}/rankings/roas
  • usePlatformRoasRankings 생성
  • KAKAO 응답 → META로 표시되도록 정규화
  • 데이터 제한으로 날짜 하드 코딩

광고 소재 현황

  • /api/dashboard/{orgId}/ad-count
  • usePlatformAdCount 생성

플랫폼별 성과 효율 비교

  • /api/dashboard/{orgId}/metrics?providerType=GOOGLE|NAVER|KAKAO
  • usePlatformPerformance 생성 → 3개 플랫폼 병렬 호출 후 하나의 배열로 병합
  • 차트 Y축 스케일 버그 수정

개별 플랫폼 상세 카드 3개

  • /api/dashboard/{orgId}/metrics?providerType=GOOGLE|NAVER|KAKAO
  • % 단위 버그 수정

😅 미완성 작업

  • 플랫폼별 실시간 클릭수 비교

📢 논의 사항 및 참고 사항

플랫폼 대시보드 일부 지표가 통합 대시보드와 동일한 API를 사용하기 때문에, 기존 api/dashboard/overview.ts · types/dashboard/overview.ts의 함수/타입을 그대로 끌어다 썼습니다.

현재 데이터가 아직 메타로 변경되기 전이라 임시로 카카오를 메타로 변경하여 나타냈습니다. 추후 삭제 예정입니다.

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

  • 새로운 기능

    • 플랫폼 대시보드가 실시간 API 기반으로 전환되어 광고 소재 현황, ROAS 순위, 플랫폼별 성과를 실제 데이터로 로드합니다.
    • 광고 소재 수 조회와 플랫폼 성과 조회를 위한 데이터 훅이 추가되었습니다.
    • 광고 소재 조회에 시작/종료일 파라미터가 지원됩니다.
  • 버그 수정

    • 플랫폼 상세 카드의 트렌드 퍼센트 포맷을 수정했습니다.
    • CTR 차트 라벨링을 개선했습니다.
  • 기타

    • 임시 광고 소재 목업이 제거되었습니다.

Review Change Stack

@YermIm
YermIm requested review from Seojegyeong and jjjsun May 11, 2026 14:34
@YermIm YermIm self-assigned this May 11, 2026
@YermIm YermIm added ✨ Feature 기능 개발 📬 API 서버 API 통신 labels May 11, 2026
@vercel

vercel Bot commented May 11, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
where-you-ad Ready Ready Preview, Comment May 12, 2026 6:59pm

@coderabbitai

coderabbitai Bot commented May 11, 2026

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

플랫폼 대시보드의 4개 섹션(성과 우수 플랫폼, 광고 소재 현황, 플랫폼별 성과 효율, 플랫폼 상세)을 목(mock) 데이터에서 API 기반 훅으로 전환합니다. 새 API, 세 데이터 훅, 제공자 정규화(KAKAO→META), 백분율 포맷팅 수정이 포함됩니다.

Changes

Platform Dashboard API Integration

Layer / File(s) Summary
Type Definitions & Data Contracts
src/types/dashboard/platform.ts
IAdStatusDatastartDate, endDate 필드 추가. IAdCountParams 인터페이스 신규 추가로 광고 소재 현황 쿼리 파라미터 정의.
API Client
src/api/dashboard/platform.ts
/api/dashboard/{orgId}/ad-count 엔드포인트로 GET 요청하는 getAdCount 함수 추가. 선택적 쿼리 파라미터 지원하고 IAdStatusData 반환.
Data Fetching Hooks
src/hooks/dashboard/usePlatformRoasRankings.ts, src/hooks/dashboard/usePlatformAdCount.ts, src/hooks/dashboard/usePlatformPerformance.ts
세 개의 새로운 훅 추가: usePlatformRoasRankings는 ROAS 랭킹 조회, usePlatformAdCount는 광고 소재 상태 조회, usePlatformPerformance는 플랫폼별 성과 지표 병렬 조회. 모두 useWorkspaceStore에서 조직 ID를 읽고 제공자 정규화(KAKAO→META) 및 조건부 쿼리 활성화(enabled: !!orgId) 적용.
Component UI Integration
src/components/dashboard/platform/AllPlatformView.tsx
세 훅으로부터 roasRankings, adStatus, platformPerformance 데이터 소비. 각 섹션마다 로딩 중 스켈레톤, 오류/빈 상태 메시지, 성공 시 데이터 기반 렌더링(TopPerformanceList, AdStatusChart, PerformanceEfficiencyChart, PlatformDetailCard 그리드) 구현.
Data Formatting & Supporting Changes
src/components/dashboard/platform/PlatformDetailCard.tsx, src/components/dashboard/charts/performanceEfficiencyChart.config.ts, src/pages/dashboard/platform/platformDashboard.mock.ts
PlatformDetailCard의 트렌드 값 포맷팅 수정: (*100).toFixed(1) 대신 Math.abs().toFixed(1) 사용. 차트 y축 series 레이블을 "클릭률"에서 "클릭률(CTR)"로 변경. adStatusMock 상수 제거.

Sequence Diagram

sequenceDiagram
  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[]
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • Seojegyeong
  • jjjsun
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목이 주요 변경 사항인 플랫폼 대시보드의 상/하단 지표 API 연동을 명확하게 요약하고 있습니다.
Description check ✅ Passed PR 설명이 템플릿 구조를 따르고 있으며, 관련 이슈(#198), 변경 사항 체크, 작업 내용(API 연동 4가지), 미완성 작업, 그리고 논의 사항을 포함하고 있습니다.
Linked Issues check ✅ Passed PR의 모든 코드 변경이 Issue #198의 요구사항을 충족합니다: 성과 우수 플랫폼(usePlatformRoasRankings), 광고 소재 현황(usePlatformAdCount), 플랫폼별 성과 효율 비교(usePlatformPerformance), 플랫폼 지표 카드 구현이 완료되었습니다.
Out of Scope Changes check ✅ Passed 모든 변경 사항이 Issue #198의 범위 내에 있습니다. 새로운 API 훅 3개, 컴포넌트 업데이트, 타입 정의, 차트 설정 변경 등 모두 플랫폼 대시보드 지표 API 연동과 관련이 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/#198

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.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions

github-actions Bot commented May 11, 2026

Copy link
Copy Markdown

📚 Storybook 배포 완료

항목 링크
📖 Storybook https://69a147b60a56365d9e2185ef-zwsyfugadw.chromatic.com/
🔍 Chromatic https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=271

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 136d470 and 196e842.

📒 Files selected for processing (9)
  • src/api/dashboard/platform.ts
  • src/components/dashboard/charts/performanceEfficiencyChart.config.ts
  • src/components/dashboard/platform/AllPlatformView.tsx
  • src/components/dashboard/platform/PlatformDetailCard.tsx
  • src/hooks/dashboard/usePlatformAdCount.ts
  • src/hooks/dashboard/usePlatformPerformance.ts
  • src/hooks/dashboard/usePlatformRoasRankings.ts
  • src/pages/dashboard/platform/platformDashboard.mock.ts
  • src/types/dashboard/platform.ts
💤 Files with no reviewable changes (1)
  • src/pages/dashboard/platform/platformDashboard.mock.ts

Comment thread src/components/dashboard/platform/AllPlatformView.tsx
Comment thread src/hooks/dashboard/usePlatformPerformance.ts Outdated
Comment thread src/hooks/dashboard/usePlatformRoasRankings.ts
@jjjsun

jjjsun commented May 11, 2026

Copy link
Copy Markdown
Collaborator

P4: 확인했습니다! 고생하셨어요!

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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

📥 Commits

Reviewing files that changed from the base of the PR and between 196e842 and f07cabd.

📒 Files selected for processing (1)
  • src/hooks/dashboard/usePlatformPerformance.ts

@jjjsun jjjsun left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P4: 수정사항 확인했습니다!

@YermIm
YermIm merged commit e0ddc9d into develop May 13, 2026
4 checks passed
@YermIm
YermIm deleted the feature/#198 branch May 13, 2026 06:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📬 API 서버 API 통신 ✨ Feature 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ [Feature] 플랫폼 대시보드 상단/하단 지표 API 연동

2 participants