[Feature] 에러 토스트 임시 구현 (#130)

* chore: react-toastify 설치 * feat: fetcher에 임시 에러코드 토스트 추가 * feat: 어드민, 클라이언트에 css 및 토스트 컨테이너 추가 * fix: 서버일때만 에러 던지도록 수정 * chore: 불필요한 공백 삭제 * chore: JotaiProvider 밖으로 토스트 빼기
GDSC-Hongik · Sep 4, 2024 · 56b8a13 · 56b8a13
1 parent dbe8738
commit 56b8a13
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 17 deletions.
diff --git a/apps/admin/app/layout.tsx b/apps/admin/app/layout.tsx
@@ -1,10 +1,12 @@
 import "./global.css";
 import "wowds-ui/styles.css";
 import "@wow-class/ui/styles.css";
+import "react-toastify/dist/ReactToastify.css";
 
 import { JotaiProvider } from "components/JotaiProvider";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
+import { ToastContainer } from "react-toastify";
 
 export const metadata: Metadata = {
   title: {
@@ -47,6 +49,12 @@ const RootLayout = ({
   return (
     <html lang="ko">
       <body>
+        <ToastContainer
+          hideProgressBar
+          autoClose={4000}
+          closeButton={false}
+          limit={1}
+        />
         <JotaiProvider>
           {children}
           {modal}

diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -17,7 +17,8 @@
     "react-clock": "^5.0.0",
     "react-day-picker": "^9.0.8",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.0"
+    "react-hook-form": "^7.53.0",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@hookform/resolvers": "^3.9.0",

diff --git a/apps/client/app/layout.tsx b/apps/client/app/layout.tsx
@@ -1,8 +1,10 @@
 import "./global.css";
 import "wowds-ui/styles.css";
 import "@wow-class/ui/styles.css";
+import "react-toastify/dist/ReactToastify.css";
 
 import type { Metadata } from "next";
+import { ToastContainer } from "react-toastify";
 
 import { JotaiProvider } from "../components/JotaiProvider";
 
@@ -53,6 +55,12 @@ const RootLayout = ({
   return (
     <html lang="ko">
       <body>
+        <ToastContainer
+          hideProgressBar
+          autoClose={4000}
+          closeButton={false}
+          limit={1}
+        />
         <JotaiProvider>{children}</JotaiProvider>
       </body>
     </html>

diff --git a/apps/client/package.json b/apps/client/package.json
@@ -14,6 +14,7 @@
     "next": "^14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-toastify": "^10.0.5",
     "wowds-icons": "^0.1.3",
     "wowds-tokens": "^0.1.1"
   },

diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -14,10 +14,11 @@
     "@wow-class/typescript-config": "workspace:*",
     "jest": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "typescript": "^5.3.3",
-    "ts-jest": "^29.2.4"
+    "ts-jest": "^29.2.4",
+    "typescript": "^5.3.3"
   },
   "dependencies": {
-    "next": "^14.2.5"
+    "next": "^14.2.5",
+    "react-toastify": "^10.0.5"
   }
 }
diff --git a/packages/utils/src/fetcher/index.ts b/packages/utils/src/fetcher/index.ts
@@ -1,3 +1,5 @@
+import { toast } from "react-toastify";
+
 type ApiResponse<T = any> = Response & { data?: T; success?: boolean };
 
 type RequestInterceptor = (
@@ -7,6 +9,8 @@ type ResponseInterceptor<T = any> = (
   response: ApiResponse
 ) => ApiResponse<T> | Promise<ApiResponse<T>>;
 
+const isClient = typeof window !== "undefined";
+
 class Fetcher {
   private baseUrl: string;
   private defaultHeaders: HeadersInit;
@@ -68,16 +72,21 @@ class Fetcher {
     return response.text();
   }
 
-  private async handleError(response: Response) {
+  private async handleError(
+    response: Response,
+    data: {
+      errorCodeName: string;
+      errorMessage: string;
+    }
+  ) {
     if (!response.ok) {
-      const text = await response.text();
-      const error = new Error(
-        `HTTP Error: ${response.status} ${response.statusText}`
-      );
-      (error as any).response = response;
-      (error as any).responseText = text;
-
-      throw error;
+      const error = new Error();
+      error.message = data.errorMessage;
+      error.name = data.errorCodeName;
+
+      if (isClient) {
+        toast.error(error.message);
+      } else throw error;
     }
   }
 
@@ -96,10 +105,11 @@ class Fetcher {
 
     let response: ApiResponse = await fetch(fullUrl, fetchOptions);
 
-    await this.handleError(response);
+    const data = await this.parseJsonResponse(response);
+    await this.handleError(response, data);
 
     response = await this.interceptResponse(response);
-    response.data = await this.parseJsonResponse(response);
+    response.data = data;
 
     return response;
   }
@@ -162,8 +172,6 @@ class Fetcher {
   }
 }
 
-const isClient = typeof window !== "undefined";
-
 const fetcher = new Fetcher({
   baseUrl:
     process.env.NEXT_PUBLIC_VERCEL_ENV === "production"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml