Merge pull request #126 from softeerbootcamp4th/fix/CLAP-177

fix(CLAP-177): `ErrorBoundary` 에서 뒤로가기 안 되던 이슈 해결

packages/service/src/pages/Error/Error.tsx

@@ -2,21 +2,31 @@ import { FallbackProps } from "react-error-boundary";
 import { errorContainerStyle, errorMessageStyle, loginText } from "./Error.css";
 import { Button, ButtonVariant } from "@service/common/components/Button";
 import { theme } from "@watermelon-clap/core/src/theme";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useErrorBoundary } from "react-error-boundary";
 import { GlobalNavigationBar } from "@service/common/components/GlobalNavigationBar";
 import { Space } from "@service/common/styles/Space";
 import { useAuth } from "@watermelon-clap/core/src/hooks";
-import { useMobile } from "@service/common/hooks/useMobile";
+import { useEffect, useRef } from "react";
 
 export const Error = ({ error, resetErrorBoundary }: FallbackProps) => {
   const navigate = useNavigate();
   const { resetBoundary } = useErrorBoundary();
   let errorMessage;
+  const isFirstRender = useRef(true);
 
-  const { login } = useAuth();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
 
-  const mobile = useMobile();
+    resetBoundary();
+  }, [pathname]);
+
+  const { login } = useAuth();
 
   switch (error.message) {
     case "404":
@@ -52,7 +62,7 @@ export const Error = ({ error, resetErrorBoundary }: FallbackProps) => {
         {error.message === "403" ? (
           <div css={theme.flex.column}>
             <h1 css={loginText}>로그인이 필요한 서비스입니다</h1>
-            <Space size={mobile ? 10 : 20} />
+            <Space size={20} />
             <Button variant={ButtonVariant.LONG} onClick={handleLogin}>
               로그인
             </Button>