From ce9716e8d0a3f86e0fb240385f5a1828ce688258 Mon Sep 17 00:00:00 2001
From: soomin9106 <soomin9106@naver.com>
Date: Fri, 14 Jun 2024 22:46:31 +0900
Subject: [PATCH] refactor: Content Skeleton Component

---
 .../components/ContentSkeleton/index.tsx      | 10 ++++++++
 .../components/WorkbookSkeleton/index.tsx     | 25 +++++++++++++------
 2 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 src/common/components/ContentSkeleton/index.tsx

diff --git a/src/common/components/ContentSkeleton/index.tsx b/src/common/components/ContentSkeleton/index.tsx
new file mode 100644
index 00000000..cfd166c3
--- /dev/null
+++ b/src/common/components/ContentSkeleton/index.tsx
@@ -0,0 +1,10 @@
+import { Skeleton } from "@shared/components/ui/skeleton";
+
+export default function ContentSkeleton ({
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <Skeleton className={className} {...props} />
+    )
+}
\ No newline at end of file
diff --git a/src/workbook/components/WorkbookSkeleton/index.tsx b/src/workbook/components/WorkbookSkeleton/index.tsx
index 6389f52b..d7932411 100644
--- a/src/workbook/components/WorkbookSkeleton/index.tsx
+++ b/src/workbook/components/WorkbookSkeleton/index.tsx
@@ -1,19 +1,28 @@
 import { Skeleton } from "@shared/components/ui/skeleton";
 
+import ContentSkeleton from "@common/components/ContentSkeleton";
+
 export default function WorkbookSkeleton() {
+  const skeletonItems = new Array(6).fill(null);
+
   return (
     <div className="flex h-[100vh] w-full flex-col items-center overflow-x-hidden">
       <Skeleton className="h-[338px] w-full" />
 
       {/* Content Skeleton */}
-      <div className="w-full mt-[70px]">
-        <Skeleton className="h-[30px]" style={{ width: "60%" }}/>
-        <Skeleton className="h-[30px]" style={{ width: "80%", marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
+      <div className="mt-[70px] w-full">
+        <ContentSkeleton className="h-[30px]" style={{ width: "60%" }} />
+        <ContentSkeleton
+          className="h-[30px]"
+          style={{ width: "80%", marginTop: "9px" }}
+        />
+        {skeletonItems.map((_, index) => (
+          <ContentSkeleton
+            key={index}
+            className="h-[30px] w-full"
+            style={{ marginTop: "9px" }}
+          />
+        ))}
       </div>
     </div>
   );