From 59edee428cbce06eedf037abf72b9f4c70d6a095 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Sat, 6 Jan 2024 05:57:03 +0900
Subject: [PATCH] =?UTF-8?q?Refactor=20:=20SearchParam=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B3=B5=EB=90=9C=20AlcoholNo=EB=A1=9C=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=EC=9D=B4=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/app/search/page.tsx              |  6 +++++-
 client/src/components/post/PostCardList.tsx | 18 ++++++++++++++----
 client/src/components/search/SearchArea.tsx | 12 +++++++++---
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/client/src/app/search/page.tsx b/client/src/app/search/page.tsx
index ec5e9d2..7d8195a 100644
--- a/client/src/app/search/page.tsx
+++ b/client/src/app/search/page.tsx
@@ -8,9 +8,12 @@ const SearchPage = async ({
 }: {
   searchParams?: { [key: string]: string | undefined };
 }) => {
-  const accessToken = await getTokenFromCookies()
+  const accessToken = await getTokenFromCookies();
   const initialData = await getPostListQueryFn({
     searchKeyword: searchParams?.keyword,
+    searchAlcoholNos: searchParams?.searchAlcoholNos
+      ? Number(searchParams?.searchAlcoholNos)
+      : undefined,
     headers: { Authorization: accessToken },
   });
 
@@ -19,6 +22,7 @@ const SearchPage = async ({
       <SearchArea
         initialData={initialData}
         searchKeyword={searchParams?.keyword}
+        searchAlcoholNos={Number(searchParams?.searchAlcoholNos)}
       />
     </>
   );
diff --git a/client/src/components/post/PostCardList.tsx b/client/src/components/post/PostCardList.tsx
index 01adf81..0a11a61 100644
--- a/client/src/components/post/PostCardList.tsx
+++ b/client/src/components/post/PostCardList.tsx
@@ -14,7 +14,13 @@ import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
 import { postcardContext } from "@/store/post/PostCardContext";
 import PostCardSkeleton from "./PostCardSkeleton";
 
-function PostCardList(props: UseGetPostListQueryInterface) {
+function PostCardList({
+  searchAlcoholNos,
+  searchKeyword,
+  searchUserNos,
+  sort,
+  ...props
+}: UseGetPostListQueryInterface) {
   const {
     data,
     fetchNextPage,
@@ -23,12 +29,16 @@ function PostCardList(props: UseGetPostListQueryInterface) {
     isSuccess,
     isLoading,
   } = useGetPostListInfiniteQuery({
+    // 검색중이 아니면서 AlcoholNos 가 있는 경우에만 AlcoholNo로 검색
+    searchAlcoholNos:
+      searchKeyword === "" && searchAlcoholNos ? searchAlcoholNos : undefined,
+    sort,
+    searchUserNos,
+    searchKeyword: searchKeyword !== "" ? searchKeyword : undefined,
     ...props,
     headers: { Authorization: getTokenFromLocalStorage() },
   });
 
-  const { searchKeyword, searchUserNos, sort } = props;
-
   const { ref, inView } = useInView();
   useEffect(() => {
     if (hasNextPage && inView) fetchNextPage();
@@ -59,7 +69,7 @@ function PostCardList(props: UseGetPostListQueryInterface) {
           <PostCardSkeleton />
         ) : (
           // 인터섹션옵저버
-          hasNextPage&&<div style={{ height: 60 }} ref={ref}></div>
+          hasNextPage && <div style={{ height: 60 }} ref={ref}></div>
         )}
       </div>
     </postcardContext.Provider>
diff --git a/client/src/components/search/SearchArea.tsx b/client/src/components/search/SearchArea.tsx
index cc97ada..4f28980 100644
--- a/client/src/components/search/SearchArea.tsx
+++ b/client/src/components/search/SearchArea.tsx
@@ -7,12 +7,17 @@ import useDebounce from "@/hooks/useDebounce";
 import InputSearchIcon from "~/assets/icons/InputSearchIcon.svg";
 import { motion } from "framer-motion";
 
-type Props = {
+type SearchAreaProps = {
   initialData: AugmentedGetPostListResponse;
   searchKeyword?: string;
+  searchAlcoholNos?: number;
 };
 
-const SearchArea = ({ initialData, searchKeyword }: Props) => {
+const SearchArea = ({
+  initialData,
+  searchKeyword,
+  searchAlcoholNos,
+}: SearchAreaProps) => {
   const [keyword, setKeyword] = useState(searchKeyword ?? "");
   const debouncedValue = useDebounce(keyword, 300);
   const MemoidInitailData = useMemo(() => initialData, []);
@@ -20,7 +25,7 @@ const SearchArea = ({ initialData, searchKeyword }: Props) => {
   return (
     <>
       <Box
-        height= {72}
+        height={72}
         sx={{
           position: "fixed",
           top: 0,
@@ -55,6 +60,7 @@ const SearchArea = ({ initialData, searchKeyword }: Props) => {
       <PostCardList
         initialData={!keyword ? MemoidInitailData : undefined}
         searchKeyword={debouncedValue}
+        searchAlcoholNos={searchAlcoholNos}
       />
     </>
   );