From f374280eb9cb13669c52245b4ff43cddfd5f796b Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Tue, 28 Nov 2023 03:42:20 +0900
Subject: [PATCH] =?UTF-8?q?New=20:=20=EC=88=A0=EB=A6=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4,=20=EC=B5=9C=EC=A0=80?=
 =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/wiki/AlcoholList.tsx | 23 ++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/client/src/components/wiki/AlcoholList.tsx b/client/src/components/wiki/AlcoholList.tsx
index eddd1cb..56c66b3 100644
--- a/client/src/components/wiki/AlcoholList.tsx
+++ b/client/src/components/wiki/AlcoholList.tsx
@@ -1,25 +1,40 @@
 "use client";
 import AlcoholNameTag from "@/components/wiki/AlcoholNameTag";
 import useGetAlcoholListQuery from "@/queries/alcohol/useGetAlcoholListQuery";
-import { Pagination, Stack } from "@mui/material";
+import { Box, Pagination, Skeleton, Stack } from "@mui/material";
+import { memo } from "react";
 
 const AlcoholList = () => {
   const { data: alcohols } = useGetAlcoholListQuery();
   return (
     <Stack alignItems="center" gap={2}>
-      <Stack gap={1} alignItems="center" width={'100%'}>
-        {alcohols &&
+      <Stack gap={1} alignItems="center" width={"100%"} height={"232px"}>
+        {alcohols ? (
           alcohols.list.map((alcohol) => (
             <AlcoholNameTag
               key={alcohol.alcoholNo}
               alcoholName={alcohol.alcoholName}
               alcoholType={alcohol.alcoholType}
             />
-          ))}
+          ))
+        ) : (
+          <AlcoholListSkeleton />
+        )}
       </Stack>
       <Pagination count={alcohols?.totalCount} />
     </Stack>
   );
 };
 
+const AlcoholListSkeleton = memo(() => {
+  return Array.from(new Array(5)).map(() => (
+    <Skeleton
+      variant="rectangular"
+      width={"100%"}
+      height={40}
+      sx={{ borderRadius: 2 }}
+    />
+  ));
+});
+
 export default AlcoholList;