From dceb62eb6f80574103d55e05b0e66933de8aa194 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Tue, 28 Nov 2023 22:04:35 +0900
Subject: [PATCH 1/8] =?UTF-8?q?Minor=20:=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A7=81=20=EC=B2=B4=EC=9D=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/newpost/SearchAlcoholInput.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/newpost/SearchAlcoholInput.tsx b/client/src/components/newpost/SearchAlcoholInput.tsx
index 1aba2bf..5884c5c 100644
--- a/client/src/components/newpost/SearchAlcoholInput.tsx
+++ b/client/src/components/newpost/SearchAlcoholInput.tsx
@@ -35,7 +35,6 @@ const SearchAlcoholInput = ({ setAlcoholNo }: SearchAlcoholInputInterface) => {
   const [selectedAlcohol, setSelectedAlcohol] =
     useState<AlcoholDetailInterface>();
 
-
   useEffect(() => {
     setSearchKeyword(selectedAlcohol?.alcoholName ?? "");
     setAlcoholNo(selectedAlcohol?.alcoholNo);
@@ -48,6 +47,9 @@ const SearchAlcoholInput = ({ setAlcoholNo }: SearchAlcoholInputInterface) => {
         name="positionInfo"
         size="small"
         InputProps={{
+          sx: {
+            borderRadius: 12,
+          },
           startAdornment: (
             <InputAdornment position="start">
               <AlcholeSearchIcon />
@@ -109,8 +111,8 @@ const SearchAlcoholInput = ({ setAlcoholNo }: SearchAlcoholInputInterface) => {
 const WrapperStyle = {
   width: "calc(100% - 32px)",
   minHeight: "50px",
-  maxHeight:'142px',
-  overflowY:'auto',
+  maxHeight: "142px",
+  overflowY: "auto",
   backgroundColor: "#F5F5F5",
   border: "1px solid #E6E6E6",
   borderRadius: 1.5,

From 26d9a5bb0f481bf025e8474e8211b0d62a5d64e3 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Tue, 28 Nov 2023 22:06:23 +0900
Subject: [PATCH 2/8] =?UTF-8?q?Minor=20:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AA=A8=EB=93=88=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0,=20=ED=8F=AC=EB=A7=A4=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/search/SearchArea.tsx   |  4 +--
 .../components/wiki/WikiAlcoholSelector.tsx   | 28 ++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/client/src/components/search/SearchArea.tsx b/client/src/components/search/SearchArea.tsx
index 1b7f445..7f6f7fe 100644
--- a/client/src/components/search/SearchArea.tsx
+++ b/client/src/components/search/SearchArea.tsx
@@ -1,6 +1,6 @@
 "use client";
-import { Box, CircularProgress, Paper, TextField } from "@mui/material";
-import React, { useState, useMemo, Suspense } from "react";
+import { Paper, TextField } from "@mui/material";
+import React, { useState, useMemo } from "react";
 import PostCardList from "@/components/post/PostCardList";
 import { AugmentedGetPostListResponse } from "@/queries/post/useGetPostListInfiniteQuery";
 import useDebounce from "@/hooks/useDebounce";
diff --git a/client/src/components/wiki/WikiAlcoholSelector.tsx b/client/src/components/wiki/WikiAlcoholSelector.tsx
index 2af1e9a..79aa30a 100644
--- a/client/src/components/wiki/WikiAlcoholSelector.tsx
+++ b/client/src/components/wiki/WikiAlcoholSelector.tsx
@@ -9,28 +9,30 @@ import TraditionalAlcoholIcon from "@/assets/icons/Alcohol/TraditionalAlcoholIco
 import SakeIcon from "@/assets/icons/Alcohol/SakeIcon.svg";
 
 const WikiAlcoholSelector = () => {
-  
-  const btnList =useMemo(()=>[
-    { title: "포도주", iconComponent: <WineIcon /> },
-    { title: "위스키", iconComponent: <WiskyIcon /> },
-    { title: "증류주", iconComponent: <SpiritsIcon /> },
-    { title: "우리술", iconComponent: <TraditionalAlcoholIcon /> },
-    { title: "사케", iconComponent: <SakeIcon /> },
-  ],[]) 
+  const btnList = useMemo(
+    () => [
+      { title: "포도주", iconComponent: <WineIcon /> },
+      { title: "위스키", iconComponent: <WiskyIcon /> },
+      { title: "증류주", iconComponent: <SpiritsIcon /> },
+      { title: "우리술", iconComponent: <TraditionalAlcoholIcon /> },
+      { title: "사케", iconComponent: <SakeIcon /> },
+    ],
+    []
+  );
 
   const [selectedAlcohol, setSelectedAlcohol] = useState(btnList[0].title);
 
-  const clickHandler = useCallback((title:string)=>{
-    setSelectedAlcohol(title)
-  },[])
+  const clickHandler = useCallback((title: string) => {
+    setSelectedAlcohol(title);
+  }, []);
 
   return (
-    <Stack direction="row" justifyContent='center' gap={2}>
+    <Stack direction="row" justifyContent="center" gap={2}>
       {btnList.map((btnInfo) => (
         <WikiAlcoholSelectorBtn
           key={btnInfo.title}
           isSelected={selectedAlcohol === btnInfo.title}
-          onClick={()=>clickHandler(btnInfo.title)}
+          onClick={() => clickHandler(btnInfo.title)}
           {...btnInfo}
         />
       ))}

From f5995d0a30ce11a1d5f45362330eb9ed22b640e2 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Tue, 28 Nov 2023 22:07:46 +0900
Subject: [PATCH 3/8] =?UTF-8?q?Refactor=20:=20=EC=88=A0=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8,=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/app/wiki/page.tsx                  |  4 ++--
 .../src/components/wiki/AlcoholPagination.tsx | 24 +++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/wiki/AlcoholPagination.tsx

diff --git a/client/src/app/wiki/page.tsx b/client/src/app/wiki/page.tsx
index c0d19e2..a74f28a 100644
--- a/client/src/app/wiki/page.tsx
+++ b/client/src/app/wiki/page.tsx
@@ -1,4 +1,4 @@
-import AlcoholList from "@/components/wiki/AlcoholList";
+import AlcoholPagination from "@/components/wiki/AlcoholPagination";
 import WikiAlcoholSelector from "@/components/wiki/WikiAlcoholSelector";
 import { Stack } from "@mui/material";
 import SectionHeading from "@/components/SectionHeading";
@@ -14,7 +14,7 @@ const WikiPage = async () => {
         subTitle={"투파이아들이 쓴 리뷰를 확인할 수 있어요!"}
       />
       <WikiAlcoholSelector />
-      <AlcoholList />
+      <AlcoholPagination />
 
       <SectionHeading title={"술 정보"} subTitle={"곧 출시 됩니다!"} />
       <Stack alignItems="center">
diff --git a/client/src/components/wiki/AlcoholPagination.tsx b/client/src/components/wiki/AlcoholPagination.tsx
new file mode 100644
index 0000000..dbeae6f
--- /dev/null
+++ b/client/src/components/wiki/AlcoholPagination.tsx
@@ -0,0 +1,24 @@
+"use client";
+import useGetAlcoholListQuery from "@/queries/alcohol/useGetAlcoholListQuery";
+import AlcoholList from "@/components/wiki/AlcoholList";
+import { Pagination, Stack } from "@mui/material";
+import AlcoholListSkeleton from "@/components/wiki/AlcoholListSkeleton";
+
+const AlcoholPagenation = () => {
+  const { data: alcohols, isSuccess } = useGetAlcoholListQuery();
+
+  return (
+    <Stack alignItems="center" gap={2}>
+      <Stack gap={1} alignItems="center" width={"100%"} height={"232px"}>
+        {isSuccess ? (
+          <AlcoholList data={alcohols?.list} />
+        ) : (
+          <AlcoholListSkeleton disableTimer />
+        )}
+      </Stack>
+      <Pagination count={alcohols?.totalCount} />
+    </Stack>
+  );
+};
+
+export default AlcoholPagenation;

From abf42d024970ca44ba0af355f5a4aaf49185742d Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Tue, 28 Nov 2023 22:08:16 +0900
Subject: [PATCH 4/8] =?UTF-8?q?Refactor=20:=20=EC=88=A0=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8,=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/wiki/AlcoholList.tsx | 53 +++++++++-------------
 1 file changed, 21 insertions(+), 32 deletions(-)

diff --git a/client/src/components/wiki/AlcoholList.tsx b/client/src/components/wiki/AlcoholList.tsx
index 56c66b3..298a1b9 100644
--- a/client/src/components/wiki/AlcoholList.tsx
+++ b/client/src/components/wiki/AlcoholList.tsx
@@ -1,40 +1,29 @@
 "use client";
 import AlcoholNameTag from "@/components/wiki/AlcoholNameTag";
-import useGetAlcoholListQuery from "@/queries/alcohol/useGetAlcoholListQuery";
-import { Box, Pagination, Skeleton, Stack } from "@mui/material";
+import { AlcoholDetailInterface } from "@/types/alcohol/AlcoholInterface";
+import { Typography } from "@mui/material";
 import { memo } from "react";
 
-const AlcoholList = () => {
-  const { data: alcohols } = useGetAlcoholListQuery();
+const AlcoholList = ({
+  data: alcohols,
+}: {
+  data: AlcoholDetailInterface[];
+}) => {
   return (
-    <Stack alignItems="center" gap={2}>
-      <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>
+    <>
+      {alcohols?.length > 0 ? (
+        alcohols.map((alcohol) => (
+          <AlcoholNameTag
+            key={alcohol.alcoholNo}
+            alcoholName={alcohol.alcoholName}
+            alcoholType={alcohol.alcoholType}
+          />
+        ))
+      ) : (
+        <Typography textAlign="center">검색 결과가 없어요</Typography>
+      )}
+    </>
   );
 };
+export default memo(AlcoholList);
 
-const AlcoholListSkeleton = memo(() => {
-  return Array.from(new Array(5)).map(() => (
-    <Skeleton
-      variant="rectangular"
-      width={"100%"}
-      height={40}
-      sx={{ borderRadius: 2 }}
-    />
-  ));
-});
-
-export default AlcoholList;

From 12f86f0d94e37773bdd8f5681d340ac01735f274 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Tue, 28 Nov 2023 22:09:04 +0900
Subject: [PATCH 5/8] =?UTF-8?q?Refactor=20:=20=ED=82=A4=EC=9B=8C=EB=93=9C?=
 =?UTF-8?q?=EA=B0=80=20=EC=9E=85=EB=A0=A5=EB=90=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EC=95=98=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/queries/alcohol/useGetAlcoholListQuery.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/src/queries/alcohol/useGetAlcoholListQuery.tsx b/client/src/queries/alcohol/useGetAlcoholListQuery.tsx
index b1f5e3d..b2556e5 100644
--- a/client/src/queries/alcohol/useGetAlcoholListQuery.tsx
+++ b/client/src/queries/alcohol/useGetAlcoholListQuery.tsx
@@ -11,6 +11,9 @@ const useGetAlcoholListQuery = (keyword?: string) => {
 };
 
 export const getAlcoholListByKeyword = async (keyword?: string) => {
+  if (keyword === "") {
+    return { list: [], totalCount: 0 };
+  }
   const { data } = await axios.get<{
     list: AlcoholDetailInterface[];
     totalCount: number;

From 7495e251b62a36f5c71b56b901ec13e6e327e950 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Tue, 28 Nov 2023 22:09:37 +0900
Subject: [PATCH 6/8] =?UTF-8?q?New=20:=20=EB=A1=9C=EC=BB=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A0=EB=A6=AC=EC=A7=80=20=ED=82=A4=EB=A5=BC=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EA=B4=80=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/const/localstorageKey.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 client/src/const/localstorageKey.ts

diff --git a/client/src/const/localstorageKey.ts b/client/src/const/localstorageKey.ts
new file mode 100644
index 0000000..26b6387
--- /dev/null
+++ b/client/src/const/localstorageKey.ts
@@ -0,0 +1 @@
+export const ALCOHOL_SEARCH_HISTORY ='alcohol-search-history' as const
\ No newline at end of file

From 2557610bfa2a5ccb2355db669a81a91095c3f419 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Tue, 28 Nov 2023 22:10:41 +0900
Subject: [PATCH 7/8] =?UTF-8?q?New=20:=20UX=EA=B0=9C=EC=84=A0=EC=9D=84=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=9C=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EB=94=9C=EB=A0=88=EC=9D=B4=20=ED=83=80?=
 =?UTF-8?q?=EC=9D=B4=EB=A8=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/hooks/useSkeletonTimer.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 client/src/hooks/useSkeletonTimer.ts

diff --git a/client/src/hooks/useSkeletonTimer.ts b/client/src/hooks/useSkeletonTimer.ts
new file mode 100644
index 0000000..d444958
--- /dev/null
+++ b/client/src/hooks/useSkeletonTimer.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+/**
+ * 시간을 인자로 받아 해당 시간이 지난 후 true를 리턴, 시간이 지나지 않았을 경우 false를 리턴
+ * @param time ms 단위, 기본값은 200ms
+ * @returns 입력받은 시간이 지났는지 여부
+ */
+const useSkeletonTimer = (time: number = 200) => {
+  const [isTimePassed, setTimer] = useState(false);
+  
+  useEffect(() => {
+    const timerId = setTimeout(() => {
+      setTimer(true);
+    }, time);
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, []);
+  return isTimePassed;
+};
+
+export default useSkeletonTimer;

From 3859f00743f4eeaec9db289065f8797ce9a067cd Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Tue, 28 Nov 2023 22:12:43 +0900
Subject: [PATCH 8/8] =?UTF-8?q?New=20:=20=EC=88=A0=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/app/wiki/layout.tsx                | 42 ++++++-----
 client/src/components/SearchHistory.tsx       | 72 +++++++++++++++++++
 .../components/wiki/AlcoholListSkeleton.tsx   | 31 ++++++++
 client/src/components/wiki/WikiAppbar.tsx     |  9 ++-
 .../wiki/searchDrawer/WikiSearchDrawer.tsx    | 47 ++++++++++++
 .../wiki/searchDrawer/WikiSerachArea.tsx      | 59 +++++++++++++++
 client/src/store/wiki/WikiPageContext.ts      | 13 ++++
 7 files changed, 253 insertions(+), 20 deletions(-)
 create mode 100644 client/src/components/SearchHistory.tsx
 create mode 100644 client/src/components/wiki/AlcoholListSkeleton.tsx
 create mode 100644 client/src/components/wiki/searchDrawer/WikiSearchDrawer.tsx
 create mode 100644 client/src/components/wiki/searchDrawer/WikiSerachArea.tsx
 create mode 100644 client/src/store/wiki/WikiPageContext.ts

diff --git a/client/src/app/wiki/layout.tsx b/client/src/app/wiki/layout.tsx
index 3183fee..3f89e4d 100644
--- a/client/src/app/wiki/layout.tsx
+++ b/client/src/app/wiki/layout.tsx
@@ -1,25 +1,33 @@
+"use client";
 import { Paper, Container } from "@mui/material";
 import WikiAppbar from "@/components/wiki/WikiAppbar";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
+import WikiPageContext from "@/store/wiki/WikiPageContext";
+import WikiSearchDrawer from "@/components/wiki/searchDrawer/WikiSearchDrawer";
 
 const layout = ({ children }: { children: ReactNode }) => {
+  const [isSearching, setIsSearching] = useState(false);
+
   return (
-    <Paper>
-      <WikiAppbar />
-      <Container sx={{ p: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
-        <Paper
-          sx={{
-            display: "flex",
-            position: "relative",
-            flexDirection: "column",
-            gap: 2,
-            p: 2,
-          }}
-        >
-          {children}
-        </Paper>
-      </Container>
-    </Paper>
+    <WikiPageContext.Provider value={{ isSearching, setIsSearching }}>
+      <Paper>
+        <WikiAppbar />
+        <Container sx={{ p: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
+          <Paper
+            sx={{
+              display: "flex",
+              position: "relative",
+              flexDirection: "column",
+              gap: 2,
+              p: 2,
+            }}
+          >
+            <WikiSearchDrawer />
+            {children}
+          </Paper>
+        </Container>
+      </Paper>
+    </WikiPageContext.Provider>
   );
 };
 
diff --git a/client/src/components/SearchHistory.tsx b/client/src/components/SearchHistory.tsx
new file mode 100644
index 0000000..873ce5b
--- /dev/null
+++ b/client/src/components/SearchHistory.tsx
@@ -0,0 +1,72 @@
+import { Button, Stack, StackProps, Typography } from "@mui/material";
+import { useCallback, useState } from "react";
+import XIcon from "@/assets/icons/XIcon.svg";
+
+interface SearchHistoryProps extends Omit<StackProps, "onClick"> {
+  storageKey: string;
+  onClick: () => void;
+}
+
+const SearchHistory = ({ storageKey, onClick }: SearchHistoryProps) => {
+  const getItems = useCallback(() => {
+    return JSON.parse(localStorage.getItem(storageKey) ?? "[]") as string[];
+  }, [storageKey]);
+
+  const [searchHistory, setSearchHistory] = useState<string[]>(getItems());
+
+  const removeAll = useCallback(() => {
+    localStorage.setItem(storageKey, "[]");
+    setSearchHistory(getItems());
+  }, [storageKey]);
+
+  const removeByKeyword = useCallback(
+    (keyword: string) => {
+      const filteredHistory = searchHistory.filter(
+        (prevKeyword) => prevKeyword !== keyword
+      );
+      localStorage.setItem(storageKey, JSON.stringify(filteredHistory));
+      setSearchHistory(getItems());
+    },
+    [storageKey]
+  );
+
+  return searchHistory.length > 0 ? (
+    <>
+      <Stack direction="row" justifyContent="space-between">
+        <Typography variant="subtitle1" fontWeight="bold">
+          최근 검색어
+        </Typography>
+        <Button onClick={removeAll} variant="text" sx={{ fontWeight: "bold" }}>
+          전체 삭제
+        </Button>
+      </Stack>
+      <Stack>
+        {searchHistory.map((keyword) => (
+          <Stack
+            key={keyword}
+            onClick={onClick}
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="subtitle2">{keyword}</Typography>
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                removeByKeyword(keyword);
+              }}
+              variant="text"
+              sx={{ justifyContent: "end" }}
+            >
+              <XIcon />
+            </Button>
+          </Stack>
+        ))}
+      </Stack>
+    </>
+  ) : (
+    <></>
+  );
+};
+
+export default SearchHistory;
diff --git a/client/src/components/wiki/AlcoholListSkeleton.tsx b/client/src/components/wiki/AlcoholListSkeleton.tsx
new file mode 100644
index 0000000..3cbf74b
--- /dev/null
+++ b/client/src/components/wiki/AlcoholListSkeleton.tsx
@@ -0,0 +1,31 @@
+import { memo } from "react";
+import { Skeleton } from "@mui/material";
+
+import useSkeletonTimer from "@/hooks/useSkeletonTimer";
+
+interface AlcoholListSkeletonInterface {
+  size?: number;
+  disableTimer?: boolean;
+}
+
+const AlcoholListSkeleton = memo(
+  ({ size = 5, disableTimer }: AlcoholListSkeletonInterface) => {
+    const isOver200ms = !!disableTimer ? true : useSkeletonTimer();
+
+    return isOver200ms ? (
+      Array.from(new Array(size)).map((_e, i) => (
+        <Skeleton
+          key={i}
+          variant="rectangular"
+          width={"100%"}
+          height={40}
+          sx={{ borderRadius: 2 }}
+        />
+      ))
+    ) : (
+      <></>
+    );
+  }
+);
+
+export default AlcoholListSkeleton;
diff --git a/client/src/components/wiki/WikiAppbar.tsx b/client/src/components/wiki/WikiAppbar.tsx
index 94c823e..2e7b6f2 100644
--- a/client/src/components/wiki/WikiAppbar.tsx
+++ b/client/src/components/wiki/WikiAppbar.tsx
@@ -1,15 +1,18 @@
-'use client'
+"use client";
 import CustomAppbar from "@/components/CustomAppbar";
 import SearchIcon from "@/assets/icons/SearchIcon.svg";
+import { memo, useContext } from "react";
+import WikiPageContext from "@/store/wiki/WikiPageContext";
 
 const WikiAppbar = () => {
+  const { setIsSearching } = useContext(WikiPageContext);
   return (
     <CustomAppbar
       title="술백과"
       buttonComponent={<SearchIcon />}
-      onClickButton={() => console.log("눌림")}
+      onClickButton={() => setIsSearching(true)}
     />
   );
 };
 
-export default WikiAppbar;
+export default memo(WikiAppbar);
diff --git a/client/src/components/wiki/searchDrawer/WikiSearchDrawer.tsx b/client/src/components/wiki/searchDrawer/WikiSearchDrawer.tsx
new file mode 100644
index 0000000..2538faf
--- /dev/null
+++ b/client/src/components/wiki/searchDrawer/WikiSearchDrawer.tsx
@@ -0,0 +1,47 @@
+import { SwipeableDrawer, Stack, styled, Box } from "@mui/material";
+import { useContext } from "react";
+import WikiPageContext from "@/store/wiki/WikiPageContext";
+import WikiSerachArea from "@/components/wiki/searchDrawer/WikiSerachArea";
+
+const WikiSearchDrawer = () => {
+  const { isSearching, setIsSearching } = useContext(WikiPageContext);
+
+  const pullerBleed = 24;
+  return (
+    <SwipeableDrawer
+      open={isSearching}
+      onOpen={() => setIsSearching(true)}
+      onClose={() => setIsSearching(false)}
+      anchor="bottom"
+      disableSwipeToOpen
+      PaperProps={{
+        sx: {
+          p: 2,
+          borderTopLeftRadius: pullerBleed,
+          borderTopRightRadius: pullerBleed,
+          overFlow: "hidden",
+        },
+      }}
+      ModalProps={{
+        keepMounted: false,
+      }}
+    >
+      <Puller />
+      <Stack gap={2} pt={`${pullerBleed + 8}px`}>
+        <WikiSerachArea />
+      </Stack>
+    </SwipeableDrawer>
+  );
+};
+
+export default WikiSearchDrawer;
+
+const Puller = styled(Box)(() => ({
+  width: 56,
+  height: 4,
+  backgroundColor: "#F6EAFB",
+  borderRadius: 3,
+  position: "absolute",
+  top: 8,
+  left: "calc(50% - 28px)",
+}));
diff --git a/client/src/components/wiki/searchDrawer/WikiSerachArea.tsx b/client/src/components/wiki/searchDrawer/WikiSerachArea.tsx
new file mode 100644
index 0000000..7c517fc
--- /dev/null
+++ b/client/src/components/wiki/searchDrawer/WikiSerachArea.tsx
@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from "react";
+import useDebounce from "@/hooks/useDebounce";
+import InputSearchIcon from "@/assets/icons/InputSearchIcon.svg";
+import { Stack, TextField } from "@mui/material";
+import useGetAlcoholListQuery from "@/queries/alcohol/useGetAlcoholListQuery";
+import AlcoholList from "@/components/wiki/AlcoholList";
+import AlcoholListSkeleton from "../AlcoholListSkeleton";
+import SearchHistory from "@/components/SearchHistory";
+import { ALCOHOL_SEARCH_HISTORY } from "@/const/localstorageKey";
+
+const WikiSerachArea = () => {
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const debouncedValue = useDebounce(searchKeyword, 300);
+  const { data: alcohols, isSuccess } = useGetAlcoholListQuery(debouncedValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <>
+      <TextField
+        label="검색어를 입력해주세요"
+        autoFocus
+        autoComplete="off"
+        value={searchKeyword}
+        inputRef={inputRef}
+        onChange={({ target }) => setSearchKeyword(target.value)}
+        InputProps={{
+          endAdornment: <InputSearchIcon />,
+          sx: {
+            borderRadius: "12px",
+          },
+        }}
+      />
+      <Stack gap={1} height={"232px"}>
+        {searchKeyword ? (
+          // 입력중인 경우
+          <>
+            {isSuccess ? (
+              <AlcoholList data={alcohols.list} />
+            ) : (
+              <AlcoholListSkeleton />
+            )}
+          </>
+        ) : (
+          // 입력이 없는경우 검색기록 표출
+          <SearchHistory
+            onClick={() => console.log("눌림")}
+            storageKey={ALCOHOL_SEARCH_HISTORY}
+          />
+        )}
+      </Stack>
+    </>
+  );
+};
+
+export default WikiSerachArea;
diff --git a/client/src/store/wiki/WikiPageContext.ts b/client/src/store/wiki/WikiPageContext.ts
new file mode 100644
index 0000000..b6e5c83
--- /dev/null
+++ b/client/src/store/wiki/WikiPageContext.ts
@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction, createContext } from "react";
+
+interface WikiPageContextInterface {
+  isSearching: boolean;
+  setIsSearching: Dispatch<SetStateAction<boolean>>;
+}
+
+const WikiPageContext = createContext<WikiPageContextInterface>({
+  isSearching: true,
+  setIsSearching: () => {},
+});
+
+export default WikiPageContext;