✨ Feature(#103): Fallback 컴포넌트 수정

src/App.tsx

@@ -12,11 +12,11 @@ import { Toaster } from 'react-hot-toast';
 import Loader from '@common/layout/Loader';
 import QueryErrorBoundary from '@features/error/ui/QueryErrorBoundary';
 import { Suspense } from 'react';
-import { onError } from '@features/error/service/errorUtils';
+import { handleError } from '@features/error/service/errorUtils';
 
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
-    onError,
+    onError: handleError,
   }),
   defaultOptions: {
     mutations: { networkMode: 'always' },

src/common/layout/Loader.tsx

@@ -4,7 +4,6 @@ export default function Loader() {
   return (
     <LoadingWrapper>
       <LoadingSpinner />
-      <span>Loading...</span>
     </LoadingWrapper>
   );
 }

src/features/error/constants.ts

@@ -0,0 +1,7 @@
+export const HTTP_STATUS_MESSAGE = {
+  400: '잘못된 요청입니다.',
+  401: '엑세스 권한이 없습니다.',
+  403: '리소스에 엑세스할 수 없습니다.',
+  404: '존재하지 않는 페이지입니다.',
+  default: '서버 에러입니다',
+} as const;

src/features/error/service/errorUtils.ts

@@ -1,12 +1,23 @@
+import { HTTP_STATUS_MESSAGE } from '@features/error/constants';
 import { DefaultError, Query } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 
-type OnError = (
+type handleError = (
   error: DefaultError,
   query: Query<unknown, unknown, unknown>
 ) => void;
-export const onError: OnError = (error, query) => {
+
+export const handleError: handleError = (error, query) => {
   if (query.state.data !== undefined) {
-    toast.error(`백그라운드 데이터 가져오기 실패: ${error.message}`);
+    return toast.error(`백그라운드 데이터 가져오기 실패: ${error.message}`);
   }
 };
+
+type StatusCode = keyof typeof HTTP_STATUS_MESSAGE;
+
+export const getErrorMessage = (statusCode: number): string => {
+  // 상태 코드가 객체의 키에 존재하는지 확인
+  return (
+    HTTP_STATUS_MESSAGE[statusCode as StatusCode] || HTTP_STATUS_MESSAGE.default
+  );
+};

src/features/error/ui/Fallback.tsx

@@ -1,13 +1,30 @@
+import { isAxiosError } from 'axios';
 import { FallbackWrapper } from './styles';
 import { FallbackProps } from 'react-error-boundary';
+import { getErrorMessage } from '@features/error/service/errorUtils';
 
 export default function Fallback({ error, resetErrorBoundary }: FallbackProps) {
-  return (
-    <FallbackWrapper>
-      <p>{error.toString()}</p>
-      <p>오류가 발생했습니다.</p>
-      <p>재시도 해주세요.</p>
-      <button onClick={resetErrorBoundary}>재시도</button>
-    </FallbackWrapper>
-  );
+  if (!isAxiosError(error)) {
+    return <></>;
+  }
+  //스테이터스 코드가 있을 때때
+  if (error.status) {
+    return (
+      <FallbackWrapper>
+        <p>{getErrorMessage(error.status)}</p>
+        <p>재시도 해주세요.</p>
+        <button onClick={resetErrorBoundary}>재시도</button>
+      </FallbackWrapper>
+    );
+  }
+
+  if (error.code && error.code === 'ERR_NETWORK') {
+    return (
+      <FallbackWrapper>
+        <p>네트워크 에러가 발생했습니다.</p>
+        <p>재시도 해주세요.</p>
+        <button onClick={resetErrorBoundary}>재시도</button>
+      </FallbackWrapper>
+    );
+  }
 }

src/features/error/ui/NotFound.tsx

@@ -0,0 +1,11 @@
+import { Link } from 'react-router-dom';
+
+export default function NotFoundPage() {
+  return (
+    <div>
+      <h1>404</h1>
+      <p>페이지를 찾을 수 없습니다.</p>
+      <Link to="/learn">홈으로 돌아가기</Link>
+    </div>
+  );
+}

src/features/quiz/queries.ts

@@ -1,5 +1,5 @@
 import quizzesApis from '@features/quiz/apis';
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 const quizKeys = {
   all: ['quizzes'],

src/features/user/ui/TotalResults.tsx

@@ -29,7 +29,7 @@ export default function TotalResults({
   const { mutate: experienceUpdate, isIdle: isexperienceIdle } =
     experienceQuery.patch();
   const { mutate: updateProgress, isIdle: isProgressIdle } =
-    partProgressQuery.put();
+    partProgressQuery.updatePartProgress();
 
   const navigate = useNavigate();
 

src/route/Router.tsx

@@ -5,6 +5,7 @@ import Quest from '@/pages/quest/Quest';
 import Ranking from '@/pages/ranking/Ranking';
 import Quiz from '@/pages/quiz/Quiz';
 import Profile from '@/pages/profile/Profile';
+import NotFoundPage from '@features/error/ui/NotFound';
 
 export default function Router() {
   return (
@@ -18,6 +19,7 @@ export default function Router() {
           <Route path="/quiz" element={<Quiz />} />
           <Route path="/store" element={<Store />} />
           <Route path="/profile" element={<Profile />} />
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </BrowserRouter>
     </>