+
);
};
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 = () => {
+
+
+ {name}
+
+
+ {hasSearchLink && (
+
+ -
{products.map(({ id, image, name, price, averageRating }) => (
@@ -19,7 +19,7 @@ const ProductOverviewList = ({ products, isSearchPage = false }: ProductOverview
-
+
+ {author.nickname} + ++ {comment} + +
);
};
export default CommentItem;
-
-const AuthorWrapper = styled.div`
- display: flex;
- gap: 12px;
- align-items: center;
-`;
-
-const CommentContent = styled(Text)`
- margin: 16px 0;
-`;
diff --git a/src/components/Recipe/CommentItem/commentItem.css.ts b/src/components/Recipe/CommentItem/commentItem.css.ts
new file mode 100644
index 000000000..ccd91c2f8
--- /dev/null
+++ b/src/components/Recipe/CommentItem/commentItem.css.ts
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+ display: 'flex',
+ gap: 6,
+});
+
+export const nickname = style({
+ whiteSpace: 'nowrap',
+});
diff --git a/src/components/Recipe/CommentList/CommentList.stories.tsx b/src/components/Recipe/CommentList/CommentList.stories.tsx
new file mode 100644
index 000000000..2f62a5d4e
--- /dev/null
+++ b/src/components/Recipe/CommentList/CommentList.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CommentList from './CommentList';
+
+const meta: Meta -
-
-
- ))}
- -
-
- {name} {price.toLocaleString('ko-KR')} 원 - -
- ))}
- -
+
+
+ ))}
+ -
+
+ +{products.length - 3} + + )} +
+ ))}
+
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
-
- {author.nickname} 님
-
-
- {getFormattedDate(createdAt)}
-
-
- 댓글 {totalElements}개
{comments.map((comment) => (
{member ? (
)}
-
+
-
diff --git a/src/pages/RecipeDetailPage.tsx b/src/pages/RecipeDetailPage.tsx
deleted file mode 100644
index 1c21cc157..000000000
--- a/src/pages/RecipeDetailPage.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { Divider, Heading, Spacing, Text, theme } from '@fun-eat/design-system';
-import { useQueryErrorResetBoundary } from '@tanstack/react-query';
-import { Suspense, useRef } from 'react';
-import { useParams } from 'react-router-dom';
-import styled from 'styled-components';
-
-import RecipePreviewImage from '@/assets/plate.svg';
-import { ErrorBoundary, ErrorComponent, Loading, SectionTitle } from '@/components/Common';
-import { MemberImage } from '@/components/Members';
-import { CommentForm, CommentList, RecipeFavoriteButton } from '@/components/Recipe';
-import { useRecipeDetailQuery } from '@/hooks/queries/recipe';
-import { getFormattedDate } from '@/utils/date';
-
-export const RecipeDetailPage = () => {
- const { recipeId } = useParams();
-
- const scrollTargetRef = useRef
- {author.nickname} 님
- {getFormattedDate(createdAt)}
-
- -
- {products.map(({ id, name, price }) => (
-
+
+
+
+ {author.nickname}
+
+
+ {getFormattedDate(createdAt)}
+
+
+ -
+ {images.map((image, index) => (
+
+
+
+
+ 이런 상품들을 사용했어요!
+
+
+
+
+ -
+ {displaySlice(true, products, 3).map(({ id, name, image }, idx) => (
+
+ +
+
+
+
+
+
+