Merge pull request #212 from MBTips/feature/공유하기-모달-구현

junjeeong · web-flow · commit fd76ef2027e1 · 2025-04-23T19:37:53.000+09:00
Feature/공유하기 모달 구현
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/close.svg b/public/icon/close.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 19L17.7279 6.27208" stroke="#585D65" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M18 19L5.27208 6.27208" stroke="#585D65" stroke-width="1.5" stroke-linecap="round"/>
+</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
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"/></svg>
diff --git a/src/components/button/KakaoShareButton.tsx b/src/components/button/KakaoShareButton.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+
+interface KakoShareButtonProps {
+  title: string;
+  description: string;
+  imageUrl: string;
+}
+
+const KakaoShareButton = ({
+  title,
+  description,
+  imageUrl
+}: KakoShareButtonProps) => {
+  const kakaoJavascriptKey = import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY;
+
+  useEffect(() => {
+    // 카카오톡 SDK 초기화
+    if (window.Kakao && !window.Kakao.isInitialized()) {
+      window.Kakao.init(kakaoJavascriptKey);
+    }
+  }, []);
+
+  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/ShareButton.tsx b/src/components/button/ShareButton.tsx
@@ -1,9 +1,19 @@
+import { useState } from "react";
+import ShareModal from "@/components/modal/ShareModal";
+
 const ShareButton = () => {
-    return (
-        <button className="flex justify-center items-center bg-primary-pale border border-primary-light rounded-lg w-full h-[60px] font-bold text-primary-normal">
-            공유하기
+  const [shareModalIsOpen, setShareModalIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={()=>setShareModalIsOpen(true)} className="flex h-[60px] w-full items-center justify-center rounded-lg border border-primary-light bg-primary-pale font-bold text-primary-normal">
+        공유하기
       </button>
-  )
-}
+      {shareModalIsOpen && (
+        <ShareModal closeModal={() => setShareModalIsOpen(false)} />
+      )}
+    </>
+  );
+};
 
-export default ShareButton;
+export default ShareButton;
diff --git a/src/components/button/TwitterShareButton.tsx b/src/components/button/TwitterShareButton.tsx
@@ -0,0 +1,15 @@
+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"
+    >
+      <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 "@/components/button/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/Header.tsx b/src/components/header/Header.tsx
@@ -14,7 +14,7 @@ type HeaderProps = {
 const Header = ({
   title = "",
   showPreviousIcon = true,
-  showShareIcon = false,
+  showShareIcon = true,
   children
 }: HeaderProps) => {
   const { pathname } = useLocation();
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;
@@ -12,13 +13,13 @@ type SubHeaderProps = {
 const SubHeader = ({
   title = "",
   showPreviousIcon = true,
-  showShareIcon = false
+  showShareIcon = true
 }: SubHeaderProps) => {
   const navigate = useNavigate();
   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;
@@ -50,30 +51,34 @@ const SubHeader = ({
 
   return (
     <>
-      <header className="relative flex h-[56px] w-full flex-row items-center justify-center border-b border-gray-100 bg-white">
+      <header className="relative flex h-[56px] w-full items-center justify-between border-b border-gray-100 bg-white">
         {showPreviousIcon && (
           <img
             src="/public/icon/arrow_left.svg"
             alt="Go To Back"
-            className="absolute left-[18.77px] cursor-pointer"
+            className="absolute left-4 cursor-pointer"
             width={9}
             height={16}
             onClick={handleGoBack}
           />
         )}
 
-        <h1 className="absolute left-1/2 -translate-x-1/2 transform font-bold text-gray-900">
+        <h1 className="absolute left-1/2 -translate-x-1/2 font-bold text-gray-900">
           {title}
         </h1>
 
         {showShareIcon && (
-          <img
-            src="/public/icon/share.svg"
-            alt="Share"
-            className="absolute right-[20px] cursor-pointer"
-            width={16}
-            height={16}
-          />
+          <button
+            onClick={() => setShareModalIsOpen(true)}
+            className="absolute right-4"
+          >
+            <img
+              src="/public/icon/share.svg"
+              alt="Share"
+              width={16}
+              height={16}
+            />
+          </button>
         )}
       </header>
 
@@ -87,6 +92,14 @@ const SubHeader = ({
           onConfirm={handleConfirm}
         />
       )}
+
+      {shareModalIsOpen && (
+        <ShareModal
+          closeModal={() => {
+            setShareModalIsOpen(false);
+          }}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/modal/ShareModal.tsx b/src/components/modal/ShareModal.tsx
@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import UrlCopyBar from "@/components/button/UrlCopyBar";
+import TwitterShareButton from "@/components/button/TwitterShareButton";
+import KakaoShareButton from "@/components/button/KakaoShareButton";
+
+interface ShareModalProps {
+  closeModal: () => void;
+}
+
+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}
+          className="absolute top-[14px] right-[14px] h-6 w-6"
+        >
+          <img src="/icon/close.svg" alt="닫기 버튼" width={24} height={24} />
+        </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/index.css b/src/index.css
@@ -63,10 +63,6 @@ button {
   cursor: pointer;
 }
 
-button:hover {
-  opacity: 80%;
-}
-
 @keyframes pulse-custom {
   0%,
   100% {
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,5 @@
-import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App";
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+createRoot(document.getElementById("root")!).render(<App />);
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;
+}
