refactor: Heart 아이콘 컴포넌트로 onClick 코드 이동 #53

Kernel360 · Jan 8, 2024 · bfa7204 · bfa7204
1 parent 5b9a537
commit bfa7204
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/components/icons/Heart.tsx b/src/components/icons/Heart.tsx
@@ -1,19 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+
 import { Colors, colors } from '@styles/colorPalette';
 
 interface HeartProps {
   width: number
   height:number
   color?: Colors
-  fillColor?: Colors
-  onClick?: () => void
+  changeColor?: Colors
 }
 
 function Heart({
-  width, height, color = 'gray400', onClick, fillColor = 'white',
+  width, height, color = 'gray400', changeColor = 'pink',
 }: HeartProps) {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleHeartClick = () => {
+    setIsClicked((prev) => { return !prev; });
+  };
+
   return (
-    <svg width={width} height={height} viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
-      <path d="M17.612 2.41452C17.1722 1.96607 16.65 1.61034 16.0752 1.36763C15.5005 1.12492 14.8844 1 14.2623 1C13.6401 1 13.0241 1.12492 12.4493 1.36763C11.8746 1.61034 11.3524 1.96607 10.9126 2.41452L9.99977 3.34476L9.08699 2.41452C8.19858 1.50912 6.99364 1.00047 5.73725 1.00047C4.48085 1.00047 3.27591 1.50912 2.38751 2.41452C1.4991 3.31992 1 4.5479 1 5.82833C1 7.10875 1.4991 8.33674 2.38751 9.24214L3.30029 10.1724L9.99977 17L16.6993 10.1724L17.612 9.24214C18.0521 8.79391 18.4011 8.26171 18.6393 7.67596C18.8774 7.09021 19 6.46237 19 5.82833C19 5.19428 18.8774 4.56645 18.6393 3.9807C18.4011 3.39494 18.0521 2.86275 17.612 2.41452Z" stroke={colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill={colors[fillColor]} />
+    <svg width={width} height={height} viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={handleHeartClick}>
+      <path d="M17.612 2.41452C17.1722 1.96607 16.65 1.61034 16.0752 1.36763C15.5005 1.12492 14.8844 1 14.2623 1C13.6401 1 13.0241 1.12492 12.4493 1.36763C11.8746 1.61034 11.3524 1.96607 10.9126 2.41452L9.99977 3.34476L9.08699 2.41452C8.19858 1.50912 6.99364 1.00047 5.73725 1.00047C4.48085 1.00047 3.27591 1.50912 2.38751 2.41452C1.4991 3.31992 1 4.5479 1 5.82833C1 7.10875 1.4991 8.33674 2.38751 9.24214L3.30029 10.1724L9.99977 17L16.6993 10.1724L17.612 9.24214C18.0521 8.79391 18.4011 8.26171 18.6393 7.67596C18.8774 7.09021 19 6.46237 19 5.82833C19 5.19428 18.8774 4.56645 18.6393 3.9807C18.4011 3.39494 18.0521 2.86275 17.612 2.41452Z" stroke={isClicked ? colors[changeColor] : colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill={isClicked ? colors[changeColor] : colors.white} />
     </svg>
   );
 }