@farmzone/fz-template-react 1.0.0 → 1.0.2

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

@@ -1,8 +1,541 @@
-export default function DashboardPage() {
-  return (
-    <div className="p-8">
-      <h1 className="text-2xl font-bold text-gray-900">대시보드</h1>
-      <p className="mt-2 text-sm text-gray-500">환영합니다. 여기에 대시보드 콘텐츠를 추가하세요.</p>
-    </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>
+  );
+}

package/template/src/pages/error/Error.tsx

@@ -1,17 +1,29 @@
-import { useRouteError, useNavigate } from "react-router";
-import { Button } from "@farmzone/fz-react-ui";
-
-export default function ErrorPage() {
-  const error = useRouteError() as { statusText?: string; message?: string };
-  const navigate = useNavigate();
-
-  return (
-    <div className="flex h-screen flex-col items-center justify-center gap-4 bg-gray-50">
-      <h1 className="text-4xl font-bold text-gray-900">오류가 발생했습니다</h1>
-      <p className="text-gray-500">{error?.statusText ?? error?.message ?? "알 수 없는 오류"}</p>
-      <Button variant="outline" onClick={() => navigate("/")}>
-        홈으로 돌아가기
-      </Button>
-    </div>
-  );
-}
+import { TriangleAlert } from "lucide-react";
+import { Button } from "@farmzone/fz-react-ui";
+
+export default function ErrorPage() {
+  const handleRetry = () => {
+    window.location.href = "/";
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="flex flex-col items-center w-125 pb-6 shadow-lg rounded-lg bg-gray-50">
+        <div className="flex flex-col mt-14 mb-10 items-center gap-3">
+          <TriangleAlert size={60} strokeWidth={1.2} />
+          <p className="text-2xl font-bold">정상적인 접근이 아닙니다.</p>
+          <div className="flex flex-col gap-3">
+            <p className="text-lg text-gray-500">
+              화면 출력 중 에러가 발생하였습니다. 관리자에게 문의 주세요.
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-3 w-full px-6">
+          <Button variant="save" className="w-full py-2.5 font-semibold" onClick={handleRetry}>
+            다시 시도하기
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/pages/error/NotFound.tsx

@@ -1,17 +1,27 @@
-import { useNavigate } from "react-router";
-import { Button } from "@farmzone/fz-react-ui";
-
-export default function NotFoundPage() {
-  const navigate = useNavigate();
-
-  return (
-    <div className="flex h-screen flex-col items-center justify-center gap-3 bg-gray-50">
-      <p className="text-8xl font-bold text-gray-200">404</p>
-      <h1 className="text-xl font-semibold text-gray-700">페이지를 찾을 수 없습니다</h1>
-      <p className="text-sm text-gray-400">요청하신 페이지가 존재하지 않거나 이동되었습니다.</p>
-      <Button className="mt-2" onClick={() => navigate("/")}>
-        홈으로 돌아가기
-      </Button>
-    </div>
-  );
-}
+import { TriangleAlert } from "lucide-react";
+import { Button } from "@farmzone/fz-react-ui";
+
+export default function NotFoundPage() {
+  const handleGoHome = () => {
+    window.location.href = "/";
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="flex flex-col items-center w-125 pb-6 shadow-lg rounded-lg bg-gray-50">
+        <div className="flex flex-col mt-14 mb-10 items-center gap-3">
+          <TriangleAlert size={60} strokeWidth={1.2} />
+          <p className="text-2xl font-bold">정상적인 접근이 아닙니다.</p>
+          <div className="flex flex-col gap-3">
+            <p className="text-lg text-gray-500">입력하신 주소가 잘못되었거나 접근 권한이 없습니다.</p>
+          </div>
+        </div>
+        <div className="flex gap-3 w-full px-6">
+          <Button variant="save" className="w-full py-2.5 font-semibold" onClick={handleGoHome}>
+            홈으로 이동
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}