Refactor : SearchParam으로 제공된 AlcoholNo로 검색이 가능하도록 리팩토링

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)}
       />
     </>
   );

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>

client/src/components/search/SearchArea.tsx

@@ -7,20 +7,25 @@ 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, []);
 
   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}
       />
     </>
   );