From a56add66c7cb7b6a15cdec1fe3b388f5404ff160 Mon Sep 17 00:00:00 2001 From: Taeeun Kim Date: Sun, 14 Apr 2024 19:18:59 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20=EA=BF=80=EC=A1=B0=ED=95=A9=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20(#71)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 박스 svg icon 추가 * style: PageHeader import문 추가 * feat: RecipeFavoriteButton 컴포넌트 디자인 수정 * feat: 꿀조합 상세 페이지 디자인 수정 * feat: 댓글 리스트 스타일 마이그레이션 * feat: 댓글작성폼 스타일 마이그레이션 * fix: className 수정 * feat: 꿀조합 상세 페이지 title 스타일 수정 * feat: line height global style로 적용 * feat: plane 아이콘 교체 * style: 린트 적용 * feat: 댓글창 스타일 마이그레이션 * feat: section title 컴포넌트 디자인 마이그레이션 * feat: 꿀조합 상세페이지 Text 컴포넌트와 SectionTitle 컴포넌트로 교체 * feat: RecipeDetail 타입 변경 * feat: 사용한 상품 바텀시트 적용 * fix: 사진을 사용자의 프로필 사진으로 교체 * refactor: CommentItem의 텍스트를 Text 컴포넌트로 교체 * feat: borderRadius 삭제 * feat: svg icon 하나로 교체 * feat: favoriteButton 스타일 수정 * style: 린트 적용 * feat: 댓글 form 스타일 수정 * feat: 꿀조합 상세 디자인 변경 적용 * fix: rate->averageRating으로 이름 변경 * refactor: ProductOverviewItem -> ProductOVerviewList 컴포넌트로 교체 * feat: CommentList, CommentItem 스토리북 추가 --- .storybook/preview-body.html | 17 ++- .../SectionTitle/SectionTitle.stories.tsx | 3 +- .../Common/SectionTitle/SectionTitle.tsx | 66 +++------ .../Common/SectionTitle/sectionTitle.css.ts | 13 ++ src/components/Common/Svg/SvgIcon.tsx | 1 + src/components/Common/Svg/SvgSprite.tsx | 15 +- .../ProductOverviewList.tsx | 6 +- .../Recipe/CommentForm/CommentForm.tsx | 102 ++++++------- .../Recipe/CommentForm/commentForm.css.ts | 43 ++++++ .../CommentItem/CommentItem.stories.tsx | 18 +++ .../Recipe/CommentItem/CommentItem.tsx | 43 ++---- .../Recipe/CommentItem/commentItem.css.ts | 10 ++ .../CommentList/CommentList.stories.tsx | 16 +++ .../Recipe/CommentList/CommentList.tsx | 8 +- .../Recipe/CommentList/commentList.css.ts | 7 + .../RecipeFavoriteButton.tsx | 13 +- .../recipeFavoriteButton.css.ts | 7 + src/mocks/data/recipeDetail.json | 26 +++- .../ProductSearchListPage.tsx | 2 +- src/pages/RecipeDetailPage.tsx | 136 ------------------ .../RecipeDetailPage/RecipeDetailPage.tsx | 123 ++++++++++++++++ .../RecipeDetailPage/recipeDetailPage.css.ts | 90 ++++++++++++ src/pages/ReviewDetailPage.tsx | 3 +- src/router/index.tsx | 2 +- src/styles/reset.css.ts | 1 + src/types/recipe.ts | 1 + 26 files changed, 482 insertions(+), 290 deletions(-) create mode 100644 src/components/Common/SectionTitle/sectionTitle.css.ts create mode 100644 src/components/Recipe/CommentForm/commentForm.css.ts create mode 100644 src/components/Recipe/CommentItem/CommentItem.stories.tsx create mode 100644 src/components/Recipe/CommentItem/commentItem.css.ts create mode 100644 src/components/Recipe/CommentList/CommentList.stories.tsx create mode 100644 src/components/Recipe/CommentList/commentList.css.ts create mode 100644 src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts delete mode 100644 src/pages/RecipeDetailPage.tsx create mode 100644 src/pages/RecipeDetailPage/RecipeDetailPage.tsx create mode 100644 src/pages/RecipeDetailPage/recipeDetailPage.css.ts diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 23699d190..ba12aafb9 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -276,10 +276,19 @@ d="M14.485 9.47a.75.75 0 0 0-1.063 1.06c1.164 1.168 1.133 3.279-.303 4.72l-4.847 4.866c-1.435 1.44-3.533 1.47-4.694.304c-1.164-1.168-1.132-3.28.303-4.72l2.424-2.433a.75.75 0 0 0-1.063-1.059l-2.424 2.433c-1.911 1.92-2.151 4.982-.303 6.838c1.85 1.858 4.907 1.615 6.82-.304l4.847-4.867c1.911-1.918 2.151-4.982.303-6.837Z" > - - + + + + + + + + + { - const { routeBack } = useRoutePage(); - +const SectionTitle = ({ name, hasSearchLink }: SectionTitleProps) => { return ( - - - - {link ? ( - - {name} - - ) : ( - {name} - )} - {link && } - - +
+
+ + + + + {name} + +
+ {hasSearchLink && ( + + + + )} +
); }; export default SectionTitle; - -const SectionTitleContainer = styled.div` - display: flex; - justify-content: space-between; - align-items: center; -`; - -const SectionTitleWrapper = styled.div` - display: flex; - align-items: center; - - svg { - padding-top: 2px; - } -`; - -const ProductName = styled(Heading)` - margin: 0 5px 0 16px; -`; diff --git a/src/components/Common/SectionTitle/sectionTitle.css.ts b/src/components/Common/SectionTitle/sectionTitle.css.ts new file mode 100644 index 000000000..be0030e95 --- /dev/null +++ b/src/components/Common/SectionTitle/sectionTitle.css.ts @@ -0,0 +1,13 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', +}); + +export const wrapper = style({ + display: 'flex', + gap: 18, + alignItems: 'flex-start', +}); diff --git a/src/components/Common/Svg/SvgIcon.tsx b/src/components/Common/Svg/SvgIcon.tsx index 4b6c0796b..305891eb8 100644 --- a/src/components/Common/Svg/SvgIcon.tsx +++ b/src/components/Common/Svg/SvgIcon.tsx @@ -43,6 +43,7 @@ export const SVG_ICON_VARIANTS = [ 'arrowUpDown', 'heartEmpty', 'heartFilled', + 'box', 'close2', 'disk', ] as const; diff --git a/src/components/Common/Svg/SvgSprite.tsx b/src/components/Common/Svg/SvgSprite.tsx index 922b6ec46..106e7367c 100644 --- a/src/components/Common/Svg/SvgSprite.tsx +++ b/src/components/Common/Svg/SvgSprite.tsx @@ -243,8 +243,19 @@ const SvgSprite = () => { - - + + + + + + + + + diff --git a/src/components/Product/ProductOverviewList/ProductOverviewList.tsx b/src/components/Product/ProductOverviewList/ProductOverviewList.tsx index 66d615cb7..eb91ba36b 100644 --- a/src/components/Product/ProductOverviewList/ProductOverviewList.tsx +++ b/src/components/Product/ProductOverviewList/ProductOverviewList.tsx @@ -8,10 +8,10 @@ import type { Product } from '@/types/product'; interface ProductOverviewListProps { products: Product[]; - isSearchPage?: boolean; + hasBorder?: boolean; } -const ProductOverviewList = ({ products, isSearchPage = false }: ProductOverviewListProps) => { +const ProductOverviewList = ({ products, hasBorder = false }: ProductOverviewListProps) => { return (
    {products.map(({ id, image, name, price, averageRating }) => ( @@ -19,7 +19,7 @@ const ProductOverviewList = ({ products, isSearchPage = false }: ProductOverview - {isSearchPage && ( + {hasBorder && ( <>
    diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/src/components/Recipe/CommentForm/CommentForm.tsx index 114322c56..b162150c6 100644 --- a/src/components/Recipe/CommentForm/CommentForm.tsx +++ b/src/components/Recipe/CommentForm/CommentForm.tsx @@ -1,11 +1,14 @@ -import { Button, Spacing, Text, Textarea, useTheme, useToastActionContext } from '@fun-eat/design-system'; +import { useToastActionContext } from '@fun-eat/design-system'; import type { ChangeEventHandler, FormEventHandler, RefObject } from 'react'; -import { useState } from 'react'; -import styled from 'styled-components'; +import { useRef, useState } from 'react'; -import { SvgIcon } from '@/components/Common'; +import { commentForm, commentTextarea, container, profileImage, sendButton } from './commentForm.css'; + +import { SvgIcon, Text } from '@/components/Common'; import { useScroll } from '@/hooks/common'; +import { useMemberQuery } from '@/hooks/queries/members'; import { useRecipeCommentMutation } from '@/hooks/queries/recipe'; +import { vars } from '@/styles/theme.css'; interface CommentFormProps { recipeId: number; @@ -15,16 +18,27 @@ interface CommentFormProps { const MAX_COMMENT_LENGTH = 200; const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => { + const { data: member } = useMemberQuery(); + const [commentValue, setCommentValue] = useState(''); const { mutate } = useRecipeCommentMutation(recipeId); - const theme = useTheme(); const { toast } = useToastActionContext(); const { scrollToPosition } = useScroll(); + const textAreaRef = useRef(null); + + const autoResizeTextarea = () => { + if (textAreaRef.current) { + textAreaRef.current.style.height = 'auto'; + textAreaRef.current.style.height = textAreaRef.current.scrollHeight + 'px'; + } + }; + const handleCommentInput: ChangeEventHandler = (e) => { setCommentValue(e.target.value); + autoResizeTextarea(); }; const handleSubmitComment: FormEventHandler = (e) => { @@ -51,54 +65,40 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => { }; return ( - -
    - - - + {`${member?.nickname}의 + <> + +