From 5dff0331ab214b115303d36f83130952a0c094e0 Mon Sep 17 00:00:00 2001 From: hae-on Date: Sat, 13 Apr 2024 00:50:32 +0900 Subject: [PATCH 01/15] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=B4=88=20recipe?= =?UTF-8?q?=20item=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Recipe/RecipeItem/RecipeItem.stories.tsx | 80 ++++++++- .../Recipe/RecipeItem/RecipeItem.tsx | 164 +++++++++++++----- .../Recipe/RecipeItem/recipeItem.css.ts | 57 ++++-- .../Recipe/RecipeList/RecipeList.tsx | 5 +- src/contexts/RecipeItemContext.tsx | 21 +++ src/hooks/context/index.ts | 1 + .../context/useRecipeItemValueContext.ts | 14 ++ src/mocks/data/recipes.json | 21 +++ 8 files changed, 298 insertions(+), 65 deletions(-) create mode 100644 src/contexts/RecipeItemContext.tsx create mode 100644 src/hooks/context/useRecipeItemValueContext.ts diff --git a/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx b/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx index 351a3a0d5..2f553f06d 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx @@ -2,17 +2,89 @@ import type { Meta, StoryObj } from '@storybook/react'; import RecipeItem from './RecipeItem'; +import RecipeItemProvider from '@/contexts/RecipeItemContext'; import mockRecipe from '@/mocks/data/recipes.json'; const meta: Meta = { title: 'recipe/RecipeItem', component: RecipeItem, - args: { - recipe: mockRecipe.recipes[0], - }, + decorators: [ + (Story) => ( + + + + ), + ], }; export default meta; type Story = StoryObj; -export const Default: Story = {}; +export const Default: Story = { + render: (args) => { + return ( + + +
+ +
+ + +
+ + ); + }, +}; + +export const Recipe: Story = { + render: (args) => { + return ( + + + + +
+ +
+ + +
+ + + ); + }, +}; + +export const MyPage: Story = { + render: (args) => { + return ( + + + + +
+ + + + + ); + }, +}; + +export const Search: Story = { + render: (args) => { + return ( + + + + +
+ +
+ + +
+ + ); + }, +}; diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index a3f3f96c4..a56bbec41 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -1,38 +1,71 @@ import { BottomSheet, Skeleton, useBottomSheet } from '@fun-eat/design-system'; -import type { MouseEventHandler } from 'react'; -import { memo, useState } from 'react'; +import type { MouseEventHandler, PropsWithChildren} from 'react'; +import { useState } from 'react'; import { Link } from 'react-router-dom'; import { + ellipsis, favoriteButtonWrapper, imageWrapper, productButtonWrapper, - recipeAuthor, - recipeContent, + productCircleListWrapper, + productCircleWrapper, + productImage, recipeImage, recipeProductWrapper, - recipeTitle, + recipeProductsCount, + thirdProductImage, } from './recipeItem.css'; import RecipeFavoriteButton from '../RecipeFavoriteButton/RecipeFavoriteButton'; import RecipeProductButton from '../RecipeProductButton/RecipeProductButton'; +import { Text } from '@/components/Common'; import { ProductOverviewList } from '@/components/Product'; import { RECIPE_CARD_DEFAULT_IMAGE_URL } from '@/constants/image'; -import type { MemberRecipe, Recipe } from '@/types/recipe'; +import RecipeItemProvider from '@/contexts/RecipeItemContext'; +import { useRecipeItemValueContext } from '@/hooks/context'; +import { getRelativeDate } from '@/utils/date'; +import displaySlice from '@/utils/displaySlice'; -interface RecipeItemProps { - recipe: Recipe | MemberRecipe; - isMemberPage?: boolean; -} +const RecipeItem = ({ children }: PropsWithChildren) => { + const { recipe } = useRecipeItemValueContext(); + const { id } = recipe; -const RecipeItem = ({ recipe, isMemberPage = false }: RecipeItemProps) => { - const { id, image, title, content, favorite, products } = recipe; - const { isOpen, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet(); - - const author = 'author' in recipe ? recipe.author : null; + return ( + + {children} + + ); +}; +const ImageAndFavoriteButton = ({ children }: PropsWithChildren) => { + const { recipe } = useRecipeItemValueContext(); + const { id, image, title, favorite } = recipe; const [isImageLoading, setIsImageLoading] = useState(true); + return ( +
+ {`조리된 image && setIsImageLoading(false)} + /> + {isImageLoading && image && } +
e.preventDefault()}> + +
+ {children} +
+ ); +}; + +const ProductButton = () => { + const { recipe } = useRecipeItemValueContext(); + const { products } = recipe; + const { isOpen, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet(); + const handleOpenProductSheet: MouseEventHandler = (event) => { event.preventDefault(); handleOpenBottomSheet(); @@ -40,30 +73,9 @@ const RecipeItem = ({ recipe, isMemberPage = false }: RecipeItemProps) => { return ( <> - - {!isMemberPage && ( -
- {`조리된 image && setIsImageLoading(false)} - /> - {isImageLoading && image && } -
e.preventDefault()}> - -
-
handleOpenProductSheet(e)}> - -
-
- )} -
-

{title}

-

{author && `${author.nickname} 님`}

-

{content}

- +
handleOpenProductSheet(e)}> + +
@@ -74,4 +86,76 @@ const RecipeItem = ({ recipe, isMemberPage = false }: RecipeItemProps) => { ); }; -export default memo(RecipeItem); +const ProductCircleButton = () => { + const { recipe } = useRecipeItemValueContext(); + const { products } = recipe; + + return ( +
    + {displaySlice(true, products, 3).map(({ id, image }, idx) => ( +
  • + 사용한 상품 3 && idx === 2 ? thirdProductImage : productImage} + /> + {idx === 2 && ( + + +{products.length - 3} + + )} +
    • + ))} +
+ ); +}; + +const Title = () => { + const { recipe } = useRecipeItemValueContext(); + const { title } = recipe; + + return ( + + {title} + + ); +}; + +const Author = () => { + const { recipe } = useRecipeItemValueContext(); + const { author } = recipe; + + return {`${author.nickname} 님`}; +}; + +const CreatedDate = () => { + const { recipe } = useRecipeItemValueContext(); + const { createdAt } = recipe; + + return ( + + · {getRelativeDate(createdAt)} + + ); +}; + +const Content = () => { + const { recipe } = useRecipeItemValueContext(); + const { content } = recipe; + + return ( + + {content} + + ); +}; + +RecipeItem.ImageAndFavoriteButton = ImageAndFavoriteButton; +RecipeItem.ProductButton = ProductButton; +RecipeItem.ProductCircleButton = ProductCircleButton; +RecipeItem.Title = Title; +RecipeItem.Author = Author; +RecipeItem.CreatedDate = CreatedDate; +RecipeItem.Content = Content; + +export default RecipeItem; diff --git a/src/components/Recipe/RecipeItem/recipeItem.css.ts b/src/components/Recipe/RecipeItem/recipeItem.css.ts index c85e91ab9..7ef042456 100644 --- a/src/components/Recipe/RecipeItem/recipeItem.css.ts +++ b/src/components/Recipe/RecipeItem/recipeItem.css.ts @@ -1,3 +1,4 @@ +import { vars } from '@/styles/theme.css'; import { style } from '@vanilla-extract/css'; export const imageWrapper = style({ @@ -25,28 +26,50 @@ export const productButtonWrapper = style({ left: 8, }); -export const recipeTitle = style({ - color: '#232527', - fontSize: 14, - fontWeight: 600, - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', +export const recipeProductWrapper = style({ + margin: '48px 20px', }); -export const recipeAuthor = style({ - color: '#3D3D3D', - fontSize: 11, +export const productCircleWrapper = style({ + position: 'absolute', + bottom: 10, + left: 10, + display: 'flex', }); -export const recipeContent = style({ - color: '#808080', - fontSize: 11, +export const productCircleListWrapper = style({ + position: 'relative', + width: '100%', + height: '40px', + marginRight: '-10px', + borderRadius: '50%', + border: `2px solid ${vars.colors.border.light}`, + boxSizing: 'content-box', +}); + +export const productImage = style({ + width: '40px', + height: '40px', + borderRadius: '50%', +}); + +export const thirdProductImage = style({ + width: '40px', + height: '40px', + borderRadius: '50%', + filter: 'brightness(50%)', +}); + +export const recipeProductsCount = style({ + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate( -50%, -50% )', + color: vars.colors.white, +}); + +export const ellipsis = style({ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', }); - -export const recipeProductWrapper = style({ - margin: '48px 20px', -}); diff --git a/src/components/Recipe/RecipeList/RecipeList.tsx b/src/components/Recipe/RecipeList/RecipeList.tsx index 70edda004..bc84406f3 100644 --- a/src/components/Recipe/RecipeList/RecipeList.tsx +++ b/src/components/Recipe/RecipeList/RecipeList.tsx @@ -1,7 +1,6 @@ import { useRef } from 'react'; import { container } from './recipeList.css'; -import RecipeItem from '../RecipeItem/RecipeItem'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteRecipesQuery } from '@/hooks/queries/recipe'; @@ -26,9 +25,7 @@ const RecipeList = ({ selectedOption }: RecipeListProps) => { <>
    {recipes.map((recipe) => ( -
  • - -
    • +
  • {/* */}
    • ))}
diff --git a/src/contexts/RecipeItemContext.tsx b/src/contexts/RecipeItemContext.tsx new file mode 100644 index 000000000..026234852 --- /dev/null +++ b/src/contexts/RecipeItemContext.tsx @@ -0,0 +1,21 @@ +import { createContext } from 'react'; + +import type { Recipe } from '@/types/recipe'; + +interface RecipeItemValue { + recipe: Recipe; + children?: React.ReactNode; +} + +export const RecipeItemValueContext = createContext(null); + +const RecipeItemProvider = ({ children, recipe }: RecipeItemValue) => { + const recipeItemValue = { + recipe, + children, + }; + + return {children}; +}; + +export default RecipeItemProvider; diff --git a/src/hooks/context/index.ts b/src/hooks/context/index.ts index 56470cfbb..8b138cb7d 100644 --- a/src/hooks/context/index.ts +++ b/src/hooks/context/index.ts @@ -4,3 +4,4 @@ export { default as useReviewFormActionContext } from './useReviewFormActionCont export { default as useReviewFormValueContext } from './useReviewFormValueContext'; export { default as useRecipeFormActionContext } from './useRecipeFormActionContext'; export { default as useRecipeFormValueContext } from './useRecipeFormValueContext'; +export { default as useRecipeItemValueContext } from './useRecipeItemValueContext'; diff --git a/src/hooks/context/useRecipeItemValueContext.ts b/src/hooks/context/useRecipeItemValueContext.ts new file mode 100644 index 000000000..aee1b2ce1 --- /dev/null +++ b/src/hooks/context/useRecipeItemValueContext.ts @@ -0,0 +1,14 @@ +import { useContext } from 'react'; + +import { RecipeItemValueContext } from '@/contexts/RecipeItemContext'; + +const useRecipeItemValueContext = () => { + const RecipeItemValue = useContext(RecipeItemValueContext); + if (RecipeItemValue === null || RecipeItemValue === undefined) { + throw new Error('useRecipeItemValueContext는 RecipeItem Provider 안에서 사용해야 합니다.'); + } + + return RecipeItemValue; +}; + +export default useRecipeItemValueContext; diff --git a/src/mocks/data/recipes.json b/src/mocks/data/recipes.json index 4260a3242..1d27d2422 100644 --- a/src/mocks/data/recipes.json +++ b/src/mocks/data/recipes.json @@ -34,6 +34,27 @@ "name": "콘치즈", "price": 1500, "averageRating": 4.0 + }, + { + "id": 3, + "image": "https://arqachylpmku8348141.cdn.ntruss.com/app/product/mst_product/8801056232979_L.jpg", + "name": "콘치즈", + "price": 1500, + "averageRating": 4.0 + }, + { + "id": 4, + "image": "https://arqachylpmku8348141.cdn.ntruss.com/app/product/mst_product/8801056232979_L.jpg", + "name": "콘치즈", + "price": 1500, + "averageRating": 4.0 + }, + { + "id": 5, + "image": "https://arqachylpmku8348141.cdn.ntruss.com/app/product/mst_product/8801056232979_L.jpg", + "name": "콘치즈", + "price": 1500, + "averageRating": 4.0 } ] }, From 6907a471588aaacef3105ba628921aa0869c229b Mon Sep 17 00:00:00 2001 From: hae-on Date: Sat, 13 Apr 2024 11:09:56 +0900 Subject: [PATCH 02/15] =?UTF-8?q?fix:=20=EC=9E=90=EB=8F=99=20=EB=B0=B0?= =?UTF-8?q?=ED=8F=AC=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Members/MemberRecipeList/MemberRecipeList.tsx | 2 +- src/components/Recipe/RecipeItem/RecipeItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx index 740daddff..126aa5d07 100644 --- a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx +++ b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx @@ -50,7 +50,7 @@ const MemberRecipeList = ({ isPreview = false }: MemberRecipeListProps) => { {recipeToDisplay?.map((recipe) => (
  • - + {/* */}
    • ))} diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index a56bbec41..89345048a 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -1,5 +1,5 @@ import { BottomSheet, Skeleton, useBottomSheet } from '@fun-eat/design-system'; -import type { MouseEventHandler, PropsWithChildren} from 'react'; +import type { MouseEventHandler, PropsWithChildren } from 'react'; import { useState } from 'react'; import { Link } from 'react-router-dom'; From c06af98a5b70fe332e440c78b5c409ea97ef60ac Mon Sep 17 00:00:00 2001 From: hae-on Date: Sun, 14 Apr 2024 15:01:30 +0900 Subject: [PATCH 03/15] =?UTF-8?q?refactor:=20=EC=9E=91=EA=B0=80=EC=99=80?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1=EB=90=9C=20=EB=82=A0=EC=A7=9C=20=EB=AC=B6?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Recipe/RecipeItem/RecipeItem.stories.tsx | 15 +++------------ src/components/Recipe/RecipeItem/RecipeItem.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 16 deletions(-) diff --git a/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx b/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx index 2f553f06d..edef2731f 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx @@ -27,10 +27,7 @@ export const Default: Story = {
    -
    - - -
    + ); }, @@ -45,10 +42,7 @@ export const Recipe: Story = {
    -
    - - -
    + ); @@ -80,10 +74,7 @@ export const Search: Story = {
    -
    - - -
    + ); }, diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index 89345048a..ac20cd6cb 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -128,13 +128,13 @@ const Author = () => { return {`${author.nickname} 님`}; }; -const CreatedDate = () => { +const AuthorAndCreatedDate = () => { const { recipe } = useRecipeItemValueContext(); - const { createdAt } = recipe; + const { author, createdAt } = recipe; return ( - · {getRelativeDate(createdAt)} + {`${author.nickname} 님 · ${getRelativeDate(createdAt)}`} ); }; @@ -155,7 +155,7 @@ RecipeItem.ProductButton = ProductButton; RecipeItem.ProductCircleButton = ProductCircleButton; RecipeItem.Title = Title; RecipeItem.Author = Author; -RecipeItem.CreatedDate = CreatedDate; +RecipeItem.AuthorAndCreatedDate = AuthorAndCreatedDate; RecipeItem.Content = Content; export default RecipeItem; From 96403bb622ad3991bd97cf4d23dede3918a7a938 Mon Sep 17 00:00:00 2001 From: hae-on Date: Mon, 15 Apr 2024 19:26:35 +0900 Subject: [PATCH 04/15] =?UTF-8?q?refactor:=20recipe=20=EA=B0=80=EC=A0=B8?= =?UTF-8?q?=EC=98=A4=EB=8A=94=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Recipe/RecipeItem/RecipeItem.tsx | 35 +++++++++++-------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index ac20cd6cb..f302364f4 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -39,8 +39,9 @@ const RecipeItem = ({ children }: PropsWithChildren) => { }; const ImageAndFavoriteButton = ({ children }: PropsWithChildren) => { - const { recipe } = useRecipeItemValueContext(); - const { id, image, title, favorite } = recipe; + const { + recipe: { id, image, title, favorite }, + } = useRecipeItemValueContext(); const [isImageLoading, setIsImageLoading] = useState(true); return ( @@ -62,8 +63,9 @@ const ImageAndFavoriteButton = ({ children }: PropsWithChildren) => { }; const ProductButton = () => { - const { recipe } = useRecipeItemValueContext(); - const { products } = recipe; + const { + recipe: { products }, + } = useRecipeItemValueContext(); const { isOpen, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet(); const handleOpenProductSheet: MouseEventHandler = (event) => { @@ -87,8 +89,9 @@ const ProductButton = () => { }; const ProductCircleButton = () => { - const { recipe } = useRecipeItemValueContext(); - const { products } = recipe; + const { + recipe: { products }, + } = useRecipeItemValueContext(); return (
      @@ -111,8 +114,9 @@ const ProductCircleButton = () => { }; const Title = () => { - const { recipe } = useRecipeItemValueContext(); - const { title } = recipe; + const { + recipe: { title }, + } = useRecipeItemValueContext(); return ( @@ -122,15 +126,17 @@ const Title = () => { }; const Author = () => { - const { recipe } = useRecipeItemValueContext(); - const { author } = recipe; + const { + recipe: { author }, + } = useRecipeItemValueContext(); return {`${author.nickname} 님`}; }; const AuthorAndCreatedDate = () => { - const { recipe } = useRecipeItemValueContext(); - const { author, createdAt } = recipe; + const { + recipe: { author, createdAt }, + } = useRecipeItemValueContext(); return ( @@ -140,8 +146,9 @@ const AuthorAndCreatedDate = () => { }; const Content = () => { - const { recipe } = useRecipeItemValueContext(); - const { content } = recipe; + const { + recipe: { content }, + } = useRecipeItemValueContext(); return ( From eeccf3a41b112473f5c3a86d0c18d1295117089c Mon Sep 17 00:00:00 2001 From: hae-on Date: Mon, 15 Apr 2024 19:33:11 +0900 Subject: [PATCH 05/15] =?UTF-8?q?refactor:=20css=20=EC=97=86=EC=96=B4?= =?UTF-8?q?=EC=A7=84=20=EC=86=8D=EC=84=B1=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Recipe/RecipeItem/recipeItem.css.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Recipe/RecipeItem/recipeItem.css.ts b/src/components/Recipe/RecipeItem/recipeItem.css.ts index 52573dd7d..f1f99e7ad 100644 --- a/src/components/Recipe/RecipeItem/recipeItem.css.ts +++ b/src/components/Recipe/RecipeItem/recipeItem.css.ts @@ -28,10 +28,6 @@ export const productButtonWrapper = style({ zIndex: 100, }); -export const recipeProductWrapper = style({ - margin: '48px 20px', -}); - export const productCircleWrapper = style({ position: 'absolute', bottom: 10, From f1d84bc1bfbd579409049842669d257206026409 Mon Sep 17 00:00:00 2001 From: hae-on Date: Mon, 15 Apr 2024 19:42:09 +0900 Subject: [PATCH 06/15] =?UTF-8?q?refactor:=20=EA=B0=81=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Recipe/RecipeItem/RecipeItem.tsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index 78c516ee3..9cc02847c 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -152,3 +152,55 @@ RecipeItem.AuthorAndCreatedDate = AuthorAndCreatedDate; RecipeItem.Content = Content; export default RecipeItem; + +export const DefaultRecipeItem = () => { + return ( + + +
      + + + + ); +}; + +export const RecipeItemWithProductButton = () => { + return ( + + + + +
      + + + + ); +}; + +export const RecipeItemWithProductCircleButton = () => { + return ( + + + + +
      + + + + + ); +}; + +export const RecipeItemWithProductButtonAndContent = () => { + return ( + + + + +
      + + + + + ); +}; From bba17064bae177f5f54816110c0e655663b8c4dc Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 17 Apr 2024 17:02:36 +0900 Subject: [PATCH 07/15] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EB=82=B4=EB=B6=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Recipe/RecipeItem/RecipeItem.stories.tsx | 61 +++++-------------- 1 file changed, 15 insertions(+), 46 deletions(-) diff --git a/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx b/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx index edef2731f..3c2348411 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx @@ -1,6 +1,11 @@ import type { Meta, StoryObj } from '@storybook/react'; -import RecipeItem from './RecipeItem'; +import RecipeItem, { + DefaultRecipeItem, + RecipeItemWithDiskIcon, + RecipeItemWithDiskIconAndContent, + RecipeItemWithProductDetailImage, +} from './RecipeItem'; import RecipeItemProvider from '@/contexts/RecipeItemContext'; import mockRecipe from '@/mocks/data/recipes.json'; @@ -10,7 +15,7 @@ const meta: Meta = { component: RecipeItem, decorators: [ (Story) => ( - + ), @@ -21,61 +26,25 @@ export default meta; type Story = StoryObj; export const Default: Story = { - render: (args) => { - return ( - - -
      - - - - ); + render: () => { + return ; }, }; export const Recipe: Story = { - render: (args) => { - return ( - - - - -
      - - - - - ); + render: () => { + return ; }, }; export const MyPage: Story = { - render: (args) => { - return ( - - - - -
      - - - - - ); + render: () => { + return ; }, }; export const Search: Story = { - render: (args) => { - return ( - - - - -
      - - - - ); + render: () => { + return ; }, }; From 4ad3aa36b03003abffb9f17c031f44cb162d96d0 Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 17 Apr 2024 17:02:47 +0900 Subject: [PATCH 08/15] =?UTF-8?q?refactor:=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=9E=9C=EB=8D=A4=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Recipe/RecipeItem/RecipeItem.tsx | 27 +++++++++++++++---- src/constants/image.ts | 7 ++++- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index 9cc02847c..e6135dde1 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -19,12 +19,26 @@ import RecipeFavoriteButton from '../RecipeFavoriteButton/RecipeFavoriteButton'; import RecipeProductButton from '../RecipeProductButton/RecipeProductButton'; import { Text } from '@/components/Common'; -import { RECIPE_CARD_DEFAULT_IMAGE_URL } from '@/constants/image'; +import { + RECIPE_CARD_DEFAULT_IMAGE_URL_1, + RECIPE_CARD_DEFAULT_IMAGE_URL_2, + RECIPE_CARD_DEFAULT_IMAGE_URL_3, + RECIPE_CARD_DEFAULT_IMAGE_URL_4, + RECIPE_CARD_DEFAULT_IMAGE_URL_5, +} from '@/constants/image'; import RecipeItemProvider from '@/contexts/RecipeItemContext'; import { useRecipeItemValueContext } from '@/hooks/context'; import { getRelativeDate } from '@/utils/date'; import displaySlice from '@/utils/displaySlice'; +const defaultImages = [ + RECIPE_CARD_DEFAULT_IMAGE_URL_1, + RECIPE_CARD_DEFAULT_IMAGE_URL_2, + RECIPE_CARD_DEFAULT_IMAGE_URL_3, + RECIPE_CARD_DEFAULT_IMAGE_URL_4, + RECIPE_CARD_DEFAULT_IMAGE_URL_5, +]; + const RecipeItem = ({ children }: PropsWithChildren) => { const { recipe } = useRecipeItemValueContext(); const { id } = recipe; @@ -42,11 +56,14 @@ const ImageAndFavoriteButton = ({ children }: PropsWithChildren) => { } = useRecipeItemValueContext(); const [isImageLoading, setIsImageLoading] = useState(true); + const randomIndex = Math.floor(Math.random() * defaultImages.length); + const defaultImage = defaultImages[randomIndex]; + return (
      {`조리된 image && setIsImageLoading(false)} @@ -164,7 +181,7 @@ export const DefaultRecipeItem = () => { ); }; -export const RecipeItemWithProductButton = () => { +export const RecipeItemWithDiskIcon = () => { return ( @@ -177,7 +194,7 @@ export const RecipeItemWithProductButton = () => { ); }; -export const RecipeItemWithProductCircleButton = () => { +export const RecipeItemWithProductDetailImage = () => { return ( @@ -191,7 +208,7 @@ export const RecipeItemWithProductCircleButton = () => { ); }; -export const RecipeItemWithProductButtonAndContent = () => { +export const RecipeItemWithDiskIconAndContent = () => { return ( diff --git a/src/constants/image.ts b/src/constants/image.ts index ce86c786c..864e1ad9b 100644 --- a/src/constants/image.ts +++ b/src/constants/image.ts @@ -1,5 +1,10 @@ const IMAGE_BASE_URL = 'https://image.funeat.site/prod/'; export const REVIEW_CARD_DEFAULT_IMAGE_URL = `${IMAGE_BASE_URL}review-card-default.png`; -export const RECIPE_CARD_DEFAULT_IMAGE_URL = `${IMAGE_BASE_URL}recipe-card-default.png`; export const RECIPE_RANK_DEFAULT_IMAGE_URL = `${IMAGE_BASE_URL}recipe-rank-default.png`; + +export const RECIPE_CARD_DEFAULT_IMAGE_URL_1 = `${IMAGE_BASE_URL}recipe-card-default_1.png`; +export const RECIPE_CARD_DEFAULT_IMAGE_URL_2 = `${IMAGE_BASE_URL}recipe-card-default_2.png`; +export const RECIPE_CARD_DEFAULT_IMAGE_URL_3 = `${IMAGE_BASE_URL}recipe-card-default_3.png`; +export const RECIPE_CARD_DEFAULT_IMAGE_URL_4 = `${IMAGE_BASE_URL}recipe-card-default_4.png`; +export const RECIPE_CARD_DEFAULT_IMAGE_URL_5 = `${IMAGE_BASE_URL}recipe-card-default_5.png`; From 3dd571c7d9da4a2c68f20bc84d173067f5f27969 Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 17 Apr 2024 17:29:20 +0900 Subject: [PATCH 09/15] =?UTF-8?q?refactor:=20=EB=A0=88=EC=8B=9C=ED=94=BC?= =?UTF-8?q?=20=EB=9E=AD=ED=82=B9=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecipeRankingItem.stories.tsx | 18 ---------- .../RecipeRankingItem/RecipeRankingItem.tsx | 33 ------------------- .../recipeRankingItem.css.ts | 31 ----------------- .../RecipeRankingList/RecipeRankingList.tsx | 7 ++-- src/components/Rank/index.ts | 1 - .../recipeFavoriteButton.css.ts | 1 - .../Recipe/RecipeItem/RecipeItem.tsx | 16 ++++++--- src/mocks/data/recipeRankingList.json | 20 ++++++++--- src/types/ranking.ts | 9 ----- src/types/recipe.ts | 4 +-- src/types/response.ts | 4 +-- 11 files changed, 37 insertions(+), 107 deletions(-) delete mode 100644 src/components/Rank/RecipeRankingItem/RecipeRankingItem.stories.tsx delete mode 100644 src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx delete mode 100644 src/components/Rank/RecipeRankingItem/recipeRankingItem.css.ts diff --git a/src/components/Rank/RecipeRankingItem/RecipeRankingItem.stories.tsx b/src/components/Rank/RecipeRankingItem/RecipeRankingItem.stories.tsx deleted file mode 100644 index 5651b94c2..000000000 --- a/src/components/Rank/RecipeRankingItem/RecipeRankingItem.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import RecipeRankingItem from './RecipeRankingItem'; - -import mockRecipeRankingList from '@/mocks/data/recipeRankingList.json'; - -const meta: Meta = { - title: 'recipe/RecipeRankingItem', - component: RecipeRankingItem, - args: { - recipe: mockRecipeRankingList.recipes[0], - }, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx b/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx deleted file mode 100644 index 5b3569473..000000000 --- a/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { buttonWrapper, imageWrapper, recipeImage, recipeTitle, info } from './recipeRankingItem.css'; - -import { RecipeFavoriteButton } from '@/components/Recipe'; -import { RECIPE_CARD_DEFAULT_IMAGE_URL } from '@/constants/image'; -import type { RecipeRanking } from '@/types/ranking'; -import { getRelativeDate } from '@/utils/date'; - -interface RecipeRankingItemProps { - recipe: RecipeRanking; -} - -const RecipeRankingItem = ({ recipe }: RecipeRankingItemProps) => { - const { id, image, title, author, favorite, createdAt } = recipe; - - return ( - <> -
      - {title} -
      e.preventDefault()}> - -
      -
      -
      -

      {title}

      -
      -

      - {author} 님 · {getRelativeDate(createdAt)} -

      - - ); -}; - -export default RecipeRankingItem; diff --git a/src/components/Rank/RecipeRankingItem/recipeRankingItem.css.ts b/src/components/Rank/RecipeRankingItem/recipeRankingItem.css.ts deleted file mode 100644 index c29b7b202..000000000 --- a/src/components/Rank/RecipeRankingItem/recipeRankingItem.css.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const imageWrapper = style({ - position: 'relative', -}); - -export const recipeImage = style({ - width: '100%', - height: 'auto', - minWidth: 163, - borderRadius: '6px', - objectFit: 'cover', - aspectRatio: '1 / 1', -}); - -export const buttonWrapper = style({ - position: 'absolute', - top: 8, - right: 8, -}); - -export const recipeTitle = style({ - fontSize: 14, - fontWeight: 600, - color: '#232527', -}); - -export const info = style({ - fontSize: 12, - color: '#808080', -}); diff --git a/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx b/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx index 038bdcf61..d6f0f16c2 100644 --- a/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx +++ b/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx @@ -1,11 +1,12 @@ import { Link } from 'react-router-dom'; import { container } from './recipeRankingList.css'; -import RecipeRankingItem from '../RecipeRankingItem/RecipeRankingItem'; import { PATH } from '@/constants/path'; import { useGA } from '@/hooks/common'; import { useRecipeRankingQuery } from '@/hooks/queries/rank'; +import RecipeItemProvider from '@/contexts/RecipeItemContext'; +import { DefaultRecipeItem } from '@/components/Recipe/RecipeItem/RecipeItem'; const RecipeRankingList = () => { const { data: recipeResponse } = useRecipeRankingQuery(); @@ -22,7 +23,9 @@ const RecipeRankingList = () => { {recipeResponse.recipes.map((recipe) => (
    • - + + +
      • ))} diff --git a/src/components/Rank/index.ts b/src/components/Rank/index.ts index ac811ad50..341b6b1f9 100644 --- a/src/components/Rank/index.ts +++ b/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'; diff --git a/src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts b/src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts index 72d7e5fe7..02ed8b060 100644 --- a/src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts +++ b/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', }); diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index e6135dde1..0e4614820 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -82,6 +82,10 @@ const ProductButton = () => { recipe: { products }, } = useRecipeItemValueContext(); + if (!products) { + return null; + } + return ( <>
      e.preventDefault()}> @@ -96,6 +100,10 @@ const ProductCircleButton = () => { recipe: { products }, } = useRecipeItemValueContext(); + if (!products) { + return null; + } + return (
        {displaySlice(true, products, 3).map(({ id, image }, idx) => ( @@ -174,7 +182,7 @@ export const DefaultRecipeItem = () => { return ( -
        +
        @@ -187,7 +195,7 @@ export const RecipeItemWithDiskIcon = () => { -
        +
        @@ -200,7 +208,7 @@ export const RecipeItemWithProductDetailImage = () => { -
        +
        @@ -214,7 +222,7 @@ export const RecipeItemWithDiskIconAndContent = () => { -
        +
        diff --git a/src/mocks/data/recipeRankingList.json b/src/mocks/data/recipeRankingList.json index 9950e4233..fef638dff 100644 --- a/src/mocks/data/recipeRankingList.json +++ b/src/mocks/data/recipeRankingList.json @@ -4,7 +4,10 @@ "id": 1, "image": "https://image.funeat.site/prod/0e3ba79c-578b-42c5-b951-fb0f50ce57cdIMG_8613.webp", "title": "초특급불닭콘치즈", - "author": "funeat", + "author": { + "nickname": "1번 글", + "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed" + }, "favorite": false, "createdAt": "2023-08-09T10:10:10" }, @@ -12,7 +15,10 @@ "id": 2, "image": "https://image.funeat.site/prod/1ff85060-4ce9-4c3f-9044-87cbb993716caaa.webp", "title": "초특급불닭콘치즈", - "author": "funeat", + "author": { + "nickname": "1번 글", + "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed" + }, "favorite": true, "createdAt": "2023-08-09T10:10:10" }, @@ -20,7 +26,10 @@ "id": 3, "image": "https://image.funeat.site/prod/240a51fa-9fad-4199-807b-891ccfa59f8aIMG_6598.webp", "title": "초특급불닭콘치즈", - "author": "funeat", + "author": { + "nickname": "1번 글", + "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed" + }, "favorite": true, "createdAt": "2023-08-09T10:10:10" }, @@ -28,7 +37,10 @@ "id": 4, "image": "https://image.funeat.site/prod/0e3ba79c-578b-42c5-b951-fb0f50ce57cdIMG_8613.webp", "title": "초특급불닭콘치즈", - "author": "funeat", + "author": { + "nickname": "1번 글", + "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed" + }, "favorite": false, "createdAt": "2023-08-09T10:10:10" } diff --git a/src/types/ranking.ts b/src/types/ranking.ts index 6d0f3b1ff..44dab5540 100644 --- a/src/types/ranking.ts +++ b/src/types/ranking.ts @@ -12,12 +12,3 @@ export interface ReviewRanking { categoryType: CategoryVariant; tags: Tag[]; } - -export interface RecipeRanking { - id: number; - image: string | null; - title: string; - author: string; - favorite: boolean; - createdAt: string; -} diff --git a/src/types/recipe.ts b/src/types/recipe.ts index f8f843af3..1e5179cdb 100644 --- a/src/types/recipe.ts +++ b/src/types/recipe.ts @@ -24,8 +24,8 @@ export interface Recipe { author: Member; createdAt: string; favorite: boolean; - content: string; - products: RecipeProduct[]; + content?: string; + products?: RecipeProduct[]; } export type MemberRecipe = Recipe; diff --git a/src/types/response.ts b/src/types/response.ts index 14ce316a0..52b455deb 100644 --- a/src/types/response.ts +++ b/src/types/response.ts @@ -1,5 +1,5 @@ import type { Product } from './product'; -import type { ProductRanking, RecipeRanking, ReviewRanking } from './ranking'; +import type { ProductRanking, ReviewRanking } from './ranking'; import type { Comment, MemberRecipe, Recipe } from './recipe'; import type { MemberReview, Review } from './review'; import type { ProductSearchResult, ProductSearchAutocomplete } from './search'; @@ -61,5 +61,5 @@ export interface ProductRankingResponse { } export interface RecipeRankingResponse { - recipes: RecipeRanking[]; + recipes: Recipe[]; } From 08259c416f7a335b115d7a6c984b868771209b46 Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 17 Apr 2024 18:13:32 +0900 Subject: [PATCH 10/15] =?UTF-8?q?refactor:=20recipe=20item=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20export=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Rank/RecipeRankingList/RecipeRankingList.tsx | 2 +- src/components/Recipe/index.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx b/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx index d6f0f16c2..9ba13ce3f 100644 --- a/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx +++ b/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx @@ -6,7 +6,7 @@ import { PATH } from '@/constants/path'; import { useGA } from '@/hooks/common'; import { useRecipeRankingQuery } from '@/hooks/queries/rank'; import RecipeItemProvider from '@/contexts/RecipeItemContext'; -import { DefaultRecipeItem } from '@/components/Recipe/RecipeItem/RecipeItem'; +import { DefaultRecipeItem } from '@/components/Recipe'; const RecipeRankingList = () => { const { data: recipeResponse } = useRecipeRankingQuery(); diff --git a/src/components/Recipe/index.ts b/src/components/Recipe/index.ts index 168646a41..0d99c3ec9 100644 --- a/src/components/Recipe/index.ts +++ b/src/components/Recipe/index.ts @@ -9,3 +9,8 @@ export { default as CommentItem } from './CommentItem/CommentItem'; export { default as CommentForm } from './CommentForm/CommentForm'; export { default as CommentList } from './CommentList/CommentList'; export { default as RecipeProductButton } from './RecipeProductButton/RecipeProductButton'; + +export { DefaultRecipeItem } from './RecipeItem/RecipeItem'; +export { RecipeItemWithDiskIcon } from './RecipeItem/RecipeItem'; +export { RecipeItemWithProductDetailImage } from './RecipeItem/RecipeItem'; +export { RecipeItemWithDiskIconAndContent } from './RecipeItem/RecipeItem'; From a6a656ec57bf907afd1e8c18060e017af4f74173 Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 17 Apr 2024 18:15:30 +0900 Subject: [PATCH 11/15] =?UTF-8?q?refactor:=20=EC=83=81=ED=92=88=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8F=AC=ED=95=A8=EB=90=9C=20=EA=BF=80?= =?UTF-8?q?=EC=A1=B0=ED=95=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Product/ProductRecipeList/ProductRecipeList.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx b/src/components/Product/ProductRecipeList/ProductRecipeList.tsx index 6a943c664..05b4a47d4 100644 --- a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx +++ b/src/components/Product/ProductRecipeList/ProductRecipeList.tsx @@ -3,10 +3,11 @@ 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 { useInfiniteProductRecipesQuery } from '@/hooks/queries/product'; import { vars } from '@/styles/theme.css'; import displaySlice from '@/utils/displaySlice'; +import RecipeItemProvider from '@/contexts/RecipeItemContext'; +import { DefaultRecipeItem } from '@/components/Recipe'; interface ProductRecipeListProps { productId: number; @@ -27,7 +28,9 @@ const ProductRecipeList = ({ productId }: ProductRecipeListProps) => {
          {recipeToDisplay.map((recipe) => (
        • - + + +
          • ))} {recipeToDisplay.length < recipes.length && ( From be48d528bdb05e88cdcd59950bfeb8bc781c89ec Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 17 Apr 2024 18:22:12 +0900 Subject: [PATCH 12/15] =?UTF-8?q?refactor:=20=EA=BF=80=EC=A1=B0=ED=95=A9?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Recipe/RecipeItem/recipeItem.css.ts | 4 +--- src/components/Recipe/RecipeList/RecipeList.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Recipe/RecipeItem/recipeItem.css.ts b/src/components/Recipe/RecipeItem/recipeItem.css.ts index f1f99e7ad..1cb2c9944 100644 --- a/src/components/Recipe/RecipeItem/recipeItem.css.ts +++ b/src/components/Recipe/RecipeItem/recipeItem.css.ts @@ -18,14 +18,12 @@ export const favoriteButtonWrapper = style({ position: 'absolute', top: 8, right: 8, - zIndex: 100, }); export const productButtonWrapper = style({ position: 'absolute', - bottom: 8, + bottom: 12, left: 8, - zIndex: 100, }); export const productCircleWrapper = style({ diff --git a/src/components/Recipe/RecipeList/RecipeList.tsx b/src/components/Recipe/RecipeList/RecipeList.tsx index bc84406f3..53eb23af6 100644 --- a/src/components/Recipe/RecipeList/RecipeList.tsx +++ b/src/components/Recipe/RecipeList/RecipeList.tsx @@ -5,6 +5,8 @@ import { container } from './recipeList.css'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteRecipesQuery } from '@/hooks/queries/recipe'; import type { SortOption } from '@/types/common'; +import RecipeItemProvider from '@/contexts/RecipeItemContext'; +import { RecipeItemWithDiskIconAndContent } from '../RecipeItem/RecipeItem'; interface RecipeListProps { selectedOption: SortOption; @@ -25,7 +27,11 @@ const RecipeList = ({ selectedOption }: RecipeListProps) => { <>
            {recipes.map((recipe) => ( -
          • {/* */}
            • +
          • + + + +
            • ))}
          From d49e5c50e3a35750609192079409fad8887189be Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 17 Apr 2024 18:23:08 +0900 Subject: [PATCH 13/15] =?UTF-8?q?chore:=20lint=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Members/MemberRecipeList/MemberRecipeList.tsx | 1 - .../Product/ProductRecipeList/ProductRecipeList.tsx | 4 ++-- src/components/Rank/RecipeRankingList/RecipeRankingList.tsx | 4 ++-- src/components/Recipe/RecipeList/RecipeList.tsx | 4 ++-- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx index 126aa5d07..445dd9e33 100644 --- a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx +++ b/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'; diff --git a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx b/src/components/Product/ProductRecipeList/ProductRecipeList.tsx index 05b4a47d4..7dc31648d 100644 --- a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx +++ b/src/components/Product/ProductRecipeList/ProductRecipeList.tsx @@ -3,11 +3,11 @@ import { Link } from 'react-router-dom'; import { container, moreIcon, moreIconWrapper, moreItem, moreLink } from './productRecipeList.css'; 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'; -import RecipeItemProvider from '@/contexts/RecipeItemContext'; -import { DefaultRecipeItem } from '@/components/Recipe'; interface ProductRecipeListProps { productId: number; diff --git a/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx b/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx index 9ba13ce3f..101f74390 100644 --- a/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx +++ b/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx @@ -2,11 +2,11 @@ import { Link } from 'react-router-dom'; 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'; -import RecipeItemProvider from '@/contexts/RecipeItemContext'; -import { DefaultRecipeItem } from '@/components/Recipe'; const RecipeRankingList = () => { const { data: recipeResponse } = useRecipeRankingQuery(); diff --git a/src/components/Recipe/RecipeList/RecipeList.tsx b/src/components/Recipe/RecipeList/RecipeList.tsx index 53eb23af6..a12176347 100644 --- a/src/components/Recipe/RecipeList/RecipeList.tsx +++ b/src/components/Recipe/RecipeList/RecipeList.tsx @@ -1,12 +1,12 @@ 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'; -import RecipeItemProvider from '@/contexts/RecipeItemContext'; -import { RecipeItemWithDiskIconAndContent } from '../RecipeItem/RecipeItem'; interface RecipeListProps { selectedOption: SortOption; From 33ccebc8123dea9c54ef3dff7470328ae561dc8c Mon Sep 17 00:00:00 2001 From: hae-on Date: Thu, 18 Apr 2024 13:12:43 +0900 Subject: [PATCH 14/15] =?UTF-8?q?refactor:=20image=20=EA=B0=90=EC=8B=B8?= =?UTF-8?q?=EB=8A=94=20div=EC=97=90=20line=20height=200=20=EB=B6=80?= =?UTF-8?q?=EC=97=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Recipe/RecipeItem/RecipeItem.tsx | 8 ++++---- src/components/Recipe/RecipeItem/recipeItem.css.ts | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index 0e4614820..e6a199375 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -182,7 +182,7 @@ export const DefaultRecipeItem = () => { return ( -
          +
          @@ -195,7 +195,7 @@ export const RecipeItemWithDiskIcon = () => { -
          +
          @@ -208,7 +208,7 @@ export const RecipeItemWithProductDetailImage = () => { -
          +
          @@ -222,7 +222,7 @@ export const RecipeItemWithDiskIconAndContent = () => { -
          +
          diff --git a/src/components/Recipe/RecipeItem/recipeItem.css.ts b/src/components/Recipe/RecipeItem/recipeItem.css.ts index 1cb2c9944..75d9c8f94 100644 --- a/src/components/Recipe/RecipeItem/recipeItem.css.ts +++ b/src/components/Recipe/RecipeItem/recipeItem.css.ts @@ -3,6 +3,7 @@ import { style } from '@vanilla-extract/css'; export const imageWrapper = style({ position: 'relative', + lineHeight: 0, }); export const recipeImage = style({ @@ -22,7 +23,7 @@ export const favoriteButtonWrapper = style({ export const productButtonWrapper = style({ position: 'absolute', - bottom: 12, + bottom: 8, left: 8, }); From f3281b0e3fe41a049eee994f3d77f4483ac97fbf Mon Sep 17 00:00:00 2001 From: hae-on Date: Thu, 18 Apr 2024 13:27:57 +0900 Subject: [PATCH 15/15] =?UTF-8?q?refactor:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EC=97=90=EC=84=9C=20=EB=B0=94=EB=A1=9C=20recipe=20?= =?UTF-8?q?=EB=B0=9B=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductRecipeList/ProductRecipeList.tsx | 5 +--- .../RecipeRankingList/RecipeRankingList.tsx | 5 +--- .../Recipe/RecipeItem/RecipeItem.stories.tsx | 16 +++--------- .../Recipe/RecipeItem/RecipeItem.tsx | 25 +++++++++++-------- .../Recipe/RecipeList/RecipeList.tsx | 5 +--- 5 files changed, 22 insertions(+), 34 deletions(-) diff --git a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx b/src/components/Product/ProductRecipeList/ProductRecipeList.tsx index 7dc31648d..8c5f0f241 100644 --- 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) => {
            {recipeToDisplay.map((recipe) => (
          • - - - +
            • ))} {recipeToDisplay.length < recipes.length && ( diff --git a/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx b/src/components/Rank/RecipeRankingList/RecipeRankingList.tsx index 101f74390..f2560075e 100644 --- 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) => (
          • - - - +
            • ))} diff --git a/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx b/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx index 3c2348411..05e67bdec 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.stories.tsx @@ -7,19 +7,11 @@ import RecipeItem, { RecipeItemWithProductDetailImage, } from './RecipeItem'; -import RecipeItemProvider from '@/contexts/RecipeItemContext'; import mockRecipe from '@/mocks/data/recipes.json'; const meta: Meta = { title: 'recipe/RecipeItem', component: RecipeItem, - decorators: [ - (Story) => ( - - - - ), - ], }; export default meta; @@ -27,24 +19,24 @@ type Story = StoryObj; export const Default: Story = { render: () => { - return ; + return ; }, }; export const Recipe: Story = { render: () => { - return ; + return ; }, }; export const MyPage: Story = { render: () => { - return ; + return ; }, }; export const Search: Story = { render: () => { - return ; + return ; }, }; diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index e6a199375..e94712db3 100644 --- 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 ( - +
            @@ -189,9 +194,9 @@ export const DefaultRecipeItem = () => { ); }; -export const RecipeItemWithDiskIcon = () => { +export const RecipeItemWithDiskIcon = ({ recipe }: RecipeItemProps) => { return ( - + @@ -202,9 +207,9 @@ export const RecipeItemWithDiskIcon = () => { ); }; -export const RecipeItemWithProductDetailImage = () => { +export const RecipeItemWithProductDetailImage = ({ recipe }: RecipeItemProps) => { return ( - + @@ -216,9 +221,9 @@ export const RecipeItemWithProductDetailImage = () => { ); }; -export const RecipeItemWithDiskIconAndContent = () => { +export const RecipeItemWithDiskIconAndContent = ({ recipe }: RecipeItemProps) => { return ( - + diff --git a/src/components/Recipe/RecipeList/RecipeList.tsx b/src/components/Recipe/RecipeList/RecipeList.tsx index a12176347..59a249c30 100644 --- 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) => {
              {recipes.map((recipe) => (
            • - - - +
              • ))}