대시보드 구현

features/dashboard/components/DashboardSkeleton.tsx

@@ -0,0 +1,59 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * @description 대시보드 초기 로딩 스켈레톤 UI입니다.
+ * @see features/dashboard/components/DashboardContainer.tsx isLoading 상태에서 렌더링합니다.
+ */
+export function DashboardSkeleton() {
+  return (
+    <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 p-4 md:p-6">
+      {/* ========== HEADER SKELETON ========== */}
+      <Card className="border-brand-200 dark:border-brand-800/50">
+        <CardContent className="grid gap-3 p-4 md:grid-cols-4">
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-20 w-full" />
+        </CardContent>
+      </Card>
+
+      {/* ========== BODY SKELETON ========== */}
+      <div className="grid gap-4 lg:grid-cols-[1.15fr_1fr]">
+        <Card>
+          <CardHeader className="pb-2">
+            <Skeleton className="h-5 w-28" />
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Skeleton key={index} className="h-14 w-full" />
+            ))}
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-4">
+          <Card>
+            <CardHeader className="pb-2">
+              <Skeleton className="h-5 w-24" />
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <Skeleton className="h-16 w-full" />
+              <Skeleton className="h-16 w-full" />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <Skeleton className="h-5 w-40" />
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}