[style]keep컴포넌트

Author: mtm-git1018

src/app/design-system/page.tsx

@@ -11,6 +11,7 @@ import ChatInput from '@/shared/components/InputBox/ChatInput';
 import SelectBox from '@/shared/components/InputBox/SelectBox';
 import LikeBtn from '@/shared/components/like/LikeBtn';
 import Share from '@/shared/components/share/Share';
+import Keep from '@/shared/components/keep/Keep';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -148,6 +149,10 @@ function Page() {
           <Share />
           <Share variants="community" />
         </div>
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium border-b pb-1">keep</h3>
+          <Keep />
+        </div>
       </div>
     </div>
   );

src/shared/assets/icons/keep_36.svg

@@ -0,0 +1,23 @@
+import KeepIcon from '@/shared/assets/icons/keep_36.svg';
+import KeepIconActive from '@/shared/assets/icons/keep_active_36.svg';
+import { useState } from 'react';
+function Keep() {
+  const [isClick, setIsClick] = useState(false);
+  const handleClick = () => {
+    setIsClick(!isClick);
+  };
+
+  return (
+    <button type="button" onClick={handleClick} aria-label="킵 버튼">
+      {isClick ? (
+        <KeepIcon fill="transparent" className="[&_*]:duration-100 hover:[&_*]:fill-secondary/50" />
+      ) : (
+        <KeepIconActive
+          fill="transparent"
+          className="[&_*]:duration-100 hover:[&_*]:fill-secondary/50 "
+        />
+      )}
+    </button>
+  );
+}
+export default Keep;