From a5cd6385a7f277a227e79d6a7ad47c57b1cd896a Mon Sep 17 00:00:00 2001 From: crew852 <65230973+crew852@users.noreply.github.com> Date: Fri, 30 Aug 2024 17:39:12 +0900 Subject: [PATCH] [ORT-2] feat: add KakaoLoginButton (#2) * [ORT-2] feat: add KakaoLoginButton * Update oauth.kakao.tsx.tsx * feat: add package - axois, uuid * feat: edit uuid parse for cloudflare * feat: uuid utilize, comment to js doc, action to loader function * feat: delete useless part * Update app/utils/getUUID.ts Co-authored-by: Gwangseo Go * feat: fix package, util name * fix: apply changed util func name, fix export default to named export --------- Co-authored-by: Gwangseo Go --- .vscode/settings.json | 3 ++- .../KakaoLoginButton/KakaoLoginButton.tsx | 21 +++++++++++++++++++ app/components/KakaoLoginButton/index.ts | 3 +++ app/routes/_index.tsx | 6 ++++-- app/routes/oauth.kakao.tsx.tsx | 18 ++++++++++++++++ app/utils/random.ts | 4 ++++ package.json | 4 +++- pnpm-lock.yaml | 17 +++++++++++++++ 8 files changed, 72 insertions(+), 4 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 create mode 100644 app/utils/random.ts 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 50a3aff..0a09cbf 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.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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dad78ef..610adda 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) @@ -1983,6 +1989,9 @@ packages: '@types/unist@3.0.2': resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==} + '@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==} @@ -5408,6 +5417,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 @@ -7723,6 +7736,8 @@ snapshots: '@types/unist@3.0.2': {} + '@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)': @@ -11857,6 +11872,8 @@ snapshots: utils-merge@1.0.1: {} + uuid@10.0.0: {} + uuid@9.0.1: {} uvu@0.5.6: