From 9ffd50e57e5ea47d53e79c014ac2100901561213 Mon Sep 17 00:00:00 2001
From: PMtHk <zooby88@gmail.com>
Date: Thu, 28 Nov 2024 14:57:32 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20errorComponent=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/routes/_auth.account.index.tsx | 31 ++++++++++++++----
 apps/client/src/routes/_auth.tsx              | 32 +++++++++++++++++--
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/routes/_auth.account.index.tsx b/apps/client/src/routes/_auth.account.index.tsx
index 8ba5e34b..dd507692 100644
--- a/apps/client/src/routes/_auth.account.index.tsx
+++ b/apps/client/src/routes/_auth.account.index.tsx
@@ -1,22 +1,39 @@
+import { AlertTriangle } from 'lucide-react';
 import { createFileRoute } from '@tanstack/react-router';
 import { GetProjectsResponseDTO } from '@/types/project';
 import AccountOverview from '@/pages/AccountOverview';
 import { axiosInstance } from '@/lib/axios.ts';
+import { Card, CardContent } from '@/components/ui/card.tsx';
+import { Button } from '@/components/ui/button.tsx';
 
 export const Route = createFileRoute('/_auth/account/')({
   loader: ({ context: { queryClient } }) => {
     queryClient.ensureQueryData({
       queryKey: ['projects'],
       queryFn: async () => {
-        try {
-          const projects = await axiosInstance.get<GetProjectsResponseDTO>('/projects');
-          return projects.data.result;
-        } catch {
-          throw new Error('Failed to fetch projects');
-        }
+        const projects = await axiosInstance.get<GetProjectsResponseDTO>('/projects');
+        return projects.data.result;
       },
     });
   },
-  errorComponent: () => <div>Failed to load projects</div>,
+  errorComponent: ({ error, reset }) => (
+    <div className="fixed inset-0 flex items-center justify-center bg-black/30">
+      <Card className="w-full max-w-md">
+        <CardContent className="p-6 text-center">
+          <AlertTriangle className="mx-auto h-12 w-12 text-yellow-500" />
+          <h2 className="mt-6 text-2xl font-semibold text-gray-900">Failed to load projects</h2>
+          <p className="mt-2 text-gray-600">
+            {error.message || 'An error occurred while loading the projects'}
+          </p>
+          <div className="mt-8 space-x-4">
+            <Button variant="outline" onClick={() => window.history.back()}>
+              Go Back
+            </Button>
+            <Button onClick={reset}>Try Again</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  ),
   component: AccountOverview,
 });
diff --git a/apps/client/src/routes/_auth.tsx b/apps/client/src/routes/_auth.tsx
index 3df067e4..92ba5627 100644
--- a/apps/client/src/routes/_auth.tsx
+++ b/apps/client/src/routes/_auth.tsx
@@ -1,6 +1,6 @@
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
 import { Link, Outlet, createFileRoute, redirect, useParams } from '@tanstack/react-router';
-import { ChevronsUpDownIcon, LogOut, UserPen } from 'lucide-react';
+import { AlertTriangle, ChevronsUpDownIcon, LogOut, UserPen } from 'lucide-react';
 import { SlashIcon } from '@radix-ui/react-icons';
 import { ChangeEvent, useState } from 'react';
 import axios from 'axios';
@@ -25,6 +25,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { useToast } from '@/lib/useToast';
+import { Card, CardContent } from '@/components/ui/card.tsx';
 
 type Project = {
   id: number;
@@ -60,7 +61,34 @@ export const Route = createFileRoute('/_auth')({
       },
     });
   },
-  errorComponent: () => <div>Failed to load projects</div>,
+
+  errorComponent: ({ error, reset }) => (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <Card className="w-full max-w-md border bg-white">
+        <CardContent className="space-y-6 p-6 text-center">
+          <AlertTriangle className="mx-auto h-12 w-12 text-yellow-500" />
+          <div className="space-y-2">
+            <h2 className="text-2xl font-semibold text-gray-900">Failed to load projects</h2>
+            <p className="text-sm text-gray-500">
+              {error.message || 'An error occurred while loading the projects. Please try again.'}
+            </p>
+          </div>
+          <div className="flex justify-center space-x-3">
+            <Button
+              variant="outline"
+              onClick={() => window.history.back()}
+              className="hover:bg-[#f2f2f2] hover:text-black"
+            >
+              Go Back
+            </Button>
+            <Button onClick={reset} className="bg-black hover:bg-black/80">
+              Try Again
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  ),
   component: AuthLayout,
 });