From b83e741d62a66651ed31f19f2257154c0e986c8d Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Wed, 20 Nov 2024 14:04:31 +0900
Subject: [PATCH 1/7] =?UTF-8?q?refactor:=20=EB=84=A4=ED=8A=B8=EC=9B=8C?=
 =?UTF-8?q?=ED=81=AC=20=EC=97=90=EB=9F=AC=EC=99=80=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EB=B6=84=EA=B8=B0=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?#407?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/fetcher.ts | 8 ++++++--
 frontend/src/utils/error.ts  | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/apis/fetcher.ts b/frontend/src/apis/fetcher.ts
index fea16a575..9d015755f 100644
--- a/frontend/src/apis/fetcher.ts
+++ b/frontend/src/apis/fetcher.ts
@@ -1,4 +1,4 @@
-import { CustomError, NetworkError } from '@/utils/error';
+import { CustomError, NetworkError, UnhandledError } from '@/utils/error';
 
 interface RequestProps {
   url: string;
@@ -26,11 +26,15 @@ const fetcher = {
 
       return response;
     } catch (error) {
+      if (error instanceof TypeError && !navigator.onLine) {
+        throw new NetworkError();
+      }
+
       if (error instanceof CustomError) {
         throw error;
       }
 
-      throw new NetworkError();
+      throw new UnhandledError();
     }
   },
 
diff --git a/frontend/src/utils/error.ts b/frontend/src/utils/error.ts
index 0f6804361..55506bace 100644
--- a/frontend/src/utils/error.ts
+++ b/frontend/src/utils/error.ts
@@ -23,3 +23,8 @@ export class NetworkError extends Error {
   status = 555;
   message = '네트워크가 불안정해요. 다시 시도해주세요!';
 }
+
+export class UnhandledError extends Error {
+  status = 5002;
+  message = '예기치 못한 에러가 발생했어요. 관리자에게 문의 바랍니다.';
+}

From c62e279765b70b420650e6d2a5df2a0752212a20 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Wed, 20 Nov 2024 14:05:26 +0900
Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20=EC=97=90=EB=9F=AC=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EC=BD=94=EB=93=9C=20=EC=83=81=EC=88=98=ED=99=94=20?=
 =?UTF-8?q?#407?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/constants/errorStatus.ts | 3 +++
 frontend/src/utils/error.ts           | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/constants/errorStatus.ts

diff --git a/frontend/src/constants/errorStatus.ts b/frontend/src/constants/errorStatus.ts
new file mode 100644
index 000000000..1202f296b
--- /dev/null
+++ b/frontend/src/constants/errorStatus.ts
@@ -0,0 +1,3 @@
+export const SERVER_ERROR_STATUS = 500;
+export const NETWORK_ERROR_STATUS = 5001;
+export const UNHANDLED_ERROR_STATUS = 5002;
diff --git a/frontend/src/utils/error.ts b/frontend/src/utils/error.ts
index 55506bace..58c1cab35 100644
--- a/frontend/src/utils/error.ts
+++ b/frontend/src/utils/error.ts
@@ -1,3 +1,4 @@
+import { NETWORK_ERROR_STATUS, UNHANDLED_ERROR_STATUS } from '@/constants/errorStatus';
 import { ERROR_MESSAGE } from '@/constants/message';
 import { ErrorCode } from '@/types/error';
 
@@ -20,11 +21,11 @@ export class CustomError extends Error {
 }
 
 export class NetworkError extends Error {
-  status = 555;
+  status = NETWORK_ERROR_STATUS;
   message = '네트워크가 불안정해요. 다시 시도해주세요!';
 }
 
 export class UnhandledError extends Error {
-  status = 5002;
+  status = UNHANDLED_ERROR_STATUS;
   message = '예기치 못한 에러가 발생했어요. 관리자에게 문의 바랍니다.';
 }

From fcc2e93c5df31a47f04668c0486318b9bd036e59 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Wed, 20 Nov 2024 14:06:11 +0900
Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20=EC=B2=98=EB=A6=AC=EB=90=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=97=90=EB=9F=AC=EB=8F=84=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=8F=B4=EB=B0=B1=20UI=EB=A5=BC=20?=
 =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A3=BC=EA=B3=A0=20sentry=EB=A1=9C=20?=
 =?UTF-8?q?=EC=B6=94=EC=A0=81=20#407?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/ErrorBoundary/AsyncErrorBoundary.tsx       |  4 ++--
 .../AsyncErrorFallback/AsyncErrorFallback.tsx         |  3 +--
 .../QueryClientDefaultOptionProvider.tsx              | 11 +++++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/common/ErrorBoundary/AsyncErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary/AsyncErrorBoundary.tsx
index 094fcebf8..c8d8231dc 100644
--- a/frontend/src/components/common/ErrorBoundary/AsyncErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary/AsyncErrorBoundary.tsx
@@ -6,7 +6,7 @@ import DeferredComponent from '../DeferredComponent/DeferredComponent';
 import AsyncErrorFallback from '../ErrorFallback/AsyncErrorFallback/AsyncErrorFallback';
 import SpinnerErrorFallback from '../ErrorFallback/SpinnerErrorFallback/SpinnerErrorFallback';
 
-import { CustomError } from '@/utils/error';
+import { CustomError, UnhandledError } from '@/utils/error';
 
 interface AsyncErrorBoundaryProps {
   pendingFallback?: React.ReactNode;
@@ -25,7 +25,7 @@ const AsyncErrorBoundary = ({
         <AsyncErrorFallback error={error} resetError={resetError} />
       )}
       onError={(error) => {
-        if (error instanceof CustomError) {
+        if (error instanceof CustomError || error instanceof UnhandledError) {
           withScope((scope) => {
             scope.setLevel('warning');
             scope.setTag('api', 'internalServerError');
diff --git a/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx b/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx
index e8f95882b..1a8b8e6bd 100644
--- a/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx
+++ b/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx
@@ -7,7 +7,6 @@ import {
 } from '../ErrorFallback.styled';
 
 import ErrorDdangkong from '@/assets/images/errorDdangkong.webp';
-import { CustomError } from '@/utils/error';
 
 interface AsyncErrorFallback {
   error: unknown;
@@ -22,7 +21,7 @@ const AsyncErrorFallback = ({ error, resetError }: AsyncErrorFallback) => {
   return (
     <section css={errorFallbackLayout}>
       <img src={ErrorDdangkong} alt="에러나서 슬픈 땅콩" css={errorImage} />
-      <h2 css={errorText}>{error instanceof CustomError && error.message}</h2>
+      <h2 css={errorText}>{error instanceof Error && error.message}</h2>
       <div css={fallbackButtonContainer}>
         <Button onClick={resetError} text="다시 시도" size="medium" radius="medium" />
         <Button onClick={goToHome} text="홈으로" size="medium" radius="medium" />
diff --git a/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx b/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
index e60757973..f3b662e21 100644
--- a/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
+++ b/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
@@ -2,11 +2,13 @@ import { useQueryClient } from '@tanstack/react-query';
 import { PropsWithChildren } from 'react';
 
 import AlertModal from '@/components/AlertModal/AlertModal';
+import { NETWORK_ERROR_STATUS, SERVER_ERROR_STATUS } from '@/constants/errorStatus';
 import useModal from '@/hooks/useModal';
 import useToast from '@/hooks/useToast';
-import { CustomError, NetworkError } from '@/utils/error';
+import { CustomError, NetworkError, UnhandledError } from '@/utils/error';
 
-const isServerError = (status: number) => status >= 500 && status !== 555;
+const isServerError = (status: number) =>
+  status >= SERVER_ERROR_STATUS && status !== NETWORK_ERROR_STATUS;
 
 // QueryClient는 모든 Provider에 공유되면서 공통 에러 핸들링 로직에 Toast와 Modal을 넣기 위해 setDefaultOptions 사용
 // 테스트 환경에서 retry 값이 있을 경우 에러 폴백 테스트가 돌지 않아 분기 처리
@@ -26,6 +28,11 @@ const QueryClientDefaultOptionProvider = ({ children }: PropsWithChildren) => {
           show(error.message);
           return;
         }
+
+        if (error instanceof UnhandledError) {
+          return;
+        }
+
         showModal(AlertModal, { title: '에러', message: error.message });
       },
       throwOnError: (err) => {

From bcb96187bc889751d23573a0354baacd9e715077 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Tue, 26 Nov 2024 18:53:30 +0900
Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=97=90=EB=9F=AC=20=EC=A1=B0=EA=B1=B4=EB=AC=B8=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20#407?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/fetcher.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/apis/fetcher.ts b/frontend/src/apis/fetcher.ts
index 9d015755f..5c0830d48 100644
--- a/frontend/src/apis/fetcher.ts
+++ b/frontend/src/apis/fetcher.ts
@@ -26,7 +26,7 @@ const fetcher = {
 
       return response;
     } catch (error) {
-      if (error instanceof TypeError && !navigator.onLine) {
+      if (!navigator.onLine) {
         throw new NetworkError();
       }
 

From ea5707f8b27d8326d081dbd7a993c375448f1107 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Tue, 26 Nov 2024 18:54:02 +0900
Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20toast=20UI=20=EC=97=AC=EB=8A=94?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=EB=AA=85=EC=9D=84=20=EB=AA=85=EC=8B=9C?=
 =?UTF-8?q?=EC=A0=81=EC=9C=BC=EB=A1=9C=20showToast=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20#407?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/InviteModal/InviteModal.tsx         | 4 ++--
 .../QueryClientDefaultOptionProvider.tsx                    | 4 ++--
 frontend/src/providers/ToastProvider/ToastProvider.tsx      | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/InviteModal/InviteModal.tsx b/frontend/src/components/InviteModal/InviteModal.tsx
index 9e201b01b..9c277dbfc 100644
--- a/frontend/src/components/InviteModal/InviteModal.tsx
+++ b/frontend/src/components/InviteModal/InviteModal.tsx
@@ -31,11 +31,11 @@ const InviteModal = ({ isOpen, onClose, returnFocusRef }: InviteModalProps) => {
   const inviteUrl = INVITE_URL(roomUuid);
 
   const { copyToClipboard } = useClipBoard();
-  const { show } = useToast();
+  const { showToast } = useToast();
 
   const handleCopy = () => {
     copyToClipboard(inviteUrl);
-    show('링크가 복사되었습니다!');
+    showToast('링크가 복사되었습니다!');
   };
 
   return (
diff --git a/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx b/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
index f3b662e21..793773a88 100644
--- a/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
+++ b/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
@@ -14,7 +14,7 @@ const isServerError = (status: number) =>
 // 테스트 환경에서 retry 값이 있을 경우 에러 폴백 테스트가 돌지 않아 분기 처리
 const QueryClientDefaultOptionProvider = ({ children }: PropsWithChildren) => {
   const queryClient = useQueryClient();
-  const { show } = useToast();
+  const { showToast } = useToast();
   const { show: showModal } = useModal();
 
   queryClient.setDefaultOptions({
@@ -25,7 +25,7 @@ const QueryClientDefaultOptionProvider = ({ children }: PropsWithChildren) => {
     mutations: {
       onError: (error) => {
         if (error instanceof NetworkError) {
-          show(error.message);
+          showToast(error.message);
           return;
         }
 
diff --git a/frontend/src/providers/ToastProvider/ToastProvider.tsx b/frontend/src/providers/ToastProvider/ToastProvider.tsx
index 04e65de59..c9a08965d 100644
--- a/frontend/src/providers/ToastProvider/ToastProvider.tsx
+++ b/frontend/src/providers/ToastProvider/ToastProvider.tsx
@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import { toastLayout } from './ToastProvider.styled';
 
 interface ToastContext {
-  show: (message: string) => void;
+  showToast: (message: string) => void;
 }
 
 export const ToastContext = createContext<ToastContext | null>(null);
@@ -13,7 +13,7 @@ const ToastProvider = ({ children }: PropsWithChildren) => {
   const [toastMessage, setToastMessage] = useState('');
   const timerRef = useRef<NodeJS.Timeout | null>(null);
 
-  const show = useCallback((message: string) => {
+  const showToast = useCallback((message: string) => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
     }
@@ -34,7 +34,7 @@ const ToastProvider = ({ children }: PropsWithChildren) => {
   }, []);
 
   return (
-    <ToastContext.Provider value={{ show }}>
+    <ToastContext.Provider value={{ showToast }}>
       {children}
       {toastMessage &&
         createPortal(

From 040e3439e0d04f30866c2da0361832e006897e63 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Tue, 26 Nov 2024 18:56:27 +0900
Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20modal=20UI=EB=A5=BC=20=EB=9D=84?=
 =?UTF-8?q?=EC=9A=B0=EB=8A=94=20=ED=95=A8=EC=88=98=EB=AA=85=EC=9D=84=20?=
 =?UTF-8?q?=EB=AA=85=EC=8B=9C=EC=A0=81=EC=9C=BC=EB=A1=9C=20showModal?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20#407?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/layout/Header/Header.tsx     |  6 +++---
 .../ReadyMembersContainer/ReadyMembersContainer.tsx  |  4 ++--
 .../ReadyPage/components/RoomSetting/RoomSetting.tsx |  4 ++--
 .../components/NextRoundButton/NextRoundButton.tsx   | 12 ++++++++----
 .../src/providers/ModalProvider/ModalProvider.tsx    |  6 +++---
 .../QueryClientDefaultOptionProvider.tsx             |  2 +-
 6 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
index 1653e10cd..4c9c2de79 100644
--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/frontend/src/components/layout/Header/Header.tsx
@@ -65,7 +65,7 @@ export const TitleHeader = ({ title }: HeaderProps) => (
 
 // 3. 가운데 제목, 우측 상단 차지하는 헤더 : 게임 대기 화면
 export const RoomSettingHeader = ({ title }: HeaderProps) => {
-  const { show } = useModal();
+  const { showModal } = useModal();
   const {
     member: { isMaster },
   } = useGetUserInfo();
@@ -75,11 +75,11 @@ export const RoomSettingHeader = ({ title }: HeaderProps) => {
   const focusRef = useFocus<HTMLElement>();
 
   const handleClickRoomSetting = () => {
-    show(RoomSettingModal, { returnFocusRef });
+    showModal(RoomSettingModal, { returnFocusRef });
   };
 
   const handleClickExit = () => {
-    show(AlertModal, { message: '정말로 나가시겠습니까?', onConfirm: handleExit });
+    showModal(AlertModal, { message: '정말로 나가시겠습니까?', onConfirm: handleExit });
   };
 
   return (
diff --git a/frontend/src/pages/ReadyPage/components/ReadyMembersContainer/ReadyMembersContainer.tsx b/frontend/src/pages/ReadyPage/components/ReadyMembersContainer/ReadyMembersContainer.tsx
index cc9f1db6d..8a5c72024 100644
--- a/frontend/src/pages/ReadyPage/components/ReadyMembersContainer/ReadyMembersContainer.tsx
+++ b/frontend/src/pages/ReadyPage/components/ReadyMembersContainer/ReadyMembersContainer.tsx
@@ -23,13 +23,13 @@ import useModal from '@/hooks/useModal';
 
 const ReadyMembersContainer = () => {
   const { members, master } = useGetRoomInfo();
-  const { show } = useModal();
+  const { showModal } = useModal();
   const queryClient = useQueryClient();
   const returnFocusRef = useRef<HTMLButtonElement>(null);
   const memberCountMessage = `총 인원 ${members.length}명`;
 
   const handleClickInvite = () => {
-    show(InviteModal, { returnFocusRef });
+    showModal(InviteModal, { returnFocusRef });
   };
 
   useEffect(() => {
diff --git a/frontend/src/pages/ReadyPage/components/RoomSetting/RoomSetting.tsx b/frontend/src/pages/ReadyPage/components/RoomSetting/RoomSetting.tsx
index 387e710cb..0bcf1afff 100644
--- a/frontend/src/pages/ReadyPage/components/RoomSetting/RoomSetting.tsx
+++ b/frontend/src/pages/ReadyPage/components/RoomSetting/RoomSetting.tsx
@@ -21,7 +21,7 @@ const RoomSetting = () => {
   const {
     member: { isMaster },
   } = useGetUserInfo();
-  const { show } = useModal();
+  const { showModal } = useModal();
 
   const screenReaderRoomSetting = `
         방 정보.
@@ -30,7 +30,7 @@ const RoomSetting = () => {
         제한시간 ${roomSetting.timeLimit / 1000}초.`;
 
   const handleClickCategory = () => {
-    show(RoomSettingModal, { returnFocusRef });
+    showModal(RoomSettingModal, { returnFocusRef });
   };
 
   return (
diff --git a/frontend/src/pages/RoundResultPage/components/NextRoundButton/NextRoundButton.tsx b/frontend/src/pages/RoundResultPage/components/NextRoundButton/NextRoundButton.tsx
index 5fd826254..f8af8d14e 100644
--- a/frontend/src/pages/RoundResultPage/components/NextRoundButton/NextRoundButton.tsx
+++ b/frontend/src/pages/RoundResultPage/components/NextRoundButton/NextRoundButton.tsx
@@ -18,15 +18,19 @@ const NextRoundButton = () => {
   const {
     member: { isMaster },
   } = useGetUserInfo();
-  const { show } = useModal();
+  const { showModal } = useModal();
 
   const returnFocusRef = useRef<HTMLButtonElement>(null);
 
   const randomRoundNextMessage = createRandomNextRoundMessage();
   const isLastRound = balanceContent?.currentRound === balanceContent?.totalRound;
 
-  const showModal = () => {
-    show(AlertModal, { message: randomRoundNextMessage, onConfirm: moveNextRound, returnFocusRef });
+  const handleNextRoundModal = () => {
+    showModal(AlertModal, {
+      message: randomRoundNextMessage,
+      onConfirm: moveNextRound,
+      returnFocusRef,
+    });
   };
 
   return (
@@ -35,7 +39,7 @@ const NextRoundButton = () => {
         ref={returnFocusRef}
         style={{ width: '100%' }}
         text={getNextRoundButtonText(isMaster, isLastRound, isPending || isSuccess)}
-        onClick={isLastRound ? moveNextRound : showModal}
+        onClick={isLastRound ? moveNextRound : handleNextRoundModal}
         disabled={!isMaster || isPending || isSuccess}
       />
     </div>
diff --git a/frontend/src/providers/ModalProvider/ModalProvider.tsx b/frontend/src/providers/ModalProvider/ModalProvider.tsx
index b7d4b1825..48d147fc6 100644
--- a/frontend/src/providers/ModalProvider/ModalProvider.tsx
+++ b/frontend/src/providers/ModalProvider/ModalProvider.tsx
@@ -18,7 +18,7 @@ interface Modal extends ModalProps {
 }
 
 interface ModalDispatchContextProps {
-  show: (Component: React.FC<ModalState> | null, props?: ModalProps) => void;
+  showModal: (Component: React.FC<ModalState> | null, props?: ModalProps) => void;
   close: () => void;
 }
 
@@ -33,7 +33,7 @@ const ModalProvider = ({ children }: PropsWithChildren) => {
     onConfirm: () => {},
   });
 
-  const show = (Component: React.FC<ModalState> | null, props?: ModalProps) => {
+  const showModal = (Component: React.FC<ModalState> | null, props?: ModalProps) => {
     setModal({
       Component,
       title: props?.title,
@@ -52,7 +52,7 @@ const ModalProvider = ({ children }: PropsWithChildren) => {
     }));
   };
 
-  const dispatch = useMemo(() => ({ show, close }), []);
+  const dispatch = useMemo(() => ({ showModal, close }), []);
 
   return (
     <ModalDispatchContext.Provider value={dispatch}>
diff --git a/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx b/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
index 793773a88..8a5b924ae 100644
--- a/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
+++ b/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
@@ -15,7 +15,7 @@ const isServerError = (status: number) =>
 const QueryClientDefaultOptionProvider = ({ children }: PropsWithChildren) => {
   const queryClient = useQueryClient();
   const { showToast } = useToast();
-  const { show: showModal } = useModal();
+  const { showModal } = useModal();
 
   queryClient.setDefaultOptions({
     queries: {

From bdd52e9206e81a5dc04899aaee680e5053c6f0a7 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Tue, 3 Dec 2024 17:19:05 +0900
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20AsyncErrorFallback=20Error=20Type=20?=
 =?UTF-8?q?=EC=A1=B0=EA=B1=B4=EB=AC=B8=20=EB=AA=85=ED=99=95=ED=95=98?=
 =?UTF-8?q?=EA=B2=8C=20=EB=AA=85=EC=8B=9C=20#407?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx b/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx
index 1a8b8e6bd..b444b981e 100644
--- a/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx
+++ b/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx
@@ -7,6 +7,7 @@ import {
 } from '../ErrorFallback.styled';
 
 import ErrorDdangkong from '@/assets/images/errorDdangkong.webp';
+import { CustomError, UnhandledError } from '@/utils/error';
 
 interface AsyncErrorFallback {
   error: unknown;
@@ -21,7 +22,9 @@ const AsyncErrorFallback = ({ error, resetError }: AsyncErrorFallback) => {
   return (
     <section css={errorFallbackLayout}>
       <img src={ErrorDdangkong} alt="에러나서 슬픈 땅콩" css={errorImage} />
-      <h2 css={errorText}>{error instanceof Error && error.message}</h2>
+      <h2 css={errorText}>
+        {(error instanceof CustomError || error instanceof UnhandledError) && error.message}
+      </h2>
       <div css={fallbackButtonContainer}>
         <Button onClick={resetError} text="다시 시도" size="medium" radius="medium" />
         <Button onClick={goToHome} text="홈으로" size="medium" radius="medium" />