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

fun-eat · Apr 18, 2024 · f3281b0 · f3281b0
1 parent 33ccebc
commit f3281b0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 34 deletions.
diff --git a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx b/src/components/Product/ProductRecipeList/ProductRecipeList.tsx
@@ -4,7 +4,6 @@ import { container, moreIcon, moreIconWrapper, moreItem, moreLink } from './prod
 
 import { SvgIcon, Text } from '@/components/Common';
 import { DefaultRecipeItem } from '@/components/Recipe';
-import RecipeItemProvider from '@/contexts/RecipeItemContext';
 import { useInfiniteProductRecipesQuery } from '@/hooks/queries/product';
 import { vars } from '@/styles/theme.css';
 import displaySlice from '@/utils/displaySlice';
@@ -28,9 +27,7 @@ const ProductRecipeList = ({ productId }: ProductRecipeListProps) => {
     <ul className={container}>
       {recipeToDisplay.map((recipe) => (
         <li key={recipe.id}>
-          <RecipeItemProvider recipe={recipe}>
-            <DefaultRecipeItem />
-          </RecipeItemProvider>
+          <DefaultRecipeItem recipe={recipe} />
         </li>
       ))}
       {recipeToDisplay.length < recipes.length && (

diff --git a/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx b/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx
@@ -4,7 +4,6 @@ import { container } from './recipeRankingList.css';
 
 import { DefaultRecipeItem } from '@/components/Recipe';
 import { PATH } from '@/constants/path';
-import RecipeItemProvider from '@/contexts/RecipeItemContext';
 import { useGA } from '@/hooks/common';
 import { useRecipeRankingQuery } from '@/hooks/queries/rank';
 
@@ -23,9 +22,7 @@ const RecipeRankingList = () => {
       {recipeResponse.recipes.map((recipe) => (
         <li key={recipe.id}>
           <Link to={`${PATH.RECIPE}/${recipe.id}`} onClick={handleRecipeRankingLinkClick}>
-            <RecipeItemProvider recipe={recipe}>
-              <DefaultRecipeItem />
-            </RecipeItemProvider>
+            <DefaultRecipeItem recipe={recipe} />
           </Link>
         </li>
       ))}

diff --git a/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx b/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx
@@ -7,44 +7,36 @@ import RecipeItem, {
   RecipeItemWithProductDetailImage,
 } from './RecipeItem';
 
-import RecipeItemProvider from '@/contexts/RecipeItemContext';
 import mockRecipe from '@/mocks/data/recipes.json';
 
 const meta: Meta<typeof RecipeItem> = {
   title: 'recipe/RecipeItem',
   component: RecipeItem,
-  decorators: [
-    (Story) => (
-      <RecipeItemProvider recipe={mockRecipe.recipes[1]}>
-        <Story />
-      </RecipeItemProvider>
-    ),
-  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof RecipeItem>;
 
 export const Default: Story = {
   render: () => {
-    return <DefaultRecipeItem />;
+    return <DefaultRecipeItem recipe={mockRecipe.recipes[1]} />;
   },
 };
 
 export const Recipe: Story = {
   render: () => {
-    return <RecipeItemWithDiskIconAndContent />;
+    return <RecipeItemWithDiskIconAndContent recipe={mockRecipe.recipes[1]} />;
   },
 };
 
 export const MyPage: Story = {
   render: () => {
-    return <RecipeItemWithProductDetailImage />;
+    return <RecipeItemWithProductDetailImage recipe={mockRecipe.recipes[1]} />;
   },
 };
 
 export const Search: Story = {
   render: () => {
-    return <RecipeItemWithDiskIcon />;
+    return <RecipeItemWithDiskIcon recipe={mockRecipe.recipes[1]} />;
   },
 };
diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx
@@ -28,6 +28,7 @@ import {
 } from '@/constants/image';
 import RecipeItemProvider from '@/contexts/RecipeItemContext';
 import { useRecipeItemValueContext } from '@/hooks/context';
+import type { Recipe } from '@/types/recipe';
 import { getRelativeDate } from '@/utils/date';
 import displaySlice from '@/utils/displaySlice';
 
@@ -39,8 +40,12 @@ const defaultImages = [
   RECIPE_CARD_DEFAULT_IMAGE_URL_5,
 ];
 
-const RecipeItem = ({ children }: PropsWithChildren) => {
-  const { recipe } = useRecipeItemValueContext();
+interface RecipeItemProps {
+  recipe: Recipe;
+  children?: React.ReactNode;
+}
+
+const RecipeItem = ({ recipe, children }: RecipeItemProps) => {
   const { id } = recipe;
 
   return (
@@ -178,9 +183,9 @@ RecipeItem.Content = Content;
 
 export default RecipeItem;
 
-export const DefaultRecipeItem = () => {
+export const DefaultRecipeItem = ({ recipe }: RecipeItemProps) => {
   return (
-    <RecipeItem>
+    <RecipeItem recipe={recipe}>
       <RecipeItem.ImageAndFavoriteButton />
       <div style={{ height: '8px' }} />
       <RecipeItem.Title />
@@ -189,9 +194,9 @@ export const DefaultRecipeItem = () => {
   );
 };
 
-export const RecipeItemWithDiskIcon = () => {
+export const RecipeItemWithDiskIcon = ({ recipe }: RecipeItemProps) => {
   return (
-    <RecipeItem>
+    <RecipeItem recipe={recipe}>
       <RecipeItem.ImageAndFavoriteButton>
         <RecipeItem.ProductButton />
       </RecipeItem.ImageAndFavoriteButton>
@@ -202,9 +207,9 @@ export const RecipeItemWithDiskIcon = () => {
   );
 };
 
-export const RecipeItemWithProductDetailImage = () => {
+export const RecipeItemWithProductDetailImage = ({ recipe }: RecipeItemProps) => {
   return (
-    <RecipeItem>
+    <RecipeItem recipe={recipe}>
       <RecipeItem.ImageAndFavoriteButton>
         <RecipeItem.ProductCircleButton />
       </RecipeItem.ImageAndFavoriteButton>
@@ -216,9 +221,9 @@ export const RecipeItemWithProductDetailImage = () => {
   );
 };
 
-export const RecipeItemWithDiskIconAndContent = () => {
+export const RecipeItemWithDiskIconAndContent = ({ recipe }: RecipeItemProps) => {
   return (
-    <RecipeItem>
+    <RecipeItem recipe={recipe}>
       <RecipeItem.ImageAndFavoriteButton>
         <RecipeItem.ProductButton />
       </RecipeItem.ImageAndFavoriteButton>

diff --git a/src/components/Recipe/RecipeList/RecipeList.tsx b/src/components/Recipe/RecipeList/RecipeList.tsx
@@ -3,7 +3,6 @@ import { useRef } from 'react';
 import { container } from './recipeList.css';
 import { RecipeItemWithDiskIconAndContent } from '../RecipeItem/RecipeItem';
 
-import RecipeItemProvider from '@/contexts/RecipeItemContext';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteRecipesQuery } from '@/hooks/queries/recipe';
 import type { SortOption } from '@/types/common';
@@ -28,9 +27,7 @@ const RecipeList = ({ selectedOption }: RecipeListProps) => {
       <ul className={container}>
         {recipes.map((recipe) => (
           <li key={recipe.id}>
-            <RecipeItemProvider recipe={recipe}>
-              <RecipeItemWithDiskIconAndContent />
-            </RecipeItemProvider>
+            <RecipeItemWithDiskIconAndContent recipe={recipe} />
           </li>
         ))}
       </ul>