From 5cd31675f6ffe1c8bfcfe448cd667504578fb8a6 Mon Sep 17 00:00:00 2001
From: jspark2000 <idpjs2000@gmail.com>
Date: Thu, 29 Feb 2024 15:08:08 +0000
Subject: [PATCH] feat: add streaming on console/dashboard page

---
 .../_components/ProfileSectionSkeleton.tsx    | 20 +++++++++++++++++++
 frontend/src/app/console/dashboard/page.tsx   |  6 +++++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/console/dashboard/_components/ProfileSectionSkeleton.tsx

diff --git a/frontend/src/app/console/dashboard/_components/ProfileSectionSkeleton.tsx b/frontend/src/app/console/dashboard/_components/ProfileSectionSkeleton.tsx
new file mode 100644
index 0000000..20be4d9
--- /dev/null
+++ b/frontend/src/app/console/dashboard/_components/ProfileSectionSkeleton.tsx
@@ -0,0 +1,20 @@
+import Section from '@/components/Section'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function ProfileSectionSkeleton() {
+  return (
+    <Section title="내 정보">
+      <div className="grid h-full grid-cols-3 gap-x-2 gap-y-5">
+        <div className="col-span-3 flex items-center justify-center sm:col-span-1">
+          <Skeleton className="h-20 w-20 rounded-full" />
+        </div>
+        <div className="col-span-3 flex h-full flex-col items-center justify-center space-y-1.5 sm:col-span-2 sm:items-start">
+          <Skeleton className="h-[20px] w-52 rounded-full" />
+          <Skeleton className="h-[20px] w-52 rounded-full" />
+          <Skeleton className="h-[20px] w-52 rounded-full" />
+          <Skeleton className="h-[20px] w-52 rounded-full" />
+        </div>
+      </div>
+    </Section>
+  )
+}
diff --git a/frontend/src/app/console/dashboard/page.tsx b/frontend/src/app/console/dashboard/page.tsx
index 4802e57..e583e1c 100644
--- a/frontend/src/app/console/dashboard/page.tsx
+++ b/frontend/src/app/console/dashboard/page.tsx
@@ -1,5 +1,7 @@
+import { Suspense } from 'react'
 import { NoticeSection } from './_components/NoticeSection'
 import { ProfileSection } from './_components/ProfileSection'
+import ProfileSectionSkeleton from './_components/ProfileSectionSkeleton'
 
 export default function ConsoleHome() {
   return (
@@ -7,7 +9,9 @@ export default function ConsoleHome() {
       <div className="flex w-full flex-grow flex-col gap-5 py-4 sm:px-6 md:grid md:grid-cols-12">
         <div className="col-span-12 grid h-full grid-cols-12 gap-5 md:h-1/4">
           <div className="col-span-12 overflow-hidden md:col-span-6 lg:col-span-4">
-            <ProfileSection />
+            <Suspense fallback={<ProfileSectionSkeleton />}>
+              <ProfileSection />
+            </Suspense>
           </div>
           <div className="col-span-12 overflow-hidden md:col-span-6 lg:col-span-8">
             <NoticeSection />