- {item.clickRate !== undefined ? (
+ {item.clicks !== undefined ? (
<>
- {item.ctrDelta !== undefined && (
+ {item.clickDelta !== undefined && (
)}
@@ -142,7 +141,7 @@ const PlatformRoasTable = memo(function PlatformRoasTable({
{item.conversionRate !== undefined ? (
<>
{item.conversionDelta !== undefined && (
@@ -158,12 +157,12 @@ const PlatformRoasTable = memo(function PlatformRoasTable({
{/* 매출/광고비 */}
- ₩{item.revenue.toLocaleString()}
+ {M.revenue.format(item.revenue)}
- 광고비
+ {M.adSpend.label}
- ₩{item.adSpend.toLocaleString()}
+ {M.adSpend.format(item.adSpend)}
diff --git a/src/components/dashboard/platform/PlatformTrafficChart.tsx b/src/components/dashboard/platform/PlatformTrafficChart.tsx
index 80854cb7..f6120da6 100644
--- a/src/components/dashboard/platform/PlatformTrafficChart.tsx
+++ b/src/components/dashboard/platform/PlatformTrafficChart.tsx
@@ -5,6 +5,13 @@ import type { ApexOptions } from "apexcharts";
import type { TProviderType } from "@/types/dashboard/overview";
import { PLATFORM_CHART_COLORS } from "@/types/dashboard/provider";
+import {
+ formatCountChartAxis,
+ formatCountChartTooltip,
+ METRIC_REGISTRY as M,
+} from "@/utils/dashboard/metricRegistry";
+import { parseMinuteToTimestamp } from "@/utils/dashboard/parseMinuteToTimestamp";
+
import { Skeleton } from "@/components/common/skeleton/Skeleton";
import type { IClickStreamResponse } from "@/pages/dashboard/platform/platformDashboard.mock";
@@ -12,28 +19,18 @@ import type { IClickStreamResponse } from "@/pages/dashboard/platform/platformDa
interface IPlatformTrafficChartProps {
data: IClickStreamResponse | null;
platform: string;
- isLoading?: boolean;
}
const PlatformTrafficChart = memo(function PlatformTrafficChart({
data,
platform,
- isLoading,
}: IPlatformTrafficChartProps) {
- // 데이터 변환: minute 문자열 -> 타임스탬프
const seriesData = useMemo(() => {
if (!data) return [];
- return data.timeSeriesData.map((d) => {
- const year = parseInt(d.minute.slice(0, 4), 10);
- const month = parseInt(d.minute.slice(4, 6), 10) - 1;
- const day = parseInt(d.minute.slice(6, 8), 10);
- const hour = parseInt(d.minute.slice(8, 10), 10);
- const min = parseInt(d.minute.slice(10, 12), 10);
- return {
- x: new Date(year, month, day, hour, min).getTime(),
- y: d.count,
- };
- });
+ return data.timeSeriesData.map((d) => ({
+ x: parseMinuteToTimestamp(d.minute),
+ y: d.count,
+ }));
}, [data]);
// X축 범위 계산 (최근 60분)
@@ -111,12 +108,7 @@ const PlatformTrafficChart = memo(function PlatformTrafficChart({
tickAmount: 5,
labels: {
style: { colors: "var(--color-text-muted)", fontSize: "12px" },
- formatter: (val) => {
- const rounded = Math.round(val);
- if (rounded <= 0) return "";
- if (rounded < 1000) return rounded.toLocaleString();
- return `${Math.round(rounded / 1000)}K`;
- },
+ formatter: formatCountChartAxis,
},
},
grid: {
@@ -130,19 +122,22 @@ const PlatformTrafficChart = memo(function PlatformTrafficChart({
},
tooltip: {
x: { show: false },
- y: { formatter: (val) => `${val.toLocaleString()} 클릭` },
+ y: {
+ formatter: (val) =>
+ formatCountChartTooltip(val, M.clicks.chartTooltipUnit),
+ },
theme: "light",
},
};
const series = [
{
- name: "클릭수",
+ name: M.clicks.label,
data: seriesData,
},
];
- if (isLoading || !data) {
+ if (!data) {
return
;
}
diff --git a/src/components/dashboard/platform/SinglePlatformView.tsx b/src/components/dashboard/platform/SinglePlatformView.tsx
index af89a9ad..81141bf9 100644
--- a/src/components/dashboard/platform/SinglePlatformView.tsx
+++ b/src/components/dashboard/platform/SinglePlatformView.tsx
@@ -4,13 +4,16 @@ import { twMerge } from "tailwind-merge";
import type { TProviderType } from "@/types/dashboard/overview";
import { PLATFORM_CHART_COLORS } from "@/types/dashboard/provider";
-import { usePlatformBudget } from "@/hooks/dashboard/usePlatformBudget";
+import { METRIC_REGISTRY as M } from "@/utils/dashboard/metricRegistry";
+import { metricsToKpis } from "@/utils/dashboard/metricsToKpis";
+
+import { useBudget } from "@/hooks/dashboard/useBudget";
import { usePlatformMetricFacts } from "@/hooks/dashboard/usePlatformMetricFacts";
import { usePlatformMetrics } from "@/hooks/dashboard/usePlatformMetrics";
import Badge from "@/components/common/badge/Badge";
import Card from "@/components/common/card/Card";
-import StatCard, { type ITrend } from "@/components/common/card/StatCard";
+import StatCard from "@/components/common/card/StatCard";
import ChartLegend from "@/components/common/chart/ChartLegend";
import { Skeleton } from "@/components/common/skeleton/Skeleton";
import DashboardAiSummarySection from "@/components/dashboard/ai-report/components/DashboardAiSummarySection";
@@ -37,12 +40,10 @@ const PLATFORM_LOGOS: Record<
interface ISinglePlatformViewProps {
platform: TProviderType;
- isLoading: boolean;
}
export default function SinglePlatformView({
platform,
- isLoading,
}: ISinglePlatformViewProps) {
const [viewRange, setViewRange] = React.useState<7 | 30>(7);
@@ -52,37 +53,10 @@ export default function SinglePlatformView({
isError: isMetricsError,
} = usePlatformMetrics(platform);
- const toTrend = (changeRate: number): ITrend => ({
- direction: changeRate >= 0 ? "up" : "down",
- value: `${Math.abs(changeRate).toFixed(2)}%`,
- });
-
- const kpis = useMemo(() => {
- if (!platformData) return [];
-
- return [
- {
- title: "노출수",
- value: platformData.impressions.toLocaleString(),
- trend: toTrend(platformData.impressionChangeRate),
- },
- {
- title: "클릭수 (CTR)",
- value: platformData.clicks.toLocaleString(),
- trend: toTrend(platformData.clickChangeRate),
- },
- {
- title: "전환율 (CVR)",
- value: `${platformData.conversion}%`,
- trend: toTrend(platformData.cvrChangeRate),
- },
- {
- title: "광고비 대비 매출 (ROAS)",
- value: `${platformData.ROAS}%`,
- trend: toTrend(platformData.ROASChangeRate),
- },
- ];
- }, [platformData]);
+ const kpis = useMemo(
+ () => (platformData ? metricsToKpis(platformData) : []),
+ [platformData],
+ );
const logoInfo = PLATFORM_LOGOS[platform];
@@ -90,7 +64,7 @@ export default function SinglePlatformView({
data: budget,
isLoading: isBudgetLoading,
isError: isBudgetError,
- } = usePlatformBudget(platform);
+ } = useBudget(platform);
const {
data: metricFacts,
@@ -129,11 +103,11 @@ export default function SinglePlatformView({
{/* top */}
- {isLoading || isMetricsLoading ? (
+ {isMetricsLoading ? (
Array.from({ length: 4 }).map((_, i) => (
@@ -168,7 +142,7 @@ export default function SinglePlatformView({
description={
@@ -177,7 +151,6 @@ export default function SinglePlatformView({
@@ -204,7 +177,7 @@ export default function SinglePlatformView({
)
}
>
- {isLoading || isBudgetLoading ? (
+ {isBudgetLoading ? (
@@ -257,7 +230,7 @@ export default function SinglePlatformView({
}
>
- {isLoading || isMetricFactsLoading ? (
+ {isMetricFactsLoading ? (
diff --git a/src/components/dashboard/platform/TopPerformanceList.tsx b/src/components/dashboard/platform/TopPerformanceList.tsx
index 7950089a..2b1d5916 100644
--- a/src/components/dashboard/platform/TopPerformanceList.tsx
+++ b/src/components/dashboard/platform/TopPerformanceList.tsx
@@ -1,37 +1,32 @@
-import React, { memo } from "react";
+import { memo } from "react";
import type { IRoasRanking } from "@/types/dashboard/platform";
-import { PLATFORM_MAP } from "@/types/dashboard/provider";
+import { PLATFORM_MAP, type TProviderType } from "@/types/dashboard/provider";
+import { PLATFORM_CIRCLE_LOGO_MAP } from "@/constants/dashboard/platformLogos";
+
+import { METRIC_REGISTRY as M } from "@/utils/dashboard/metricRegistry";
import { TrendBadge } from "@/components/common/card/StatCard";
-import GoogleLogo from "@/assets/logo/social-logo/circle/google-circle.svg?react";
-import MetaLogo from "@/assets/logo/social-logo/circle/meta-circle.svg?react";
-import NaverLogo from "@/assets/logo/social-logo/circle/naver-circle.svg?react";
+function toProviderType(provider: string): TProviderType | null {
+ const key = provider.toUpperCase();
+ if (key in PLATFORM_MAP) return key as TProviderType;
+ return null;
+}
interface ITopPerformanceListProps {
rankings: IRoasRanking[];
}
-const PlatformInfo: Record
= {
- GOOGLE: {
- name: PLATFORM_MAP.GOOGLE,
- logo: ,
- },
- NAVER: { name: PLATFORM_MAP.NAVER, logo: },
- META: { name: PLATFORM_MAP.META, logo: },
-};
-
export const TopPerformanceList = memo(function TopPerformanceList({
rankings,
}: ITopPerformanceListProps) {
return (
{rankings.map((item) => {
- const info = PlatformInfo[item.provider] || {
- name: item.provider,
- logo: null,
- };
+ const key = toProviderType(item.provider);
+ const Logo = key ? PLATFORM_CIRCLE_LOGO_MAP[key] : null;
+ const name = key ? PLATFORM_MAP[key] : item.provider;
return (
@@ -39,19 +34,21 @@ export const TopPerformanceList = memo(function TopPerformanceList({
{item.rank}
-
{info.logo}
+
+ {Logo && }
+
- {info.name}
+ {name}
- {item.roas.toFixed(2)}%
+ {M.roas.format(item.roas)}
{item.diffRate !== null && item.diffRate !== 0 && (
0 ? "up" : "down"}
- value={`${Math.abs(item.diffRate)}%`}
+ value={M.roas.formatDelta(item.diffRate)}
/>
)}
diff --git a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
index d644fe8c..745de75f 100644
--- a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
+++ b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
@@ -62,11 +62,6 @@ export function PerformanceEfficiencyChartSkeleton() {
);
}
-// 실시간 트래픽 변화
-export function TrafficChartSkeleton() {
- return
;
-}
-
export function BadgeSkeleton({ className }: { className?: string }) {
return
;
}
diff --git a/src/components/integration/NaverConnectModal.tsx b/src/components/integration/NaverConnectModal.tsx
new file mode 100644
index 00000000..248760d9
--- /dev/null
+++ b/src/components/integration/NaverConnectModal.tsx
@@ -0,0 +1,155 @@
+import { useEffect } from "react";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import type { z } from "zod";
+
+import type { IApiErrorResponse } from "@/types/common/common";
+
+import { naverConnectSchema } from "@/utils/auth/validation";
+
+import Button from "@/components/common/button/Button";
+import Input from "@/components/common/input/Input";
+import Modal from "@/components/common/modal/Modal";
+
+import { connectNaverAccount } from "@/api/integration/naver";
+
+type TNaverConnectFormValues = z.infer
;
+
+interface INaverConnectModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ orgId: number;
+}
+
+export default function NaverConnectModal({
+ isOpen,
+ onClose,
+ orgId,
+}: INaverConnectModalProps) {
+ const queryClient = useQueryClient();
+
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors, isValid },
+ } = useForm({
+ mode: "onChange",
+ resolver: zodResolver(naverConnectSchema),
+ defaultValues: {
+ customerId: "",
+ apiKey: "",
+ secretKey: "",
+ },
+ });
+
+ useEffect(() => {
+ if (!isOpen) {
+ reset();
+ }
+ }, [isOpen, reset]);
+
+ const connectMutation = useMutation<
+ void,
+ IApiErrorResponse,
+ TNaverConnectFormValues
+ >({
+ mutationFn: (body) => connectNaverAccount(orgId, body),
+ onSuccess: () => {
+ toast.success("네이버 광고 계정을 연동했습니다.");
+ reset();
+ onClose();
+ void queryClient.invalidateQueries({
+ queryKey: ["platform-connections", orgId],
+ });
+ },
+ onError: (error) => {
+ toast.error(error.message ?? "네이버 연동에 실패했습니다.");
+ },
+ });
+
+ const isSubmitting = connectMutation.isPending;
+
+ const handleClose = () => {
+ if (isSubmitting) return;
+ onClose();
+ };
+
+ const onSubmit: SubmitHandler = (values) => {
+ connectMutation.mutate(values);
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/integration/PlatformIntegrationCard.tsx b/src/components/integration/PlatformIntegrationCard.tsx
new file mode 100644
index 00000000..5190f520
--- /dev/null
+++ b/src/components/integration/PlatformIntegrationCard.tsx
@@ -0,0 +1,224 @@
+import { memo, type ReactNode } from "react";
+
+import { PLATFORM_MAP } from "@/types/dashboard/provider";
+import type {
+ IPlatformConnectionItem,
+ TIntegrationProvider,
+ TPlatformConnectionStatus,
+} from "@/types/integration/platformConnection";
+
+import {
+ formatConnectionDate,
+ formatConnectionDateTime,
+ getTokenExpireTone,
+} from "@/utils/integration/mapPlatformAccounts";
+
+import Badge, { type TBadgeVariant } from "@/components/common/badge/Badge";
+import Button from "@/components/common/button/Button";
+
+import GoogleLogo from "@/assets/logo/social-logo/circle/google-circle.svg?react";
+import MetaLogo from "@/assets/logo/social-logo/circle/meta-circle.svg?react";
+import NaverLogo from "@/assets/logo/social-logo/circle/naver-circle.svg?react";
+
+const PLATFORM_LOGOS: Record = {
+ GOOGLE: ,
+ NAVER: ,
+ META: ,
+};
+
+const STATUS_LABEL: Record = {
+ disconnected: "미연동",
+ connected: "연동됨",
+ error: "연동 오류",
+};
+
+const CONNECTION_STATUS_BADGE: Record<
+ TPlatformConnectionStatus,
+ TBadgeVariant
+> = {
+ connected: "infoBlue",
+ error: "infoRed",
+ disconnected: "surface",
+};
+
+const TOKEN_EXPIRE_TEXT: Record<
+ ReturnType,
+ string
+> = {
+ default: "text-text-title",
+ warning: "text-info-yellow",
+ expired: "text-info-red/80",
+};
+
+type TProps = IPlatformConnectionItem & {
+ onConnect?: () => void;
+ onReconnect?: () => void;
+ onDisconnect?: () => void;
+};
+
+function PlatformConnectionMeta({
+ status,
+ syncedAt,
+ externalAccountId,
+ tokenExpireAt,
+}: Pick<
+ IPlatformConnectionItem,
+ "status" | "syncedAt" | "externalAccountId" | "tokenExpireAt"
+>) {
+ const syncedLabel = formatConnectionDateTime(syncedAt);
+ const expireLabel = formatConnectionDate(tokenExpireAt);
+ const expireTone = getTokenExpireTone(tokenExpireAt);
+
+ return (
+
+ {status === "disconnected" ? (
+ <>
+
+ 마지막 동기화 ·
+ —
+
+
+ 연동 계정 ·
+ —
+
+
+ 토큰 만료 예정 ·
+ —
+
+
+ ) : (
+ <>
+ {syncedLabel ? (
+
+ 마지막 동기화 ·
+ {syncedLabel}
+
+ ) : null}
+
+ {externalAccountId ? (
+
+ 연동 계정 ·
+
+ {externalAccountId}
+
+
+ ) : null}
+
+ {expireLabel ? (
+
+ 토큰 만료 예정 ·
+
+ {expireLabel}
+
+
+ ) : null}
+
+ )}
+
+
+
+
{PLATFORM_LOGOS[provider]}
+
+ {label}
+
+
+
+ {STATUS_LABEL[status]}
+
+
+
+
+
+ {status === "error" && errorMessage ? (
+
+ {errorMessage}
+
+ ) : null}
+
+
+
+
+ {status === "disconnected" ? (
+
+ 광고 계정을 연동하면 대시보드와 캠페인에서 데이터를 확인할 수
+ 있습니다.
+
+ ) : null}
+
+
+ {status === "disconnected" ? (
+
+ ) : null}
+
+ {status === "connected" ? (
+ <>
+
+
+
+ ) : null}
+
+ {status === "error" ? (
+
+ ) : null}
+
+
+
+
+
+
+ {icon ?? (
+
+ ?
+
+ )}
+
+
+ {title}
+
+
+
+
+ {badgeText}
+
+
+
+
{description}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: SKELETON_COUNT }, (_, i) => (
+ -
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 1ea18460..59726e19 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,5 +1,6 @@
import type { Dispatch, FocusEvent, SetStateAction } from "react";
import { useCallback, useMemo } from "react";
+import { useParams } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import { twMerge } from "tailwind-merge";
@@ -12,12 +13,20 @@ import { isPathMatch } from "@/utils/navigation/pathMatch";
import { applyWorkspacePathsToNav } from "@/utils/navigation/workspaceNavPaths";
import { useComingSoon } from "@/hooks/common/useComingSoon";
+import { useCoreQuery } from "@/hooks/customQuery";
+import {
+ needsIntegrationAttention,
+ usePlatformConnections,
+} from "@/hooks/integration/usePlatformConnections";
import { useSidebar } from "@/hooks/sidebar/useSidebar";
+import Badge from "@/components/common/badge/Badge";
+
import { SidebarItem } from "./SidebarItem";
import { SubMenu } from "./SubMenu";
import { WorkspaceSwitcher } from "./WorkspaceSwitcher";
+import { getMyWorkspaces } from "@/api/workspace/org";
import CollapseIcon from "@/assets/icon/chevron/chervon-left.svg?react";
import ChevronIcon from "@/assets/icon/chevron/chevron-up.svg?react";
import useWorkspaceStore from "@/store/useWorkspaceStore";
@@ -87,7 +96,31 @@ export default function Sidebar() {
const { showComingSoon } = useComingSoon();
const selectedOrgId = useWorkspaceStore((s) => s.selectedOrgId);
- const myRole = useWorkspaceStore((s) => s.myRole);
+ const myRoleFromStore = useWorkspaceStore((s) => s.myRole);
+ const { workspaceId } = useParams<{ workspaceId: string }>();
+ const { data: workspaces } = useCoreQuery(["my-workspaces"], getMyWorkspaces);
+
+ const myRole = useMemo(() => {
+ if (!workspaces) return null;
+
+ const parsedWorkspaceId = workspaceId ? Number(workspaceId) : null;
+ const getRoleByOrgId = (orgId: number | null) => {
+ if (orgId == null || !Number.isFinite(orgId) || orgId <= 0) return null;
+ return workspaces.find((w) => w.orgId === orgId)?.myRole ?? null;
+ };
+
+ return (
+ getRoleByOrgId(parsedWorkspaceId) ??
+ getRoleByOrgId(selectedOrgId) ??
+ myRoleFromStore
+ );
+ }, [workspaceId, selectedOrgId, workspaces, myRoleFromStore]);
+
+ const { data: platformConnections } = usePlatformConnections();
+ const showIntegrationsAttention = useMemo(
+ () => needsIntegrationAttention(platformConnections),
+ [platformConnections],
+ );
const mainNavWithWorkspace = useMemo(
() =>
filterNavByRole(applyWorkspacePathsToNav(mainNav, selectedOrgId), myRole),
@@ -216,6 +249,13 @@ export default function Sidebar() {
isCollapsed={isCollapsed}
className="w-full h-full"
onClick={handleFooterItemClick}
+ trailing={
+ item.id === "integrations" &&
+ showIntegrationsAttention &&
+ !isCollapsed ? (
+ 연동 필요
+ ) : undefined
+ }
/>
- {Icon && (
-
- )}
-
+ const itemClassName = twMerge(
+ className,
+ "flex items-center",
+ isCollapsed ? "justify-center" : "",
+ );
+
+ const content = isCollapsed ? (
+ Icon ? (
+
+ ) : null
+ ) : (
+
+ {Icon ? : null}
+
{item.label}
+ {trailing ? {trailing} : null}
);
@@ -49,7 +48,7 @@ export const SidebarItem = memo(function SidebarItem({
return (
{
if (e.defaultPrevented) return;
onClick(item.id, hasChildren);
@@ -65,7 +64,7 @@ export const SidebarItem = memo(function SidebarItem({
type="button"
aria-haspopup={hasChildren ? "menu" : undefined}
aria-expanded={hasChildren ? isOpen : undefined}
- className={twMerge(className, "flex items-center text-left")}
+ className={twMerge(itemClassName, "text-left")}
onClick={(e) => {
if (e.defaultPrevented) return;
onClick(item.id, hasChildren);
diff --git a/src/components/sidebar/WorkspaceSwitcher.tsx b/src/components/sidebar/WorkspaceSwitcher.tsx
index aa43a458..48d6cda4 100644
--- a/src/components/sidebar/WorkspaceSwitcher.tsx
+++ b/src/components/sidebar/WorkspaceSwitcher.tsx
@@ -11,6 +11,7 @@ import { useCoreQuery } from "@/hooks/customQuery";
import { getMyWorkspaces, saveSelectedWorkspace } from "@/api/workspace/org";
import ChevronIcon from "@/assets/icon/chevron/chevron-up.svg?react";
+import { QUERY_KEYS } from "@/lib/queryKeys";
import useWorkspaceStore from "@/store/useWorkspaceStore";
export function WorkspaceSwitcher({
@@ -30,7 +31,7 @@ export function WorkspaceSwitcher({
const setMyRole = useWorkspaceStore((s) => s.setMyRole);
const { data: workspaces, isPending } = useCoreQuery(
- ["my-workspaces"],
+ QUERY_KEYS.workspace.list(),
getMyWorkspaces,
);
@@ -62,11 +63,15 @@ export function WorkspaceSwitcher({
const workspace = workspaceList.find((w) => w.orgId === orgId);
setSelectedOrgId(orgId);
if (workspace) setMyRole(workspace.myRole);
- setIsOpen(false);
await Promise.all([
- queryClient.invalidateQueries({ queryKey: ["my-workspaces"] }),
- queryClient.invalidateQueries({ queryKey: ["savedWorkspace"] }),
+ queryClient.invalidateQueries({
+ queryKey: QUERY_KEYS.workspace.list(),
+ }),
+ queryClient.invalidateQueries({
+ queryKey: QUERY_KEYS.workspace.saved(),
+ }),
]);
+ setIsOpen(false);
},
onError: (error) => {
console.error("워크스페이스 저장 실패:", error);
diff --git a/src/components/timeline/TimelineAxis.tsx b/src/components/timeline/TimelineAxis.tsx
new file mode 100644
index 00000000..325b762a
--- /dev/null
+++ b/src/components/timeline/TimelineAxis.tsx
@@ -0,0 +1,54 @@
+import { twMerge } from "tailwind-merge";
+
+import type { ITimelineGridColumn } from "@/types/timeline/ui";
+import {
+ TIMELINE_AXIS_HEIGHT,
+ TIMELINE_COL_WIDTH,
+} from "@/constants/timeline/layout";
+
+interface ITimelineAxisProps {
+ columns: ITimelineGridColumn[];
+ colWidth?: number;
+ className?: string;
+}
+
+export default function TimelineAxis({
+ columns,
+ colWidth = TIMELINE_COL_WIDTH,
+ className,
+}: ITimelineAxisProps) {
+ return (
+
+ {columns.map((column, index) => (
+
+
+ {column.day}
+
+ {column.isToday ? (
+
+ {column.date}
+
+ ) : (
+ {column.date}
+ )}
+
+ ))}
+
onBarClick?.(bar)}
+ style={{ left, top, width, height: TIMELINE_BAR_HEIGHT }}
+ >
+
+
+ {bar.title}
+
+ {bar.subtitle}
+
+
+
+ {status.label}
+
+
+
+
+
+
+
+
+
+
+ {bars.map((bar) => (
+
+ ))}
+
+
+
+
+
+ {columns.map((column, i) => (
+
+ ))}
+ {children}
+
+
+
+
+ setOpen(false)}
+ data={TIMELINE_SUMMARY_PANEL_NO_AI_MOCK}
+ onEdit={fn()}
+ onDelete={fn()}
+ />
+
+ );
+}
+
+export const Closed: TStory = {
+ render: () => ,
+};
+
+export const Open: TStory = {
+ args: {
+ isOpen: true,
+ data: TIMELINE_SUMMARY_PANEL_NO_AI_MOCK,
+ },
+};
+
+export const OpenWithSummary: TStory = {
+ args: {
+ isOpen: true,
+ data: TIMELINE_SUMMARY_PANEL_MOCK,
+ },
+};
+
+function InteractivePreview() {
+ const [open, setOpen] = useState(true);
+ return (
+ setOpen(false)}
+ data={TIMELINE_SUMMARY_PANEL_MOCK}
+ onEdit={fn()}
+ onDelete={fn()}
+ />
+ );
+}
+
+export const Interactive: TStory = {
+ render: () => ,
+};
diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
new file mode 100644
index 00000000..b7e856a8
--- /dev/null
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -0,0 +1,371 @@
+import type { FC, SVGProps } from "react";
+import { useEffect, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+import type { TProviderType } from "@/types/dashboard/provider";
+import type { ITimelineSummaryPanelData } from "@/types/timeline/summary";
+import type { TTimelineViewUnit } from "@/types/timeline/ui";
+import { TIMELINE_PERFORMANCE_STATUS_STYLE } from "@/constants/timeline/statusStyle";
+
+import Badge from "@/components/common/badge/Badge";
+import Button from "@/components/common/button/Button";
+import ChartLegend from "@/components/common/chart/ChartLegend";
+import Drawer from "@/components/common/drawer/Drawer";
+import { DropdownMenu } from "@/components/common/dropdownmenu/DropdownMenu";
+import { Skeleton } from "@/components/common/skeleton/Skeleton";
+import TimelinePeriodSelector from "@/components/timeline/TimelinePeriodSelector";
+
+import ChevronRightIcon from "@/assets/icon/chevron/chevron-right.svg?react";
+import MoreIcon from "@/assets/icon/common/more.svg?react";
+import TrashIcon from "@/assets/icon/common/trash.svg?react";
+import GoogleWordmark from "@/assets/logo/social-logo/wordmark/google-wordmark.svg?react";
+import MetaWordmark from "@/assets/logo/social-logo/wordmark/meta-wordmark.svg?react";
+import NaverWordmark from "@/assets/logo/social-logo/wordmark/naver-wordmark.svg?react";
+
+type TAiSummaryUiState = "idle" | "loading" | "done";
+
+const AI_SUMMARY_LOADING_MS = 1500;
+
+const CHART_PERIOD_LABELS = ["오늘", "1월 21일 → 25일", "1월 14일 → 20일"];
+
+const SECTION_SHELL_CLASS =
+ "rounded-3xl border border-surface-300/70 bg-surface-100";
+
+const SECTION_INNER_CLASS = "flex flex-col gap-5 px-6 py-6";
+
+const SOFT_CARD_CLASS = "rounded-2xl bg-surface-100 shadow-Soft";
+
+const PLATFORM_WORDMARKS: Record<
+ TProviderType,
+ { Logo: FC>; className: string; label: string }
+> = {
+ GOOGLE: {
+ Logo: GoogleWordmark,
+ className: "h-5 w-auto",
+ label: "Google",
+ },
+ NAVER: {
+ Logo: NaverWordmark,
+ className: "h-4 w-auto",
+ label: "NAVER",
+ },
+ META: {
+ Logo: MetaWordmark,
+ className: "h-3.5 w-auto",
+ label: "Meta",
+ },
+};
+
+const SECTION_TITLE_CLASS = "font-heading4 text-text-title";
+
+interface ITimelinePerformancePanelProps {
+ isOpen: boolean;
+ onClose: () => void;
+ data: ITimelineSummaryPanelData;
+ onEdit?: () => void;
+ onDelete?: () => void;
+ className?: string;
+}
+
+function formatMetricValue(value: number, unit?: string) {
+ const formatted = Number.isInteger(value)
+ ? value.toLocaleString()
+ : value.toFixed(2);
+ return unit ? `${formatted}${unit}` : formatted;
+}
+
+function formatChangeRate(changeRate: number) {
+ return `${Math.abs(changeRate * 100).toFixed(1)}%`;
+}
+
+function PlatformContributionRow({
+ provider,
+ value,
+}: {
+ provider: TProviderType;
+ value: number;
+}) {
+ const {
+ Logo,
+ className: logoClassName,
+ label,
+ } = PLATFORM_WORDMARKS[provider];
+ const progress = Math.min(Math.max(value, 0), 100);
+
+ return (
+
+ );
+}
+
+export default function TimelinePerformancePanel({
+ isOpen,
+ onClose,
+ data,
+ onEdit,
+ onDelete,
+ className,
+}: ITimelinePerformancePanelProps) {
+ const [aiState, setAiState] = useState("idle");
+ const [generatedSummary, setGeneratedSummary] = useState("");
+ const summaryTimerRef = useRef(null);
+ const [viewUnit, setViewUnit] = useState("WEEK");
+ const [chartPeriodIndex, setChartPeriodIndex] = useState(0);
+
+ const statusStyle = TIMELINE_PERFORMANCE_STATUS_STYLE[data.performanceStatus];
+ const chartPeriodLabel =
+ CHART_PERIOD_LABELS[chartPeriodIndex] ?? CHART_PERIOD_LABELS[0];
+
+ useEffect(() => {
+ if (!isOpen) return;
+ setAiState(data.aiSummary.trim() ? "done" : "idle");
+ setGeneratedSummary("");
+ }, [isOpen, data.aiSummary]);
+
+ useEffect(() => {
+ return () => {
+ if (summaryTimerRef.current !== null) {
+ window.clearTimeout(summaryTimerRef.current);
+ }
+ };
+ }, []);
+ const handleGenerateSummary = () => {
+ setAiState("loading");
+ summaryTimerRef.current = window.setTimeout(() => {
+ setGeneratedSummary(
+ data.aiSummary.trim() || "AI 요약이 생성되었습니다.(API연동전 임시)",
+ );
+ setAiState("done");
+ }, AI_SUMMARY_LOADING_MS);
+ };
+
+ const handlePrevChartPeriod = () => {
+ setChartPeriodIndex((prev) =>
+ prev === 0 ? CHART_PERIOD_LABELS.length - 1 : prev - 1,
+ );
+ };
+
+ const handleNextChartPeriod = () => {
+ setChartPeriodIndex((prev) =>
+ prev === CHART_PERIOD_LABELS.length - 1 ? 0 : prev + 1,
+ );
+ };
+
+ const menuItems = [
+ {
+ label: "삭제하기",
+ icon: ,
+ danger: true,
+ labelClassName: "text-info-red",
+ onClick: () => onDelete?.(),
+ },
+ {
+ label: "수정하기",
+ onClick: () => onEdit?.(),
+ },
+ ];
+
+ return (
+
+
+ {/* 헤더 */}
+
+
+
+ }
+ aria-label="더보기"
+ items={menuItems}
+ className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg transition-colors hover:bg-surface-200"
+ />
+
+
+ {data.timelineName}
+
+
+
+ 기간
+
+ {data.periodLabel}
+
+
+
+
+ 성과 상태
+
+
+ {statusStyle.label}
+
+
+
+
+
성과 지표
+
+ {data.metrics.map((metric) => (
+
+ {metric.label}
+
+ ))}
+
+
+
+
+ {/* AI 요약 */}
+
+ {aiState === "idle" && (
+
+ )}
+
+ {aiState === "loading" && (
+
+
+
+
+
+ )}
+
+ {aiState === "done" && (data.aiSummary || generatedSummary) && (
+
+ {data.aiSummary || generatedSummary}
+
+ )}
+
+
+ {/* KPI — 선택한 지표 수만큼 가로 균등 분할 */}
+
+ {data.metrics.map((metric) => (
+
+
+
+ {metric.label}
+
+
+ {formatMetricValue(metric.value, metric.unit)}
+
+ {metric.changeRate !== undefined && (
+ = 0
+ ? "text-info-red"
+ : "text-info-blue",
+ )}
+ >
+ {metric.changeRate >= 0 ? "▲" : "▼"}{" "}
+ {formatChangeRate(metric.changeRate)}
+
+ )}
+
+
+ ))}
+
+
+ {/* 차트 placeholder */}
+
+
+
+
+
+ 차트 영역 (ApexChart 연동예정)
+
+
+
+
+ {/* 플랫폼 기여 */}
+
+
+
플랫폼 기여 정보
+
+ {data.platformShare.map(({ provider, contributionRate }) => (
+
+ ))}
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type TStory = StoryObj;
+export const Default: TStory = {};
+
+function InteractivePreview() {
+ const [viewUnit, setViewUnit] = useState("WEEK");
+ const [index, setIndex] = useState(0);
+
+ const labels = MOCK_PERIOD_LABELS[viewUnit];
+ const periodLabel = labels[index] ?? labels[0];
+
+ const handleViewUnitChange = (unit: TTimelineViewUnit) => {
+ setViewUnit(unit);
+ setIndex(0);
+ };
+
+ const handlePrev = () => {
+ setIndex((prev) => (prev === 0 ? labels.length - 1 : prev - 1));
+ };
+
+ const handleNext = () => {
+ setIndex((prev) => (prev === labels.length - 1 ? 0 : prev + 1));
+ };
+
+ return (
+
+ );
+}
+
+export const Interactive: TStory = {
+ render: () => ,
+};
diff --git a/src/components/timeline/TimelinePeriodSelector.tsx b/src/components/timeline/TimelinePeriodSelector.tsx
new file mode 100644
index 00000000..e53a215f
--- /dev/null
+++ b/src/components/timeline/TimelinePeriodSelector.tsx
@@ -0,0 +1,127 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+import type { TTimelineViewUnit } from "@/types/timeline/ui";
+import { TIMELINE_VIEW_UNIT_OPTIONS } from "@/constants/timeline/viewUnit";
+
+import ChevronLeftIcon from "@/assets/icon/chevron/chervon-left.svg?react";
+import ChevronDownIcon from "@/assets/icon/chevron/chevron-down.svg?react";
+import ChevronRightIcon from "@/assets/icon/chevron/chevron-right.svg?react";
+
+interface ITimelinePeriodSelectorProps {
+ viewUnit: TTimelineViewUnit;
+ periodLabel: string;
+ onViewUnitChange: (unit: TTimelineViewUnit) => void;
+ onPrevPeriod: () => void;
+ onNextPeriod: () => void;
+ className?: string;
+}
+
+export default function TimelinePeriodSelector({
+ viewUnit,
+ periodLabel,
+ onViewUnitChange,
+ onPrevPeriod,
+ onNextPeriod,
+ className,
+}: ITimelinePeriodSelectorProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const containerRef = useRef(null);
+ const menuId = useId();
+
+ const selectedLabel =
+ TIMELINE_VIEW_UNIT_OPTIONS.find((option) => option.value === viewUnit)
+ ?.label ?? "주";
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (!containerRef.current?.contains(event.target as Node)) {
+ setIsOpen(false);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
+
+ const handleSelectViewUnit = (unit: TTimelineViewUnit) => {
+ onViewUnitChange(unit);
+ setIsOpen(false);
+ };
+
+ return (
+
+ {/* 기간 이동 */}
+
+
+ {periodLabel}
+
+
+
+
+ {isOpen ? (
+
+ ) : null}
+
+
{headerRight}
{isKpisError ? (
-
+
{kpisError?.message ??
"지표 데이터를 불러오지 못했습니다. 잠시 후 다시 시도해 주세요."}
@@ -56,7 +58,7 @@ export function OverviewKpiSection({
description={
diff --git a/src/pages/dashboard/platform/PlatformDashboard.tsx b/src/pages/dashboard/platform/PlatformDashboard.tsx
index 410a92a1..1eb72fe9 100644
--- a/src/pages/dashboard/platform/PlatformDashboard.tsx
+++ b/src/pages/dashboard/platform/PlatformDashboard.tsx
@@ -21,7 +21,6 @@ type TDashboardHeaderContext = {
export default function PlatformDashboard() {
const [selectedPlatform, setSelectedPlatform] =
useState
("전체");
- const [isLoading, setIsLoading] = useState(true);
const { setHeaderRight } = useOutletContext();
const isAllView = selectedPlatform === "전체";
@@ -40,11 +39,6 @@ export default function PlatformDashboard() {
? "플랫폼 선택"
: PLATFORM_MAP[selectedPlatform];
- useEffect(() => {
- const timer = setTimeout(() => setIsLoading(false), 1600);
- return () => clearTimeout(timer);
- }, []);
-
useEffect(() => {
if (!setHeaderRight) return;
@@ -103,9 +97,9 @@ export default function PlatformDashboard() {
return (
{isAllView ? (
-
+
) : (
-
+
)}
);
diff --git a/src/pages/dashboard/platform/platformDashboard.mock.ts b/src/pages/dashboard/platform/platformDashboard.mock.ts
index d5a5f72d..8f6b380d 100644
--- a/src/pages/dashboard/platform/platformDashboard.mock.ts
+++ b/src/pages/dashboard/platform/platformDashboard.mock.ts
@@ -1,100 +1,3 @@
-import type {
- IBudgetStatus,
- IPlatformPerformance,
- IRoasRanking,
-} from "@/types/dashboard/platform";
-
-// 성과 우수 플랫폼
-export const roasRankingMock: IRoasRanking[] = [
- {
- rank: 1,
- provider: "GOOGLE",
- roas: 67.08,
- diffRate: 12,
- revenue: 12345678,
- adSpend: 184000,
- },
- {
- rank: 2,
- provider: "NAVER",
- roas: 19.11,
- diffRate: 12,
- revenue: 8500000,
- adSpend: 444000,
- },
- {
- rank: 3,
- provider: "META",
- roas: 10.98,
- diffRate: 5.4,
- revenue: 5200000,
- adSpend: 472000,
- },
-];
-
-// 플랫폼별 성과 효율 비교
-export const performanceEfficiencyMock: IPlatformPerformance[] = [
- {
- provider: "GOOGLE",
- clicks: 12100,
- clickChangeRate: 0.1,
- impressions: 450000,
- impressionChangeRate: 0.05,
- conversion: 5.8,
- cvrChangeRate: 0.02,
- ROAS: 67.08,
- ROASChangeRate: 0.12,
- },
- {
- provider: "NAVER",
- clicks: 8500,
- clickChangeRate: -0.05,
- impressions: 580000,
- impressionChangeRate: 0.1,
- conversion: 3.2,
- cvrChangeRate: 0.01,
- ROAS: 19.11,
- ROASChangeRate: -0.05,
- },
- {
- provider: "META",
- clicks: 15600,
- clickChangeRate: 0.15,
- impressions: 320000,
- impressionChangeRate: 0.2,
- conversion: 8.5,
- cvrChangeRate: 0.08,
- ROAS: 10.98,
- ROASChangeRate: 0.05,
- },
-];
-
-// 예산 소진 현황
-export const budgetStatusMock: IBudgetStatus[] = [
- {
- providerType: "GOOGLE",
- usagePercentage: 0.75,
- totalBudget: 10000000,
- totalSpend: 7500000,
- remainingBudget: 2500000,
- },
- {
- providerType: "NAVER",
- usagePercentage: 0.42,
- totalBudget: 10000000,
- totalSpend: 4200000,
- remainingBudget: 5800000,
- },
- {
- providerType: "META",
- usagePercentage: 0.92,
- totalBudget: 10000000,
- totalSpend: 9200000,
- remainingBudget: 800000,
- },
-];
-
-// 실시간 트래픽 데이터 추가
export interface ITimeSeriesData {
minute: string; // YYYYMMDDHHmm
count: number;
@@ -130,9 +33,8 @@ const generateRealTimeTraffic = (
targetDate.getHours().toString().padStart(2, "0") +
targetDate.getMinutes().toString().padStart(2, "0");
- // 시간 흐름에 따른 파동 + 랜덤성 부여
- const wave = Math.sin(targetDate.getTime() / (1000 * 60 * 12)) * 0.4; // 12분 주기의 파동
- const random = (Math.random() - 0.5) * 0.3; // ±15% 랜덤 변동
+ const wave = Math.sin(targetDate.getTime() / (1000 * 60 * 12)) * 0.4;
+ const random = (Math.random() - 0.5) * 0.3;
const count = Math.max(10, Math.floor(baseCount * (1 + wave + random)));
timeSeriesData.push({
@@ -141,7 +43,6 @@ const generateRealTimeTraffic = (
});
}
- // 이상 징후
return {
timeSeriesData,
mode: "dummy",
diff --git a/src/pages/integration/PlatformIntegrationsPage.tsx b/src/pages/integration/PlatformIntegrationsPage.tsx
new file mode 100644
index 00000000..95b24d8d
--- /dev/null
+++ b/src/pages/integration/PlatformIntegrationsPage.tsx
@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { toast } from "sonner";
+
+import type { IApiErrorResponse } from "@/types/common/common";
+import type {
+ TIntegrationProvider,
+ TPlatformConnectionStatus,
+} from "@/types/integration/platformConnection";
+
+import { startPlatformConnect } from "@/utils/integration/startPlatformConnect";
+
+import { usePlatformConnections } from "@/hooks/integration/usePlatformConnections";
+
+import NaverConnectModal from "@/components/integration/NaverConnectModal";
+import PlatformIntegrationCard from "@/components/integration/PlatformIntegrationCard";
+import PlatformIntegrationsPageSkeleton from "@/components/integration/skeleton/PlatformIntegrationsSkeleton";
+import {
+ ComingSoonUpcomingCard,
+ KakaoUpcomingCard,
+} from "@/components/integration/UpcomingPlatformCard";
+
+import useWorkspaceStore from "@/store/useWorkspaceStore";
+
+export default function PlatformIntegrationsPage() {
+ const orgId = useWorkspaceStore((s) => s.selectedOrgId);
+ const [isNaverModalOpen, setIsNaverModalOpen] = useState(false);
+
+ const {
+ data: platformConnections = [],
+ isLoading,
+ isError,
+ error,
+ } = usePlatformConnections();
+
+ const handleConnect = async (
+ provider: TIntegrationProvider,
+ status: TPlatformConnectionStatus,
+ ) => {
+ if (orgId == null) {
+ toast.error("워크스페이스를 선택해 주세요.");
+ return;
+ }
+ if (provider === "NAVER") {
+ if (status !== "disconnected") {
+ toast.message("네이버 재연동 구현 예정");
+ return;
+ }
+ setIsNaverModalOpen(true);
+ return;
+ }
+ try {
+ await startPlatformConnect(provider, orgId);
+ } catch (err) {
+ const message =
+ err instanceof Error
+ ? err.message
+ : ((err as IApiErrorResponse)?.message ??
+ "플랫폼 연동을 시작하지 못했습니다. 다시 시도해 주세요.");
+ toast.error(message);
+ }
+ };
+
+ return (
+
+ {isLoading ? (
+
+ ) : isError ? (
+
+
+ {error?.message ??
+ "플랫폼 연동 정보를 불러오지 못했습니다. 잠시 후 다시 시도해 주세요."}
+
+
+ {platformConnections.map((item) => (
+ -
+ handleConnect(item.provider, item.status)}
+ onReconnect={() => handleConnect(item.provider, item.status)}
+ onDisconnect={() => toast.message("연결 해제")}
+ />
+
+ ))}
+
+
+
+
+ 더 많은 플랫폼 연동을 준비하고 있어요. 지원 범위는 변경될 수
+ 있습니다.
+
+
+
+