[Refactor] ErrorResetBoundary 컴포넌트에 QueryErrorResetBoundary 추가하여 에러 처리 개선 (#208)

* Refactor: ErrorResetBoundary 컴포넌트에 QueryErrorResetBoundary 추가하여 에러 처리 개선

* Refactor: ErrorFallback 컴포넌트에서 불필요한 쿼리 제거 로직 삭제

Author: miraclee1226

apps/web/components/common/ErrorResetBoundary/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { type ReactNode, type ComponentType } from "react";
+import { QueryErrorResetBoundary } from "@tanstack/react-query";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 
 interface ErrorResetBoundaryProps {
@@ -12,5 +13,13 @@ export default function ErrorResetBoundary({
   children,
   fallbackComponent: FallbackComponent,
 }: ErrorResetBoundaryProps): JSX.Element {
-  return <ErrorBoundary FallbackComponent={FallbackComponent}>{children}</ErrorBoundary>;
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary onReset={reset} FallbackComponent={FallbackComponent}>
+          {children}
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
 }

apps/web/components/common/Fallback/index.tsx

@@ -1,18 +1,14 @@
 "use client";
 
 import { Button } from "@ui/index";
-import { getQueryClient } from "@/lib/queryClient";
 
 interface ErrorFallbackProps {
   error: Error;
   resetErrorBoundary: () => void;
 }
 
 export default function ErrorFallback({ resetErrorBoundary }: ErrorFallbackProps): JSX.Element {
-  const queryClient = getQueryClient();
-
   const handleResetErrorBoundary = (): void => {
-    queryClient.removeQueries();
     resetErrorBoundary();
   };