From 7c2019aa594f4f72500051ca26884a782c625f95 Mon Sep 17 00:00:00 2001
From: mtm1018 <mtm1018@naver.com>
Date: Tue, 23 Sep 2025 17:07:02 +0900
Subject: [PATCH 1/4] =?UTF-8?q?[style]=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/design-system/page.tsx         |  7 ++++++-
 src/shared/components/like/LikeBtn.tsx | 22 ++++++++++++++++++++++
 src/shared/components/like/like.tsx    |  4 ----
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/components/like/LikeBtn.tsx
 delete mode 100644 src/shared/components/like/like.tsx

diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx
index 4cb63ff..3efc235 100644
--- a/src/app/design-system/page.tsx
+++ b/src/app/design-system/page.tsx
@@ -9,6 +9,7 @@ import ModalLayout from '@/shared/components/modalPop/ModalLayout';
 import ConfirmPop from '@/shared/components/modalPop/ConfirmPop';
 import ChatInput from '@/shared/components/InputBox/ChatInput';
 import SelectBox from '@/shared/components/InputBox/SelectBox';
+import LikeBtn from '@/shared/components/like/LikeBtn';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -136,7 +137,11 @@ function Page() {
       </div>
 
       <div className="space-y-3">
-        <h2 className="text-2xl font-semibold pb-1">Button</h2>
+        <h2 className="text-2xl font-semibold pb-1">Icons</h2>
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium border-b pb-1">like</h3>
+          <LikeBtn />
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/like/LikeBtn.tsx b/src/shared/components/like/LikeBtn.tsx
new file mode 100644
index 0000000..141657f
--- /dev/null
+++ b/src/shared/components/like/LikeBtn.tsx
@@ -0,0 +1,22 @@
+import LikeIcon from '@/shared/assets/icons/like_28.svg';
+import { useState } from 'react';
+
+function LikeBtn() {
+  const [isClick, setIsClick] = useState(false);
+
+  const handleClick = () => {
+    setIsClick(!isClick);
+  };
+  return (
+    <button
+      type="button"
+      className="w-13.75 h-13.75 flex-center border-1 border-white rounded-full"
+      aria-label="좋아요 버튼"
+      aria-pressed={isClick}
+      onClick={handleClick}
+    >
+      <LikeIcon fill={isClick ? '#81689d' : null} className="duration-100" aria-hidden />
+    </button>
+  );
+}
+export default LikeBtn;
diff --git a/src/shared/components/like/like.tsx b/src/shared/components/like/like.tsx
deleted file mode 100644
index 6634413..0000000
--- a/src/shared/components/like/like.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-function like() {
-  return <div>like</div>;
-}
-export default like;

From 60b5fcc117075f2c8a216aaa4f9e639295f577a5 Mon Sep 17 00:00:00 2001
From: mtm1018 <mtm1018@naver.com>
Date: Tue, 23 Sep 2025 17:20:45 +0900
Subject: [PATCH 2/4] =?UTF-8?q?[style]=EC=A2=8B=EC=95=84=EC=9A=94=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/components/like/LikeBtn.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/like/LikeBtn.tsx b/src/shared/components/like/LikeBtn.tsx
index 141657f..8e11b20 100644
--- a/src/shared/components/like/LikeBtn.tsx
+++ b/src/shared/components/like/LikeBtn.tsx
@@ -15,7 +15,11 @@ function LikeBtn() {
       aria-pressed={isClick}
       onClick={handleClick}
     >
-      <LikeIcon fill={isClick ? '#81689d' : null} className="duration-100" aria-hidden />
+      <LikeIcon
+        fill={`${isClick ? '#81689d' : null}`}
+        className="duration-100  hover:[&_*]:fill-tertiary/50 [&_*]:duration-200"
+        aria-hidden
+      />
     </button>
   );
 }

From 241e9df15608b22590f0f6c8cfe3efdcc52e7744 Mon Sep 17 00:00:00 2001
From: mtm1018 <mtm1018@naver.com>
Date: Tue, 23 Sep 2025 17:07:02 +0900
Subject: [PATCH 3/4] =?UTF-8?q?[style]=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/design-system/page.tsx         |  7 ++++++-
 src/shared/components/like/LikeBtn.tsx | 22 ++++++++++++++++++++++
 src/shared/components/like/like.tsx    |  4 ----
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/components/like/LikeBtn.tsx
 delete mode 100644 src/shared/components/like/like.tsx

diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx
index 4cb63ff..3efc235 100644
--- a/src/app/design-system/page.tsx
+++ b/src/app/design-system/page.tsx
@@ -9,6 +9,7 @@ import ModalLayout from '@/shared/components/modalPop/ModalLayout';
 import ConfirmPop from '@/shared/components/modalPop/ConfirmPop';
 import ChatInput from '@/shared/components/InputBox/ChatInput';
 import SelectBox from '@/shared/components/InputBox/SelectBox';
+import LikeBtn from '@/shared/components/like/LikeBtn';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -136,7 +137,11 @@ function Page() {
       </div>
 
       <div className="space-y-3">
-        <h2 className="text-2xl font-semibold pb-1">Button</h2>
+        <h2 className="text-2xl font-semibold pb-1">Icons</h2>
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium border-b pb-1">like</h3>
+          <LikeBtn />
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/like/LikeBtn.tsx b/src/shared/components/like/LikeBtn.tsx
new file mode 100644
index 0000000..141657f
--- /dev/null
+++ b/src/shared/components/like/LikeBtn.tsx
@@ -0,0 +1,22 @@
+import LikeIcon from '@/shared/assets/icons/like_28.svg';
+import { useState } from 'react';
+
+function LikeBtn() {
+  const [isClick, setIsClick] = useState(false);
+
+  const handleClick = () => {
+    setIsClick(!isClick);
+  };
+  return (
+    <button
+      type="button"
+      className="w-13.75 h-13.75 flex-center border-1 border-white rounded-full"
+      aria-label="좋아요 버튼"
+      aria-pressed={isClick}
+      onClick={handleClick}
+    >
+      <LikeIcon fill={isClick ? '#81689d' : null} className="duration-100" aria-hidden />
+    </button>
+  );
+}
+export default LikeBtn;
diff --git a/src/shared/components/like/like.tsx b/src/shared/components/like/like.tsx
deleted file mode 100644
index 6634413..0000000
--- a/src/shared/components/like/like.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-function like() {
-  return <div>like</div>;
-}
-export default like;

From 49a187b2dd6bf7f2491a87fbad367d6a69838b00 Mon Sep 17 00:00:00 2001
From: mtm1018 <mtm1018@naver.com>
Date: Tue, 23 Sep 2025 17:20:45 +0900
Subject: [PATCH 4/4] =?UTF-8?q?[style]=EC=A2=8B=EC=95=84=EC=9A=94=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/components/like/LikeBtn.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/like/LikeBtn.tsx b/src/shared/components/like/LikeBtn.tsx
index 141657f..8e11b20 100644
--- a/src/shared/components/like/LikeBtn.tsx
+++ b/src/shared/components/like/LikeBtn.tsx
@@ -15,7 +15,11 @@ function LikeBtn() {
       aria-pressed={isClick}
       onClick={handleClick}
     >
-      <LikeIcon fill={isClick ? '#81689d' : null} className="duration-100" aria-hidden />
+      <LikeIcon
+        fill={`${isClick ? '#81689d' : null}`}
+        className="duration-100  hover:[&_*]:fill-tertiary/50 [&_*]:duration-200"
+        aria-hidden
+      />
     </button>
   );
 }