[Refactor/#239] 지표 메타데이터 Registry 중앙화 및 지표 포맷 통합

src/components/auth/common/CommonAuthInput.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import formatPhoneNumber from "@/utils/formatPhoneNumber";
+import formatPhoneNumber from "@/utils/auth/formatPhoneNumber";
 
 import Input, { type IInputProps } from "@/components/common/input/Input";
 

src/components/auth/common/PasswordForm.tsx

@@ -3,7 +3,7 @@ import { type SubmitHandler, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { z } from "zod";
 
-import { signupPasswordSchema } from "@/utils/validation";
+import { signupPasswordSchema } from "@/utils/auth/validation";
 
 import AuthFormShell from "@/components/auth/common/AuthFormShell";
 import CommonAuthInput from "@/components/auth/common/CommonAuthInput";

src/components/auth/flows/find-email/EnterPhoneStep.tsx

@@ -5,8 +5,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "sonner";
 import type { z } from "zod";
 
-import { stripPhoneHyphens } from "@/utils/formatPhoneNumber";
-import { findEmailSchema } from "@/utils/validation";
+import { stripPhoneHyphens } from "@/utils/auth/formatPhoneNumber";
+import { findEmailSchema } from "@/utils/auth/validation";
 
 import { useAuth } from "@/hooks/auth/useAuth";
 import { useTimer } from "@/hooks/common/useTimer";

src/components/auth/flows/find-email/ShowEmailResultStep.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 
-import { maskEmail } from "@/utils/maskEmail";
+import { maskEmail } from "@/utils/auth/maskEmail";
 
 import AuthFormShell from "@/components/auth/common/AuthFormShell";
 import Button from "@/components/common/button/Button";

src/components/auth/flows/signup/ProfileSetupStep.tsx

@@ -5,8 +5,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "sonner";
 import type { z } from "zod";
 
-import { stripPhoneHyphens } from "@/utils/formatPhoneNumber";
-import { signupProfileSchema } from "@/utils/validation";
+import { stripPhoneHyphens } from "@/utils/auth/formatPhoneNumber";
+import { signupProfileSchema } from "@/utils/auth/validation";
 
 import { useAuth } from "@/hooks/auth/useAuth";
 

src/components/dashboard/charts/BudgetGaugeChart.tsx

@@ -1,6 +1,8 @@
 import { memo } from "react";
 import { twMerge } from "tailwind-merge";
 
+import { METRIC_REGISTRY as M } from "@/utils/dashboard/metricRegistry";
+
 import { useIsMounted } from "@/hooks/common/useIsMounted";
 
 import { type TBadgeVariant } from "@/components/common/badge/Badge";
@@ -118,8 +120,8 @@ const BudgetGaugeChart = memo(function BudgetGaugeChart({
         </div>
 
         <div className="mt-3 flex items-center justify-between font-body2 text-text-body">
-          <span className="tabular-nums">₩{spent.toLocaleString()}</span>
-          <span className="tabular-nums">₩{totalBudget.toLocaleString()}</span>
+          <span className="tabular-nums">{M.spend.format(spent)}</span>
+          <span className="tabular-nums">{M.spend.format(totalBudget)}</span>
         </div>
       </div>
 
@@ -132,7 +134,8 @@ const BudgetGaugeChart = memo(function BudgetGaugeChart({
               isOverBudget && "text-info-red",
             )}
           >
-            {isOverBudget ? "-" : ""}₩{remaining.toLocaleString()}
+            {isOverBudget ? "-" : ""}
+            {M.spend.format(remaining)}
           </span>
         </div>
 

src/components/dashboard/charts/PerformanceEfficiencyChart.tsx

@@ -3,6 +3,8 @@ import { lazy, memo, Suspense, useMemo } from "react";
 import type { IPlatformPerformance } from "@/types/dashboard/platform";
 import { PLATFORM_MAP } from "@/types/dashboard/provider";
 
+import { METRIC_REGISTRY as M } from "@/utils/dashboard/metricRegistry";
+
 import { getMixedChartOptions } from "./performanceEfficiencyChart.config";
 
 const Chart = lazy(() => import("react-apexcharts"));
@@ -20,20 +22,20 @@ export const PerformanceEfficiencyChart = memo(
 
     const series = [
       {
-        name: "클릭률(CTR)",
-        type: "column", // 세로 막대
+        name: M.ctr.label,
+        type: "column",
         data: data.map((d) =>
           d.impressions > 0 ? (d.clicks / d.impressions) * 100 : 0,
         ),
       },
       {
-        name: "전환율(CVR)",
-        type: "column", // 세로 막대
+        name: M.conversion.label,
+        type: "column",
         data: data.map((d) => d.conversion),
       },
       {
-        name: "노출수",
-        type: "line", // 점
+        name: M.impressions.label,
+        type: "line",
         data: data.map((d) => d.impressions),
       },
     ];

src/components/dashboard/charts/TrafficChart.tsx

@@ -9,6 +9,7 @@ import {
   useState,
 } from "react";
 
+import { METRIC_REGISTRY as M } from "@/utils/dashboard/metricRegistry";
 import { parseMinuteToTimestamp } from "@/utils/dashboard/parseMinuteToTimestamp";
 
 import { useClickStream } from "@/hooks/dashboard/useClickStream";
@@ -198,7 +199,7 @@ const TrafficChart = memo(function TrafficChart() {
     return {
       series: [
         {
-          name: "클릭수",
+          name: M.clicks.label,
           data: chartData.map(({ x, y }) => ({ x, y })),
         },
       ],

src/components/dashboard/charts/performanceEfficiencyChart.config.ts

@@ -1,5 +1,7 @@
 import type { ApexOptions } from "apexcharts";
 
+import { METRIC_REGISTRY as M } from "@/utils/dashboard/metricRegistry";
+
 export const getMixedChartOptions = (categories: string[]): ApexOptions => ({
   chart: {
     type: "line",
@@ -44,25 +46,25 @@ export const getMixedChartOptions = (categories: string[]): ApexOptions => ({
   },
   yaxis: [
     {
-      seriesName: "클릭률(CTR)",
+      seriesName: M.ctr.label,
       labels: {
-        formatter: (val) => `${val.toFixed(1)}%`,
+        formatter: (val) => M.ctr.format(val),
         style: {
           colors: "var(--color-text-muted)",
           fontSize: "12px",
         },
       },
     },
     {
-      seriesName: "클릭률(CTR)",
+      seriesName: M.ctr.label,
       show: false,
     },
     {
       opposite: true,
-      seriesName: "노출수",
+      seriesName: M.impressions.label,
       labels: {
         offsetX: -10,
-        formatter: (val) => val.toLocaleString("ko-KR"),
+        formatter: (val) => M.impressions.format(val),
         style: {
           colors: "var(--color-text-muted)",
           fontSize: "12px",
@@ -75,10 +77,13 @@ export const getMixedChartOptions = (categories: string[]): ApexOptions => ({
     intersect: false,
     y: {
       formatter: (val, { seriesIndex }) => {
-        if (seriesIndex === 0 || seriesIndex === 1) {
-          return `${val.toFixed(2)}%`;
+        if (seriesIndex === 0) {
+          return M.ctr.format(val);
+        }
+        if (seriesIndex === 1) {
+          return M.conversion.format(val);
         }
-        return val.toLocaleString("ko-KR");
+        return M.impressions.format(val);
       },
     },
   },

src/components/dashboard/charts/trafficChart.config.ts

@@ -4,7 +4,12 @@ import {
   downloadChartCsv,
   downloadChartPng,
   downloadChartSvg,
-} from "@/utils/download";
+} from "@/utils/dashboard/downloadChart";
+import {
+  formatCountChartAxis,
+  formatCountChartTooltip,
+  METRIC_REGISTRY as M,
+} from "@/utils/dashboard/metricRegistry";
 
 // 차트 고유 ID
 export const CHART_ID = "traffic-chart";
@@ -81,7 +86,7 @@ export function buildChartOptions(params: {
             filename: `overview-traffic-data-${TODAY}`,
             columnDelimiter: ",",
             headerCategory: "시간",
-            headerValue: "클릭수",
+            headerValue: M.clicks.label,
           },
         },
       },
@@ -158,12 +163,7 @@ export function buildChartOptions(params: {
       max: yMax,
       tickAmount: 5,
       labels: {
-        formatter: (val: number) => {
-          if (val === 0) return "";
-          const rounded = Math.round(val);
-          if (rounded < 1000) return rounded.toLocaleString();
-          return `${Math.round(rounded / 1000)}K`;
-        },
+        formatter: formatCountChartAxis,
         style: { colors: "var(--color-text-muted)", fontSize: "12px" },
       },
     },
@@ -178,7 +178,7 @@ export function buildChartOptions(params: {
     tooltip: {
       x: { show: false },
       y: {
-        formatter: (val: number) => val.toLocaleString(),
+        formatter: (val: number) => formatCountChartTooltip(val),
       },
       style: { fontFamily: "Pretendard" },
     },

src/components/dashboard/platform/AllPlatformTrafficChart.tsx

@@ -8,19 +8,16 @@ import {
   PROVIDER_TYPES,
 } 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 { platformTrafficMock } from "@/pages/dashboard/platform/platformDashboard.mock";
 
-interface IAllPlatformTrafficChartProps {
-  isLoading?: boolean;
-}
-
-const AllPlatformTrafficChart = memo(function AllPlatformTrafficChart({
-  isLoading,
-}: IAllPlatformTrafficChartProps) {
+const AllPlatformTrafficChart = memo(function AllPlatformTrafficChart() {
   // 3개 플랫폼의 데이터를 모두 변환하여 series 구성
   const seriesData = useMemo(() => {
     return PROVIDER_TYPES.map((platform) => {
@@ -105,12 +102,7 @@ const AllPlatformTrafficChart = memo(function AllPlatformTrafficChart({
       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: {
@@ -126,16 +118,15 @@ const AllPlatformTrafficChart = memo(function AllPlatformTrafficChart({
       shared: true, // 여러 플랫폼 동시 비교 가능
       intersect: false,
       x: { show: false },
-      y: { formatter: (val) => `${val.toLocaleString()} 클릭` },
+      y: {
+        formatter: (val) =>
+          formatCountChartTooltip(val, M.clicks.chartTooltipUnit),
+      },
       theme: "light",
     },
     legend: { show: false },
   };
 
-  if (isLoading) {
-    return <Skeleton className="w-full h-full rounded-xl" />;
-  }
-
   return (
     <div className="w-full h-full min-h-75">
       <ReactApexChart