From 5263c32c94e0aadd13b1c10091d653da325bac78 Mon Sep 17 00:00:00 2001
From: jiyeeeah <sije3757@snu.ac.kr>
Date: Wed, 11 Oct 2023 23:36:36 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20=EC=8A=A4?=
 =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EB=A7=8C=EB=93=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/main/Feed/index.tsx       |  8 ++---
 components/ui/Loading/FeedBoardLoading.tsx | 36 ++++++++++++++++++++++
 2 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 components/ui/Loading/FeedBoardLoading.tsx

diff --git a/components/pages/main/Feed/index.tsx b/components/pages/main/Feed/index.tsx
index f21c805e..607d2b6c 100644
--- a/components/pages/main/Feed/index.tsx
+++ b/components/pages/main/Feed/index.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { useState } from 'react';
-import PostsList from '@/components/pages/main/Feed/BoardsList';
+import BoardsList from '@/components/pages/main/Feed/BoardsList';
 import FlexBox from '@/components/ui/FlexBox';
 import FeedHeader from '@/components/pages/main/Feed/FeedHeader';
 import { BoardList } from '@/types/types';
-import PostModal from './BoardsList/BoardModal';
+import BoardModal from './BoardsList/BoardModal';
 
 export default function Feed() {
   const [showModal, setShowModal] = useState(false);
@@ -17,11 +17,11 @@ export default function Feed() {
       className={`gap-10 ${showModal ? 'overflow-hidden' : null}`}
     >
       <FeedHeader />
-      <PostsList
+      <BoardsList
         setShowModal={setShowModal}
         setSelectedBoard={setSelectedBoard}
       />
-      <PostModal
+      <BoardModal
         showModal={showModal}
         setShowModal={setShowModal}
         board={selectedBoard}
diff --git a/components/ui/Loading/FeedBoardLoading.tsx b/components/ui/Loading/FeedBoardLoading.tsx
new file mode 100644
index 00000000..31349783
--- /dev/null
+++ b/components/ui/Loading/FeedBoardLoading.tsx
@@ -0,0 +1,36 @@
+import FlexBox from '../FlexBox';
+import { Divider, Skeleton } from '../ui';
+
+export default function FeedBoardLoading() {
+  return (
+    <FlexBox direction="column" className="gap-10">
+      {new Array(10).fill('').map((_, index) => (
+        <div
+          // eslint-disable-next-line react/no-array-index-key
+          key={`board-${index}`}
+          className=" w-[920px] tablet:min-w-[700px]"
+        >
+          <FlexBox
+            direction="column"
+            justify="between"
+            className="h-[500px] p-9 rounded-[10px] border-[1px] border-grey-200 gap-4"
+          >
+            <FlexBox justify="start" className="w-full gap-[10px]">
+              <Skeleton className="rounded-full w-14 h-14" />
+              <Skeleton className="h-10 rounded-lg w-60" />
+            </FlexBox>
+            <Divider type="horizontal" />
+            <div className="flex flex-row w-full h-full gap-9">
+              <Skeleton className="w-2/3 h-full rounded-lg" />
+              <div className="flex flex-col w-1/3 gap-3">
+                <Skeleton className="w-full rounded-lg h-1/3" />
+                <Divider type="horizontal" />
+                <Skeleton className="w-full rounded-lg h-2/3" />
+              </div>
+            </div>
+          </FlexBox>
+        </div>
+      ))}
+    </FlexBox>
+  );
+}