From a46a159b1be78ab44736ba97512adff0c032ed63 Mon Sep 17 00:00:00 2001 From: oaoong Date: Thu, 2 Nov 2023 01:03:15 +0900 Subject: [PATCH 1/3] =?UTF-8?q?:tada:=20oauth=20login=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/apiEndPoint.ts | 3 +- src/lib/msw/mocks/authHandlers.ts | 48 +++++++++++++++++++++++++++++++ src/lib/msw/mocks/handlers.ts | 3 +- src/services/auth/auth.ts | 25 ++++++++-------- 4 files changed, 65 insertions(+), 14 deletions(-) create mode 100644 src/lib/msw/mocks/authHandlers.ts diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index 38cc7372..d7cc5532 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -1,5 +1,6 @@ const ApiEndPoint = { - login: () => '/login', + kakaoLogin: () => '/oauth2/authorize/kakao/login', + googleLogin: () => '/oauth2/authorize/google/login', test: () => '/test', } as const diff --git a/src/lib/msw/mocks/authHandlers.ts b/src/lib/msw/mocks/authHandlers.ts new file mode 100644 index 00000000..8d29daba --- /dev/null +++ b/src/lib/msw/mocks/authHandlers.ts @@ -0,0 +1,48 @@ +import { rest } from 'msw' +import ApiEndPoint from '@/config/apiEndPoint' +import { Environment } from '@/config/environment' + +const baseUrl = Environment.apiAddress() + +const authHandlers = [ + rest.get(`${baseUrl}${ApiEndPoint.kakaoLogin()}`, async (_req, res, ctx) => { + return res( + ctx.status(200), + ctx.text('성공했습니다.'), + ctx.json({ + data: { + userInfo: { + userId: 1, + nickname: '병원에 간 미어캣', + imageUrl: 'http://asdf~', + }, + token: { + accessToken: 'asdfasdf', + refreshToken: 'asdfa', + }, + }, + }), + ) + }), + rest.get(`${baseUrl}${ApiEndPoint.googleLogin()}`, async (_req, res, ctx) => { + return res( + ctx.status(200), + ctx.text('성공했습니다.'), + ctx.json({ + data: { + userInfo: { + userId: 1, + nickname: '병원에 간 미어캣', + imageUrl: 'http://asdf~', + }, + token: { + accessToken: 'asdfasdf', + refreshToken: 'asdfa', + }, + }, + }), + ) + }), +] + +export default authHandlers diff --git a/src/lib/msw/mocks/handlers.ts b/src/lib/msw/mocks/handlers.ts index c5de0326..62ae01e5 100644 --- a/src/lib/msw/mocks/handlers.ts +++ b/src/lib/msw/mocks/handlers.ts @@ -1,3 +1,4 @@ +import authHandlers from './authHandlers' import { testHandlers } from './testHandler' -export const handlers = [...testHandlers] +export const handlers = [...testHandlers, ...authHandlers] diff --git a/src/services/auth/auth.ts b/src/services/auth/auth.ts index 758b38db..201db899 100644 --- a/src/services/auth/auth.ts +++ b/src/services/auth/auth.ts @@ -1,15 +1,16 @@ import ApiEndPoint from '@/config/apiEndPoint' -import { Environment } from '@/config/environment' - -const postLogin = async () => { - const response = await fetch(Environment.apiAddress() + ApiEndPoint.login(), { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - }) - const data = await response.json() - return data +import apiClient from '../apiClient' + +const getKakaoLogin = async () => { + const response = await apiClient.get(ApiEndPoint.kakaoLogin()) + + return response +} + +const getGoogleLogin = async () => { + const response = await apiClient.get(ApiEndPoint.googleLogin()) + + return response } -export { postLogin } +export { getKakaoLogin, getGoogleLogin } From 2344ebcffaf4bbbeef89c981767fa664de5413d7 Mon Sep 17 00:00:00 2001 From: oaoong Date: Thu, 2 Nov 2023 01:46:46 +0900 Subject: [PATCH 2/3] =?UTF-8?q?:tada:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/domain/Header/Header.tsx | 10 ++--- .../domain/LoginForm/section/LoginButtons.tsx | 37 ++++++++++++++++++- src/lib/msw/mocks/authHandlers.ts | 2 - 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/components/domain/Header/Header.tsx b/src/components/domain/Header/Header.tsx index e0848a85..0961432c 100644 --- a/src/components/domain/Header/Header.tsx +++ b/src/components/domain/Header/Header.tsx @@ -37,11 +37,11 @@ const Header = ({ isLogin = false }: HeaderProps) => { {/** TODO: 아바타 컴포넌트로 변경 */} ) : ( - <> - - + )} diff --git a/src/components/domain/LoginForm/section/LoginButtons.tsx b/src/components/domain/LoginForm/section/LoginButtons.tsx index 5b80d764..973b3ad9 100644 --- a/src/components/domain/LoginForm/section/LoginButtons.tsx +++ b/src/components/domain/LoginForm/section/LoginButtons.tsx @@ -1,13 +1,46 @@ 'use client' import React from 'react' +import { useRouter } from 'next/navigation' +import AppPath from '@/config/appPath' +import { getGoogleLogin, getKakaoLogin } from '@/services/auth/auth' import { KakaoLoginButton, GoogleLoginButton } from '../../buttons/LoginButtons' const LoginButtons = () => { + const router = useRouter() + const kakaoLoginHandler = async () => { + try { + await getKakaoLogin() + const res = await getKakaoLogin() + const data = await res.json() + console.log(data) + alert('로그인 성공') + router.back() + } catch (e) { + console.log(e) + alert('로그인 실패') + router.push(AppPath.login(), { scroll: false }) + } + } + const googleLoginHandler = async () => { + try { + await getKakaoLogin() + const res = await getGoogleLogin() + const data = await res.json() + console.log(data) + alert('로그인 성공') + router.back() + } catch (e) { + console.log(e) + alert('로그인 실패') + router.push(AppPath.login(), { scroll: false }) + } + } + return (
- alert('k')} /> - alert('g')} /> + +
) } diff --git a/src/lib/msw/mocks/authHandlers.ts b/src/lib/msw/mocks/authHandlers.ts index 8d29daba..8afc7e18 100644 --- a/src/lib/msw/mocks/authHandlers.ts +++ b/src/lib/msw/mocks/authHandlers.ts @@ -8,7 +8,6 @@ const authHandlers = [ rest.get(`${baseUrl}${ApiEndPoint.kakaoLogin()}`, async (_req, res, ctx) => { return res( ctx.status(200), - ctx.text('성공했습니다.'), ctx.json({ data: { userInfo: { @@ -27,7 +26,6 @@ const authHandlers = [ rest.get(`${baseUrl}${ApiEndPoint.googleLogin()}`, async (_req, res, ctx) => { return res( ctx.status(200), - ctx.text('성공했습니다.'), ctx.json({ data: { userInfo: { From adc1da02ce7468f7fcb078fb6aa80c095a2e13d2 Mon Sep 17 00:00:00 2001 From: oaoong Date: Thu, 2 Nov 2023 14:12:52 +0900 Subject: [PATCH 3/3] =?UTF-8?q?:sparkles:=20onClick=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domain/LoginForm/LoginForm.stories.tsx | 16 -------- src/components/domain/LoginForm/LoginForm.tsx | 40 +++++++++++++++++- .../domain/LoginForm/section/LoginButtons.tsx | 41 ++++--------------- 3 files changed, 47 insertions(+), 50 deletions(-) delete mode 100644 src/components/domain/LoginForm/LoginForm.stories.tsx diff --git a/src/components/domain/LoginForm/LoginForm.stories.tsx b/src/components/domain/LoginForm/LoginForm.stories.tsx deleted file mode 100644 index 4a67a72d..00000000 --- a/src/components/domain/LoginForm/LoginForm.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import LoginForm from './LoginForm' - -const meta = { - title: 'DOMAIN/LoginForm', - component: LoginForm, - tags: ['autodocs'], - argTypes: {}, -} satisfies Meta - -export default meta -type Story = StoryObj - -export const Normal: Story = { - args: {}, -} diff --git a/src/components/domain/LoginForm/LoginForm.tsx b/src/components/domain/LoginForm/LoginForm.tsx index 4e47338c..b8e6aa44 100644 --- a/src/components/domain/LoginForm/LoginForm.tsx +++ b/src/components/domain/LoginForm/LoginForm.tsx @@ -1,12 +1,50 @@ +'use client' + import Image from 'next/image' +import { useRouter } from 'next/navigation' +import AppPath from '@/config/appPath' import Assets from '@/config/assets' +import { getGoogleLogin, getKakaoLogin } from '@/services/auth/auth' import LoginButtons from './section/LoginButtons' const LoginForm = () => { + const router = useRouter() + const kakaoLoginHandler = async () => { + try { + await getKakaoLogin() + const res = await getKakaoLogin() + const data = await res.json() + console.log(data) + alert('로그인 성공') + router.back() + } catch (e) { + console.log(e) + alert('로그인 실패') + router.push(AppPath.login(), { scroll: false }) + } + } + const googleLoginHandler = async () => { + try { + await getKakaoLogin() + const res = await getGoogleLogin() + const data = await res.json() + console.log(data) + alert('로그인 성공') + router.back() + } catch (e) { + console.log(e) + alert('로그인 실패') + router.push(AppPath.login(), { scroll: false }) + } + } + return (
nabi-logo - +
) } diff --git a/src/components/domain/LoginForm/section/LoginButtons.tsx b/src/components/domain/LoginForm/section/LoginButtons.tsx index 973b3ad9..e11f9ede 100644 --- a/src/components/domain/LoginForm/section/LoginButtons.tsx +++ b/src/components/domain/LoginForm/section/LoginButtons.tsx @@ -1,42 +1,17 @@ 'use client' import React from 'react' -import { useRouter } from 'next/navigation' -import AppPath from '@/config/appPath' -import { getGoogleLogin, getKakaoLogin } from '@/services/auth/auth' import { KakaoLoginButton, GoogleLoginButton } from '../../buttons/LoginButtons' -const LoginButtons = () => { - const router = useRouter() - const kakaoLoginHandler = async () => { - try { - await getKakaoLogin() - const res = await getKakaoLogin() - const data = await res.json() - console.log(data) - alert('로그인 성공') - router.back() - } catch (e) { - console.log(e) - alert('로그인 실패') - router.push(AppPath.login(), { scroll: false }) - } - } - const googleLoginHandler = async () => { - try { - await getKakaoLogin() - const res = await getGoogleLogin() - const data = await res.json() - console.log(data) - alert('로그인 성공') - router.back() - } catch (e) { - console.log(e) - alert('로그인 실패') - router.push(AppPath.login(), { scroll: false }) - } - } +type LoginButtonsProps = { + kakaoLoginHandler: () => void + googleLoginHandler: () => void +} +const LoginButtons = ({ + kakaoLoginHandler, + googleLoginHandler, +}: LoginButtonsProps) => { return (