[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/random';
+
+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,18 @@
+import { LoaderFunction, json } from '@remix-run/cloudflare';
+
+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문 지우고 이어서 하면 됩니다
+  try {
+    console.log(code, state);
+  } catch {
+    console.log(json);
+  }
+};
+
+const KakaoRedirect = () => <div>카카오 로그인 중...</div>;
+
+export default KakaoRedirect;

app/utils/random.ts

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

package.json

@@ -23,7 +23,8 @@
     "@vanilla-extract/css": "1.15.3",
     "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 +40,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",