[ORT-2] feat: add KakaoLoginButton

app/components/KakaoLoginButton/KakaoLoginButton.tsx

@@ -0,0 +1,24 @@
+import React, { useMemo } 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 KakaoLoginButton: React.FC = () => {
+  const kakaoAuthUrl = useMemo(() => {
+    const userUUID = getUserUUID();
+    return `https://kauth.kakao.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&state=${userUUID}`;
+  }, []);
+
+  return (
+    <a href={kakaoAuthUrl}>
+      <button>카카오로 로그인</button>
+    </a>
+  );
+};
+
+export default KakaoLoginButton;

app/components/KakaoLoginButton/index.ts

@@ -0,0 +1,3 @@
+import KakaoLoginButton from './KakaoLoginButton';
+
+export default KakaoLoginButton;

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>
 );
 

app/routes/oauth.kakao.tsx.tsx

@@ -0,0 +1,71 @@
+//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 {
+    //추후에 진짜 백엔드 api url로 변경예정입니다.
+    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;

package.json

@@ -21,9 +21,11 @@
     "@remix-run/react": "2.10.2",
     "@remix-run/serve": "2.10.2",
     "@vanilla-extract/css": "1.15.3",
+    "axios": "^1.7.4",
     "isbot": "4.4.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "19.3.0",
@@ -39,6 +41,7 @@
     "@storybook/test": "8.2.5",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "7.16.0",
     "@typescript-eslint/parser": "7.16.0",
     "@vanilla-extract/vite-plugin": "4.0.13",