[ORT-2] feat: add KakaoLoginButton

.vscode/settings.json

@@ -6,5 +6,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "git.pruneOnFetch": true
+  "git.pruneOnFetch": true,
+  "files.eol": "\n"
 }

app/components/KakaoLoginButton/KakaoLoginButton.tsx

@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react';
+import getUUID from '@/utils/getUUID';
+
+const clientId = 'f5aa2f20e42d783654b8e8c01bfc6312';
+//redirectUri는 등록된 redirectUri중에 임의로 사용했습니다.
+const redirectUri = 'http://localhost:5173/oauth/kakao';
+
+const KakaoLoginButton: React.FC = () => {
+  const kakaoAuthUrl = useMemo(() => {
+    const userUUID = getUUID();
+    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,24 @@
+import { LoaderFunction, json } from '@remix-run/cloudflare';
+import axios, { AxiosError } from 'axios';
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const url = new URL(request.url);
+  const code = url.searchParams.get('code');
+  const state = url.searchParams.get('state');
+
+  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 });
+  }
+};
+
+const KakaoRedirect = () => <div>카카오 로그인 중...</div>;
+
+export default KakaoRedirect;

app/utils/getUUID.ts

@@ -0,0 +1,9 @@
+import { v4 as uuidv4 } from 'uuid';
+
+//이용자의 uuid를 받아옵니다.
+const getUUID = () => {
+  const getUserUUID = (): string => uuidv4();
+  return getUserUUID;
+};
+
+export default getUUID;

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",