Feat/좋아요 컴포넌트#6

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>
   );

src/shared/components/like/LikeBtn.tsx

@@ -0,0 +1,26 @@
+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  hover:[&_*]:fill-tertiary/50 [&_*]:duration-200"
+        aria-hidden
+      />
+    </button>
+  );
+}
+export default LikeBtn;