Feat: 게시물 스켈레톤 만듦

puppypawpaw · Oct 12, 2023 · 5263c32 · 5263c32
1 parent 82098f2
commit 5263c32
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git 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
@@ -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>
+  );
+}