Merge branch 'feat/v2' into feat/issue-90

src/components/Common/ShowAllButton/ShowAllButton.tsx

@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom';
+
+import { moreIconWrapper, linkWrapper } from './showAllButton.css';
+
+import { SvgIcon, Text } from '@/components/Common';
+import { vars } from '@/styles/theme.css';
+
+interface ShowAllButtonProps {
+  link: string;
+}
+
+const ShowAllButton = ({ link }: ShowAllButtonProps) => {
+  return (
+    <Link to={link} className={linkWrapper}>
+      <div className={moreIconWrapper}>
+        <SvgIcon variant="arrowRight" fill="none" stroke={vars.colors.gray5} />
+      </div>
+      <Text as="span" color="info" weight="semiBold" size="caption2">
+        전체보기
+      </Text>
+    </Link>
+  );
+};
+
+export default ShowAllButton;

src/components/Common/ShowAllButton/showAllButton.css.ts

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

src/components/Common/TopBar/TopBar.stories.tsx

@@ -71,7 +71,7 @@ export const LeftTitleAndRegister: Story = {
     return (
       <TopBar {...args}>
         <TopBar.LeftNavigationGroup title="타이틀" />
-        <TopBar.RegisterLink />
+        <TopBar.RegisterButton />
       </TopBar>
     );
   },

src/components/Common/TopBar/TopBar.tsx

@@ -1,21 +1,23 @@
+import type { ComponentPropsWithoutRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import { LeftNavigationWrapper, container, headerTitle, leftTitle } from './topBar.css';
+import { LeftNavigationWrapper, container, headerTitle, leftTitle, register } from './topBar.css';
 import SvgIcon from '../Svg/SvgIcon';
 import Text from '../Text/Text';
 
 import LogoImage from '@/assets/logo.svg';
 import { PATH } from '@/constants/path';
 import { vars } from '@/styles/theme.css';
 
-
 interface TopBarProps {
   children?: React.ReactNode;
   title?: string;
   link?: string;
   state?: unknown;
 }
 
+type RegisterButtonProps = ComponentPropsWithoutRef<'button'>;
+
 const TopBar = ({ children }: TopBarProps) => {
   return <header className={container}>{children}</header>;
 };
@@ -58,13 +60,13 @@ const SearchLink = () => {
   );
 };
 
-const RegisterLink = ({ link = '' }: TopBarProps) => {
+const RegisterButton = ({ ...props }: RegisterButtonProps) => {
   return (
-    <Link to={link}>
-      <Text size="caption1" color="disabled" weight="semiBold">
+    <button {...props}>
+      <Text as="span" size="caption1" weight="semiBold" className={register}>
         등록
       </Text>
-    </Link>
+    </button>
   );
 };
 
@@ -85,7 +87,7 @@ TopBar.BackLink = BackLink;
 TopBar.LeftNavigationGroup = LeftNavigationGroup;
 TopBar.Title = Title;
 TopBar.SearchLink = SearchLink;
-TopBar.RegisterLink = RegisterLink;
+TopBar.RegisterButton = RegisterButton;
 TopBar.CloseButton = CloseButton;
 TopBar.Spacer = Spacer;
 

src/components/Common/TopBar/topBar.css.ts

@@ -34,3 +34,11 @@ export const headerTitle = style({
   fontSize: 18,
   fontWeight: 600,
 });
+
+export const register = style({
+  selectors: {
+    'button:disabled > &': {
+      color: vars.colors.text.disabled,
+    },
+  },
+});

src/components/Common/index.ts

@@ -26,3 +26,5 @@ export { default as Badge } from './Badge/Badge';
 export { default as WriteButton } from './WriteButton/WriteButton';
 export { default as Text } from './Text/Text';
 export { default as Indicator } from './Indicator/Indicator';
+export { default as TopBar } from './TopBar/TopBar';
+export { default as ShowAllButton } from './ShowAllButton/ShowAllButton';

src/components/Product/ProductRecipeList/ProductRecipeList.tsx

@@ -1,26 +1,41 @@
 import { Link } from 'react-router-dom';
 
-import { container, moreIcon, moreIconWrapper, moreItem, moreLink } from './productRecipeList.css';
+import { container, moreItem, notFound, recipeLink } from './productRecipeList.css';
 
-import { SvgIcon, Text } from '@/components/Common';
+import SearchNotFoundImage from '@/assets/search-notfound.png';
+import { Text, ShowAllButton } from '@/components/Common';
 import { DefaultRecipeItem } from '@/components/Recipe';
+import { PATH } from '@/constants/path';
 import { useInfiniteProductRecipesQuery } from '@/hooks/queries/product';
-import { vars } from '@/styles/theme.css';
 import displaySlice from '@/utils/displaySlice';
 
 interface ProductRecipeListProps {
   productId: number;
+  productName: string;
 }
 
-const ProductRecipeList = ({ productId }: ProductRecipeListProps) => {
+const ProductRecipeList = ({ productId, productName }: ProductRecipeListProps) => {
   // 상품에서 보여줄 꿀조합 정렬 조건
   const { data } = useInfiniteProductRecipesQuery(productId, 'favoriteCount,desc');
 
   const recipes = data.pages.flatMap((page) => page.recipes);
   const recipeToDisplay = displaySlice(true, recipes, 3);
 
   if (recipes.length === 0) {
-    return null;
+    return (
+      <div className={notFound}>
+        <img src={SearchNotFoundImage} width={335} alt="검색 결과 없음" />
+        <Text color="disabled" size="caption4">
+          아직 작성된 꿀조합이 없어요
+        </Text>
+        <div style={{ height: '6px' }} />
+        <Link to={PATH.RECIPE} className={recipeLink}>
+          <Text as="span" color="sub" weight="semiBold" size="caption2">
+            꿀조합 작성하러 가기
+          </Text>
+        </Link>
+      </div>
+    );
   }
 
   return (
@@ -32,15 +47,7 @@ const ProductRecipeList = ({ productId }: ProductRecipeListProps) => {
       ))}
       {recipeToDisplay.length < recipes.length && (
         <li className={moreItem}>
-          {/*링크는 상품이 포함된 꿀조합 검색결과로 가는 것이 맞을듯?*/}
-          <Link to={''} className={moreLink}>
-            <div className={moreIconWrapper}>
-              <SvgIcon variant="arrowLeft" className={moreIcon} fill="none" stroke={vars.colors.gray5} />
-            </div>
-            <Text as="span" color="info" weight="semiBold" size="caption2">
-              전체보기
-            </Text>
-          </Link>
+          <ShowAllButton link={`${PATH.SEARCH}/recipes?query=${productName}`} />
         </li>
       )}
     </ul>

src/components/Product/ProductRecipeList/productRecipeList.css.ts

@@ -15,24 +15,20 @@ export const moreItem = style({
   minWidth: 108,
 });
 
-export const moreLink = style({
+export const notFound = style({
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'center',
   alignItems: 'center',
+  gap: 6,
+  textAlign: 'center',
 });
 
-export const moreIconWrapper = style({
+export const recipeLink = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  width: 40,
-  height: 40,
-  marginBottom: 12,
-  borderRadius: '50%',
-  background: vars.colors.secondary1,
-});
-
-export const moreIcon = style({
-  transform: 'rotate(180deg)',
+  height: 34,
+  padding: '0 16px',
+  backgroundColor: vars.colors.gray2,
+  borderRadius: 44,
 });

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/Review/ReviewRegisterForm/ReviewRegisterForm.tsx

@@ -8,39 +8,28 @@ import StarRate from './StarRate/StarRate';
 import RebuyCheckbox from '../RebuyCheckbox/RebuyCheckbox';
 
 import { ImageUploader, SvgIcon, Text } from '@/components/Common';
-import { MAX_DISPLAYED_TAGS_LENGTH, MIN_DISPLAYED_TAGS_LENGTH } from '@/constants';
 import type { TagValue } from '@/contexts/ReviewFormContext';
 import { useFormData, useImageUploader } from '@/hooks/common';
 import { useReviewFormActionContext, useReviewFormValueContext } from '@/hooks/context';
 import { useReviewRegisterFormMutation } from '@/hooks/queries/review';
 import { vars } from '@/styles/theme.css';
 import type { ReviewRequest } from '@/types/review';
 
-const MIN_RATING_SCORE = 0;
-const MIN_CONTENT_LENGTH = 0;
-
 interface ReviewRegisterFormProps {
   productId: number;
   openBottomSheet: () => void;
 }
 
 const ReviewRegisterForm = ({ productId, openBottomSheet }: ReviewRegisterFormProps) => {
-  const { isImageUploading, previewImage, imageFile, uploadImage, deleteImage } = useImageUploader();
+  const { previewImage, imageFile, uploadImage, deleteImage } = useImageUploader();
   const navigate = useNavigate();
 
-  const reviewFormValue = useReviewFormValueContext();
+  const { formValue: reviewFormValue } = useReviewFormValueContext();
   const { handleReviewFormValue, resetReviewFormValue } = useReviewFormActionContext();
   const { toast } = useToastActionContext();
 
   const { mutate } = useReviewRegisterFormMutation(productId);
 
-  const isValid =
-    reviewFormValue.rating > MIN_RATING_SCORE &&
-    reviewFormValue.tags.length >= MIN_DISPLAYED_TAGS_LENGTH &&
-    reviewFormValue.tags.length <= MAX_DISPLAYED_TAGS_LENGTH &&
-    reviewFormValue.content.length > MIN_CONTENT_LENGTH &&
-    !isImageUploading;
-
   const formValue: ReviewRequest = { ...reviewFormValue, tagIds: reviewFormValue.tags.map(({ id }) => id) };
 
   const formData = useFormData<ReviewRequest>({
@@ -81,7 +70,7 @@ const ReviewRegisterForm = ({ productId, openBottomSheet }: ReviewRegisterFormPr
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form id="review-form" onSubmit={handleSubmit}>
       <div>
         <h2 className={itemTitle} tabIndex={0}>
           사진 등록
@@ -105,7 +94,9 @@ const ReviewRegisterForm = ({ productId, openBottomSheet }: ReviewRegisterFormPr
           {reviewFormValue.tags.map((tag) => (
             <li key={tag.id}>
               <button type="button" onClick={handleTagSelect(tag)} className={tagButton}>
-                <Text as="span">{tag.name}</Text>
+                <Text as="span" size="caption2" weight="medium">
+                  {tag.name}
+                </Text>
                 <SvgIcon variant="close2" width={8} height={8} fill="none" stroke={vars.colors.gray4} />
               </button>
             </li>

src/components/Review/ReviewRegisterForm/reviewRegisterForm.css.ts

@@ -37,8 +37,6 @@ export const tagButton = style({
   gap: 4,
   height: 28,
   padding: '0 6px',
-  fontSize: '1.3rem',
-  fontWeight: 500,
   borderRadius: 4,
   backgroundColor: vars.colors.gray2,
 });

src/components/Review/ReviewTagList/ReviewTagList.tsx

@@ -10,7 +10,9 @@ import { useReviewTagsQuery } from '@/hooks/queries/review';
 
 const ReviewTagList = () => {
   const { data: tagsData } = useReviewTagsQuery();
-  const { tags: selectedTags } = useReviewFormValueContext();
+  const {
+    formValue: { tags: selectedTags },
+  } = useReviewFormValueContext();
   const { handleReviewFormValue } = useReviewFormActionContext();
 
   const isChecked = (tag: TagValue) => selectedTags.some(({ id }) => id === tag.id);

src/components/Review/ReviewTagSheet/ReviewTagSheet.tsx

@@ -1,20 +1,29 @@
-import { container, registerButton, registerButtonWrapper, section } from './reviewTagSheet.css';
+import { closeWrapper, container, registerButton, registerButtonWrapper, section } from './reviewTagSheet.css';
 import ReviewTagList from '../ReviewTagList/ReviewTagList';
 
+import { SvgIcon } from '@/components/Common';
 import { MAX_DISPLAYED_TAGS_LENGTH, MIN_DISPLAYED_TAGS_LENGTH } from '@/constants';
 import { useReviewFormValueContext } from '@/hooks/context';
+import { vars } from '@/styles/theme.css';
 
 interface ReviewTagSheetProps {
   close: () => void;
 }
 
 const ReviewTagSheet = ({ close }: ReviewTagSheetProps) => {
-  const { tags } = useReviewFormValueContext();
+  const {
+    formValue: { tags },
+  } = useReviewFormValueContext();
 
   const isValid = tags.length >= MIN_DISPLAYED_TAGS_LENGTH && tags.length <= MAX_DISPLAYED_TAGS_LENGTH;
 
   return (
     <div className={container}>
+      <div className={closeWrapper}>
+        <button type="button" onClick={close}>
+          <SvgIcon variant="close2" stroke={vars.colors.black} width={20} height={20} />
+        </button>
+      </div>
       <section className={section}>
         <ReviewTagList />
       </section>

src/components/Review/ReviewTagSheet/reviewTagSheet.css.ts

@@ -5,9 +5,17 @@ export const container = style({
   height: '100vh',
 });
 
+export const closeWrapper = style({
+  padding: '0 20px',
+  display: 'flex',
+  height: 50,
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+});
+
 export const section = style({
-  padding: '50px 20px 70px',
-  marginBottom: 32,
+  padding: '0 20px',
+  margin: '16px 0 32px',
 });
 
 export const registerButtonWrapper = style({