feat: 꿀조합 검색 디자인 변경점 적용

src/components/Recipe/RecipeItem/RecipeItem.tsx

@@ -26,6 +26,7 @@ import {
   RECIPE_CARD_DEFAULT_IMAGE_URL_4,
   RECIPE_CARD_DEFAULT_IMAGE_URL_5,
 } from '@/constants/image';
+import { PATH } from '@/constants/path';
 import RecipeItemProvider from '@/contexts/RecipeItemContext';
 import { useRecipeItemValueContext } from '@/hooks/context';
 import type { Recipe } from '@/types/recipe';
@@ -50,7 +51,7 @@ const RecipeItem = ({ recipe, children }: RecipeItemProps) => {
 
   return (
     <RecipeItemProvider recipe={recipe}>
-      <Link to={`${id}`}>{children}</Link>
+      <Link to={`${PATH.RECIPE}/${id}`}>{children}</Link>
     </RecipeItemProvider>
   );
 };

src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx

@@ -0,0 +1,52 @@
+import { useRef } from 'react';
+import { Link } from 'react-router-dom';
+
+import { linkWrapper, listWrapper, showMore } from './recipeSearchResultPreviewList.css';
+import SearchNotFound from '../SearchNotFound/SearchNotFound';
+
+import { SvgIcon, Text } from '@/components/Common';
+import { DefaultRecipeItem } from '@/components/Recipe';
+import { PATH } from '@/constants/path';
+import { useIntersectionObserver } from '@/hooks/common';
+import { useInfiniteRecipeSearchResultsQuery } from '@/hooks/queries/search';
+import { vars } from '@/styles/theme.css';
+import displaySlice from '@/utils/displaySlice';
+
+interface RecipeSearchResultPreviewListProps {
+  searchQuery: string;
+}
+
+const RecipeSearchResultPreviewList = ({ searchQuery }: RecipeSearchResultPreviewListProps) => {
+  const { data: searchResponse, fetchNextPage, hasNextPage } = useInfiniteRecipeSearchResultsQuery(searchQuery);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
+
+  const recipes = searchResponse.pages.flatMap((page) => page.recipes);
+
+  if (recipes.length === 0) {
+    return <SearchNotFound />;
+  }
+
+  return (
+    <ul className={listWrapper}>
+      {displaySlice(false, recipes, 4).map((recipe, idx) => (
+        <li key={recipe.id}>
+          {idx < 4 ? (
+            <DefaultRecipeItem recipe={recipe} />
+          ) : (
+            <Link to={`${PATH.SEARCH}/recipes?query=${searchQuery}`} className={linkWrapper}>
+              <div className={showMore}>
+                <SvgIcon variant="arrowRight" stroke={vars.colors.gray5} />
+              </div>
+              <Text size="caption2" weight="semiBold" color="info">
+                전체보기
+              </Text>
+            </Link>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default RecipeSearchResultPreviewList;

src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts

@@ -0,0 +1,27 @@
+import { vars } from '@/styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const listWrapper = style({
+  display: 'flex',
+  gap: 10,
+  alignItems: 'center',
+  overflowY: 'scroll',
+});
+
+export const showMore = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 40,
+  height: 40,
+  background: vars.colors.secondary1,
+  borderRadius: '50%',
+});
+
+export const linkWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 12,
+  alignItems: 'center',
+  width: 45,
+});

src/components/Search/index.ts

@@ -1,5 +1,5 @@
-export { default as ProductSearchResultPreviewList } from './ProductSearchResultList/ProductSearchResultPreviewList';
+export { default as ProductSearchResultPreviewList } from './ProductSearchResultPreviewList/ProductSearchResultPreviewList';
 export { default as RecommendList } from './RecommendList/RecommendList';
-export { default as RecipeSearchResultList } from './RecipeSearchResultList/RecipeSearchResultList';
+export { default as RecipeSearchResultPreviewList } from './RecipeSearchResultPreviewList/RecipeSearchResultPreviewList';
 export { default as TagSearchResultList } from './TagSearchResultList/TagSearchResultList';
 export { default as SearchInput } from './SearchInput/SearchInput';

src/components/Search/RecipeSearchResultList/RecipeSearchResultList.tsx → src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx

@@ -1,19 +1,18 @@
 import { useRef } from 'react';
-import { Link } from 'react-router-dom';
-import { styled } from 'styled-components';
+import { useSearchParams } from 'react-router-dom';
 
-import SearchNotFound from '../SearchNotFound/SearchNotFound';
+import { listWrapper } from './recipeSearchListPage.css';
 
-import { RecipeItem } from '@/components/Recipe';
-import { PATH } from '@/constants/path';
+import { PageHeader } from '@/components/Common';
+import { DefaultRecipeItem } from '@/components/Recipe';
+import SearchNotFound from '@/components/Search/SearchNotFound/SearchNotFound';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteRecipeSearchResultsQuery } from '@/hooks/queries/search';
 
-interface RecipeSearchResultListProps {
-  searchQuery: string;
-}
+export const RecipeSearchListPage = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchQuery = searchParams.get('query') || '';
 
-const RecipeSearchResultList = ({ searchQuery }: RecipeSearchResultListProps) => {
   const { data: searchResponse, fetchNextPage, hasNextPage } = useInfiniteRecipeSearchResultsQuery(searchQuery);
   const scrollRef = useRef<HTMLDivElement>(null);
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
@@ -26,24 +25,15 @@ const RecipeSearchResultList = ({ searchQuery }: RecipeSearchResultListProps) =>
 
   return (
     <>
-      <RecipeSearchResultListContainer>
+      <PageHeader title={`'${searchQuery}'이/가 포함된 꿀조합`} hasBackLink />
+      <ul className={listWrapper}>
         {recipes.map((recipe) => (
           <li key={recipe.id}>
-            <Link to={`${PATH.RECIPE}/${recipe.id}`}>
-              <RecipeItem recipe={recipe} />
-            </Link>
+            <DefaultRecipeItem recipe={recipe} />
           </li>
         ))}
-      </RecipeSearchResultListContainer>
+      </ul>
       <div ref={scrollRef} aria-hidden />
     </>
   );
 };
-
-export default RecipeSearchResultList;
-
-const RecipeSearchResultListContainer = styled.ul`
-  & > li + li {
-    margin-top: 40px;
-  }
-`;

src/pages/RecipeSearchListPage/recipeSearchListPage.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const listWrapper = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: '16px 10px',
+  padding: '0 20px',
+});

src/pages/SearchPage/SearchPage.tsx

@@ -6,7 +6,7 @@ import { badgeContainer, searchWrapper, searchResultTitle, searchSection, subTit
 import { Text, Badge, ErrorBoundary, ErrorComponent, Loading, PageHeader } from '@/components/Common';
 import {
   ProductSearchResultPreviewList,
-  RecipeSearchResultList,
+  RecipeSearchResultPreviewList,
   RecommendList,
   SearchInput,
 } from '@/components/Search';
@@ -87,7 +87,7 @@ export const SearchPage = () => {
               </Text>
               <ErrorBoundary fallback={ErrorComponent}>
                 <Suspense fallback={<Loading />}>
-                  <RecipeSearchResultList searchQuery={searchQuery} />
+                  <RecipeSearchResultPreviewList searchQuery={searchQuery} />
                 </Suspense>
               </ErrorBoundary>
             </div>

src/router/index.tsx

@@ -213,6 +213,15 @@ const router = createBrowserRouter([
           return { Component: ProductSearchListPage };
         },
       },
+      {
+        path: `${PATH.SEARCH}/recipes`,
+        async lazy() {
+          const { RecipeSearchListPage } = await import(
+            /* webpackChunkName: "RecipeSearchListPage" */ '@/pages/RecipeSearchListPage/RecipeSearchListPage'
+          );
+          return { Component: RecipeSearchListPage };
+        },
+      },
     ],
   },
 ]);