[stype] 공유하기 컴포넌트

Author: mtm-git1018

src/app/design-system/page.tsx

@@ -10,6 +10,7 @@ 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';
+import Share from '@/shared/components/share/Share';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -142,6 +143,11 @@ function Page() {
           <h3 className="text-lg font-medium border-b pb-1">like</h3>
           <LikeBtn />
         </div>
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium border-b pb-1">Share</h3>
+          <Share />
+          <Share variants="community" />
+        </div>
       </div>
     </div>
   );

src/shared/components/share/Share.tsx

@@ -0,0 +1,28 @@
+import ShareBtn from '@/shared/assets/icons/share_24.svg';
+
+interface Props {
+  onClick?: () => void;
+  variants?: 'default' | 'community';
+  title?: string;
+  content?: string;
+}
+
+function Share({ onClick, variants = 'default', title, content }: Props) {
+  // title과 content는 추후 API가 들어오면 사용예정 API가 들어오면 타입 옵셔널 체크 해제헤 주세요
+
+  return (
+    <button
+      type="button"
+      className={
+        variants == 'community'
+          ? 'w-13.75 h-13.75 flex-center border-1 border-white rounded-full'
+          : ''
+      }
+      aria-label="공유하기"
+      onClick={onClick}
+    >
+      <ShareBtn className="duration-100 hover:[&_*]:fill-white/50 [&_*]:duration-200" aria-hidden />
+    </button>
+  );
+}
+export default Share;