refactor: count 있을 때만 margin 부여되도록 수정

fun-eat · Jul 24, 2024 · c182623 · c182623
1 parent 8335a66
commit c182623
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx b/src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx
@@ -1,4 +1,4 @@
-import { container } from './recipeFavoriteButton.css';
+import { container, countWrapper } from './recipeFavoriteButton.css';
 
 import HeartEmpty from '@/assets/heart-empty.png';
 import { SvgIcon, Text } from '@/components/Common';
@@ -39,9 +39,14 @@ const RecipeFavoriteButton = ({ recipeId, favorite, favoriteCount }: RecipeFavor
           <img src={HeartEmpty} alt="좋아요" width={24} height={24} />
         </div>
       )}
-      <Text as="span" size="caption1" weight="medium" color="sub">
-        {favoriteCount}
-      </Text>
+
+      {favoriteCount && (
+        <div className={countWrapper}>
+          <Text as="span" size="caption1" weight="medium" color="sub">
+            {favoriteCount}
+          </Text>
+        </div>
+      )}
     </div>
   );
 };

diff --git a/src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts b/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,
 });