Merge branch 'develop' of https://github.com/team-nabi/nabi-market-cl…

…ient into NABI-86

src/components/domain/Header/Header.tsx

@@ -37,11 +37,11 @@ const Header = ({ isLogin = false }: HeaderProps) => {
             {/** TODO: 아바타 컴포넌트로 변경 */}
           </>
         ) : (
-          <>
-            <Button variant={'gradation'}>
-              <Link href={AppPath.login()}>로그인</Link>
-            </Button>
-          </>
+          <Button variant={'gradation'}>
+            <Link href={AppPath.login()} scroll={false}>
+              로그인
+            </Link>
+          </Button>
         )}
       </div>
     </header>

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 (
     <section className="flex flex-col items-center justify-center w-full h-full gap-4">
       <Image className="mb-20" src={Assets.logo} alt="nabi-logo" />
-      <LoginButtons />
+      <LoginButtons
+        kakaoLoginHandler={kakaoLoginHandler}
+        googleLoginHandler={googleLoginHandler}
+      />
     </section>
   )
 }

src/components/domain/LoginForm/section/LoginButtons.tsx

@@ -3,11 +3,19 @@
 import React from 'react'
 import { KakaoLoginButton, GoogleLoginButton } from '../../buttons/LoginButtons'
 
-const LoginButtons = () => {
+type LoginButtonsProps = {
+  kakaoLoginHandler: () => void
+  googleLoginHandler: () => void
+}
+
+const LoginButtons = ({
+  kakaoLoginHandler,
+  googleLoginHandler,
+}: LoginButtonsProps) => {
   return (
     <section className="flex flex-col gap-2">
-      <KakaoLoginButton onClickButton={() => alert('k')} />
-      <GoogleLoginButton onClickButton={() => alert('g')} />
+      <KakaoLoginButton onClickButton={kakaoLoginHandler} />
+      <GoogleLoginButton onClickButton={googleLoginHandler} />
     </section>
   )
 }

src/config/apiEndPoint.ts

@@ -1,5 +1,6 @@
 const ApiEndPoint = {
-  login: () => '/login',
+  kakaoLogin: () => '/oauth2/authorize/kakao/login',
+  googleLogin: () => '/oauth2/authorize/google/login',
   test: () => '/test',
   item: (itemId:string) => `/${itemId}`
 } as const

src/lib/msw/mocks/authHandlers.ts

@@ -0,0 +1,46 @@
+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.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.json({
+        data: {
+          userInfo: {
+            userId: 1,
+            nickname: '병원에 간 미어캣',
+            imageUrl: 'http://asdf~',
+          },
+          token: {
+            accessToken: 'asdfasdf',
+            refreshToken: 'asdfa',
+          },
+        },
+      }),
+    )
+  }),
+]
+
+export default authHandlers

src/lib/msw/mocks/handlers.ts

@@ -1,4 +1,5 @@
-import { itemHandlers } from './itemHandlers'
+import authHandlers from './authHandlers'
 import { testHandlers } from './testHandler'
+import { itemHandlers } from './itemHandlers'
 
-export const handlers = [...testHandlers, ...itemHandlers]
+export const handlers = [...testHandlers, ...authHandlers, ...itemHandlers]

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 }