feat: login api change

GBSWHS · Nov 2, 2023 · ea9c7cb · ea9c7cb
1 parent 785a9b9
commit ea9c7cb
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 104 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,8 @@
-import { Routes, Route, BrowserRouter } from 'react-router-dom'
+import { Routes, Route, BrowserRouter, Navigate } from 'react-router-dom'
 import Login from './router/Login'
 import User from './router/User'
 import Manager from './router/Manager'
-import { Toaster } from 'react-hot-toast'
 import { useEffect } from 'react'
-import AdminIndex from './router/admin/Index'
 import BusList from './router/admin/bus/List'
 import UserList from './router/admin/user/List'
 import UserCreate from './router/admin/user/Create'
@@ -34,14 +32,13 @@ function App() {
 
   return (
     <BrowserRouter>
-      <Toaster position='top-center' />
       <Routes>
         <Route path='/' element={<Login />} />
         <Route path='/manager' element={<AuthProvider type='BUS_ADMIN'><Manager /></AuthProvider>} />
         <Route path='/user' element={<AuthProvider type='USER'><User /></AuthProvider>} />
 
           <Route path='/admin'>
-            <Route path='' element={<AuthProvider type='ADMINISTRATOR'><AdminIndex /></AuthProvider>} />
+            <Route path='' element={<Navigate replace to="/home" />} />
 
             <Route path='bus' element={<AuthProvider type="ADMINISTRATOR"><BusList /></AuthProvider>} />
             <Route path='bus/create' element={<AuthProvider type="ADMINISTRATOR"><BusCreate /></AuthProvider>} />

diff --git a/src/main.tsx b/src/main.tsx
@@ -2,9 +2,29 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import { Toaster } from 'react-hot-toast'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    <Toaster position='top-center' toastOptions={{
+      duration: 3000,
+      error: {
+        icon: '❌',
+        style: {
+          borderRadius: '10px',
+          background: '#300',
+          color: '#fff',
+        }
+      },
+      success: {
+        icon: '👏',
+        style: {
+          borderRadius: '10px',
+          background: '#393',
+          color: '#fff',
+        }
+      },
+    }} />
     <App />
   </React.StrictMode>,
 )
diff --git a/src/router/Login.tsx b/src/router/Login.tsx
@@ -2,13 +2,15 @@ import { FormEvent, useEffect, useState } from 'react'
 import Container from '../components/Container'
 import logo from './../assets/logo.png'
 import toast from 'react-hot-toast'
+import { useNavigate } from 'react-router-dom'
 
 function Login() {
   const [type, setType] = useState<'student' | 'teacher'>('student')
   const [studentId, setStudentId] = useState<string>('')
   const [name, setName] = useState<string>('')
   const [phone, setPhone] = useState<string>('')
   const [password, setPassword] = useState<string>('')
+  const navigation = useNavigate()
   const switchType = () => {
     setType(type === 'student' ? 'teacher' : 'student')
   }
@@ -22,56 +24,25 @@ function Login() {
 
     if (type === 'student') {
       if (!studentId || !name || !phone) {
-        toast.error('모든 항목을 입력해주세요.',
-          {
-            duration: 3000,
-            icon: '❌',
-            style: {
-              borderRadius: '10px',
-              background: '#300',
-              color: '#fff',
-            }
-          }
-        )
+        toast.error('모든 항목을 입력해주세요.')
         return
       }
-      const res = await fetch('/api/user/login', {
+      const res = await fetch('/api/auth/user', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           student_id: studentId,
           phone_number: phone,
           name,
-          password: 'dummy'
         })
       })
 
       if (res.status !== 200) {
         try {
           const responseBody = await res.json()
-          toast.error(responseBody.detail,
-            {
-              duration: 3000,
-              icon: '❌',
-              style: {
-                borderRadius: '10px',
-                background: '#300',
-                color: '#fff',
-              }
-            }
-          )
+          toast.error(responseBody.detail)
         } catch {
-          toast.error('서버 오류 발생',
-            {
-              duration: 3000,
-              icon: '❌',
-              style: {
-                borderRadius: '10px',
-                background: '#300',
-                color: '#fff',
-              }
-            }
-          )
+          toast.error('서버 오류 발생')
         }
         return
       }
@@ -81,59 +52,26 @@ function Login() {
       localStorage.setItem('access_token', access_token)
       localStorage.setItem('totp_secret', totp_secret)
 
-      window.location.href = type === 'USER' ? '/user' : type === 'BUS_ADMIN' ? '/manager' : '/admin'
+      return navigation(type === 'USER' ? '/user' : type === 'BUS_ADMIN' ? '/manager' : '/admin')
     } else {
       if (!password) {
-        toast.error('모든 항목을 입력해주세요.',
-          {
-            duration: 3000,
-            icon: '❌',
-            style: {
-              borderRadius: '10px',
-              background: '#300',
-              color: '#fff',
-            }
-          }
-        )
+        toast.error('모든 항목을 입력해주세요.')
         return
       }
-      const res = await fetch('/api/user/login', {
+      const res = await fetch('/api/auth/admin', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          password,
-          phone_number: 'dummy',
-          name: 'dummy',
-          student_id: 'dummy'
+          password
         })
       })
 
       if (res.status !== 200) {
         try {
           const responseBody = await res.json()
-          toast.error(responseBody.detail,
-            {
-              duration: 3000,
-              icon: '❌',
-              style: {
-                borderRadius: '10px',
-                background: '#300',
-                color: '#fff',
-              }
-            }
-          )
+          toast.error(responseBody.detail)
         } catch {
-          toast.error('서버 오류 발생',
-            {
-              duration: 3000,
-              icon: '❌',
-              style: {
-                borderRadius: '10px',
-                background: '#300',
-                color: '#fff',
-              }
-            }
-          )
+          toast.error('서버 오류 발생')
         }
 
         // window.location.reload()
@@ -144,7 +82,7 @@ function Login() {
       toast.success('로그인 성공!')
       localStorage.setItem('access_token', access_token)
 
-      window.location.href = type === 'USER' ? '/user' : type === 'BUS_ADMIN' ? '/manager' : '/admin'
+      return navigation(type === 'USER' ? '/user' : type === 'BUS_ADMIN' ? '/manager' : '/admin')
     }
   }
 

diff --git a/src/router/Manager.tsx b/src/router/Manager.tsx
@@ -7,6 +7,7 @@ import { faBus, faHome, faUser, faXmark } from '@fortawesome/free-solid-svg-icon
 import Modal from 'react-modal'
 import useSWR from 'swr'
 import { fetcher } from '../common/fetcher'
+import { redirect } from 'react-router-dom'
 
 function Manager() {
   if (!localStorage.getItem('access_token')) window.location.href = '/'
@@ -98,7 +99,6 @@ function Manager() {
     // )
   }, [qrData])
 
-  // if data is loaded fetch /api/bus/id
   useEffect(() => {
     if (!data) return
     console.log(data)
@@ -111,18 +111,8 @@ function Manager() {
   }, [data])
 
   function errorHandling () {
-    toast.error('서버 오류 발생',
-      {
-        duration: 3000,
-        icon: '❌',
-        style: {
-          borderRadius: '10px',
-          background: '#300',
-          color: '#fff',
-        }
-      }
-    )
-    window.location.href = '/'
+    toast.error('서버 오류 발생')
+    redirect('/')
   }
 
   if (isLoading) return <Container>Loading...</Container>
@@ -134,17 +124,7 @@ function Manager() {
   const onBusStart = () => {
     if (!confirm('정말 버스를 출발할까요?')) return
 
-    toast.success('수고하셨습니다!',
-      {
-        duration: 3000,
-        icon: '🌸',
-        style: {
-          borderRadius: '10px',
-          background: '#393',
-          color: '#fff',
-        }
-      }
-    )
+    toast.success('수고하셨습니다!', { duration: 3000, icon: '🌸'})
     return
   }