feat: 서랍장 검색 페이지 작업

src/drawer/apis/getSearchData.ts

@@ -0,0 +1,16 @@
+import { soomsilClient } from '@/apis';
+
+import { ProductSearchRequestParams } from '../types/ProductRequestParams.type';
+import { ProductResponses } from '../types/product.type';
+
+export const getSearchData = async ({ keyword, category, page }: ProductSearchRequestParams) => {
+  const response = await soomsilClient.get<ProductResponses>('/v2/drawer/search', {
+    params: {
+      keyword,
+      category,
+      page,
+    },
+  });
+
+  return response.data;
+};

src/drawer/components/Header/Header.tsx

@@ -1,5 +1,10 @@
+
+import { useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
 import { IcSearchLine } from '@yourssu/design-system-react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
+
 import { useTheme } from 'styled-components';
 
 import soomsil from '@/assets/soomsil_logo.svg';
@@ -22,6 +27,12 @@ export const Header = () => {
   const setDialog = useSetRecoilState(DialogState);
 
   const theme = useTheme();
+  const [searchValue, setSearchValue] = useState<string | undefined>('');
+  const navigate = useNavigate();
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value);
+  };
 
   const handleClickAuthTab = (event: React.MouseEvent) => {
     if (isLoggedIn) return;
@@ -46,7 +57,16 @@ export const Header = () => {
       </StyledHeaderTabs>
       <FlexGrowItem proportion={1} />
       <StyledHeaderSearchContainer>
-        <StyledHeaderSearchInput type="text" />
+        <StyledHeaderSearchInput
+          type="text"
+          value={searchValue}
+          onChange={handleInputChange}
+          onKeyUp={(e) => {
+            if (e.key === 'Enter') {
+              navigate(`/drawer/search?keyword=${searchValue}`);
+            }
+          }}
+        />
         <IcSearchLine color={theme.color.buttonNormalPressed} size="1.25rem" />
       </StyledHeaderSearchContainer>
       <StyledProfileIconButton color={theme.color.textPointed} size="2rem" />

src/drawer/hooks/useGetSearchData.ts

@@ -0,0 +1,29 @@
+import { InfiniteData, useSuspenseInfiniteQuery } from '@tanstack/react-query';
+
+import { getSearchData } from '../apis/getSearchData';
+import { PRODUCTS_PER_PAGE } from '../constants/page.constant';
+import { ProductSearchRequestParams } from '../types/ProductRequestParams.type';
+import { ProductResponses, ProductResult } from '../types/product.type';
+
+type ProductRequestParamsWithoutPage = Omit<ProductSearchRequestParams, 'page'>;
+
+export const useGetSearchData = ({ keyword, category }: ProductRequestParamsWithoutPage) => {
+  return useSuspenseInfiniteQuery<
+    ProductResponses[],
+    Error,
+    InfiniteData<ProductResult[], number>,
+    string[],
+    number
+  >({
+    queryKey: ['searchData', keyword ?? '', category ?? ''],
+    queryFn: ({ pageParam }) =>
+      getSearchData({ keyword, category, page: pageParam }).then(
+        (data) => data.productList
+      ) as Promise<ProductResponses[]>,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.length === PRODUCTS_PER_PAGE ? allPages.length : undefined;
+    },
+    retry: false,
+  });
+};

src/drawer/pages/DrawerSearch/DrawerSearch.style.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+export const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8.56rem;
+`;
+
+interface StyledRankingCategoryContainerProps {
+  $isSmallDesktop?: boolean;
+}
+
+export const StyledRankingContainer = styled.section<StyledRankingCategoryContainerProps>`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  margin-bottom: 4rem;
+`;
+
+export const StyledEmptyContainer = styled.section`
+  width: 80rem;
+`;
+
+export const StyledCardContainer = styled.section`
+  display: grid;
+  grid-template-columns: repeat(3, 25.5rem);
+  gap: 1.75rem;
+  margin-top: 2rem;
+`;
+
+export const StyledDescription = styled.p`
+  ${({ theme }) => theme.color.textPrimary};
+  width: 80rem;
+
+  ${({ theme }) => theme.typo.subtitle2};
+`;

src/drawer/pages/DrawerSearch/DrawerSearch.tsx

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { useSearchParams } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+
+import { CardLayout } from '@/drawer/components/CardLayout/CardLayout';
+import { CategoryDropdownMenu } from '@/drawer/components/Category/CategoryDropdownMenu/CategoryDropdownMenu';
+import { RankingCategory } from '@/drawer/components/Category/RankingCategory';
+import { EmptyScreen } from '@/drawer/components/EmptyScreen/EmptyScreen';
+import { SMALL_DESKTOP_MEDIA_QUERY } from '@/drawer/constants/mobileview.constant';
+import { useGetSearchData } from '@/drawer/hooks/useGetSearchData';
+import { CategoryState } from '@/drawer/recoil/CategoryState';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+
+import {
+  StyledCardContainer,
+  StyledContainer,
+  StyledEmptyContainer,
+  StyledRankingContainer,
+} from './DrawerSearch.style';
+
+export const DrawerSearch = () => {
+  const [searchParams] = useSearchParams();
+  const keyword = searchParams.get('keyword') || '';
+  const [selectedCategory, setSelectedCategory] = useRecoilState(CategoryState);
+
+  const {
+    data: searchResults,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+  } = useGetSearchData({ keyword, category: selectedCategory });
+
+  useEffect(() => {
+    setSelectedCategory('');
+  }, []);
+
+  const observer = useRef<IntersectionObserver>();
+
+  const lastElementRef = useCallback(
+    (node: HTMLDivElement) => {
+      if (isLoading) return;
+
+      if (observer.current) observer.current.disconnect();
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && hasNextPage) {
+          fetchNextPage();
+        }
+      });
+      if (node) observer.current.observe(node);
+    },
+    [isLoading, hasNextPage]
+  );
+
+  const allProducts = searchResults ? searchResults.pages.flat() : [];
+
+  const isSmallDesktop = useMediaQuery(SMALL_DESKTOP_MEDIA_QUERY);
+
+  return (
+    <StyledContainer>
+      {!isSmallDesktop && <RankingCategory />}
+      <StyledRankingContainer $isSmallDesktop={isSmallDesktop}>
+        {isSmallDesktop && <CategoryDropdownMenu />}
+        {allProducts.length === 0 ? (
+          <StyledEmptyContainer>
+            <EmptyScreen type={'SEARCH'} />
+          </StyledEmptyContainer>
+        ) : (
+          <StyledCardContainer>
+            <CardLayout data={allProducts} type={'SEARCH'} />
+          </StyledCardContainer>
+        )}
+        {hasNextPage && <div ref={lastElementRef} />}
+      </StyledRankingContainer>
+    </StyledContainer>
+  );
+};

src/drawer/types/ProductRequestParams.type.ts

@@ -3,3 +3,9 @@ export interface ProductRequestParams {
   category?: string;
   page: number;
 }
+
+export interface ProductSearchRequestParams {
+  keyword?: string;
+  category?: string;
+  page: number;
+}

src/router.tsx

@@ -82,6 +82,12 @@ const Withdraw = lazy(() =>
   }))
 );
 
+const DrawerSearch = lazy(() =>
+  import('./drawer/pages/DrawerSearch/DrawerSearch').then(({ DrawerSearch }) => ({
+    default: DrawerSearch,
+  }))
+);
+
 export const Router = () => {
   const [state, setState] = useState({
     isAnimating: false,
@@ -129,6 +135,7 @@ export const Router = () => {
             <Route path="/drawer/newRelease" element={<NewRelease />} />
             <Route path="/drawer/starRanking" element={<StarRanking />} />
             <Route path=":providerId" element={<Provider />} />
+            <Route path="/drawer/search" element={<DrawerSearch />} />
           </Route>
           <Route path="/search" element={<Search />} />
         </Routes>