From b77219c814c195583304344a9c4e6014aeeb5ebe Mon Sep 17 00:00:00 2001
From: tare <59001439+junghwa1996@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:58:55 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20HeartIcon=20=EC=BB=B4=ED=8F=AC?=
=?UTF-8?q?=EB=84=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- fill props를 통해 컬러를 변경할 수 있게 설정
---
components/Heart/HeartIcon.tsx | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
create mode 100644 components/Heart/HeartIcon.tsx
diff --git a/components/Heart/HeartIcon.tsx b/components/Heart/HeartIcon.tsx
new file mode 100644
index 0000000..a1d461f
--- /dev/null
+++ b/components/Heart/HeartIcon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Heart icon
+ * @param {string} fill - 색상
+ */
+export default function HeartIcon({ fill = '#8F95B2' }: { fill?: string }) {
+ return (
+
+ );
+}
From fafa373501ff0164f8de6cd3830c51c2522faeac Mon Sep 17 00:00:00 2001
From: tare <59001439+junghwa1996@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:59:38 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20Heart=20=EC=B9=B4=EC=9A=B4?=
=?UTF-8?q?=ED=8C=85=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 호출 시 onClick이 있으면 컬러 변경
- 없을 경우 클릭 없이 정적 요소로 사용
---
components/Heart/Heart.tsx | 43 ++++++++++++++++++++++++++++++++++++++
1 file changed, 43 insertions(+)
create mode 100644 components/Heart/Heart.tsx
diff --git a/components/Heart/Heart.tsx b/components/Heart/Heart.tsx
new file mode 100644
index 0000000..ec19f8e
--- /dev/null
+++ b/components/Heart/Heart.tsx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import HeartIcon from './HeartIcon';
+
+interface HeartProps {
+ initialCount: number;
+ onClick?: () => void;
+}
+
+/**
+ * Heart count component
+ * @param {number} initialCount - 초기 카운트 수
+ * @param {function} onClick - 클릭 시 동작 할 이벤트(옵션)
+ * @example 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',
+ };
+ return (
+
+
+
+ {count}
+
+
+ );
+}
From fbdc635033733d0744a596133818a855da205e10 Mon Sep 17 00:00:00 2001
From: tare <59001439+junghwa1996@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:59:49 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A7=AA=20=ED=85=8C=EC=8A=A4=ED=8A=B8?=
=?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pages/test/heart.tsx | 10 ++++++++++
1 file changed, 10 insertions(+)
create mode 100644 pages/test/heart.tsx
diff --git a/pages/test/heart.tsx b/pages/test/heart.tsx
new file mode 100644
index 0000000..0ea4e38
--- /dev/null
+++ b/pages/test/heart.tsx
@@ -0,0 +1,10 @@
+import Heart from '@/components/Heart/Heart';
+
+export default function HeartTest() {
+ return (
+ <>
+
+ console.log('클릭')} />
+
+ );
+}
From 7e4769e66da245d2aaa56c38a38d5fd024259867 Mon Sep 17 00:00:00 2001
From: tare <59001439+junghwa1996@users.noreply.github.com>
Date: Tue, 17 Dec 2024 22:38:15 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=94=A8=20div=EC=99=80=20button?=
=?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=A1=B0=EA=B1=B4=EC=8B=9D=20=EC=B6=94?=
=?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- onClick이 있을때는 button 태그와 cursor-pointer
- onClick이 없을때는 div태그
---
components/Heart/Heart.tsx | 11 +++++++----
1 file changed, 7 insertions(+), 4 deletions(-)
diff --git a/components/Heart/Heart.tsx b/components/Heart/Heart.tsx
index ec19f8e..14cd890 100644
--- a/components/Heart/Heart.tsx
+++ b/components/Heart/Heart.tsx
@@ -29,15 +29,18 @@ export default function Heart({ initialCount, onClick }: HeartProps) {
icon: isClicked ? 'var(--red-100)' : 'var(--gray-400)',
text: isClicked && 'text-red-100',
};
+
+ const Wrapper = onClick ? 'button' : 'div';
+
return (
-
{count}
-
+
);
}