@farmzone/fz-template-react 1.0.6 → 1.0.7

package/template/src/pages/dashboard/index.tsx

@@ -1,541 +1,541 @@
-import { useEffect, useRef, useState } from "react";
-import { Activity, CalendarDays, Download, TriangleAlert, UserMinus, UserPlus, Users } from "lucide-react";
-import { Empty } from "@farmzone/fz-react-ui";
-import type { LucideIcon } from "lucide-react";
-import { useNavigate } from "react-router";
-import { Button } from "@farmzone/fz-react-ui";
-
-import ListHeader from "@/app/layout/ListHeader";
-import { useGetUserDashboard } from "@/app/api/queries";
-import type { DashboardAgeGroup, DashboardRecentUser } from "@/types";
-import { formatDateTime } from "@/shared/utils/format";
-
-const AVATAR_COLORS = ["bg-blue-400", "bg-emerald-400", "bg-violet-400", "bg-orange-400", "bg-pink-400"];
-
-// 컨테이너의 실제 px 크기를 측정 — SVG가 찌그러짐 없이 꽉 채움
-function useChartSize() {
-  const ref = useRef<HTMLDivElement>(null);
-  const [size, setSize] = useState({ width: 0, height: 0 });
-  useEffect(() => {
-    if (!ref.current) return;
-    const ro = new ResizeObserver(([entry]) => {
-      const { width, height } = entry.contentRect;
-      setSize({ width: Math.floor(width), height: Math.floor(height) });
-    });
-    ro.observe(ref.current);
-    return () => ro.disconnect();
-  }, []);
-  return { ref, ...size };
-}
-
-// ── Chart: 신규 가입자 추이 ────────────────────────────────────────
-
-interface JoinTrendChartProps {
-  labels: Array<string>;
-  joinedCounts: Array<number>;
-  withdrawnCounts: Array<number>;
-}
-
-function JoinTrendChart({ labels, joinedCounts, withdrawnCounts }: JoinTrendChartProps) {
-  const { ref, width: W, height: H } = useChartSize();
-  const pL = 46,
-    pR = 12,
-    pT = 10,
-    pB = 46;
-  const pw = W - pL - pR;
-  const ph = H - pT - pB;
-
-  const allVals = [...joinedCounts, ...withdrawnCounts, 1];
-  const MAX = Math.ceil(Math.max(...allVals) * 1.2) || 10;
-  const step = Math.ceil(MAX / 5);
-  const ySteps = Array.from({ length: 6 }, (_, i) => i * step);
-
-  const gx = (i: number) => pL + (labels.length > 1 ? (i / (labels.length - 1)) * pw : pw / 2);
-  const gy = (v: number) => pT + ((MAX - v) / MAX) * ph;
-
-  const linePath = (data: Array<number>) =>
-    data.map((v, i) => `${i === 0 ? "M" : "L"} ${gx(i).toFixed(1)} ${gy(v).toFixed(1)}`).join(" ");
-
-  const areaPath = [
-    linePath(joinedCounts),
-    `L ${gx(labels.length - 1).toFixed(1)} ${gy(0).toFixed(1)}`,
-    `L ${gx(0).toFixed(1)} ${gy(0).toFixed(1)} Z`,
-  ].join(" ");
-
-  const shortLabel = (s: string) => {
-    const parts = s.split("-");
-    return parts.length === 3 ? `${parts[1]}/${parts[2]}` : s;
-  };
-
-  const skipStep = Math.ceil(labels.length / 10);
-  const showLabel = (i: number) => i % skipStep === 0 || i === labels.length - 1;
-  const LABEL_Y = pT + ph + 13;
-
-  return (
-    <div ref={ref} className="w-full h-full">
-      {W > 0 && H > 0 && (
-        <svg width={W} height={H}>
-          {ySteps.map((v) => (
-            <line key={v} x1={pL} y1={gy(v)} x2={W - pR} y2={gy(v)} stroke="#f3f4f6" strokeWidth="1" />
-          ))}
-          {ySteps.map((v) => (
-            <text key={v} x={pL - 6} y={gy(v) + 4} textAnchor="end" fontSize="10" fill="#9ca3af">
-              {v}
-            </text>
-          ))}
-          {labels.map((l, i) => {
-            if (!showLabel(i)) return null;
-            const lx = gx(i);
-            return (
-              <text
-                key={l}
-                x={lx}
-                y={LABEL_Y}
-                transform={`rotate(-40, ${lx}, ${LABEL_Y})`}
-                textAnchor="end"
-                fontSize="10"
-                fill="#9ca3af"
-              >
-                {shortLabel(l)}
-              </text>
-            );
-          })}
-          <path d={areaPath} fill="#dbeafe" fillOpacity="0.45" />
-          <path
-            d={linePath(joinedCounts)}
-            fill="none"
-            stroke="#3b82f6"
-            strokeWidth="2"
-            strokeLinejoin="round"
-            strokeLinecap="round"
-          />
-          <path
-            d={linePath(withdrawnCounts)}
-            fill="none"
-            stroke="#ef4444"
-            strokeWidth="1.5"
-            strokeDasharray="5 3"
-            strokeLinejoin="round"
-            strokeLinecap="round"
-          />
-          {joinedCounts.map((v, i) => (
-            <circle key={i} cx={gx(i)} cy={gy(v)} r="3.5" fill="white" stroke="#3b82f6" strokeWidth="2" />
-          ))}
-          {withdrawnCounts.map((v, i) => (
-            <circle key={i} cx={gx(i)} cy={gy(v)} r="2.5" fill="white" stroke="#ef4444" strokeWidth="1.5" />
-          ))}
-        </svg>
-      )}
-    </div>
-  );
-}
-
-// ── Chart: 일별 접속자 수 ──────────────────────────────────────────
-
-interface DauBarChartProps {
-  labels: Array<string>;
-  counts: Array<number>;
-}
-
-function DauBarChart({ labels, counts }: DauBarChartProps) {
-  const { ref, width: W, height: H } = useChartSize();
-  const pL = 44,
-    pR = 8,
-    pT = 8,
-    pB = 44;
-  const pw = W - pL - pR;
-  const ph = H - pT - pB;
-
-  const maxVal = Math.max(...counts, 1);
-  const raw = maxVal * 1.15;
-  const exp = Math.floor(Math.log10(raw));
-  const unit = Math.pow(10, exp);
-  const MAX =
-    [1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => n * unit).find((c) => c >= raw) ?? unit * 10;
-  const ySteps = Array.from({ length: 6 }, (_, i) => (i * MAX) / 5);
-
-  const slotW = pw / (labels.length || 1);
-  const barW = Math.min(slotW * 0.65, 18);
-
-  const gy = (v: number) => pT + ((MAX - v) / MAX) * ph;
-  const bx = (i: number) => pL + i * slotW + (slotW - barW) / 2;
-
-  const shortLabel = (s: string) => {
-    const parts = s.split("-");
-    return parts.length === 3 ? `${parts[1]}/${parts[2]}` : s;
-  };
-
-  const skipStep = Math.ceil(labels.length / 10);
-  const showLabel = (i: number) => i % skipStep === 0 || i === labels.length - 1;
-  const LABEL_Y = pT + ph + 14;
-
-  return (
-    <div ref={ref} className="w-full h-full">
-      {W > 0 && H > 0 && (
-        <svg width={W} height={H}>
-          {ySteps.map((v) => (
-            <line key={v} x1={pL} y1={gy(v)} x2={W - pR} y2={gy(v)} stroke="#f3f4f6" strokeWidth="1" />
-          ))}
-          {ySteps.map((v) => (
-            <text key={v} x={pL - 5} y={gy(v) + 4} textAnchor="end" fontSize="9" fill="#9ca3af">
-              {v >= 10000
-                ? `${(v / 1000).toFixed(0)}k`
-                : v >= 1000
-                  ? `${(v / 1000) % 1 === 0 ? v / 1000 : (v / 1000).toFixed(1)}k`
-                  : v}
-            </text>
-          ))}
-          {counts.map((v, i) => (
-            <rect key={i} x={bx(i)} y={gy(v)} width={barW} height={(v / MAX) * ph} fill="#3b82f6" rx="2" />
-          ))}
-          {labels.map((l, i) => {
-            if (!showLabel(i)) return null;
-            const lx = bx(i) + barW / 2;
-            return (
-              <text
-                key={l}
-                x={lx}
-                y={LABEL_Y}
-                transform={`rotate(-40, ${lx}, ${LABEL_Y})`}
-                textAnchor="end"
-                fontSize="9"
-                fill="#9ca3af"
-              >
-                {shortLabel(l)}
-              </text>
-            );
-          })}
-        </svg>
-      )}
-    </div>
-  );
-}
-
-// ── Skeleton ───────────────────────────────────────────────────────
-
-function Skeleton({ className }: { className?: string }) {
-  return <div className={`animate-pulse rounded bg-gray-100 ${className ?? ""}`} />;
-}
-
-// ── KPI Card ───────────────────────────────────────────────────────
-
-interface KpiCardProps {
-  label: string;
-  value: string;
-  Icon: LucideIcon;
-  iconColor: string;
-  iconBg: string;
-}
-
-function KpiCard({ label, value, Icon, iconColor, iconBg }: KpiCardProps) {
-  return (
-    <div className="bg-white rounded-xl p-3 shadow-sm border border-gray-100">
-      <div className="flex items-center justify-between mb-2">
-        <span className="text-xs text-gray-500">{label}</span>
-        <div className={`w-7 h-7 rounded-full ${iconBg} flex items-center justify-center`}>
-          <Icon size={13} className={iconColor} />
-        </div>
-      </div>
-      <div className="text-2xl font-bold text-gray-900 leading-none text-center">{value}</div>
-    </div>
-  );
-}
-
-// ── Gender Bar ─────────────────────────────────────────────────────
-
-interface GenderBarProps {
-  maleRate: number;
-  femaleRate: number;
-  unknownRate: number;
-}
-
-function GenderBar({ maleRate, femaleRate, unknownRate }: GenderBarProps) {
-  return (
-    <>
-      <div className="w-full h-2.5 rounded-full overflow-hidden flex">
-        <div className="h-full bg-blue-500" style={{ width: `${maleRate}%` }} />
-        <div className="h-full bg-pink-400" style={{ width: `${femaleRate}%` }} />
-        {unknownRate > 0 && <div className="h-full bg-gray-300" style={{ width: `${unknownRate}%` }} />}
-      </div>
-      <div className="flex items-center gap-4 mt-1.5 mb-3 flex-wrap">
-        <span className="flex items-center gap-1.5 text-xs text-gray-600">
-          <span className="w-2 h-2 rounded-full bg-blue-500 shrink-0" />
-          남성 {maleRate.toFixed(1)}%
-        </span>
-        <span className="flex items-center gap-1.5 text-xs text-gray-600">
-          <span className="w-2 h-2 rounded-full bg-pink-400 shrink-0" />
-          여성 {femaleRate.toFixed(1)}%
-        </span>
-        {unknownRate > 0 && (
-          <span className="flex items-center gap-1.5 text-xs text-gray-600">
-            <span className="w-2 h-2 rounded-full bg-gray-300 shrink-0" />
-            미상 {unknownRate.toFixed(1)}%
-          </span>
-        )}
-      </div>
-    </>
-  );
-}
-
-// ── Age Groups ─────────────────────────────────────────────────────
-
-function AgeGroups({ groups }: { groups: Array<DashboardAgeGroup> }) {
-  const maxRate = Math.max(...groups.map((g) => g.rate), 1);
-  return (
-    <div className="space-y-3">
-      {groups.map((a) => (
-        <div key={a.label} className="flex items-center gap-2">
-          <span className="w-18 text-xs text-gray-500 shrink-0">{a.label}</span>
-          <div className="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
-            <div
-              className="h-full bg-blue-400 rounded-full"
-              style={{ width: `${(a.rate / maxRate) * 100}%` }}
-            />
-          </div>
-          <span className="w-10 text-xs text-gray-500 text-right shrink-0">{a.rate.toFixed(1)}%</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ── Recent Users Table ─────────────────────────────────────────────
-
-function RecentUsersTable({ users }: { users: Array<DashboardRecentUser> }) {
-  const genderLabel = (g: string) => (g === "M" ? "남성" : g === "F" ? "여성" : g);
-
-  return (
-    <table className="w-full">
-      <thead>
-        <tr className="border-b border-gray-100">
-          {["회원", "성별", "연령", "가입일", "상태"].map((h) => (
-            <th key={h} className="pb-2 text-xs font-semibold text-gray-400 text-left">
-              {h}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {users.map((u, idx) => (
-          <tr key={u.id} className="border-b border-gray-50 last:border-0">
-            <td className="py-2">
-              <div className="flex items-center gap-2">
-                <div
-                  className={`w-6 h-6 rounded-full ${AVATAR_COLORS[idx % AVATAR_COLORS.length]} flex items-center justify-center text-white text-[9px] font-bold shrink-0`}
-                >
-                  {u.name.slice(0, 2)}
-                </div>
-                <span className="text-sm text-gray-800 font-medium">{u.name}</span>
-              </div>
-            </td>
-            <td className="py-2 text-sm text-gray-600">{genderLabel(u.gender)}</td>
-            <td className="py-2 text-sm text-gray-600">{u.age}</td>
-            <td className="py-2 text-xs text-gray-500 tabular-nums">{formatDateTime(u.createdAt)}</td>
-            <td className="py-2">
-              <span
-                className={`px-2 py-0.5 rounded-full text-xs font-medium ${
-                  u.active ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"
-                }`}
-              >
-                {u.active ? "활성" : "비활성"}
-              </span>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-// ── Page ───────────────────────────────────────────────────────────
-
-export default function DashboardPage() {
-  const navigate = useNavigate();
-  const { data, isLoading } = useGetUserDashboard("30d");
-
-  return (
-    <div className="p-4 space-y-3">
-      <ListHeader
-        title="회원 대시보드"
-        rightArea={
-          <div className="flex items-center gap-2">
-            <Button variant="outline">
-              <CalendarDays size={14} className="mr-1" />
-              최근 30일
-            </Button>
-            <Button variant="file">
-              <Download size={14} className="mr-1" />
-              다운로드
-            </Button>
-          </div>
-        }
-      />
-
-      {/* KPI Cards */}
-      <div className="grid grid-cols-4 gap-3 min-h-24">
-        {isLoading ? (
-          Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="bg-white rounded-xl p-3 shadow-sm border border-gray-100 space-y-2">
-              <Skeleton className="h-3 w-20" />
-              <Skeleton className="h-7 w-16" />
-            </div>
-          ))
-        ) : (
-          <>
-            <KpiCard
-              label="전체 회원수"
-              value={(data?.summary.totalUsers ?? 0).toLocaleString()}
-              Icon={Users}
-              iconColor="text-blue-500"
-              iconBg="bg-blue-50"
-            />
-            <KpiCard
-              label="오늘 가입자"
-              value={(data?.summary.todayJoinedUsers ?? 0).toLocaleString()}
-              Icon={UserPlus}
-              iconColor="text-green-500"
-              iconBg="bg-green-50"
-            />
-            <KpiCard
-              label="최근 접속자 (24h)"
-              value={(data?.summary.recentActiveUsers ?? 0).toLocaleString()}
-              Icon={Activity}
-              iconColor="text-purple-500"
-              iconBg="bg-purple-50"
-            />
-            <KpiCard
-              label="탈퇴율"
-              value={`${(data?.summary.withdrawalRate ?? 0).toFixed(2)}%`}
-              Icon={UserMinus}
-              iconColor="text-red-400"
-              iconBg="bg-red-50"
-            />
-          </>
-        )}
-      </div>
-
-      {/* Charts Row */}
-      <div className="grid grid-cols-5 gap-3 h-90">
-        {/* Join Trend */}
-        <div className="col-span-3 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
-          <div className="flex items-center justify-between">
-            <h2 className="text-sm font-semibold text-gray-800">신규 가입자 추이</h2>
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-1.5">
-                <div className="w-3 h-0.5 bg-blue-500 rounded-full" />
-                <span className="text-xs text-gray-500">신규 가입</span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <svg width="14" height="4" className="shrink-0">
-                  <line
-                    x1="0"
-                    y1="2"
-                    x2="14"
-                    y2="2"
-                    stroke="#ef4444"
-                    strokeWidth="1.5"
-                    strokeDasharray="4 3"
-                  />
-                </svg>
-                <span className="text-xs text-gray-500">탈퇴</span>
-              </div>
-            </div>
-          </div>
-          <p className="text-xs text-gray-400 mt-1 mb-2">일별 신규 가입 vs 탈퇴</p>
-          {/* 고정 높이 컨테이너 — SVG는 이 안에서 preserveAspectRatio="none"으로 채움 */}
-          <div className="h-70">
-            {isLoading || !data ? (
-              <Skeleton className="h-full w-full" />
-            ) : (
-              <JoinTrendChart
-                labels={data.trend.labels}
-                joinedCounts={data.trend.joinedCounts}
-                withdrawnCounts={data.trend.withdrawnCounts}
-              />
-            )}
-          </div>
-        </div>
-
-        {/* Demographics */}
-        <div className="col-span-2 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
-          <h2 className="text-sm font-semibold text-gray-800">회원 기본 현황</h2>
-          <p className="text-xs text-gray-400 mt-1 mb-3">성별 · 연령대 분포</p>
-          {isLoading || !data ? (
-            <div className="space-y-2">
-              <Skeleton className="h-2.5 w-full" />
-              <Skeleton className="h-3 w-28" />
-              {Array.from({ length: 5 }).map((_, i) => (
-                <Skeleton key={i} className="h-1.5 w-full mt-2" />
-              ))}
-            </div>
-          ) : (
-            <div className="flex gap-2 flex-col">
-              <div>
-                <p className="text-xs font-semibold text-gray-600">성별</p>
-                <GenderBar
-                  maleRate={data.demographics.gender.maleRate}
-                  femaleRate={data.demographics.gender.femaleRate}
-                  unknownRate={data.demographics.gender.unknownRate}
-                />
-              </div>
-              <div>
-                <p className="text-xs font-semibold text-gray-600 mb-4">연령대</p>
-                <AgeGroups groups={data.demographics.ageGroups} />
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Bottom Row */}
-      <div className="grid grid-cols-5 gap-3">
-        {/* Recent Members */}
-        <div className="col-span-3 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
-          <div className="flex items-center justify-between mb-3">
-            <div>
-              <h2 className="text-sm font-semibold text-gray-800">최근 가입 회원</h2>
-              <p className="text-xs text-gray-400 mt-0.5">최근 가입 순</p>
-            </div>
-            <Button
-              variant="link"
-              onClick={() => navigate("/user")}
-              className="text-xs text-blue-500 hover:underline font-medium cursor-pointer"
-            >
-              전체 보기
-            </Button>
-          </div>
-          {isLoading || !data ? (
-            <div className="space-y-2.5">
-              {Array.from({ length: 5 }).map((_, i) => (
-                <div key={i} className="flex items-center gap-3">
-                  <Skeleton className="w-6 h-6 rounded-full" />
-                  <Skeleton className="h-4 flex-1" />
-                </div>
-              ))}
-            </div>
-          ) : data.recentUsers.length === 0 ? (
-            <Empty className="flex flex-1 justify-center gap-2 px-4 py-16">
-              <TriangleAlert className="size-8 shrink-0 text-gray-500" strokeWidth={1.5} />
-              <p className="text-sm text-gray-500">최근 가입 회원이 없습니다.</p>
-            </Empty>
-          ) : (
-            <RecentUsersTable users={data.recentUsers} />
-          )}
-        </div>
-
-        {/* DAU */}
-        <div className="col-span-2 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
-          <h2 className="text-sm font-semibold text-gray-800">일별 접속자 수</h2>
-          <p className="text-xs text-gray-400 mt-0.5 mb-2">DAU 추이</p>
-          <div className="h-44">
-            {isLoading || !data ? (
-              <Skeleton className="h-full w-full" />
-            ) : (
-              <DauBarChart labels={data.dailyActiveUsers.labels} counts={data.dailyActiveUsers.counts} />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+import { useEffect, useRef, useState } from "react";
+import { Activity, CalendarDays, Download, TriangleAlert, UserMinus, UserPlus, Users } from "lucide-react";
+import { Empty } from "@farmzone/fz-react-ui";
+import type { LucideIcon } from "lucide-react";
+import { useNavigate } from "react-router";
+import { Button } from "@farmzone/fz-react-ui";
+
+import ListHeader from "@/app/layout/ListHeader";
+import { useGetUserDashboard } from "@/app/api/queries";
+import type { DashboardAgeGroup, DashboardRecentUser } from "@/types";
+import { formatDateTime } from "@/shared/utils/format";
+
+const AVATAR_COLORS = ["bg-blue-400", "bg-emerald-400", "bg-violet-400", "bg-orange-400", "bg-pink-400"];
+
+// 컨테이너의 실제 px 크기를 측정 — SVG가 찌그러짐 없이 꽉 채움
+function useChartSize() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    if (!ref.current) return;
+    const ro = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      setSize({ width: Math.floor(width), height: Math.floor(height) });
+    });
+    ro.observe(ref.current);
+    return () => ro.disconnect();
+  }, []);
+  return { ref, ...size };
+}
+
+// ── Chart: 신규 가입자 추이 ────────────────────────────────────────
+
+interface JoinTrendChartProps {
+  labels: Array<string>;
+  joinedCounts: Array<number>;
+  withdrawnCounts: Array<number>;
+}
+
+function JoinTrendChart({ labels, joinedCounts, withdrawnCounts }: JoinTrendChartProps) {
+  const { ref, width: W, height: H } = useChartSize();
+  const pL = 46,
+    pR = 12,
+    pT = 10,
+    pB = 46;
+  const pw = W - pL - pR;
+  const ph = H - pT - pB;
+
+  const allVals = [...joinedCounts, ...withdrawnCounts, 1];
+  const MAX = Math.ceil(Math.max(...allVals) * 1.2) || 10;
+  const step = Math.ceil(MAX / 5);
+  const ySteps = Array.from({ length: 6 }, (_, i) => i * step);
+
+  const gx = (i: number) => pL + (labels.length > 1 ? (i / (labels.length - 1)) * pw : pw / 2);
+  const gy = (v: number) => pT + ((MAX - v) / MAX) * ph;
+
+  const linePath = (data: Array<number>) =>
+    data.map((v, i) => `${i === 0 ? "M" : "L"} ${gx(i).toFixed(1)} ${gy(v).toFixed(1)}`).join(" ");
+
+  const areaPath = [
+    linePath(joinedCounts),
+    `L ${gx(labels.length - 1).toFixed(1)} ${gy(0).toFixed(1)}`,
+    `L ${gx(0).toFixed(1)} ${gy(0).toFixed(1)} Z`,
+  ].join(" ");
+
+  const shortLabel = (s: string) => {
+    const parts = s.split("-");
+    return parts.length === 3 ? `${parts[1]}/${parts[2]}` : s;
+  };
+
+  const skipStep = Math.ceil(labels.length / 10);
+  const showLabel = (i: number) => i % skipStep === 0 || i === labels.length - 1;
+  const LABEL_Y = pT + ph + 13;
+
+  return (
+    <div ref={ref} className="w-full h-full">
+      {W > 0 && H > 0 && (
+        <svg width={W} height={H}>
+          {ySteps.map((v) => (
+            <line key={v} x1={pL} y1={gy(v)} x2={W - pR} y2={gy(v)} stroke="#f3f4f6" strokeWidth="1" />
+          ))}
+          {ySteps.map((v) => (
+            <text key={v} x={pL - 6} y={gy(v) + 4} textAnchor="end" fontSize="10" fill="#9ca3af">
+              {v}
+            </text>
+          ))}
+          {labels.map((l, i) => {
+            if (!showLabel(i)) return null;
+            const lx = gx(i);
+            return (
+              <text
+                key={l}
+                x={lx}
+                y={LABEL_Y}
+                transform={`rotate(-40, ${lx}, ${LABEL_Y})`}
+                textAnchor="end"
+                fontSize="10"
+                fill="#9ca3af"
+              >
+                {shortLabel(l)}
+              </text>
+            );
+          })}
+          <path d={areaPath} fill="#dbeafe" fillOpacity="0.45" />
+          <path
+            d={linePath(joinedCounts)}
+            fill="none"
+            stroke="#3b82f6"
+            strokeWidth="2"
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
+          <path
+            d={linePath(withdrawnCounts)}
+            fill="none"
+            stroke="#ef4444"
+            strokeWidth="1.5"
+            strokeDasharray="5 3"
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
+          {joinedCounts.map((v, i) => (
+            <circle key={i} cx={gx(i)} cy={gy(v)} r="3.5" fill="white" stroke="#3b82f6" strokeWidth="2" />
+          ))}
+          {withdrawnCounts.map((v, i) => (
+            <circle key={i} cx={gx(i)} cy={gy(v)} r="2.5" fill="white" stroke="#ef4444" strokeWidth="1.5" />
+          ))}
+        </svg>
+      )}
+    </div>
+  );
+}
+
+// ── Chart: 일별 접속자 수 ──────────────────────────────────────────
+
+interface DauBarChartProps {
+  labels: Array<string>;
+  counts: Array<number>;
+}
+
+function DauBarChart({ labels, counts }: DauBarChartProps) {
+  const { ref, width: W, height: H } = useChartSize();
+  const pL = 44,
+    pR = 8,
+    pT = 8,
+    pB = 44;
+  const pw = W - pL - pR;
+  const ph = H - pT - pB;
+
+  const maxVal = Math.max(...counts, 1);
+  const raw = maxVal * 1.15;
+  const exp = Math.floor(Math.log10(raw));
+  const unit = Math.pow(10, exp);
+  const MAX =
+    [1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => n * unit).find((c) => c >= raw) ?? unit * 10;
+  const ySteps = Array.from({ length: 6 }, (_, i) => (i * MAX) / 5);
+
+  const slotW = pw / (labels.length || 1);
+  const barW = Math.min(slotW * 0.65, 18);
+
+  const gy = (v: number) => pT + ((MAX - v) / MAX) * ph;
+  const bx = (i: number) => pL + i * slotW + (slotW - barW) / 2;
+
+  const shortLabel = (s: string) => {
+    const parts = s.split("-");
+    return parts.length === 3 ? `${parts[1]}/${parts[2]}` : s;
+  };
+
+  const skipStep = Math.ceil(labels.length / 10);
+  const showLabel = (i: number) => i % skipStep === 0 || i === labels.length - 1;
+  const LABEL_Y = pT + ph + 14;
+
+  return (
+    <div ref={ref} className="w-full h-full">
+      {W > 0 && H > 0 && (
+        <svg width={W} height={H}>
+          {ySteps.map((v) => (
+            <line key={v} x1={pL} y1={gy(v)} x2={W - pR} y2={gy(v)} stroke="#f3f4f6" strokeWidth="1" />
+          ))}
+          {ySteps.map((v) => (
+            <text key={v} x={pL - 5} y={gy(v) + 4} textAnchor="end" fontSize="9" fill="#9ca3af">
+              {v >= 10000
+                ? `${(v / 1000).toFixed(0)}k`
+                : v >= 1000
+                  ? `${(v / 1000) % 1 === 0 ? v / 1000 : (v / 1000).toFixed(1)}k`
+                  : v}
+            </text>
+          ))}
+          {counts.map((v, i) => (
+            <rect key={i} x={bx(i)} y={gy(v)} width={barW} height={(v / MAX) * ph} fill="#3b82f6" rx="2" />
+          ))}
+          {labels.map((l, i) => {
+            if (!showLabel(i)) return null;
+            const lx = bx(i) + barW / 2;
+            return (
+              <text
+                key={l}
+                x={lx}
+                y={LABEL_Y}
+                transform={`rotate(-40, ${lx}, ${LABEL_Y})`}
+                textAnchor="end"
+                fontSize="9"
+                fill="#9ca3af"
+              >
+                {shortLabel(l)}
+              </text>
+            );
+          })}
+        </svg>
+      )}
+    </div>
+  );
+}
+
+// ── Skeleton ───────────────────────────────────────────────────────
+
+function Skeleton({ className }: { className?: string }) {
+  return <div className={`animate-pulse rounded bg-gray-100 ${className ?? ""}`} />;
+}
+
+// ── KPI Card ───────────────────────────────────────────────────────
+
+interface KpiCardProps {
+  label: string;
+  value: string;
+  Icon: LucideIcon;
+  iconColor: string;
+  iconBg: string;
+}
+
+function KpiCard({ label, value, Icon, iconColor, iconBg }: KpiCardProps) {
+  return (
+    <div className="bg-white rounded-xl p-3 shadow-sm border border-gray-100">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-xs text-gray-500">{label}</span>
+        <div className={`w-7 h-7 rounded-full ${iconBg} flex items-center justify-center`}>
+          <Icon size={13} className={iconColor} />
+        </div>
+      </div>
+      <div className="text-2xl font-bold text-gray-900 leading-none text-center">{value}</div>
+    </div>
+  );
+}
+
+// ── Gender Bar ─────────────────────────────────────────────────────
+
+interface GenderBarProps {
+  maleRate: number;
+  femaleRate: number;
+  unknownRate: number;
+}
+
+function GenderBar({ maleRate, femaleRate, unknownRate }: GenderBarProps) {
+  return (
+    <>
+      <div className="w-full h-2.5 rounded-full overflow-hidden flex">
+        <div className="h-full bg-blue-500" style={{ width: `${maleRate}%` }} />
+        <div className="h-full bg-pink-400" style={{ width: `${femaleRate}%` }} />
+        {unknownRate > 0 && <div className="h-full bg-gray-300" style={{ width: `${unknownRate}%` }} />}
+      </div>
+      <div className="flex items-center gap-4 mt-1.5 mb-3 flex-wrap">
+        <span className="flex items-center gap-1.5 text-xs text-gray-600">
+          <span className="w-2 h-2 rounded-full bg-blue-500 shrink-0" />
+          남성 {maleRate.toFixed(1)}%
+        </span>
+        <span className="flex items-center gap-1.5 text-xs text-gray-600">
+          <span className="w-2 h-2 rounded-full bg-pink-400 shrink-0" />
+          여성 {femaleRate.toFixed(1)}%
+        </span>
+        {unknownRate > 0 && (
+          <span className="flex items-center gap-1.5 text-xs text-gray-600">
+            <span className="w-2 h-2 rounded-full bg-gray-300 shrink-0" />
+            미상 {unknownRate.toFixed(1)}%
+          </span>
+        )}
+      </div>
+    </>
+  );
+}
+
+// ── Age Groups ─────────────────────────────────────────────────────
+
+function AgeGroups({ groups }: { groups: Array<DashboardAgeGroup> }) {
+  const maxRate = Math.max(...groups.map((g) => g.rate), 1);
+  return (
+    <div className="space-y-3">
+      {groups.map((a) => (
+        <div key={a.label} className="flex items-center gap-2">
+          <span className="w-18 text-xs text-gray-500 shrink-0">{a.label}</span>
+          <div className="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-blue-400 rounded-full"
+              style={{ width: `${(a.rate / maxRate) * 100}%` }}
+            />
+          </div>
+          <span className="w-10 text-xs text-gray-500 text-right shrink-0">{a.rate.toFixed(1)}%</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Recent Users Table ─────────────────────────────────────────────
+
+function RecentUsersTable({ users }: { users: Array<DashboardRecentUser> }) {
+  const genderLabel = (g: string) => (g === "M" ? "남성" : g === "F" ? "여성" : g);
+
+  return (
+    <table className="w-full">
+      <thead>
+        <tr className="border-b border-gray-100">
+          {["회원", "성별", "연령", "가입일", "상태"].map((h) => (
+            <th key={h} className="pb-2 text-xs font-semibold text-gray-400 text-left">
+              {h}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {users.map((u, idx) => (
+          <tr key={u.id} className="border-b border-gray-50 last:border-0">
+            <td className="py-2">
+              <div className="flex items-center gap-2">
+                <div
+                  className={`w-6 h-6 rounded-full ${AVATAR_COLORS[idx % AVATAR_COLORS.length]} flex items-center justify-center text-white text-[9px] font-bold shrink-0`}
+                >
+                  {u.name.slice(0, 2)}
+                </div>
+                <span className="text-sm text-gray-800 font-medium">{u.name}</span>
+              </div>
+            </td>
+            <td className="py-2 text-sm text-gray-600">{genderLabel(u.gender)}</td>
+            <td className="py-2 text-sm text-gray-600">{u.age}</td>
+            <td className="py-2 text-xs text-gray-500 tabular-nums">{formatDateTime(u.createdAt)}</td>
+            <td className="py-2">
+              <span
+                className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                  u.active ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"
+                }`}
+              >
+                {u.active ? "활성" : "비활성"}
+              </span>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+// ── Page ───────────────────────────────────────────────────────────
+
+export default function DashboardPage() {
+  const navigate = useNavigate();
+  const { data, isLoading } = useGetUserDashboard("30d");
+
+  return (
+    <div className="p-4 space-y-3">
+      <ListHeader
+        title="회원 대시보드"
+        rightArea={
+          <div className="flex items-center gap-2">
+            <Button variant="outline">
+              <CalendarDays size={14} className="mr-1" />
+              최근 30일
+            </Button>
+            <Button variant="file">
+              <Download size={14} className="mr-1" />
+              다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-4 gap-3 min-h-24">
+        {isLoading ? (
+          Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="bg-white rounded-xl p-3 shadow-sm border border-gray-100 space-y-2">
+              <Skeleton className="h-3 w-20" />
+              <Skeleton className="h-7 w-16" />
+            </div>
+          ))
+        ) : (
+          <>
+            <KpiCard
+              label="전체 회원수"
+              value={(data?.summary.totalUsers ?? 0).toLocaleString()}
+              Icon={Users}
+              iconColor="text-blue-500"
+              iconBg="bg-blue-50"
+            />
+            <KpiCard
+              label="오늘 가입자"
+              value={(data?.summary.todayJoinedUsers ?? 0).toLocaleString()}
+              Icon={UserPlus}
+              iconColor="text-green-500"
+              iconBg="bg-green-50"
+            />
+            <KpiCard
+              label="최근 접속자 (24h)"
+              value={(data?.summary.recentActiveUsers ?? 0).toLocaleString()}
+              Icon={Activity}
+              iconColor="text-purple-500"
+              iconBg="bg-purple-50"
+            />
+            <KpiCard
+              label="탈퇴율"
+              value={`${(data?.summary.withdrawalRate ?? 0).toFixed(2)}%`}
+              Icon={UserMinus}
+              iconColor="text-red-400"
+              iconBg="bg-red-50"
+            />
+          </>
+        )}
+      </div>
+
+      {/* Charts Row */}
+      <div className="grid grid-cols-5 gap-3 h-90">
+        {/* Join Trend */}
+        <div className="col-span-3 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm font-semibold text-gray-800">신규 가입자 추이</h2>
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-1.5">
+                <div className="w-3 h-0.5 bg-blue-500 rounded-full" />
+                <span className="text-xs text-gray-500">신규 가입</span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <svg width="14" height="4" className="shrink-0">
+                  <line
+                    x1="0"
+                    y1="2"
+                    x2="14"
+                    y2="2"
+                    stroke="#ef4444"
+                    strokeWidth="1.5"
+                    strokeDasharray="4 3"
+                  />
+                </svg>
+                <span className="text-xs text-gray-500">탈퇴</span>
+              </div>
+            </div>
+          </div>
+          <p className="text-xs text-gray-400 mt-1 mb-2">일별 신규 가입 vs 탈퇴</p>
+          {/* 고정 높이 컨테이너 — SVG는 이 안에서 preserveAspectRatio="none"으로 채움 */}
+          <div className="h-70">
+            {isLoading || !data ? (
+              <Skeleton className="h-full w-full" />
+            ) : (
+              <JoinTrendChart
+                labels={data.trend.labels}
+                joinedCounts={data.trend.joinedCounts}
+                withdrawnCounts={data.trend.withdrawnCounts}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Demographics */}
+        <div className="col-span-2 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
+          <h2 className="text-sm font-semibold text-gray-800">회원 기본 현황</h2>
+          <p className="text-xs text-gray-400 mt-1 mb-3">성별 · 연령대 분포</p>
+          {isLoading || !data ? (
+            <div className="space-y-2">
+              <Skeleton className="h-2.5 w-full" />
+              <Skeleton className="h-3 w-28" />
+              {Array.from({ length: 5 }).map((_, i) => (
+                <Skeleton key={i} className="h-1.5 w-full mt-2" />
+              ))}
+            </div>
+          ) : (
+            <div className="flex gap-2 flex-col">
+              <div>
+                <p className="text-xs font-semibold text-gray-600">성별</p>
+                <GenderBar
+                  maleRate={data.demographics.gender.maleRate}
+                  femaleRate={data.demographics.gender.femaleRate}
+                  unknownRate={data.demographics.gender.unknownRate}
+                />
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-gray-600 mb-4">연령대</p>
+                <AgeGroups groups={data.demographics.ageGroups} />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Bottom Row */}
+      <div className="grid grid-cols-5 gap-3">
+        {/* Recent Members */}
+        <div className="col-span-3 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
+          <div className="flex items-center justify-between mb-3">
+            <div>
+              <h2 className="text-sm font-semibold text-gray-800">최근 가입 회원</h2>
+              <p className="text-xs text-gray-400 mt-0.5">최근 가입 순</p>
+            </div>
+            <Button
+              variant="link"
+              onClick={() => navigate("/user")}
+              className="text-xs text-blue-500 hover:underline font-medium cursor-pointer"
+            >
+              전체 보기
+            </Button>
+          </div>
+          {isLoading || !data ? (
+            <div className="space-y-2.5">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} className="flex items-center gap-3">
+                  <Skeleton className="w-6 h-6 rounded-full" />
+                  <Skeleton className="h-4 flex-1" />
+                </div>
+              ))}
+            </div>
+          ) : data.recentUsers.length === 0 ? (
+            <Empty className="flex flex-1 justify-center gap-2 px-4 py-16">
+              <TriangleAlert className="size-8 shrink-0 text-gray-500" strokeWidth={1.5} />
+              <p className="text-sm text-gray-500">최근 가입 회원이 없습니다.</p>
+            </Empty>
+          ) : (
+            <RecentUsersTable users={data.recentUsers} />
+          )}
+        </div>
+
+        {/* DAU */}
+        <div className="col-span-2 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
+          <h2 className="text-sm font-semibold text-gray-800">일별 접속자 수</h2>
+          <p className="text-xs text-gray-400 mt-0.5 mb-2">DAU 추이</p>
+          <div className="h-44">
+            {isLoading || !data ? (
+              <Skeleton className="h-full w-full" />
+            ) : (
+              <DauBarChart labels={data.dailyActiveUsers.labels} counts={data.dailyActiveUsers.counts} />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}