git init

app/dashboard/(overview)/loading.tsx

@@ -0,0 +1,4 @@
+import DashboardSkeleton from "@/app/ui/skeletons";
+export default function Loading() {
+    return <DashboardSkeleton />;
+};

app/dashboard/(overview)/page.tsx

@@ -0,0 +1,34 @@
+import CardWrapper from '@/app/ui/dashboard/cards';
+import RevenueChart from '@/app/ui/dashboard/revenue-chart';
+import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
+import { lusitana } from '@/app/ui/fonts';
+import { Suspense } from 'react';
+import {CardsSkeleton, LatestInvoicesSkeleton, RevenueChartSkeleton} from "@/app/ui/skeletons";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: 'Dashboard',
+}
+
+export default async function Page() {
+    return (
+        <main>
+            <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
+                대시보드
+            </h1>
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                <Suspense fallback={<CardsSkeleton/>}>
+                    <CardWrapper />
+                </Suspense>
+            </div>
+            <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
+                <Suspense fallback={<RevenueChartSkeleton />}>
+                 <RevenueChart />
+                </Suspense>
+                <Suspense fallback={<LatestInvoicesSkeleton />}>
+                    <LatestInvoices />
+                </Suspense>
+            </div>
+        </main>
+    );
+}