refactor: 중복 디자인 수정

src/components/Common/CategoryItem/CategoryItem.tsx

@@ -46,7 +46,7 @@ const CategoryItem = ({
     >
       <div>
         <img
-          className={cx(category, { [circle]: isCircular })}
+          className={cx(categoryImage, { [circle]: isCircular })}
           src={image}
           width={width}
           height={height}

src/components/Common/CategoryItem/categoryItem.css.ts

@@ -16,6 +16,7 @@ export const imageWrapper = style({
 
 export const categoryImage = style({
   objectFit: 'cover',
+  borderRadius: 4,
 });
 
 export const circle = style({

src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx

@@ -1,5 +1,6 @@
-import { container } from './recipeFavoriteButton.css';
+import { container, countWrapper } from './recipeFavoriteButton.css';
 
+import HeartEmpty from '@/assets/heart-empty.png';
 import { SvgIcon, Text } from '@/components/Common';
 import { useTimeout } from '@/hooks/common';
 import { useMemberQuery } from '@/hooks/queries/members';
@@ -27,16 +28,25 @@ const RecipeFavoriteButton = ({ recipeId, favorite, favoriteCount }: RecipeFavor
     <div className={container}>
       {member ? (
         <button type="button" onClick={debouncedToggleFavorite}>
-          <SvgIcon variant={favorite ? 'heartFilled' : 'heartEmpty'} width={24} height={24} />
+          {favorite ? (
+            <SvgIcon variant="heartFilled" width={24} height={24} />
+          ) : (
+            <img src={HeartEmpty} alt="좋아요" width={24} height={24} />
+          )}
         </button>
       ) : (
         <div>
-          <SvgIcon variant="heartEmpty" width={24} height={24} />
+          <img src={HeartEmpty} alt="좋아요" width={24} height={24} />
+        </div>
+      )}
+
+      {favoriteCount && (
+        <div className={countWrapper}>
+          <Text as="span" size="caption1" weight="medium" color="sub">
+            {favoriteCount}
+          </Text>
         </div>
       )}
-      <Text as="span" size="caption1" weight="medium" color="sub">
-        {favoriteCount}
-      </Text>
     </div>
   );
 };

src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts

@@ -3,5 +3,8 @@ import { style } from '@vanilla-extract/css';
 export const container = style({
   display: 'flex',
   alignItems: 'center',
-  gap: 6,
+});
+
+export const countWrapper = style({
+  marginLeft: 6,
 });

src/mocks/data/recipeDetail.json

@@ -39,6 +39,6 @@
   ],
   "totalPrice": 7000,
   "favoriteCount": 153,
-  "favorite": true,
+  "favorite": false,
   "createdAt": "2023-08-02T13:43:06.379389"
 }

src/mocks/handlers/recipeHandlers.ts

@@ -7,11 +7,11 @@ import mockRecipes from '../data/recipes.json';
 
 export const recipeHandlers = [
   rest.get('/api/recipes/:recipeId', (req, res, ctx) => {
-    const { mockSessionId } = req.cookies;
+    // const { mockSessionId } = req.cookies;
 
-    if (!mockSessionId) {
-      return res(ctx.status(401));
-    }
+    // if (!mockSessionId) {
+    //   return res(ctx.status(401));
+    // }
 
     return res(ctx.status(200), ctx.json(recipeDetail), ctx.delay(1000));
   }),