Feat: 게시글 단일 페이지 loading중일 때 스켈레톤 페이지 표시 #65

Author: jiyeeeah

components/ui/BoardCard/BoardIdCard.tsx

@@ -1,11 +1,13 @@
 import useGetBoard from '@/hooks/queries/useGetBoard';
 import useGetCommentList from '@/hooks/queries/useGetCommentList';
 import { BoardCardId } from './BoardCardPackage/BoardCardIdPackage';
+import BoardIdLoading from '../Loading/BoardIdLoading';
 
 export default function BoardIdCard({ boardId }: { boardId: number }) {
-  const { data: board } = useGetBoard(boardId);
+  const { data: board, isLoading } = useGetBoard(boardId);
   const { data: commentList, Observer } = useGetCommentList(boardId);
 
+  if (isLoading) return <BoardIdLoading />;
   if (board) {
     return (
       <BoardCardId>

components/ui/BoardCard/ModalBoardCard.tsx

@@ -1,11 +1,13 @@
 import { BoardCardModal } from '@/components/ui/BoardCard/BoardCardPackage/BoardCardModalPackage';
 import useGetBoard from '@/hooks/queries/useGetBoard';
 import useGetCommentList from '@/hooks/queries/useGetCommentList';
+import ModalBoardLoading from '../Loading/ModalBoardLoading';
 
 export default function ModalBoardCard({ boardId }: { boardId: number }) {
-  const { data: board } = useGetBoard(boardId);
+  const { data: board, isLoading } = useGetBoard(boardId);
   const { data: commentList, Observer } = useGetCommentList(boardId);
 
+  if (isLoading) return <ModalBoardLoading />;
   if (board) {
     return (
       <BoardCardModal imgs={board.fileNames}>

components/ui/Loading/BoardIdLoading.tsx

@@ -0,0 +1,25 @@
+import { Divider, FlexBox, Skeleton } from '../ui';
+
+export default function BoardIdLoading() {
+  return (
+    <FlexBox
+      direction="column"
+      justify="between"
+      className="w-full h-full gap-4 p-9"
+    >
+      <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>
+  );
+}

components/ui/Loading/ModalBoardLoading.tsx

@@ -0,0 +1,25 @@
+import { Divider, FlexBox, Skeleton } from '../ui';
+
+export default function ModalBoardLoading() {
+  return (
+    <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>
+  );
+}