refactor: 기초 recipe item 컴포넌트 구현 (#83)

* refactor: 기초 recipe item 컴포넌트 구현

* fix: 자동 배포 오류 수정

* refactor: 작가와 생성된 날짜 묶기

* refactor: recipe 가져오는 방식 변경

* refactor: css 없어진 속성 삭제

* refactor: 각 컴포넌트 추가

* refactor: 스토리북 내부 컴포넌트로 교체

* refactor: 기본 이미지 랜덤 이미지로 변경

* refactor: 레시피 랭킹 컴포넌트 교체

* refactor: recipe item 컴포넌트 export 방식 변경

* refactor: 상품 상세 포함된 꿀조합 컴포넌트 수정

* refactor: 꿀조합 페이지 컴포넌트 변경

* chore: lint 적용

* refactor: image 감싸는 div에 line height 0 부여

* refactor: 컴포넌트에서 바로 recipe 받도록 수정

src/components/Members/MemberRecipeList/MemberRecipeList.tsx

@@ -3,7 +3,6 @@ import { useRef } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { RecipeItem } from '@/components/Recipe';
 import { PATH } from '@/constants/path';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteMemberRecipeQuery } from '@/hooks/queries/members';
@@ -50,7 +49,7 @@ const MemberRecipeList = ({ isPreview = false }: MemberRecipeListProps) => {
         {recipeToDisplay?.map((recipe) => (
           <li key={recipe.id}>
             <Link as={RouterLink} to={`${PATH.RECIPE}/${recipe.id}`}>
-              <RecipeItem recipe={recipe} isMemberPage={isPreview} />
+              {/* <RecipeItem recipe={recipe} isMemberPage={isPreview} /> */}
             </Link>
           </li>
         ))}

src/components/Product/ProductRecipeList/ProductRecipeList.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { container, moreIcon, moreIconWrapper, moreItem, moreLink } from './productRecipeList.css';
 
 import { SvgIcon, Text } from '@/components/Common';
-import { RecipeItem } from '@/components/Recipe';
+import { DefaultRecipeItem } from '@/components/Recipe';
 import { useInfiniteProductRecipesQuery } from '@/hooks/queries/product';
 import { vars } from '@/styles/theme.css';
 import displaySlice from '@/utils/displaySlice';
@@ -27,7 +27,7 @@ const ProductRecipeList = ({ productId }: ProductRecipeListProps) => {
     <ul className={container}>
       {recipeToDisplay.map((recipe) => (
         <li key={recipe.id}>
-          <RecipeItem recipe={recipe} hasFavoriteButton />
+          <DefaultRecipeItem recipe={recipe} />
         </li>
       ))}
       {recipeToDisplay.length < recipes.length && (

src/components/Rank/RecipeRankingList/RecipeRankingList.tsx

@@ -1,8 +1,8 @@
 import { Link } from 'react-router-dom';
 
 import { container } from './recipeRankingList.css';
-import RecipeRankingItem from '../RecipeRankingItem/RecipeRankingItem';
 
+import { DefaultRecipeItem } from '@/components/Recipe';
 import { PATH } from '@/constants/path';
 import { useGA } from '@/hooks/common';
 import { useRecipeRankingQuery } from '@/hooks/queries/rank';
@@ -22,7 +22,7 @@ const RecipeRankingList = () => {
       {recipeResponse.recipes.map((recipe) => (
         <li key={recipe.id}>
           <Link to={`${PATH.RECIPE}/${recipe.id}`} onClick={handleRecipeRankingLinkClick}>
-            <RecipeRankingItem recipe={recipe} />
+            <DefaultRecipeItem recipe={recipe} />
           </Link>
         </li>
       ))}

src/components/Rank/index.ts

@@ -2,5 +2,4 @@ export { default as ReviewRankingItem } from './ReviewRankingItem/ReviewRankingI
 export { default as ReviewRankingList } from './ReviewRankingList/ReviewRankingList';
 export { default as ProductRankingItem } from './ProductRankingItem/ProductRankingItem';
 export { default as ProductRankingList } from './ProductRankingList/ProductRankingList';
-export { default as RecipeRankingItem } from './RecipeRankingItem/RecipeRankingItem';
 export { default as RecipeRankingList } from './RecipeRankingList/RecipeRankingList';

src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts

@@ -2,6 +2,5 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'flex',
-  gap: 6,
   alignItems: 'center',
 });

src/components/Recipe/RecipeItem/RecipeItem.stories.tsx

@@ -1,18 +1,42 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import RecipeItem from './RecipeItem';
+import RecipeItem, {
+  DefaultRecipeItem,
+  RecipeItemWithDiskIcon,
+  RecipeItemWithDiskIconAndContent,
+  RecipeItemWithProductDetailImage,
+} from './RecipeItem';
 
 import mockRecipe from '@/mocks/data/recipes.json';
 
 const meta: Meta<typeof RecipeItem> = {
   title: 'recipe/RecipeItem',
   component: RecipeItem,
-  args: {
-    recipe: mockRecipe.recipes[0],
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof RecipeItem>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => {
+    return <DefaultRecipeItem recipe={mockRecipe.recipes[1]} />;
+  },
+};
+
+export const Recipe: Story = {
+  render: () => {
+    return <RecipeItemWithDiskIconAndContent recipe={mockRecipe.recipes[1]} />;
+  },
+};
+
+export const MyPage: Story = {
+  render: () => {
+    return <RecipeItemWithProductDetailImage recipe={mockRecipe.recipes[1]} />;
+  },
+};
+
+export const Search: Story = {
+  render: () => {
+    return <RecipeItemWithDiskIcon recipe={mockRecipe.recipes[1]} />;
+  },
+};