[Feat/#138] 카카오로그인 구현 완료

src/apis/auth/usePostKakaoLogin.ts

@@ -0,0 +1,50 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosResponse } from 'axios';
+
+import { post } from '@apis/instance';
+
+import { END_POINT, queryKey } from '@constants';
+import { useEasyNavigate } from '@hooks';
+
+import { ApiResponseType, LoginSuccessResponse } from '@types';
+
+const postKakaoLogin = async (
+  authCode: string
+): Promise<AxiosResponse<ApiResponseType<LoginSuccessResponse>>> => {
+  const response = await post<ApiResponseType<LoginSuccessResponse>>(
+    END_POINT.KAKAO_LOGIN,
+    {
+      socialType: 'KAKAO',
+    },
+    {
+      headers: {
+        Authorization: authCode,
+      },
+    }
+  );
+
+  return response;
+};
+
+export const usePostKakaoLogin = () => {
+  const queryClient = useQueryClient();
+  const { goHomePage } = useEasyNavigate();
+
+  return useMutation({
+    mutationFn: (authCode: string) => postKakaoLogin(authCode),
+    onSuccess: (response) => {
+      const resData = response.data.data;
+      if (resData) {
+        const { userId, userName } = resData;
+        const user = { userId, userName };
+        localStorage.setItem('user', JSON.stringify(user));
+
+        queryClient.invalidateQueries({ queryKey: [queryKey.KAKAO_LOGIN] });
+        goHomePage();
+      }
+    },
+    onError: (error) => {
+      console.log(error);
+    },
+  });
+};

src/apis/instance.ts

@@ -6,10 +6,6 @@ export const instance = axios.create({
   baseURL: BASE_URL,
 
   withCredentials: false,
-
-  // headers: {
-  //   // Authorization: `Bearer 엑세스 토큰`,
-  // }, 서버에서 set-cookie로 줘서 만약 필요 없으면 지울 예정
 });
 
 export function get<T>(...args: Parameters<typeof instance.get>) {

src/components/common/SocialLoginButton/SocialLoginButton.tsx

@@ -13,12 +13,17 @@ const platformIcon = {
   kakao: <IcKakao />,
 };
 
-const SocialLoginButton = ({ platform, children }: SocialLoginButtonProps) => {
+const SocialLoginButton = ({
+  platform,
+  children,
+  onClick,
+}: SocialLoginButtonProps) => {
   return (
     <button
       className={buttonStyle({
         platform,
       })}
+      onClick={onClick}
     >
       <span className={iconStyle}>{platformIcon[platform]}</span>
       {children}

src/constants/apis/api.ts

@@ -2,4 +2,5 @@ export const BASE_URL = import.meta.env.VITE_APP_BASE_URL;
 
 export const END_POINT = {
   FETCH_STORE_RANK: '/api/v1/store/rank',
+  KAKAO_LOGIN: '/api/v1/user/login',
 } as const;

src/constants/apis/queryKey.ts

@@ -1,3 +1,4 @@
 export const queryKey = {
   STORE_RANK: 'storeRank',
+  KAKAO_LOGIN: 'kakaoLogin',
 } as const;

src/main.tsx

@@ -1,10 +1,6 @@
-import { StrictMode } from 'react';
+// import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import App from './App.tsx';
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+createRoot(document.getElementById('root')!).render(<App />);

src/pages/auth/page/LoginPage/LoginPage.tsx

@@ -1,6 +1,9 @@
+import { useEffect } from 'react';
+
 import { SocialLoginButton } from '@components';
 import { LoginPageImage } from '@constants';
 import { useEasyNavigate } from '@hooks';
+import { isLoggedIn } from '@utils';
 
 import { ImgLogo } from '@svgs';
 
@@ -16,6 +19,19 @@ import {
 
 const LoginPage = () => {
   const { goHomePage } = useEasyNavigate();
+  const kakaoLoginUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${
+    import.meta.env.VITE_REST_API_KEY
+  }&redirect_uri=${import.meta.env.VITE_REDIRECT_URI}&response_type=code`;
+
+  const handleLoginClick = () => {
+    window.location.replace(kakaoLoginUrl);
+  };
+
+  useEffect(() => {
+    if (isLoggedIn()) {
+      goHomePage();
+    }
+  }, [goHomePage]);
   return (
     <div className={loginPageStlye}>
       <div className={titleWrapper}>
@@ -28,12 +44,10 @@ const LoginPage = () => {
       <div className={imageButtonContainer}>
         <img src={LoginPageImage} className={loginMainImage} />
         <div className={loginButtonWrapper}>
-          <SocialLoginButton platform="kakao">
+          <SocialLoginButton platform="kakao" onClick={handleLoginClick}>
             카카오로 시작하기
           </SocialLoginButton>
-          <u className={noLoginButton} onClick={goHomePage}>
-            로그인 없이 둘러보기
-          </u>
+          <u className={noLoginButton}>로그인 없이 둘러보기</u>
         </div>
       </div>
     </div>

src/pages/auth/page/Redirection/Redirection.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+import { usePostKakaoLogin } from '@apis/auth/usePostKakaoLogin';
+
+const Redirection = () => {
+  const code: string =
+    new URL(window.location.href).searchParams.get('code') || '';
+  window.history.forward();
+  const { mutate } = usePostKakaoLogin();
+
+  useEffect(() => {
+    if (code) mutate(code);
+  }, [code, mutate]);
+
+  return <div></div>;
+};
+
+export default Redirection;

src/pages/auth/page/index.ts

@@ -1,2 +1,4 @@
 import LoginPage from './LoginPage/LoginPage';
-export { LoginPage };
+import Redirection from './Redirection/Redirection';
+
+export { LoginPage, Redirection };

src/routes/authRoutes.tsx

@@ -1,15 +1,18 @@
-import { LoginPage } from '@pages/auth/page';
+import { LoginPage, Redirection } from '@pages/auth/page';
 
 import routePath from './routePath';
 
 import { RouteType } from '@types';
 
-
 const authRoutes: RouteType[] = [
   {
     path: routePath.LOGINPAGE,
     element: <LoginPage />,
   },
+  {
+    path: routePath.KAKAO_REDIRECTION,
+    element: <Redirection />,
+  },
 ];
 
 export default authRoutes;

src/routes/routePath.ts

@@ -1,5 +1,6 @@
 const authPages = {
   LOGINPAGE: '/login',
+  KAKAO_REDIRECTION: '/kakao/redirection',
 };
 
 const homePages = {
@@ -12,7 +13,7 @@ const designListPages = {
 
 const myPages = {
   MYPAGE: '/mypage',
-  LIKELISTPAGE: '/mypage/like-list'
+  LIKELISTPAGE: '/mypage/like-list',
 };
 
 const storePages = {

src/types/apis/auth/index.ts

@@ -0,0 +1,4 @@
+export interface LoginSuccessResponse {
+  userId: number;
+  userName: string;
+}

src/types/apis/commonType.ts

@@ -1,3 +1,5 @@
+// 공통으로 사용되는 타입들을 정의합니다.
+
 export interface ApiResponseType<T> {
   code: number;
   message: string;

src/types/index.ts

@@ -2,7 +2,6 @@ export * from './routeType';
 export * from './toastType';
 export * from './orderFormType';
 export * from './types';
-
 export * from './apis/commonType';
 export * from './apis/auth/index';
 export * from './apis/designList/index';

src/utils/auth.ts

@@ -0,0 +1,7 @@
+export const getToken = () => {
+  return localStorage.getItem('user');
+};
+
+export const isLoggedIn = () => {
+  return getToken() ? true : false;
+};

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './getMarkerIcon';
-export * from './formatHours';
+export * from './formatHours';
+export * from './auth';