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

[style] 공유하기 컴포넌트#8

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/assets/icons/like_28.svg

@@ -16,7 +16,7 @@ function LikeBtn() {
       onClick={handleClick}
     >
       <LikeIcon
-        fill={`${isClick ? '#81689d' : null}`}
+        fill={`${isClick ? '#81689d' : 'transparent'}`}
         className="duration-100  hover:[&_*]:fill-tertiary/50 [&_*]:duration-200"
         aria-hidden
       />

src/shared/assets/icons/menu_32.svg

@@ -0,0 +1,32 @@
+import ShareBtn from '@/shared/assets/icons/share_28.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
+        fill="transparent"
+        className="duration-100 object-contain  hover:[&_*]:fill-white/50 [&_*]:duration-200"
+        aria-hidden
+      />
+    </button>
+  );
+}
+export default Share;