From 93a7e151cd650bb9d43070161fb7b618d6adca6d Mon Sep 17 00:00:00 2001
From: Hwang Taehwan <107744534+stakbucks@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:34:56 +0900
Subject: [PATCH] fix(demo): change kakao login method (#86)

---
 apps/demo/.eslintrc.cjs    |  3 +++
 apps/demo/global.d.ts      |  7 +++++++
 apps/demo/src/app/page.tsx | 19 ++++++++++++++++---
 turbo.json                 |  3 ++-
 4 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 apps/demo/global.d.ts

diff --git a/apps/demo/.eslintrc.cjs b/apps/demo/.eslintrc.cjs
index c6a137e..367c7d1 100644
--- a/apps/demo/.eslintrc.cjs
+++ b/apps/demo/.eslintrc.cjs
@@ -6,4 +6,7 @@ module.exports = {
   parserOptions: {
     project: true,
   },
+  globals: {
+    Kakao: 'readonly',
+  },
 };
diff --git a/apps/demo/global.d.ts b/apps/demo/global.d.ts
new file mode 100644
index 0000000..ef7f9f9
--- /dev/null
+++ b/apps/demo/global.d.ts
@@ -0,0 +1,7 @@
+declare const Kakao: {
+  isInitialized: () => boolean;
+  init: (key: string) => void;
+  Auth: {
+    authorize: ({ redirectUri: string }) => void;
+  };
+};
diff --git a/apps/demo/src/app/page.tsx b/apps/demo/src/app/page.tsx
index 4903c1a..3d93703 100644
--- a/apps/demo/src/app/page.tsx
+++ b/apps/demo/src/app/page.tsx
@@ -4,14 +4,25 @@ import LoginBackground from '@/assets/images/login-background.webp';
 import { KakaoButton } from '@/components/kakao-button';
 import { Asset, Paragraph, spacings } from '@bottlesteam/ui';
 import Image from 'next/image';
+import { useEffect } from 'react';
 
-const CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID;
+const JAVASCRIPT_KEY = `${process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY}`;
 const REDIRECT_URI = `${process.env.NEXT_PUBLIC_MODE === 'DEVELOPMENT' ? 'http://localhost:3000' : 'https://demo.bottles.asia'}/kakao`;
-const kakaoLoginUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
 
 export default function Home() {
+  useEffect(() => {
+    if (!Kakao?.isInitialized()) {
+      Kakao.init(JAVASCRIPT_KEY); //SDK 초기화 함수
+    }
+  }, []);
+
   return (
     <div style={{ position: 'relative', width: '100%', height: '100%', padding: `0 ${spacings.md}` }}>
+      <script
+        src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.3/kakao.min.js"
+        integrity="sha384-kLbo2SvoNtOFiniJ1EQ9o2iDA8i3xp+O6Cns+L5cd4RsOJfl+43z5pvieT2ayq3C"
+        crossOrigin="anonymous"
+      />
       <Image src={LoginBackground} alt="login background" fill style={{ objectFit: 'cover' }} />
       <div
         style={{
@@ -34,7 +45,9 @@ export default function Home() {
       </div>
       <KakaoButton
         onClick={() => {
-          window.location.href = kakaoLoginUrl;
+          Kakao.Auth.authorize({
+            redirectUri: REDIRECT_URI,
+          });
         }}
       />
     </div>
diff --git a/turbo.json b/turbo.json
index 73ef768..da89776 100644
--- a/turbo.json
+++ b/turbo.json
@@ -9,7 +9,8 @@
     "NEXT_PUBLIC_ADMIN_ID_1",
     "NEXT_PUBLIC_ADMIN_ID_2",
     "NEXT_PUBLIC_ADMIN_PASSWORD",
-    "NEXT_PUBLIC_KAKAO_CLIENT_ID"
+    "NEXT_PUBLIC_KAKAO_CLIENT_ID",
+    "NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY"
   ],
   "tasks": {
     "build": {