Merge pull request #42 from boostcampwm-2022/feat/#37-K

Feat/#37-K: 로그인 API 연동

Author: se030

client/package.json

@@ -14,6 +14,7 @@
     "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-loader-spinner": "^5.3.4",
     "react-router-dom": "^6.4.3"
   },
   "devDependencies": {

client/src/App.tsx

@@ -1,16 +1,35 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-
-import { LoginPage, WorkspacePage } from './pages';
-import 'style/reset.scss';
+import { useState, useEffect } from 'react';
+import { Routes, Route, useNavigate } from 'react-router-dom';
+import { getAuth } from 'src/apis/auth';
+import UserContext, { User } from 'src/contexts/user';
+import { LoginPage, OAuthPage, WorkspacePage } from 'src/pages';
+import 'styles/reset.scss';
 
 function App() {
+  const [user, setUser] = useState<User>({ id: -1, name: '', avatarUrl: '' });
+  const navigate = useNavigate();
+
+  const autoLogin = async () => {
+    const currentUser = await getAuth();
+
+    if (!currentUser) return;
+
+    setUser(currentUser);
+    navigate('/workspace');
+  };
+
+  useEffect(() => {
+    autoLogin();
+  }, []);
+
   return (
-    <BrowserRouter>
+    <UserContext.Provider value={{ user, setUser }}>
       <Routes>
         <Route path="/" element={<LoginPage />} />
+        <Route path="/oauth" element={<OAuthPage />} />
         <Route path="/workspace" element={<WorkspacePage />} />
       </Routes>
-    </BrowserRouter>
+    </UserContext.Provider>
   );
 }
 

client/src/apis/auth.ts

@@ -0,0 +1,26 @@
+import { http } from './http';
+import { OK, CREATED } from './http-status';
+
+export const getAuth = async () => {
+  const res = await http.get(`/auth`);
+
+  if (res.status !== OK) throw new Error();
+
+  return res.data;
+};
+
+export const postAuthLogin = async (code: string) => {
+  const res = await http.post(`/auth/login`, { code });
+
+  if (res.status !== CREATED) throw new Error();
+
+  return res.data;
+};
+
+export const deleteAuthlogout = async () => {
+  const res = await http.delete(`/auth/logout`);
+
+  if (res.status !== OK) throw new Error();
+
+  return;
+};

client/src/apis/http-status.ts

@@ -0,0 +1,7 @@
+export const OK = 200;
+export const CREATED = 201;
+
+export const BAD_REQUEST = 400;
+export const UNAUTHORIZED = 401;
+
+export const INTERNAL_SERVER_ERROR = 500;

client/src/apis/http.ts

@@ -1,7 +1,8 @@
 import axios from 'axios';
+import env from 'config';
 
-const SERVER_URL = 'http://localhost:8080';
+const SERVER_PATH = env.SERVER_PATH;
 
 export const http = axios.create({
-  baseURL: SERVER_URL,
+  baseURL: SERVER_PATH,
 });

client/src/apis/index.ts

@@ -1,11 +1,10 @@
 import { http } from './http';
+import { OK } from './http-status';
 
 export const getWorkspaces = async (userId: number) => {
-  try {
-    const { data } = await http.get(`/user/${userId}/workspace`);
+  const res = await http.get(`/user/${userId}/workspace`);
 
-    return data;
-  } catch (e) {
-    return;
-  }
+  if (res.status !== OK) throw new Error();
+
+  return res.data;
 };

client/src/apis/user.ts

@@ -1,4 +1,4 @@
-@import 'style/color.scss';
+@import 'styles/color.module.scss';
 
 .modal {
   z-index: 100;

client/src/components/SelectModal/style.module.scss

@@ -1,4 +1,4 @@
-@import "../../styles/color.scss";
+@import 'styles/color.module.scss';
 
 .workspace__container {
   background-color: $primary-100;

client/src/components/WorkspaceList/style.module.scss

@@ -28,7 +28,7 @@ function WorkspaceModal({
       <>
         <span className={style.text}>{text}</span>
         <input className={style.input} type="text" onChange={onInput} />
-        <Button text={btnText} isDisable={!inputValue.length} />
+        <Button text={btnText} isDisabled={!inputValue.length} />
       </>
     </Modal>
   );