feat: 좋아요 상태에 따라 버튼 UI 가 달라지도록 구현

prgrms-web-devcourse · Dec 2, 2023 · 94e965f · 94e965f
1 parent bd028f2
commit 94e965f
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/app/bookshelf/[bookshelfId]/page.tsx b/src/app/bookshelf/[bookshelfId]/page.tsx
@@ -85,10 +85,16 @@ export default function UserBookShelfPage({
             size="small"
             colorScheme="warning"
             fullRadius
+            fill={data.isLiked ? false : true}
             onClick={handleClickLikeButton}
           >
-            <div className="bold flex items-center gap-[0.4rem] text-xs">
-              <IconHeart fill="white" height="1.3rem" w="1.3rem" />
+            <div className="bold flex items-center gap-[0.2rem] text-xs">
+              <IconHeart
+                fill={data.isLiked ? '#F56565' : 'white'}
+                stroke={data.isLiked ? '#F56565' : 'white'}
+                height="1.3rem"
+                w="1.3rem"
+              />
               {data.likeCount}
             </div>
           </Button>