Merge pull request #258 from boostcampwm-2024/fix/login

[FE] 로그인 에러 처리

Author: dongree

FE/src/components/Login/index.tsx

@@ -5,27 +5,30 @@ import { FormEvent, useEffect, useState } from 'react';
 import { login } from 'service/auth';
 import useAuthStore from 'store/useAuthStore.ts';
 import Overay from '../ModalOveray.tsx';
+import Toast from 'components/Toast.tsx';
 
 export default function Login() {
   const { isOpen, toggleModal } = useLoginModalStore();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const { setIsLogin } = useAuthStore();
-  const [errorCode, setErrorCode] = useState<number>(200);
 
   useEffect(() => {
-    setEmail('');
-    setPassword('');
+    setEmail('jindding');
+    setPassword('1234');
   }, [isOpen]);
 
   if (!isOpen) return;
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const res = await login(email, password);
+    if ('message' in res) {
+      let message = '';
+      if (res.statusCode === 401) message = '존재하지 않는 사용자입니다.';
+      else if (res.statusCode === 400) message = '잘못된 입력형식입니다.';
 
-    if ('error' in res) {
-      setErrorCode(res.statusCode);
+      Toast({ message, type: 'error' });
       return;
     }
 
@@ -40,8 +43,12 @@ export default function Login() {
         import.meta.env.VITE_TEST_PW,
       );
 
-      if ('error' in res) {
-        setErrorCode(res.statusCode);
+      if ('message' in res) {
+        let message = '';
+        if (res.statusCode === 401) message = '존재하지 않는 사용자입니다.';
+        else if (res.statusCode === 400) message = '잘못된 입력형식입니다.';
+
+        Toast({ message, type: 'error' });
         return;
       }
 
@@ -58,17 +65,9 @@ export default function Login() {
     <>
       <Overay onClick={() => toggleModal()} />
       <section className='fixed left-1/2 top-1/2 flex w-[500px] -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl bg-white p-20 shadow-lg'>
-        <h2 className='text-3xl font-bold'>JuGa</h2>
-        <p className='my-3 h-5 text-sm font-semibold text-juga-red-60'>
-          {
-            {
-              '401': '존재하지 않는 사용자입니다.',
-              '400': '잘못된 입력형식입니다.',
-            }[errorCode]
-          }
-        </p>
-        <form className='mb-2 flex flex-col' onSubmit={handleSubmit}>
-          <div className='my-10 flex flex-col gap-2'>
+        <h2 className='mb-5 text-3xl font-bold'>JuGa</h2>
+        <form className='flex flex-col mb-2' onSubmit={handleSubmit}>
+          <div className='flex flex-col gap-2 my-10'>
             <Input
               type='text'
               placeholder='아이디'
@@ -84,7 +83,7 @@ export default function Login() {
               autoComplete='current-password'
             />
           </div>
-          <button className='rounded-3xl bg-juga-blue-40 py-2 text-white transition hover:bg-juga-blue-50'>
+          <button className='py-2 text-white transition rounded-3xl bg-juga-blue-40 hover:bg-juga-blue-50'>
             로그인
           </button>
         </form>

FE/src/store/useAuthStore.ts

@@ -1,25 +1,15 @@
 import { create } from 'zustand';
 
 type AuthStore = {
-  accessToken: string | null;
   isLogin: boolean;
-  setAccessToken: (token: string) => void;
   setIsLogin: (isLogin: boolean) => void;
-  resetToken: () => void;
 };
 
 const useAuthStore = create<AuthStore>((set) => ({
-  accessToken: null,
   isLogin: false,
   setIsLogin: (isLogin: boolean) => {
     set({ isLogin });
   },
-  setAccessToken: (token: string) => {
-    set({ accessToken: token, isLogin: token !== null });
-  },
-  resetToken: () => {
-    set({ accessToken: null, isLogin: false });
-  },
 }));
 
 export default useAuthStore;

FE/src/types.ts

@@ -3,9 +3,10 @@ export type LoginSuccessResponse = {
 };
 
 export type LoginFailResponse = {
-  error: string;
-  message: string[];
+  message: string;
   statusCode: number;
+  timestamp: string;
+  path: string;
 };
 
 export type TiemCategory = 'D' | 'W' | 'M' | 'Y';