MBTips · junjeeong · Apr 23, 2025 · Apr 10, 2025 · Apr 14, 2025 · Apr 14, 2025
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/public/icon/Instagram.svg b/public/icon/Instagram.svg
diff --git a/public/icon/close.svg b/public/icon/close.svg
diff --git a/public/icon/kakaotalk.svg b/public/icon/kakaotalk.svg
diff --git a/public/icon/twitter.svg b/public/icon/twitter.svg
diff --git a/src/components/button/KakaoShareButton.tsx b/src/components/button/KakaoShareButton.tsx
@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+
+interface KakoShareButtonProps {
+  title: string;
+  description: string;
+  imageUrl: string;
+}
+
+const KakaoShareButton = ({
+  title,
+  description,
+  imageUrl
+}: KakoShareButtonProps) => {
+  useEffect(() => {
+    // 카카오톡 SDK 초기화
+    if (window.Kakao && !window.Kakao.isInitialized()) {
+      window.Kakao.init("a4816c8b85267871796431d92ed23451");
+    }
+  }, []);
+
+  const handleShare = () => {
+    if (window.Kakao) {
+      // 카카오톡 공유 기능 호출
+      window.Kakao.Share.sendDefault({
+        objectType: "feed",
+        content: {
+          title: title,
+          description: description,
+          imageUrl: imageUrl,
+          link: {
+            mobileWebUrl: window.location.href,
+            webUrl: window.location.href
+          }
+        }
+      });
+    }
+  };
+  return (
+    <div>
+      <button onClick={handleShare}>
+        <img
+          src="/icon/kakaotalk.svg"
+          alt="카카오통 공유하기 버튼"
+          width={72}
+          height={72}
+        />
+      </button>
+    </div>
+  );
+};
+
+export default KakaoShareButton;
diff --git a/src/components/button/TwitterShareButton.tsx b/src/components/button/TwitterShareButton.tsx
@@ -0,0 +1,16 @@
+const TwitterShareButton = ({ title }: { title: string }) => {
+  const currentUrl = window.location.href;
+
+  return (
+    <a
+      href={`https://twitter.com/intent/tweet?text=${title}&url=${currentUrl}`}
+      className="flex flex-col items-center gap-1"
+    >
+      {/* 디자인 시안 나오면 고칠 예정 -> 4.17 정준영 */}
+      <img src="/icon/twitter.svg" alt="트위터 아이콘" width={76} height={76} />
+      <p className="text-md text-gray-800">트위터</p>
+    </a>
+  );
+};
+
+export default TwitterShareButton;
diff --git a/src/components/button/UrlCopyBar.tsx b/src/components/button/UrlCopyBar.tsx
@@ -0,0 +1,14 @@
+import UrlCopyButton from "./UrlCopyButton";
+
+const UrlCopyBar = () => {
+  const currentUrl = window.location.href;
+
+  return (
+    <div className="flex h-[54px] w-full max-w-[420px] items-center justify-between rounded-lg border border-gray-100 px-4 py-[15px]">
+      <span className="text-lg ">{currentUrl}</span>
+      <UrlCopyButton currentUrl={currentUrl} />
+    </div>
+  );
+};
+
+export default UrlCopyBar;
diff --git a/src/components/button/UrlCopyButton.tsx b/src/components/button/UrlCopyButton.tsx
@@ -0,0 +1,23 @@
+const UrlCopyButton = ({currentUrl} : {currentUrl : string}) => {
+    const handleCopy = () => {
+      navigator.clipboard
+        .writeText(currentUrl)
+        .then(() => {
+          alert("URL이 복사되었습니다!"); // toast로 바꾸어야 함 -> 4.10 정준영
+        })
+        .catch((err) => {
+          console.error("URL 복사 실패:", err); 
+        });
+    };
+
+    return (
+      <button
+        onClick={handleCopy}
+        className="bg-primary-normal h-8 text-white flex items-center justify-center rounded-[20px] px-4 py-2"
+      >
+        복사
+      </button>
+    );
+  };
+
+  export default UrlCopyButton;
diff --git a/src/components/header/SubHeader.tsx b/src/components/header/SubHeader.tsx
@@ -2,6 +2,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useState } from "react";
 import useMbtiTestState from "@/store/useMbtiTestState";
 import ActionConfirmModal from "@/components/modal/ActionConfirmModal";
+import ShareModal from "@/components/modal/ShareModal";
 
 type SubHeaderProps = {
   title: string;
@@ -18,7 +19,7 @@ const SubHeader = ({
   const { pathname, state } = useLocation();
   const { currentPage, setPreviousStep } = useMbtiTestState();
   const [isLeaveChatModalOpen, setIsLeaveChatModalOpen] = useState(false);
-
+  const [shareModalIsOpen, setShareModalIsOpen] = useState(false);
   const isProgressPage = pathname === "/mbti-test-progress";
   const isChatPage = pathname === "/chat";
   const isFirstQuestionPage = currentPage === 1;
@@ -48,6 +49,10 @@ const SubHeader = ({
     navigate("/");
   };
 
+  const openShareModal = () => {
+    setShareModalIsOpen(true);
+  };
+
   return (
     <>
       <header className="relative flex h-[56px] w-full flex-row items-center justify-center border-b border-gray-100 bg-white">
@@ -67,13 +72,18 @@ const SubHeader = ({
         </h1>
 
         {showShareIcon && (
-          <img
-            src="/public/icon/share.svg"
-            alt="Share"
-            className="absolute right-[20px] cursor-pointer"
-            width={16}
-            height={16}
-          />
+          <button onClick={openShareModal}>
+            <img
+              src="/public/icon/share.svg"
+              alt="Share"
+              className="absolute right-[20px] cursor-pointer"
+              width={16}
+              height={16}
+            />
+            {shareModalIsOpen && (
+              <ShareModal closeModal={() => setShareModalIsOpen(false)} />
+            )}
+          </button>
         )}
       </header>
 

diff --git a/src/components/modal/ShareModal.tsx b/src/components/modal/ShareModal.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import UrlCopyBar from "@/components/button/UrlCopyBar";
+import KakaoShareButton from "../button/KakaoShareButton";
+import TwitterShareButton from "@/components/button/TwitterShareButton";
+
+interface ShareModalProps {
+  closeModal: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ShareModal = ({ closeModal }: ShareModalProps) => {
+  const [metaData, setMetaData] = useState({
+    title: "",
+    description: "",
+    imageUrl: ""
+  });
+
+  useEffect(() => {
+    // 메타 데이터를 가져오는 로직
+    const title =
+      document
+        .querySelector("meta[property='og:title']")
+        ?.getAttribute("content") || document.title;
+    const description =
+      document
+        .querySelector("meta[property='og:description']")
+        ?.getAttribute("content") || "";
+    const imageUrl =
+      document
+        .querySelector("meta[property='og:image']")
+        ?.getAttribute("content") || "";
+
+    setMetaData({ title, description, imageUrl });
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <main className="relative z-51 flex h-[310px] flex-col justify-center rounded-[20px] bg-white">
+        <h2 className="w-full border-b-gray-100 text-center text-xl font-bold ">
+          게시글 공유
+        </h2>
+        <div className="mt-10 flex justify-center gap-10">
+          <KakaoShareButton
+            title={metaData.title}
+            description={metaData.description}
+            imageUrl={metaData.imageUrl}
+          />
+          <TwitterShareButton title={metaData.title} />
+        </div>
+        <button onClick={() => closeModal((isOpen) => !isOpen)}>
+          <img
+            src="/icon/close.svg"
+            alt="닫기 버튼"
+            width={24}
+            height={24}
+            className="absolute top-[14px] right-[14px]"
+          />
+        </button>
+        <div className="mt-10 flex w-full justify-center">
+          <UrlCopyBar />
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default ShareModal;
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,4 @@
+// TypeScript 사용 시에는 TypeScript 가 window객체에 존재하는 Kakao객체를 인식할 수 있도록 src내에 global.d.ts를 설정해줘야 오류가 발생하지 않는다.
+interface Window {
+    Kakao: any;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import App from "./App";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

diff --git a/src/types/virtualFreind.ts b/src/types/virtualFreind.ts
@@ -0,0 +1,9 @@
+export interface VirtualFriend {
+  virtualFriendId: number;
+  conversationId: number;
+  mbti: string;
+  virtualFriendName: string;
+  virtualFriendAge: number;
+  virtualFriendSex: string;
+  virtualFriendRelationship: string;
+}