From feb7e1ffd2ff75aac9b5e4de1070d1527c2e47d0 Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Sat, 13 Apr 2024 12:12:23 +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=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/RecipeDetailPage/RecipeDetailPage.tsx   | 15 ++++++++++-----
 .../RecipeDetailPage/recipeDetailPage.css.ts      |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
index 47a5f0ce..e1a2baca 100644
--- a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
+++ b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
@@ -24,6 +24,7 @@ import { MemberImage } from '@/components/Members';
 import { ProductOverviewItem } from '@/components/Product';
 import { CommentForm, CommentList, RecipeFavoriteButton } from '@/components/Recipe';
 import { useRecipeDetailQuery } from '@/hooks/queries/recipe';
+import { vars } from '@/styles/theme.css';
 import { getFormattedDate } from '@/utils/date';
 import displaySlice from '@/utils/displaySlice';
 
@@ -37,7 +38,7 @@ export const RecipeDetailPage = () => {
 
   const { isOpen, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet();
 
-  const { id, images, title, content, author, products, favorite, createdAt } = recipeDetail;
+  const { id, images, title, content, author, products, favorite, favoriteCount, createdAt } = recipeDetail;
 
   return (
     <>
@@ -65,10 +66,10 @@ export const RecipeDetailPage = () => {
         <div className={recipeUsedProductsWrapper}>
           <div className={boxIconWrapper}>
             <div className={boxIcon}>
-              <SvgIcon variant="box" stroke="#ffffff" width={12} height={12} />
+              <SvgIcon variant="disk" stroke="#ffffff" fill="none" width={12} height={12} />
             </div>
             <Text size="caption3" weight="medium" color="info">
-              어떤 상품을 사용했나요?
+              이런 상품들을 사용했어요!
             </Text>
           </div>
           <ul className={recipeUsedProductsImageList} onClick={handleOpenBottomSheet}>
@@ -95,10 +96,14 @@ export const RecipeDetailPage = () => {
       <hr style={{ height: '1px', background: '#e6e6e6', border: 0 }} />
       <div style={{ height: '14px' }} />
       <section className={container}>
-        <RecipeFavoriteButton recipeId={id} favorite={favorite} />
+        <RecipeFavoriteButton recipeId={id} favorite={favorite} favoriteCount={favoriteCount} />
         <Spacing size={24} />
-        <p className={recipeContent}>{content}</p>
+        <Text size="body" className={recipeContent}>
+          {content}
+        </Text>
         <Spacing size={24} />
+        <hr style={{ height: '12px', background: vars.colors.border.light, border: 0 }} />
+        <Spacing size={20} />
         <CommentForm recipeId={Number(recipeId)} scrollTargetRef={scrollTargetRef} />
         <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
           <Suspense fallback={<Loading />}>
diff --git a/src/pages/RecipeDetailPage/recipeDetailPage.css.ts b/src/pages/RecipeDetailPage/recipeDetailPage.css.ts
index 925b2263..61a35d62 100644
--- a/src/pages/RecipeDetailPage/recipeDetailPage.css.ts
+++ b/src/pages/RecipeDetailPage/recipeDetailPage.css.ts
@@ -52,7 +52,7 @@ export const boxIcon = style({
   width: 26,
   height: 26,
   marginRight: 8,
-  background: '#D9D9D9',
+  background: vars.colors.gray5,
   borderRadius: '50%',
 });