style: add smooth transition

src/components/sound/like/like.module.css

@@ -13,6 +13,7 @@
   background-color: var(--color-neutral-100);
   color: var(--color-foreground-subtle);
   cursor: pointer;
+  line-height: 0;
   outline: none;
 
   &.isFavorite {

src/components/sound/like/like.tsx

@@ -1,4 +1,5 @@
 import { BiHeart, BiSolidHeart } from 'react-icons/bi/index';
+import { AnimatePresence, motion } from 'framer-motion';
 
 import { useFavoriteStore } from '@/store/favorite';
 import { cn } from '@/helpers/styles';
@@ -14,15 +15,24 @@ export function Like({ id }: LikeProps) {
   const toggleFavorite = useFavoriteStore(state => state.toggleFavorite);
 
   return (
-    <button
-      aria-label="Add Sound to Favorites"
-      className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)}
-      onClick={e => {
-        e.stopPropagation();
-        toggleFavorite(id);
-      }}
-    >
-      {isFavorite ? <BiSolidHeart /> : <BiHeart />}
-    </button>
+    <AnimatePresence initial={false} mode="wait">
+      <button
+        aria-label="Add Sound to Favorites"
+        className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)}
+        onClick={e => {
+          e.stopPropagation();
+          toggleFavorite(id);
+        }}
+      >
+        <motion.span
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          initial={{ opacity: 0 }}
+          key={isFavorite ? `${id}-is-favorite` : `${id}-not-favorite`}
+        >
+          {isFavorite ? <BiSolidHeart /> : <BiHeart />}
+        </motion.span>
+      </button>
+    </AnimatePresence>
   );
 }