Merge pull request #50 from prgrms-web-devcourse-final-project/feat/share#8

Feat/공유하기 컴포넌트#8

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,35 @@
+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="[filter:drop-shadow(0_0_8px_rgba(255,255,255,0.8))] [&_*]:duration-100 hover:[&_*]:fill-secondary/60"
+          aria-hidden
+        />
+      ) : (
+        <KeepIconActive
+          fill="transparent"
+          className="   
+          [filter:drop-shadow(0_0_8px_rgba(255,255,255,0.8))]
+         [&_*]:duration-200
+         &_g>g>path[stroke]]:stroke-black
+          [&_g>path[fill='black']]:black
+          hover:[&_g>g>path]:fill-secondary/60
+          "
+          aria-hidden
+        />
+      )}
+    </button>
+  );
+}
+export default Keep;