#48 heart 컴포넌트

components/Heart/Heart.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import HeartIcon from './HeartIcon';
+
+interface HeartProps {
+  initialCount: number;
+  onClick?: () => void;
+}
+
+/**
+ * Heart count component
+ * @param {number} initialCount - 초기 카운트 수
+ * @param {function} onClick - 클릭 시 동작 할 이벤트(옵션)
+ * @example <Heart initialCount={10} onClick={() => console.log('클릭')} />
+ */
+export default function Heart({ initialCount, onClick }: HeartProps) {
+  const [isClicked, setIsClicked] = useState(false);
+  const [count, setCount] = useState(initialCount);
+
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+      setIsClicked((prev) => !prev);
+      setCount((prevCount) => (isClicked ? prevCount - 1 : prevCount + 1));
+    }
+  };
+
+  const clickStyles = {
+    icon: isClicked ? 'var(--red-100)' : 'var(--gray-400)',
+    text: isClicked && 'text-red-100',
+  };
+
+  const Wrapper = onClick ? 'button' : 'div';
+
+  return (
+    <Wrapper
+      className={`flex items-center gap-1 ${onClick ? 'cursor-pointer' : ''}`}
+      onClick={onClick ? handleClick : undefined}
+    >
+      <HeartIcon fill={clickStyles.icon} />
+      <span className={`text-14 text-gray-400 mo:text-12 ${clickStyles.text}`}>
+        {count}
+      </span>
+    </Wrapper>
+  );
+}

components/Heart/HeartIcon.tsx

@@ -0,0 +1,19 @@
+/**
+ * Heart icon
+ * @param {string} fill - 색상
+ */
+export default function HeartIcon({ fill = '#8F95B2' }: { fill?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-[18px] w-[18px] mo:h-4 mo:w-4"
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <path
+        d="M8.99276 14.782C8.83219 14.782 8.67089 14.7531 8.50888 14.6954C8.34686 14.6377 8.20431 14.5473 8.08123 14.4243L7.00386 13.445C5.67404 12.2325 4.48678 11.0414 3.44207 9.87164C2.39736 8.70193 1.875 7.44881 1.875 6.11229C1.875 5.04787 2.23389 4.15677 2.95168 3.43899C3.66947 2.7212 4.56057 2.3623 5.62498 2.3623C6.22978 2.3623 6.82714 2.50173 7.41705 2.78058C8.00695 3.05943 8.53459 3.51232 8.99998 4.13924C9.46537 3.51232 9.99301 3.05943 10.5829 2.78058C11.1728 2.50173 11.7702 2.3623 12.375 2.3623C13.4394 2.3623 14.3305 2.7212 15.0483 3.43899C15.7661 4.15677 16.125 5.04787 16.125 6.11229C16.125 7.46324 15.5937 8.7303 14.5312 9.91347C13.4687 11.0966 12.2841 12.2777 10.9774 13.4565L9.91151 14.4243C9.78844 14.5473 9.64469 14.6377 9.48026 14.6954C9.31584 14.7531 9.15334 14.782 8.99276 14.782ZM8.46056 5.27864C8.0548 4.66037 7.62764 4.20724 7.17908 3.91927C6.73051 3.63128 6.21248 3.48729 5.62498 3.48729C4.87498 3.48729 4.24998 3.73729 3.74998 4.23729C3.24998 4.73729 2.99998 5.36229 2.99998 6.11229C2.99998 6.71421 3.19397 7.34354 3.58194 8.00026C3.96992 8.65699 4.45693 9.30986 5.04298 9.95889C5.62904 10.6079 6.2639 11.2421 6.94755 11.8613C7.6312 12.4805 8.26486 13.056 8.84852 13.5878C8.89179 13.6262 8.94228 13.6455 8.99998 13.6455C9.05768 13.6455 9.10817 13.6262 9.15144 13.5878C9.73511 13.056 10.3688 12.4805 11.0524 11.8613C11.7361 11.2421 12.3709 10.6079 12.957 9.95889C13.543 9.30986 14.03 8.65699 14.418 8.00026C14.806 7.34354 15 6.71421 15 6.11229C15 5.36229 14.75 4.73729 14.25 4.23729C13.75 3.73729 13.125 3.48729 12.375 3.48729C11.7875 3.48729 11.2695 3.63128 10.8209 3.91927C10.3723 4.20724 9.94516 4.66037 9.5394 5.27864C9.47594 5.37479 9.39613 5.44691 9.29998 5.495C9.20382 5.54307 9.10382 5.56711 8.99998 5.56711C8.89614 5.56711 8.79614 5.54307 8.69998 5.495C8.60383 5.44691 8.52402 5.37479 8.46056 5.27864Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}

pages/test/heart.tsx

@@ -0,0 +1,10 @@
+import Heart from '@/components/Heart/Heart';
+
+export default function HeartTest() {
+  return (
+    <>
+      <Heart initialCount={10} />
+      <Heart initialCount={10} onClick={() => console.log('클릭')} />
+    </>
+  );
+}