feat: 로그인 기능 구현 (#165)

* style: 가입 페이지 클래스 네임 공백 제거

* feat: 카카오 로그인 페이지로 하이퍼링크 기능 작성

* chore: suspensive 라이브러리 업데이트

* test: 세연님과 테스트

* feat: 로그인 모킹 API 작성

* feat: 카카오 로그인 검증 후 리다이렉션 기능 작성

* feat: 로그인 검증 API를 POST로 변경

* fix: 에러 메시지 값 없을 경우 핸들링

* remove: authOptions 제거

* feat: URI 변동사항 적용

.env.example

@@ -1 +1,4 @@
-VITE_BACKEND_API_ENDPOINT= # 백엔드 API 주소
+VITE_BACKEND_API_ENDPOINT= # 백엔드 API 주소. ex) https://something.com
+VITE_LOCALHOST= # 로컬 개발서버 주소. ex) http://localhost:1111
+VITE_DEPLOY_ENDPOINT= # 리액트 앱 배포 주소. ex) https://something.com
+VITE_KAKAO_LOGIN_CLIENT_ID= # 카카오 로그인 연동에 필요한 Client ID.

package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
-    "@suspensive/react": "^1.17.5",
+    "@suspensive/react": "^1.20.1",
     "@tanstack/react-query": "^5.0.5",
     "axios": "^1.5.1",
     "clsx": "^2.0.0",

src/core/api/functions/memberAPI.ts

@@ -0,0 +1,16 @@
+import { baseInstance } from '../instance';
+
+const memberAPI = {
+  postMemberKakaoAuth: async (params: { code: string }) => {
+    const { code } = params;
+
+    return await baseInstance.post<{ signUp: boolean; memberId: number }>(
+      `/members/login/kakao/oauth`,
+      {
+        code
+      }
+    );
+  }
+};
+
+export default memberAPI;

src/core/mocks/handlers/index.ts

@@ -1,13 +1,15 @@
 import examplePostHandlers from './examplePosts';
 import exampleCommentHandlers from './exampleComments';
 import roomsHandlers from './rooms';
+import membersHandlers from './members';
 import bugsHandlers from './bugs';
 import couponsHandlers from './coupons';
 
 const handlers = [
   ...examplePostHandlers,
   ...exampleCommentHandlers,
   ...roomsHandlers,
+  ...membersHandlers,
   ...bugsHandlers,
   ...couponsHandlers
 ];

src/core/mocks/handlers/members.ts

@@ -0,0 +1,35 @@
+import { http, HttpResponse, delay } from 'msw';
+import { baseURL } from '../baseURL';
+
+const membersHandlers = [
+  http.post(baseURL('/members/login/kakao/oauth'), async () => {
+    await delay(1000);
+
+    const status: number = 200;
+    let response = {};
+    const headers = new Headers();
+
+    switch (status) {
+      case 200:
+        response = { signUp: false, memberId: 5 };
+        headers.set('Set-Cookie', 'accessToken=MockedToken;');
+        headers.append('Set-Cookie', 'refreshToken=MockedToken;');
+        break;
+      case 201:
+        response = { signUp: true, memberId: 5 };
+        headers.set('Set-Cookie', 'accessToken=MockedToken;');
+        headers.append('Set-Cookie', 'refreshToken=MockedToken;');
+        break;
+      case 404:
+        response = { message: '존재하지 않는 유저입니다.' };
+        break;
+    }
+
+    return HttpResponse.json(response, {
+      status,
+      headers
+    });
+  })
+];
+
+export default membersHandlers;

src/core/routes/routes.tsx

@@ -10,6 +10,7 @@ import StartPage from '@/pages/StartPage';
 import EventPage from '@/pages/EventPage';
 import NotFoundPage from '@/pages/NotFoundPage';
 import JoinPage from '@/pages/JoinPage';
+import JoinKakaoPage from '@/pages/JoinKakaoPage';
 import UserPage from '@/pages/UserPage';
 import RankPage from '@/pages/RankPage';
 import CouponPage from '@/pages/CouponPage';
@@ -28,6 +29,7 @@ export type RouteNames =
   | 'start'
   | 'guide'
   | 'join'
+  | 'joinKakao'
   | 'routines'
   | 'search'
   | 'user'
@@ -67,6 +69,12 @@ const routes: Routes = {
     navBarRequired: false,
     element: <JoinPage />
   },
+  joinKakao: {
+    path: 'login/kakao/oauth',
+    authRequired: false,
+    navBarRequired: false,
+    element: <JoinKakaoPage />
+  },
   routines: {
     path: 'routines',
     authRequired: true,

src/pages/JoinKakaoPage.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import memberAPI from '@/core/api/functions/memberAPI';
+import { useMoveRoute } from '@/core/hooks';
+import { LoadingSpinner } from '@/shared/LoadingSpinner';
+
+const JoinKakaoPage = () => {
+  const [searchParams] = useSearchParams();
+  const code = searchParams.get('code');
+  const moveTo = useMoveRoute();
+
+  const { mutate, isPending, isError, error } = useMutation({
+    mutationFn: memberAPI.postMemberKakaoAuth
+  });
+
+  useEffect(() => {
+    mutate(
+      { code: code ?? '' },
+      {
+        onSuccess: ({ signUp }) => {
+          moveTo(signUp ? 'guide' : 'start');
+        }
+      }
+    );
+  }, []);
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      {isPending && (
+        <LoadingSpinner
+          colorStyle="text-light-point dark:text-dark-point"
+          size="7xl"
+        />
+      )}
+      {(isError && error.response?.data?.message) ??
+        '로그인 중에 문제가 발생했어요.'}
+    </div>
+  );
+};
+
+export default JoinKakaoPage;

src/pages/JoinPage.tsx

@@ -1,35 +1,46 @@
+const baseURI = import.meta.env.PROD
+  ? import.meta.env.VITE_DEPLOY_ENDPOINT
+  : import.meta.env.VITE_LOCALHOST;
+
+const KAKAO_LOGIN_URL =
+  `https://kauth.kakao.com/oauth/authorize?` +
+  `response_type=code&` +
+  `client_id=${import.meta.env.VITE_KAKAO_LOGIN_CLIENT_ID}&` +
+  `redirect_uri=${baseURI}` +
+  `/login/kakao/oauth`;
+
 const JoinPage = () => {
   return (
-    <div className="relative  h-screen ">
+    <div className="relative h-screen">
       <div className="absolute inset-x-0 top-1/3 flex flex-col items-center">
         <div className="mb-8 aspect-square w-3/5 max-w-[200px]">
           <img
-            src="public\assets\Omok.png"
+            src="/assets/Omok.png"
             alt=""
-            className="w-full  rounded-full"
+            className="w-full rounded-full"
           />
         </div>
         <div className="flex flex-col items-center text-center">
           <h1 className="mb-4 text-3xl">안녕하세요!</h1>
-          <h3 className=" text-lg text-dark-gray">
+          <h3 className="text-lg text-dark-gray">
             다른 사람들과 같은 곳을 바라보면서 <br /> 루틴에 활기를 찾아봐요
           </h3>
         </div>
       </div>
       <div className="absolute inset-x-0 bottom-5 mx-5 overflow-hidden rounded-full">
-        <div
-          className="relative bg-[#FFEB06] p-3 text-center font-extrabold text-[#6A2346] "
-          onClick={() => alert('로그인 해야댐')}
+        <a
+          className="relative block w-full cursor-pointer select-none bg-[#FFEB06] p-3 text-center font-extrabold text-[#6A2346]"
+          href={KAKAO_LOGIN_URL}
         >
           <div className="absolute inset-y-0 left-5 grid place-content-center">
             <img
-              src="public\kakaoTalk.png"
+              src="/kakaoTalk.png"
               alt=""
               className="h-7"
             />
           </div>
           <h1>카카오톡으로 로그인하기</h1>
-        </div>
+        </a>
       </div>
     </div>
   );