Merge pull request #138 from Team-Lecue/feature/Login

[ Login ] dev 머지!

src/Login/api/getLoginToken.ts

@@ -0,0 +1,31 @@
+import axios from 'axios';
+
+import {
+  KAKAO_BASE_URL,
+  KAKAO_REDIRECT_URI,
+  KAKAO_REST_API_KEY,
+} from './oAuth';
+
+export const getLoginToken = async () => {
+  const AUTHORIZE_CODE = new URL(window.location.href).searchParams.get('code');
+  const GRANT_TYPE = 'authorization_code';
+
+  if (AUTHORIZE_CODE) {
+    try {
+      const response = await axios.post(
+        `${KAKAO_BASE_URL}/token?grant_type=${GRANT_TYPE}&client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&code=${AUTHORIZE_CODE}`,
+        {},
+        {
+          headers: {
+            'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
+          },
+        },
+      );
+
+      return response.data.access_token;
+    } catch (error) {
+      console.error('로그인 토큰을 가져오는 중 에러 발생:', error);
+      throw error;
+    }
+  }
+};

src/Login/api/oAuth.ts

@@ -0,0 +1,5 @@
+export const KAKAO_REST_API_KEY = import.meta.env.VITE_KAKAO_API_KEY;
+export const KAKAO_REDIRECT_URI = import.meta.env.VITE_KAKAO_REDIRECT_URI;
+export const KAKAO_BASE_URL = import.meta.env.VITE_KAKAO_BASE_URL;
+
+export const KAKAO_AUTH_URL = `${KAKAO_BASE_URL}/authorize?response_type=code&client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}`;

src/Login/api/postLoginToken.ts

@@ -0,0 +1,21 @@
+import { api } from '../../libs/api';
+
+export const postLoginToken = async (token: string) => {
+  const response = await api.post(
+    '/api/login',
+    {
+      socialPlatform: 'KAKAO',
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  return {
+    nickname: response.data.data.nickname,
+    tokenDto: response.data.data.tokenDto,
+  };
+};

src/Login/components/LoginBtnContainer/index.tsx

@@ -1,10 +1,10 @@
 import { BtnKakaologin, ImgKakaoStarOrange } from '../../../assets';
+import { KAKAO_AUTH_URL } from '../../api/oAuth';
 import * as S from './LoginBtnContainer.style';
 
 function LoginBtnContainer() {
   const handleClickLoginBtn = () => {
-    //로그인 버튼 클릭 시 이벤트
-    alert('로그인 버튼 클릭');
+    window.location.href = KAKAO_AUTH_URL;
   };
 
   return (

src/Login/components/LoginCallback/LoginCallback.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { getLoginToken } from '../../api/getLoginToken';
+import { postLoginToken } from '../../api/postLoginToken';
+
+function LoginCallback() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const tokenRes = await getLoginToken();
+
+        const { nickname, tokenDto } = await postLoginToken(tokenRes);
+
+        if (nickname === null) {
+          navigate('/register', { state: { token: tokenDto.accessToken } });
+        } else {
+          window.localStorage.setItem('token', tokenDto.accessToken);
+          window.localStorage.setItem('nickname', nickname);
+        }
+      } catch (error) {
+        console.error('로딩-fetchData() 에러 발생:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return <div>로딩중</div>;
+}
+
+export default LoginCallback;

src/Register/components/NicknameInput/index.tsx

@@ -2,13 +2,16 @@ import React, { useEffect, useState } from 'react';
 
 import * as S from './NicknameInput.style';
 
-type setIsActiveProps = {
+interface NicknameInputProps {
+  nickname: string;
+  setNickname: React.Dispatch<React.SetStateAction<string>>;
   setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
-};
+}
+
+function NicknameInput(props: NicknameInputProps) {
+  const { nickname, setNickname, setIsActive } = props;
 
-function NicknameInput({ setIsActive }: setIsActiveProps) {
   const [wordCnt, setWordCnt] = useState(0);
-  const [nickname, setNickname] = useState('');
 
   /** 영어, 숫자, 문자, 공백인지 체크하는 정규식 함수 */
   const checkInputRange = (str: string) => {

src/Register/components/SubmitButton/index.tsx

@@ -3,9 +3,15 @@ import * as S from './SubmitButton.style';
 
 type SubmitButtonProps = {
   isActive: boolean;
+  token: string;
+  nickname: string;
 };
 
 function SubmitButton({ isActive }: SubmitButtonProps) {
+  const handelClickSubmitBtn = (token: string, nickname: string) => {
+    //닉네임 PATCH API 연결하기
+  };
+
   return (
     <S.ButtonWrapper>
       <Button variant="complete" disabled={!isActive}>

src/Register/page/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import NicknameInput from '../components/NicknameInput';
 import RegisterLogo from '../components/RegisterLogo';
@@ -7,12 +8,20 @@ import * as S from './Register.style';
 
 function Register() {
   const [isActive, setIsActive] = useState(false);
+  const [nickname, setNickname] = useState('');
+  const location = useLocation();
+
+  const { token } = location.state && location.state;
 
   return (
     <S.Wrapper>
       <RegisterLogo />
-      <NicknameInput setIsActive={setIsActive} />
-      <SubmitButton isActive={isActive} />
+      <NicknameInput
+        setIsActive={setIsActive}
+        nickname={nickname}
+        setNickname={setNickname}
+      />
+      <SubmitButton isActive={isActive} nickname={nickname} token={token} />
     </S.Wrapper>
   );
 }

src/Router.tsx

@@ -6,6 +6,7 @@ import DetailPage from './Detail/page/DetailPage';
 import HealthTest from './HealthTest';
 import Home from './Home/page';
 import LecueNotePage from './LecueNote/page/LeceuNotePage';
+import LoginCallback from './Login/components/LoginCallback/LoginCallback';
 import Login from './Login/page';
 import Mypage from './Mypage/page';
 import Register from './Register/page';
@@ -47,6 +48,7 @@ function Router() {
         <Route path="/create-book" element={<CreateBook />} />
         <Route path="/sticker-attach" element={<StickerAttach />} />
         <Route path="/select-book" element={<SelectBookPage />} />
+        <Route path="/loading" element={<LoginCallback />} />
       </Routes>
     </BrowserRouter>
   );

src/main.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import App from './App.tsx';
@@ -20,7 +19,7 @@ import App from './App.tsx';
 // });
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  // <React.StrictMode>
+  <App />,
+  // </React.StrictMode>,
 );