Merge pull request #28 from ASAP-Lettering/feat/#26

[ FEAT ] 카카오톡 공유하기 버튼 Component
ASAP-Lettering · Oct 3, 2024 · 9e9d081 · 9e9d081
2 parents f4ef425 + 0a508d2
commit 9e9d081
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 12 deletions.
diff --git a/src/api/client.tsx b/src/api/client.tsx
@@ -1,8 +1,8 @@
 import axios from "axios";
 
-const BASE_URL = process.env.NEXT_BASE_URL;
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 const client = axios.create({
-  baseURL: "https://api.lettering.world",
+  baseURL: BASE_URL,
   headers: {
     "Content-Type": "application/json",
     "Access-Control-Allow-Origin": "*",

diff --git a/src/app/guide/page.tsx b/src/app/guide/page.tsx
@@ -6,6 +6,7 @@ import Check from "@/components/common/Check";
 import ConfirmModal from "@/components/common/ConfirmModal";
 import GuideText from "@/components/common/GuideText";
 import Input from "@/components/common/Input";
+import KakaoShareButton from "@/components/common/KakaoShareButton";
 import NavigatorBar from "@/components/common/NavigatorBar";
 import Tag from "@/components/common/Tag";
 import Toast from "@/components/common/Toast";
@@ -280,6 +281,8 @@ const GuidePage = () => {
           )}
         </Mobile>
       </Background> */}
+      <h3>카카오톡 공유하기</h3>
+      <KakaoShareButton senderName="승효" letterId="aa" />
     </Container>
   );
 };

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,6 +8,10 @@ export default function RootLayout({
   return (
     <html>
       <head>
+        <script
+          defer
+          src="https://developers.kakao.com/sdk/js/kakao.min.js"
+        ></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </head>
       <body>

diff --git a/src/app/login/kakao/page.tsx b/src/app/login/kakao/page.tsx
@@ -15,12 +15,14 @@ const Auth = () => {
   const router = useRouter();
   const REST_API_KEY = process.env.NEXT_PUBLIC_REST_API_KEY;
   const [absoluteUrl, setAbsoluteUrl] = useState("");
-  const storeUrl = getLetterUrl();
+  const [storeUrl, setstoreUrl] = useState("");
 
   useEffect(() => {
     if (typeof window !== "undefined") {
       const url = `${window.location.protocol}//${window.location.host}/login/kakao`;
+      const letterId = localStorage.getItem("letter_url");
       setAbsoluteUrl(url);
+      if (letterId) setstoreUrl(letterId);
     }
   }, []);
 
@@ -35,9 +37,6 @@ const Auth = () => {
 
       if (!AUTHORIZATION_CODE) {
         console.error("Authorization Code is missing");
-        if (storeUrl) {
-          clearLetterUrl();
-        }
         return;
       }
 
@@ -57,7 +56,7 @@ const Auth = () => {
               console.log("accessToken", res.data.accessToken);
               setTokens(res.data.accessToken, res.data.refreshToken);
               if (storeUrl) {
-                router.push(`/verify?url=${storeUrl}`);
+                router.push(`/verify/letter?url=${storeUrl}`);
                 clearLetterUrl();
               } else {
                 router.push("/planet");
@@ -78,6 +77,7 @@ const Auth = () => {
         }
       } catch (error) {
         console.error(error);
+        clearLetterUrl();
         return;
       }
     };

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { getAllSpaceName, getNewTokens } from "@/api/login/user";
 import Button from "@/components/common/Button";
+import KakaoShareButton from "@/components/common/KakaoShareButton";
 import Loader from "@/components/common/Loader";
 import { clearTokens, getAccessToken } from "@/utils/storage";
 import { useRouter } from "next/navigation";
@@ -53,11 +54,14 @@ export default function Home() {
 
   return (
     <Container>
-      <Button
-        buttonType="primary"
-        text="로그아웃하기"
-        onClick={handleLogout}
-      ></Button>
+      <ButtonContainer>
+        <Button
+          buttonType="primary"
+          text="로그아웃하기"
+          onClick={handleLogout}
+        ></Button>
+        <KakaoShareButton senderName="승효" letterId="aa" />
+      </ButtonContainer>
     </Container>
   );
 }
@@ -79,3 +83,10 @@ const LoaderContainer = styled.div`
   align-items: center;
   justify-content: center;
 `;
+
+const ButtonContainer = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+`;
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -6,6 +6,12 @@ import { theme } from "@/styles/theme";
 import { RecoilRoot } from "recoil";
 import GlobalStyles from "@/styles/GlobalStyles";
 
+declare global {
+  interface Window {
+    Kakao: any;
+  }
+}
+
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <StyledJsxRegistry>

diff --git a/src/app/verify/letter/page.tsx b/src/app/verify/letter/page.tsx
@@ -5,6 +5,7 @@ import Loader, { LoaderContainer } from "@/components/common/Loader";
 import Letter from "@/components/letter/Letter";
 import { LETTER_DATA } from "@/constants/letter";
 import { LetterType } from "@/types/letter";
+import { getAccessToken } from "@/utils/storage";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import styled from "styled-components";
@@ -14,6 +15,7 @@ const VerifyLetter = () => {
   const searchParams = useSearchParams();
   const url = searchParams.get("url");
   const [letterData, setLetterData] = useState<LetterType>();
+  const accessToken = getAccessToken();
 
   const handleButtonClick = () => {
     router.push("/planet");
@@ -26,6 +28,10 @@ const VerifyLetter = () => {
         setLetterData(LETTER_DATA[i]);
       }
     }
+    if (!accessToken) {
+      router.push(`/login?url=${url}`);
+    }
+    //검증 확인 api
   }, []);
 
   return letterData ? (

diff --git a/src/components/common/KakaoShareButton.tsx b/src/components/common/KakaoShareButton.tsx
@@ -0,0 +1,82 @@
+// components/KakaoShareButton.tsx
+import { useEffect, useState } from "react";
+import Button from "./Button";
+
+interface KakaoShareButtonProps {
+  senderName: string;
+  letterId: string;
+}
+
+const KakaoShareButton: React.FC<KakaoShareButtonProps> = ({
+  senderName,
+  letterId,
+}) => {
+  const [isKakaoLoaded, setIsKakaoLoaded] = useState(false);
+  const JS_KEY = process.env.NEXT_PUBLIC_JAVASCRIPT_KEY;
+
+  useEffect(() => {
+    if (!JS_KEY) {
+      console.error("Kakao JavaScript key is missing");
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.src = "https://developers.kakao.com/sdk/js/kakao.js";
+    script.async = true;
+
+    script.onload = () => {
+      if (window.Kakao && !window.Kakao.isInitialized()) {
+        window.Kakao.init(JS_KEY);
+        setIsKakaoLoaded(true);
+      }
+    };
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [JS_KEY]);
+
+  const shareToKakao = () => {
+    const { Kakao, location } = window;
+
+    if (!Kakao || !Kakao.isInitialized()) {
+      console.error("Kakao is not initialized");
+      return;
+    }
+
+    // Kakao.Share.sendDefault({
+    //   objectType: "feed",
+    //   content: {
+    //     title: "나만의 디지털 편지 아카이브, 레터링",
+    //     description: `${senderName} 님으로부터 한 통의 편지가 도착했습니다! 소중한 편지를 손쉽게 보관하고 나의 스페이스에 수놓아보세요!`,
+    //     imageUrl: imageAsset,
+    //     link: {
+    //       mobileWebUrl: location.href,
+    //       webUrl: location.href,
+    //     },
+    //   },
+    // });
+
+    Kakao.Share.sendScrap({
+      //     requestUrl: ,
+      requestUrl: location.origin + location.pathname,
+      templateId: 112798,
+      templateArgs: {
+        senderName: senderName,
+        id: letterId,
+      },
+    });
+  };
+
+  return (
+    <Button
+      buttonType="primary"
+      text="카카오톡 공유하기"
+      onClick={shareToKakao}
+    />
+  );
+};
+
+export default KakaoShareButton;
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
@@ -39,6 +39,7 @@ export const setLetterUrl = (url: string) => {
 export const getLetterUrl = () => {
   if (typeof window !== "undefined") {
     localStorage.getItem("letter_url");
+    console.log("url 있음");
   }
   return null;
 };