[Feat] 어드민 API 예외처리

admin/src/apis/authAPI.ts

@@ -10,16 +10,12 @@ const headers = {
 export const AuthAPI = {
     async postAuth(body: PostAuthParams): Promise<PostAuthResponse> {
         try {
-            return new Promise((resolve) =>
-                resolve({
-                    accessToken: "access token",
-                })
-            );
             const response = await fetchWithTimeout(`${baseURL}`, {
                 method: "POST",
                 headers: headers,
                 body: JSON.stringify(body),
             });
+
             return response.json();
         } catch (error) {
             console.error("Error:", error);

admin/src/hooks/useFetch.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useErrorBoundary } from "react-error-boundary";
 
-export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>) {
+export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>, showError = true) {
     const { showBoundary } = useErrorBoundary();
 
     const [data, setData] = useState<T | null>(null);
@@ -18,8 +18,10 @@ export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>)
             setIsSuccess(!!data);
         } catch (error) {
             setIsError(true);
-            showBoundary(error);
             console.error(error);
+            if (showError) {
+                showBoundary(error);
+            }
         }
     };
 

admin/src/pages/Login/index.tsx

@@ -20,19 +20,27 @@ export default function Login() {
     const {
         data: token,
         isSuccess: isSuccessPostAuth,
+        isError: isErrorPostAuth,
         fetchData: postAuth,
-    } = useFetch<PostAuthResponse>(() => AuthAPI.postAuth({ adminId: id, password }));
+    } = useFetch<PostAuthResponse>(() => AuthAPI.postAuth({ adminId: id, password }), false);
 
     const isValidButton = id.length !== 0 && password.length !== 0;
 
     useEffect(() => {
         if (isSuccessPostAuth && token) {
-            setCookie(COOKIE_KEY.ACCESS_TOKEN, token.accessToken);
+            setCookie(COOKIE_KEY.ACCESS_TOKEN, token.accessToken, { path: "/" });
 
             setErrorMessage("");
             navigate("/lottery");
         }
     }, [isSuccessPostAuth, token]);
+    useEffect(() => {
+        if (isErrorPostAuth) {
+            setErrorMessage(
+                "아이디 또는 비밀번호가 잘못 되었습니다. 아이디와 비밀번호를 정확히 입력해 주세요."
+            );
+        }
+    }, [isErrorPostAuth]);
 
     const handleChangeId = (e: ChangeEvent<HTMLInputElement>) => {
         setId(e.target.value);

admin/src/utils/fetchWithTimeout.ts

@@ -3,12 +3,12 @@ export async function fetchWithTimeout(url: string, options: RequestInit = {}, t
     const id = setTimeout(() => controller.abort(), timeout);
     options.signal = controller.signal;
 
-    try {
-        const response = await fetch(url, options);
-        clearTimeout(id);
-        return response;
-    } catch (error) {
-        clearTimeout(id);
-        throw error;
+    const response = await fetch(url, options);
+    clearTimeout(id);
+
+    if (!response.ok) {
+        throw new Error(response.statusText);
     }
+
+    return response;
 }

client/src/utils/fetchWithTimeout.ts

@@ -3,12 +3,12 @@ export async function fetchWithTimeout(url: string, options: RequestInit = {}, t
     const id = setTimeout(() => controller.abort(), timeout);
     options.signal = controller.signal;
 
-    try {
-        const response = await fetch(url, options);
-        clearTimeout(id);
-        return response;
-    } catch (error) {
-        clearTimeout(id);
-        throw error;
+    const response = await fetch(url, options);
+    clearTimeout(id);
+
+    if (!response.ok) {
+        throw new Error(response.statusText);
     }
+
+    return response;
 }