fun-eat · xodms0309 · Apr 11, 2024 · Mar 23, 2024 · Mar 23, 2024 · Mar 27, 2024
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -110,16 +110,55 @@
         </clipPath>
       </defs>
     </symbol>
-    <symbol id="review2" viewBox="0 0 14 14">
-      <g strokeLinecap="round" strokeLinejoin="round" clipPath="url(#clip0_1222_34401)">
+    <symbol id="review2" viewBox="0 0 12 12" fill="none">
+      <g clip-path="url(#clip0_4627_11650)">
         <path
-          d="M7.002 7.25a.25.25 0 0 1 0-.5m0 .5a.25.25 0 0 0 0-.5m-2.75.5a.25.25 0 0 1 0-.5m0 .5a.25.25 0 0 0 0-.5m5.5.5a.25.25 0 0 1 0-.5m0 .5a.25.25 0 1 0 0-.5"
+          d="M6.04793 0.650025C5.13272 0.650311 4.23471 0.898835 3.44956 1.36913C2.66442 1.83943 2.02154 2.51387 1.5894 3.32065C1.15725 4.12742 0.952032 5.0363 0.99559 5.95048C1.03915 6.86467 1.32985 7.74991 1.83675 8.51192L0.988281 10.7694L3.82947 10.2556C4.51362 10.5899 5.2644 10.7655 6.02586 10.7693C6.78732 10.7731 7.53981 10.6049 8.22724 10.2773C8.91465 9.94986 9.51934 9.47136 9.99603 8.87759C10.4728 8.28391 10.8095 7.5902 10.9808 6.84826C11.1521 6.10633 11.1539 5.33528 10.9857 4.59261C10.8176 3.84993 10.484 3.15477 10.0099 2.55897C9.53568 1.96315 8.93311 1.48206 8.24714 1.15153C7.56115 0.821004 6.8094 0.649576 6.04793 0.650025Z"
+          fill="#DDDDDD"
+          stroke="#DDDDDD"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M6.04799 5.90604C5.93951 5.90604 5.85156 5.8181 5.85156 5.70961C5.85156 5.60113 5.93951 5.51318 6.04799 5.51318"
+          stroke="white"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M6.04688 5.90604C6.15536 5.90604 6.2433 5.8181 6.2433 5.70961C6.2433 5.60113 6.15536 5.51318 6.04688 5.51318"
+          stroke="white"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3.89174 5.90604C3.78326 5.90604 3.69531 5.8181 3.69531 5.70961C3.69531 5.60113 3.78326 5.51318 3.89174 5.51318"
+          stroke="white"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3.89062 5.90604C3.99911 5.90604 4.08705 5.8181 4.08705 5.70961C4.08705 5.60113 3.99911 5.51318 3.89062 5.51318"
+          stroke="white"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M8.21205 5.90604C8.10357 5.90604 8.01562 5.8181 8.01562 5.70961C8.01562 5.60113 8.10357 5.51318 8.21205 5.51318"
+          stroke="white"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M8.21094 5.90604C8.31942 5.90604 8.40741 5.8181 8.40741 5.70961C8.40741 5.60113 8.31942 5.51318 8.21094 5.51318"
+          stroke="white"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
-        <path d="M6.998.56a6.44 6.44 0 0 0-5.36 10.007L.558 13.44l3.617-.654A6.44 6.44 0 1 0 6.998.56z" />
       </g>
       <defs>
-        <clipPath id="clip0_1222_34401">
-          <path fill="#fff" d="M0 0h14v14H0z" />
+        <clipPath id="clip0_4627_11650">
+          <rect width="11" height="11" fill="white" transform="translate(0.550781 0.209595)" />
         </clipPath>
       </defs>
     </symbol>

diff --git a/src/assets/search-notfound.png b/src/assets/search-notfound.png
diff --git a/src/components/Common/Svg/SvgSprite.tsx b/src/components/Common/Svg/SvgSprite.tsx
@@ -106,14 +106,55 @@ const SvgSprite = () => {
           </clipPath>
         </defs>
       </symbol>
-      <symbol id="review2" viewBox="0 0 14 14">
-        <g strokeLinecap="round" strokeLinejoin="round" clipPath="url(#clip0_1222_34401)">
-          <path d="M7.002 7.25a.25.25 0 0 1 0-.5m0 .5a.25.25 0 0 0 0-.5m-2.75.5a.25.25 0 0 1 0-.5m0 .5a.25.25 0 0 0 0-.5m5.5.5a.25.25 0 0 1 0-.5m0 .5a.25.25 0 1 0 0-.5" />
-          <path d="M6.998.56a6.44 6.44 0 0 0-5.36 10.007L.558 13.44l3.617-.654A6.44 6.44 0 1 0 6.998.56z" />
+      <symbol id="review2" viewBox="0 0 12 12" fill="none">
+        <g clipPath="url(#clip0_4627_11650)">
+          <path
+            d="M6.04793 0.650025C5.13272 0.650311 4.23471 0.898835 3.44956 1.36913C2.66442 1.83943 2.02154 2.51387 1.5894 3.32065C1.15725 4.12742 0.952032 5.0363 0.99559 5.95048C1.03915 6.86467 1.32985 7.74991 1.83675 8.51192L0.988281 10.7694L3.82947 10.2556C4.51362 10.5899 5.2644 10.7655 6.02586 10.7693C6.78732 10.7731 7.53981 10.6049 8.22724 10.2773C8.91465 9.94986 9.51934 9.47136 9.99603 8.87759C10.4728 8.28391 10.8095 7.5902 10.9808 6.84826C11.1521 6.10633 11.1539 5.33528 10.9857 4.59261C10.8176 3.84993 10.484 3.15477 10.0099 2.55897C9.53568 1.96315 8.93311 1.48206 8.24714 1.15153C7.56115 0.821004 6.8094 0.649576 6.04793 0.650025Z"
+            fill="#DDDDDD"
+            stroke="#DDDDDD"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M6.04799 5.90604C5.93951 5.90604 5.85156 5.8181 5.85156 5.70961C5.85156 5.60113 5.93951 5.51318 6.04799 5.51318"
+            stroke="white"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M6.04688 5.90604C6.15536 5.90604 6.2433 5.8181 6.2433 5.70961C6.2433 5.60113 6.15536 5.51318 6.04688 5.51318"
+            stroke="white"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M3.89174 5.90604C3.78326 5.90604 3.69531 5.8181 3.69531 5.70961C3.69531 5.60113 3.78326 5.51318 3.89174 5.51318"
+            stroke="white"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M3.89062 5.90604C3.99911 5.90604 4.08705 5.8181 4.08705 5.70961C4.08705 5.60113 3.99911 5.51318 3.89062 5.51318"
+            stroke="white"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M8.21205 5.90604C8.10357 5.90604 8.01562 5.8181 8.01562 5.70961C8.01562 5.60113 8.10357 5.51318 8.21205 5.51318"
+            stroke="white"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M8.21094 5.90604C8.31942 5.90604 8.40741 5.8181 8.40741 5.70961C8.40741 5.60113 8.31942 5.51318 8.21094 5.51318"
+            stroke="white"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
         </g>
         <defs>
-          <clipPath id="clip0_1222_34401">
-            <path fill="#fff" d="M0 0h14v14H0z" />
+          <clipPath id="clip0_4627_11650">
+            <rect width="11" height="11" fill="white" transform="translate(0.550781 0.209595)" />
           </clipPath>
         </defs>
       </symbol>

diff --git a/src/components/Common/Text/Text.tsx b/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';
 
@@ -9,12 +11,13 @@ const Text = <T extends TextElement = 'p'>({
   weight = 'regular',
   color = 'default',
   as,
+  className,
   ...props
 }: TextProps<T>) => {
   const Component = as || 'p';
 
   return (
-    <Component className={text({ color, size, weight })} {...props}>
+    <Component className={cx(text({ color, size, weight }), className)} {...props}>
       {children}
     </Component>
   );

diff --git a/src/components/Product/ProductItem/ProductItem.tsx b/src/components/Product/ProductItem/ProductItem.tsx
@@ -12,6 +12,7 @@ import {
 } from './productItem.css';
 
 import { SvgIcon } from '@/components/Common';
+import { vars } from '@/styles/theme.css';
 import type { Product } from '@/types/product';
 
 interface ProductItemProps {
@@ -44,13 +45,13 @@ const ProductItem = ({ product }: ProductItemProps) => {
       <div style={{ height: '8px' }} />
       <div className={summaryWrapper}>
         <div className={previewWrapper}>
-          <SvgIcon variant="star2" width={11} height={11} fill="none" stroke="#999" />
+          <SvgIcon variant="star2" width={11} height={11} fill={vars.colors.gray2} />
           <span className={preview} aria-label={`${averageRating}점`}>
             {averageRating.toFixed(1)}
           </span>
         </div>
         <div className={previewWrapper}>
-          <SvgIcon variant="review2" width={11} height={11} fill="none" stroke="#999" />
+          <SvgIcon variant="review2" width={11} height={11} />
           <span className={preview} aria-label={`리뷰 ${reviewCount}개`}>
             {reviewCount}
           </span>

diff --git a/src/components/Search/ProductSearchResultList/ProductSearchResultList.stories.tsx b/src/components/Search/ProductSearchResultList/ProductSearchResultList.stories.tsx
@@ -0,0 +1,16 @@
+import type { 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 = {};
diff --git a/src/components/Search/ProductSearchResultList/ProductSearchResultList.tsx b/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>
     </>
   );
 };

diff --git a/src/components/Search/ProductSearchResultList/productSearchResultList.css.ts b/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,
+});
diff --git a/src/components/Search/RecipeSearchResultList/RecipeSearchResultList.tsx b/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>

diff --git a/src/components/Search/SearchInput/SearchInput.tsx b/src/components/Search/SearchInput/SearchInput.tsx
@@ -1,16 +1,20 @@
 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 = false, ...props }: SearchInputProps,
+    ref: ForwardedRef<HTMLInputElement>
+  ) => {
     return (
       <div className={inputContainer}>
         <input
@@ -20,6 +24,16 @@ 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" />

diff --git a/src/components/Search/SearchInput/searchInput.css.ts b/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',

diff --git a/src/components/Search/SearchNotFound/SearchNotFound.stories.tsx b/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 = {};
diff --git a/src/components/Search/SearchNotFound/SearchNotFound.tsx b/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;