diff --git a/.vscode/settings.json b/.vscode/settings.json
index efa30f1..a468aa5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,5 +6,6 @@
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
- "git.pruneOnFetch": true
+ "git.pruneOnFetch": true,
+ "files.eol": "\n"
}
diff --git a/app/components/KakaoLoginButton/KakaoLoginButton.tsx b/app/components/KakaoLoginButton/KakaoLoginButton.tsx
new file mode 100644
index 0000000..eded8da
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+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 = () => (
Ort
-
+ {/* */}
+
);
diff --git a/app/routes/oauth.kakao.tsx.tsx b/app/routes/oauth.kakao.tsx.tsx
new file mode 100644
index 0000000..e7eeba1
--- /dev/null
+++ b/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 = () => 카카오 로그인 중...
;
+
+export default KakaoRedirect;
diff --git a/app/utils/random.ts b/app/utils/random.ts
new file mode 100644
index 0000000..edffe9a
--- /dev/null
+++ b/app/utils/random.ts
@@ -0,0 +1,4 @@
+import { v4 as uuidv4 } from 'uuid';
+
+//이용자의 uuid를 받아옵니다.
+export const getUUID = () => uuidv4();
diff --git a/package.json b/package.json
index 4656002..ec2bddf 100644
--- a/package.json
+++ b/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.9",
"@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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4a56c1..fa1919b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
react-dom:
specifier: 18.3.1
version: 18.3.1(react@18.3.1)
+ uuid:
+ specifier: 10.0.0
+ version: 10.0.0
devDependencies:
'@commitlint/cli':
specifier: 19.3.0
@@ -72,6 +75,9 @@ importers:
'@types/react-dom':
specifier: 18.3.0
version: 18.3.0
+ '@types/uuid':
+ specifier: 10.0.0
+ version: 10.0.0
'@typescript-eslint/eslint-plugin':
specifier: 7.16.0
version: 7.16.0(@typescript-eslint/parser@7.16.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0)(typescript@5.5.3)
@@ -2127,6 +2133,9 @@ packages:
'@types/unist@3.0.3':
resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+ '@types/uuid@10.0.0':
+ resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
+
'@types/uuid@9.0.8':
resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
@@ -5575,6 +5584,10 @@ packages:
resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
engines: {node: '>= 0.4.0'}
+ uuid@10.0.0:
+ resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
+ hasBin: true
+
uuid@9.0.1:
resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
hasBin: true
@@ -7963,6 +7976,8 @@ snapshots:
'@types/unist@3.0.3': {}
+ '@types/uuid@10.0.0': {}
+
'@types/uuid@9.0.8': {}
'@typescript-eslint/eslint-plugin@7.16.0(@typescript-eslint/parser@7.16.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0)(typescript@5.5.3)':
@@ -12153,6 +12168,8 @@ snapshots:
utils-merge@1.0.1: {}
+ uuid@10.0.0: {}
+
uuid@9.0.1: {}
uvu@0.5.6: