feat: 태그 검색 기능 구현

src/components/Common/Text/Text.tsx

@@ -1,3 +1,5 @@
+import cx from 'classnames';
+
 import { text } from './text.css';
 import type { TextElement, TextVariants, OverridableComponentPropsWithoutRef } from './text.types';
 
@@ -8,10 +10,11 @@ const Text = <T extends TextElement = 'p'>({
   size = 'body',
   weight = 'regular',
   color = 'default',
+  className,
   ...props
 }: TextProps<T>) => {
   return (
-    <p className={text({ color, size, weight })} {...props}>
+    <p className={cx(text({ color, size, weight }), className)} {...props}>
       {children}
     </p>
   );

src/components/Search/ProductSearchResultList/ProductSearchResultList.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ProductSearchResultList from './ProductSearchResultList';
+
+const meta: Meta<typeof ProductSearchResultList> = {
+  title: 'search/ProductSearchResultList',
+  component: ProductSearchResultList,
+  args: {
+    searchQuery: '꼬북칩',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/components/Search/ProductSearchResultList/ProductSearchResultList.tsx

@@ -1,12 +1,14 @@
 import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import { container } from './productSearchResultList.css';
+import { container, showMoreButton } from './productSearchResultList.css';
+import SearchNotFound from '../SearchNotFound/SearchNotFound';
 
 import { ProductOverviewItem } from '@/components/Product';
 import { PATH } from '@/constants/path';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductSearchResultsQuery } from '@/hooks/queries/search';
+import displaySlice from '@/utils/displaySlice';
 
 interface ProductSearchResultListProps {
   searchQuery: string;
@@ -22,23 +24,26 @@ const ProductSearchResultList = ({ searchQuery }: ProductSearchResultListProps)
   }
 
   const products = searchResponse.pages.flatMap((page) => page.products);
+  const productToDisplay = displaySlice(true, products);
 
   if (products.length === 0) {
-    return <p>검색한 상품을 찾을 수 없습니다.</p>;
+    return <SearchNotFound />;
   }
 
   return (
     <>
       <ul className={container}>
-        {products.map(({ id, categoryType, image, name, price, averageRating }) => (
+        {productToDisplay.map(({ id, categoryType, image, name, price, averageRating }) => (
           <li key={id}>
             <Link to={`${PATH.PRODUCT_LIST}/${categoryType}/${id}`}>
               <ProductOverviewItem image={image} name={name} price={price} rate={averageRating} />
             </Link>
           </li>
         ))}
       </ul>
-      <div ref={scrollRef} aria-hidden />
+      <Link to={`${PATH.SEARCH}/products?query=${searchQuery}`} className={showMoreButton}>
+        더보기
+      </Link>
     </>
   );
 };

src/components/Search/ProductSearchResultList/productSearchResultList.css.ts

@@ -5,3 +5,16 @@ export const container = style({
   flexDirection: 'column',
   gap: 20,
 });
+
+export const showMoreButton = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: 38,
+  padding: '9px 0',
+  margin: '20px 0',
+  background: '#efefef',
+  fontSize: 14,
+  borderRadius: 6,
+});

src/components/Search/RecipeSearchResultList/RecipeSearchResultList.tsx

@@ -1,8 +1,9 @@
-import { Link, Text } from '@fun-eat/design-system';
 import { useRef } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 
+import SearchNotFound from '../SearchNotFound/SearchNotFound';
+
 import { RecipeItem } from '@/components/Recipe';
 import { PATH } from '@/constants/path';
 import { useIntersectionObserver } from '@/hooks/common';
@@ -20,15 +21,15 @@ const RecipeSearchResultList = ({ searchQuery }: RecipeSearchResultListProps) =>
   const recipes = searchResponse.pages.flatMap((page) => page.recipes);
 
   if (recipes.length === 0) {
-    return <Text>검색한 꿀조합을 찾을 수 없습니다.</Text>;
+    return <SearchNotFound />;
   }
 
   return (
     <>
       <RecipeSearchResultListContainer>
         {recipes.map((recipe) => (
           <li key={recipe.id}>
-            <Link as={RouterLink} to={`${PATH.RECIPE}/${recipe.id}`}>
+            <Link to={`${PATH.RECIPE}/${recipe.id}`}>
               <RecipeItem recipe={recipe} />
             </Link>
           </li>

src/components/Search/SearchInput/SearchInput.tsx

@@ -1,16 +1,17 @@
 import type { ComponentPropsWithRef, ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 
-import { iconWrapperButton, inputContainer, searchInput } from './searchInput.css';
+import { iconWrapperButton, inputContainer, searchInput, tagInputWrapper } from './searchInput.css';
 
-import { SvgIcon } from '@/components/Common';
+import { Text, SvgIcon } from '@/components/Common';
 
 interface SearchInputProps extends ComponentPropsWithRef<'input'> {
   isInputSubmitted: boolean;
+  isTagSearch: boolean;
 }
 
 const SearchInput = forwardRef(
-  ({ value, isInputSubmitted, ...props }: SearchInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+  ({ value, isInputSubmitted, isTagSearch, ...props }: SearchInputProps, ref: ForwardedRef<HTMLInputElement>) => {
     return (
       <div className={inputContainer}>
         <input
@@ -20,11 +21,25 @@ const SearchInput = forwardRef(
           value={value}
           {...props}
         />
+        {isTagSearch && isInputSubmitted && (
+          <div className={tagInputWrapper}>
+            <Text color="info" size="caption3">
+              {value}
+            </Text>
+            <button>
+              <SvgIcon variant="close2" stroke="#6B6B6B" width={8} height={8} />
+            </button>
+          </div>
+        )}
         <button className={iconWrapperButton}>
-          {isInputSubmitted ? (
-            <SvgIcon variant="close2" width={13} height={13} stroke="#232527" />
-          ) : (
-            <SvgIcon variant="search2" width={20} height={20} stroke="#808080" />
+          {!isTagSearch && (
+            <>
+              {isInputSubmitted ? (
+                <SvgIcon variant="close2" width={13} height={13} stroke="#232527" />
+              ) : (
+                <SvgIcon variant="search2" width={20} height={20} stroke="#808080" />
+              )}
+            </>
           )}
         </button>
       </div>

src/components/Search/SearchInput/searchInput.css.ts

@@ -6,6 +6,7 @@ export const inputContainer = style({
 });
 
 export const searchInput = style({
+  position: 'absolute',
   width: '90%',
   height: 40,
   padding: '10px 0 10px 18px',
@@ -22,14 +23,27 @@ export const searchInput = style({
   },
 });
 
+export const tagInputWrapper = style({
+  position: 'relative',
+  top: 6,
+  left: 6,
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: 6,
+  width: 'fit-content',
+  padding: '5px 12px',
+  background: '#FFFFFF',
+  borderRadius: 20,
+});
+
 export const iconWrapperButton = style({
   position: 'absolute',
   top: 0,
   right: 0,
   display: 'flex',
   alignItems: 'center',
   width: '10%',
-  height: '100%',
+  height: 40,
   paddingLeft: 4,
   background: '#efefef',
   borderRadius: '0 20px 20px 0',

src/components/Search/SearchNotFound/SearchNotFound.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SearchNotFound from './SearchNotFound';
+
+const meta: Meta<typeof SearchNotFound> = {
+  title: 'search/SearchNotFound',
+  component: SearchNotFound,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/components/Search/SearchNotFound/SearchNotFound.tsx

@@ -0,0 +1,24 @@
+import { container } from './searchNotFound.css';
+
+import SearchNotFoundImage from '@/assets/search-notfound.png';
+import { Text } from '@/components/Common';
+
+
+const SearchNotFound = () => {
+  return (
+    <>
+      <div className={container}>
+        <img src={SearchNotFoundImage} width={335} alt="검색 결과 없음" />
+        <Text color="sub" size="headline" weight="semiBold">
+          검색 결과가 없어요
+        </Text>
+        <div style={{ height: '6px' }} />
+        <Text color="disabled" size="caption4">
+          다른 키워드로 검색해보세요!
+        </Text>
+      </div>
+    </>
+  );
+};
+
+export default SearchNotFound;

src/components/Search/SearchNotFound/searchNotFound.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});

src/components/Search/TagSearchResultList/TagSearchResultList.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import TagSearchResultList from './TagSearchResultList';
+
+const meta: Meta<typeof TagSearchResultList> = {
+  title: 'search/TagSearchResultList',
+  component: TagSearchResultList,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/components/Search/TagSearchResultList/TagSearchResultList.tsx

@@ -0,0 +1,48 @@
+import { useRef } from 'react';
+import { Link } from 'react-router-dom';
+
+import { container } from './tagSearchResult.css';
+import SearchNotFound from '../SearchNotFound/SearchNotFound';
+
+import { ProductItem } from '@/components/Product';
+import { PATH } from '@/constants/path';
+import { useIntersectionObserver } from '@/hooks/common';
+import { useInfiniteProductSearchResultsQuery } from '@/hooks/queries/search';
+
+interface TagSearchResultListProps {
+  searchQuery: string;
+}
+
+const TagSearchResultList = ({ searchQuery }: TagSearchResultListProps) => {
+  const { data: searchResponse, fetchNextPage, hasNextPage } = useInfiniteProductSearchResultsQuery(searchQuery, true);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
+
+  if (!searchResponse) {
+    return null;
+  }
+
+  const products = searchResponse.pages.flatMap((page) => page.products);
+
+  if (products.length === 0) {
+    return <SearchNotFound />;
+  }
+
+  return (
+    <>
+      <ul className={container}>
+        {products.map((product) => (
+          <li key={product.id}>
+            <Link to={`${PATH.PRODUCT_LIST}/${product.categoryType}/${product.id}`}>
+              <ProductItem product={product} />
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <div ref={scrollRef} aria-hidden />
+    </>
+  );
+};
+
+export default TagSearchResultList;

src/components/Search/TagSearchResultList/tagSearchResult.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(2, 1fr)',
+  rowGap: 20,
+  columnGap: 10,
+});

src/components/Search/index.ts

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

src/hooks/queries/search/useInfiniteProductSearchResultsQuery.ts

@@ -3,20 +3,22 @@ import { useSuspendedInfiniteQuery } from '..';
 import { searchApi } from '@/apis';
 import type { ProductSearchResultResponse } from '@/types/response';
 
-const fetchProductSearchResults = async (query: string, pageParam: number) => {
+const fetchProductSearchResults = async (query: string, endpoint: 'tags' | 'products', pageParam: number) => {
   const response = await searchApi.get({
-    params: '/products/results',
+    params: `/${endpoint}/results`,
     queries: `?query=${query}&lastProductId=${pageParam}`,
   });
   const data: ProductSearchResultResponse = await response.json();
 
   return data;
 };
 
-const useInfiniteProductSearchResultsQuery = (query: string) => {
+const useInfiniteProductSearchResultsQuery = (query: string, isTagSearch = false) => {
+  const endpoint = isTagSearch ? 'tags' : 'products';
+
   return useSuspendedInfiniteQuery(
-    ['search', 'products', 'results', query],
-    ({ pageParam = 0 }) => fetchProductSearchResults(query, pageParam),
+    ['search', endpoint, 'results', query],
+    ({ pageParam = 0 }) => fetchProductSearchResults(query, endpoint, pageParam),
     {
       getNextPageParam: (prevResponse: ProductSearchResultResponse) => {
         const lastCursor = prevResponse.products.length