From e3a23270c4c501f1b598325ef554e7703f342b0c Mon Sep 17 00:00:00 2001
From: crew852 <65230973+crew852@users.noreply.github.com>
Date: Fri, 16 Aug 2024 17:14:57 +0900
Subject: [PATCH] [ORT-2] feat: add KakaoLoginButton

---
 .../KakaoLoginButton/KakaoLoginButton.tsx     | 20 ++++++
 app/components/KakaoLoginButton/index.ts      |  3 +
 app/routes/_index.tsx                         |  6 +-
 app/routes/oauth.kakao.tsx.tsx                | 70 +++++++++++++++++++
 4 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 app/components/KakaoLoginButton/KakaoLoginButton.tsx
 create mode 100644 app/components/KakaoLoginButton/index.ts
 create mode 100644 app/routes/oauth.kakao.tsx.tsx

diff --git a/app/components/KakaoLoginButton/KakaoLoginButton.tsx b/app/components/KakaoLoginButton/KakaoLoginButton.tsx
new file mode 100644
index 0000000..82b7ca7
--- /dev/null
+++ b/app/components/KakaoLoginButton/KakaoLoginButton.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+const clientId = 'f5aa2f20e42d783654b8e8c01bfc6312';
+//redirectUri는 등록된 redirectUri중에 임의로 사용했습니다.
+const redirectUri = 'http://localhost:5173/oauth/kakao';
+
+//이용자의 uuid를 받아와 state값으로 사용합니다.
+const getUserUUID = (): string => uuidv4();
+const userUUID = getUserUUID();
+
+const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&state=${userUUID}`;
+
+const KakaoLoginButton: React.FC = () => (
+  <a href={kakaoAuthUrl}>
+    <button>카카오로 로그인</button>
+  </a>
+);
+
+export default KakaoLoginButton;
diff --git a/app/components/KakaoLoginButton/index.ts b/app/components/KakaoLoginButton/index.ts
new file mode 100644
index 0000000..76e278d
--- /dev/null
+++ b/app/components/KakaoLoginButton/index.ts
@@ -0,0 +1,3 @@
+import KakaoLoginButton from './KakaoLoginButton';
+
+export default KakaoLoginButton;
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 8fa7333..d8ff1e0 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,5 +1,6 @@
 import type { MetaFunction } from '@remix-run/cloudflare';
-import Test from '@/components/Test';
+import KakaoLoginButton from '@/components/KakaoLoginButton';
+// import Test from '@/components/Test';
 
 export const meta: MetaFunction = () => [
   { title: 'ORT - 동아리 플랫폼' },
@@ -13,7 +14,8 @@ export const meta: MetaFunction = () => [
 const Index = () => (
   <div>
     <h1>Ort</h1>
-    <Test />
+    {/* <Test /> */}
+    <KakaoLoginButton />
   </div>
 );
 
diff --git a/app/routes/oauth.kakao.tsx.tsx b/app/routes/oauth.kakao.tsx.tsx
new file mode 100644
index 0000000..e77827c
--- /dev/null
+++ b/app/routes/oauth.kakao.tsx.tsx
@@ -0,0 +1,70 @@
+//HTTP 요청을 보내기 위해 axios라이브러리를 추가했습니다.
+import { ActionFunction, json } from '@remix-run/cloudflare';
+import { useSearchParams } from '@remix-run/react';
+import axios, { AxiosError } from 'axios';
+import { useEffect } from 'react';
+
+export const action: ActionFunction = async ({ request }) => {
+  //request.formData()를 통해 요청에서 전송된 폼 데이터를 가져옵니다.
+  const formData = await request.formData();
+  const code = formData.get('code');
+  const state = formData.get('state');
+
+  /*
+  code와 state 값을 추출하여 axios.post를 사용해 백엔드 서버에 요청을 보냅니다.
+  요청 성공 시 성공 메시지와 반환된 데이터를 JSON 형태로 반환합니다.
+  요청 실패 시 오류 메시지를 JSON 형태로 반환하고 콘솔에 오류를 출력합니다. 
+  */
+  try {
+    const response = await axios.post('(백엔드api url)', {
+      code,
+      state,
+    });
+    return json({ message: 'Success', data: response.data });
+  } catch (error) {
+    const axiosError = error as AxiosError;
+    console.error('Error sending code to backend:', axiosError);
+    return json({ message: 'Error', error: axiosError.message });
+  }
+};
+
+/*
+KakaoRedirect 함수는 카카오 로그인 후 리다이렉트된 페이지에서 실행되는 컴포넌트입니다.
+useSearchParams 훅을 사용해 URL 쿼리 파라미터를 가져옵니다.
+useEffect 훅을 사용해 컴포넌트가 마운트될 때 실행되는 코드를 작성합니다.
+sendCodeToServer 함수는 쿼리 파라미터에서 code와 state를 추출하고, 이 값을 FormData 객체에 추가한 후, /oauth/kakao 엔드포인트로 POST 요청을 보냅니다.
+*/
+const KakaoRedirect = () => {
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const sendCodeToServer = async () => {
+      const code = searchParams.get('code');
+      const state = searchParams.get('state');
+
+      if (code) {
+        const formData = new FormData();
+        formData.append('code', code);
+        if (state) {
+          formData.append('state', state);
+        }
+
+        try {
+          const response = await fetch('/oauth/kakao', {
+            method: 'POST',
+            body: formData,
+          });
+          const data = await response.json();
+          console.log('Server response:', data);
+        } catch (error) {
+          console.error('Error:', error);
+        }
+      }
+    };
+    sendCodeToServer();
+  }, [searchParams]);
+
+  return <div>카카오 로그인 중...</div>;
+};
+
+export default KakaoRedirect;