러너 게시물 상세 페이지 캐싱 오류 수정, 에러 발생 시 전체 동작이 정지되지 않도록 수정 (#645)

* fix: 러너 게시물 상세 페이지 캐싱 오류 수정

* feat: 최상위 에러 바운더리 페이지 추가

* fix: 핸들러 오류 수정

---------

Co-authored-by: 상규 <[email protected]>

frontend/src/App.tsx

@@ -6,10 +6,11 @@ import ChannelService from './ChannelService';
 import { CHANNEL_SERVICE_KEY } from './constants';
 import LoadingPage from './pages/LoadingPage';
 import ModalProvider from './contexts/ModalContext';
-import { QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider, QueryErrorResetBoundary } from '@tanstack/react-query';
 import { queryClient } from './hooks/query/queryClient';
 import ReactGA from 'react-ga';
 import { createBrowserHistory } from 'history';
+import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
 
 const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
 if (gaTrackingId) {
@@ -37,9 +38,15 @@ const App = () => {
       <ModalProvider>
         <S.AppContainer>
           <QueryClientProvider client={queryClient}>
-            <Suspense fallback={<LoadingPage />}>
-              <Outlet />
-            </Suspense>
+            <QueryErrorResetBoundary>
+              {({ reset }) => (
+                <ErrorBoundary onReset={reset}>
+                  <Suspense fallback={<LoadingPage />}>
+                    <Outlet />
+                  </Suspense>
+                </ErrorBoundary>
+              )}
+            </QueryErrorResetBoundary>
           </QueryClientProvider>
         </S.AppContainer>
       </ModalProvider>

frontend/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { CustomApiError } from '@/types/error';
+import NotFoundPage from '@/pages/NotFoundPage';
+
+interface Props {
+  children: React.ReactNode;
+  onReset: () => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | CustomApiError | null;
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+    };
+
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+  }
+
+  resetErrorBoundary() {
+    this.props.onReset();
+
+    this.state = {
+      hasError: false,
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error | CustomApiError) {
+    return { hasError: true, error: error };
+  }
+
+  render() {
+    const { hasError, error } = this.state;
+
+    return hasError ? <NotFoundPage reset={this.resetErrorBoundary} error={error} /> : this.props.children;
+  }
+}
+
+export default ErrorBoundary;

frontend/src/hooks/query/useRunnerPostDetail.ts

@@ -10,7 +10,7 @@ export const useRunnerPostDetail = (runnerPostId: number, isLogin: boolean) => {
   const { showErrorToast } = useContext(ToastContext);
 
   const queryResult = useSuspenseQuery<GetDetailedRunnerPostResponse, APIError>({
-    queryKey: ['runnerPostDetail'],
+    queryKey: ['runnerPostDetail', runnerPostId],
     queryFn: async () => getRunnerPostDetail(runnerPostId, isLogin).then((res) => res),
   });
 

frontend/src/pages/NotFoundPage.tsx

@@ -1,19 +1,44 @@
 import Button from '@/components/common/Button/Button';
 import { usePageRouter } from '@/hooks/usePageRouter';
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import styled from 'styled-components';
 import notFound from '@/assets/not-found.jpg';
+import { logout } from '@/apis/auth';
+import { CustomApiError } from '@/types/error';
+import ToastProvider, { ToastContext } from '@/contexts/ToastContext';
 
-const NotFoundPage = () => {
+interface Props {
+  reset?: () => void;
+  error?: Error | CustomApiError;
+}
+
+const NotFoundPage = ({ reset, error }: Props) => {
   const { goToMainPage } = usePageRouter();
+  const { showErrorToast } = useContext(ToastContext);
+
+  useEffect(() => {
+    if (error) {
+      console.log(error);
+      showErrorToast({ title: '요청 오류', description: error.message });
+    }
+  }, []);
+
+  const handleClickHomeButton = () => {
+    if (reset) {
+      logout();
+      reset();
+    }
+
+    window.location.href = '/';
+  };
 
   return (
     <S.NotFoundPageContainer>
       <S.NotFoundImage src={notFound} />
       <S.Message>
         <S.Bold>페이지를 찾을 수 없습니다 😢</S.Bold>
       </S.Message>
-      <Button colorTheme="WHITE" onClick={goToMainPage}>
+      <Button colorTheme="WHITE" onClick={handleClickHomeButton}>
         홈으로 가기
       </Button>
     </S.NotFoundPageContainer>