[KW-599] fix: ZoneSelectPage 돌아가기 오류 수정

src/App.tsx

@@ -72,7 +72,7 @@ function App() {
 
         <Route element={<PrivateRoute />}>
           <Route path="/building/select" element={<BuildingSelectPage />} />
-          <Route path="/zone/select" element={<ZoneSelectPage />} />
+          <Route path="/zone/select/*" element={<ZoneSelectPage />} />
           <Route path="/qr" element={<QRCodeScanner />} />
         </Route>
       </Routes>

src/components/building/BuildingLoginCard.tsx

@@ -28,6 +28,7 @@ const BuildingLoginCard: React.FC<Props> = ({ onSwitch: _, isExiting, direction,
       if (token) {
         localStorage.setItem("accessToken", token);
         onLogin();
+        sessionStorage.clear();
         navigate("/building/select");
       } else {
         setError("로그인 실패: 엑세스 토큰이 없음");

src/components/buttons/LogoutButton.tsx

@@ -14,9 +14,11 @@ const LogoutButton: React.FC = () => {
     try {
       await adminLogout();
       localStorage.clear();
+      sessionStorage.clear();
       navigate("/login");
     } catch (err: any) {
       localStorage.clear();
+      sessionStorage.clear();
       const message = err?.message ?? "로그아웃 실패";
       alert(message);
       console.warn("관리자 로그아웃 실패:", err);

src/components/zone/ZoneLoginCard.tsx

@@ -28,6 +28,7 @@ const ZoneLoginCard: React.FC<Props> = ({ onSwitch: _, isExiting, direction, onL
       if (token) {
         localStorage.setItem("accessToken", token);
         onLogin();
+        sessionStorage.clear();
         navigate("/zone/select");
       } else {
         setError("로그인 실패: 엑세스 토큰이 없음");

src/components/zone/ZoneSelectMainZoneCard.tsx

@@ -76,7 +76,7 @@ const ZoneSelectMainZoneCard: React.FC<Props> = ({ buildingId, buildingName, onB
     localStorage.setItem("deviceAreaCode", areaCode);
     localStorage.setItem("zoneName", areaName);
     localStorage.setItem("buildingName", buildingName);
-    navigate("/qr"); 
+    navigate("/qr", { replace: false }); 
   };
 
   return (

src/contexts/axiosWithAuthorization.tsx

@@ -72,7 +72,8 @@ axiosWithAuthorization.interceptors.response.use(
       } catch (refreshError) {
         console.error("엑세스 토큰 재발급 실패:", refreshError);
         localStorage.clear(); 
-        window.location.href = "/admin/login";
+        sessionStorage.clear();
+        window.location.href = "/login";
         return Promise.reject(refreshError);
       }
     }

src/pages/QRCodeScanner.tsx

@@ -149,7 +149,8 @@ const QRCodeScanner = () => {
         console.error("카메라 정리 중 오류", err);
       } finally {
         scannerRef.current = null;
-        navigate(-1); 
+        sessionStorage.setItem("zoneSelectStep", 'zone');
+        navigate(-1);
       }
     } else {
       navigate(-1); 

src/pages/ZoneSelectPage.tsx

@@ -1,5 +1,6 @@
 import './css/ZoneSelectPage.css';
 import { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 import ZoneSelectGreenCard from '../components/zone/ZoneSelectGreenCard';
 import ZoneSelectWhiteCard from '../components/zone/ZoneSelectWhiteCard';
@@ -9,25 +10,85 @@ import ZoneSelectMainZoneCard from '../components/zone/ZoneSelectMainZoneCard';
 import zonewrapperBackground from '../assets/images/zone-background.png';
 
 const ZoneSelectPage: React.FC = () => {
-  const [buildingId, setBuildingId] = useState<string | null>(null);
-  const [buildingName, setBuildingName] = useState<string | null>(null);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [buildingId, setBuildingId] = useState<string | null>(sessionStorage.getItem("buildingId"));
+  const [buildingName, setBuildingName] = useState<string | null>(sessionStorage.getItem("buildingName"));
   const [currentStep, setCurrentStep] = useState<'white' | 'building' | 'zone'>('white');
+  const [isInternalChange, setIsInternalChange] = useState(false);
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setCurrentStep('building');
-    }, 800);
-
-    return () => clearTimeout(timer);
+    const savedStep = sessionStorage.getItem("zoneSelectStep") as 'white' | 'building' | 'zone' | null;
+    if (savedStep) {
+      setCurrentStep(savedStep);
+    } else {
+      const timer = setTimeout(() => {
+        setCurrentStep('building');
+        sessionStorage.setItem("zoneSelectStep", 'building');
+      }, 800);
+      return () => clearTimeout(timer);
+    }
   }, []);
 
   const handleNext = (selectedBuildingId: string, selectedBuildingName: string) => {
     setBuildingId(selectedBuildingId);
     setBuildingName(selectedBuildingName);
     localStorage.setItem("buildingName", selectedBuildingName);
-    setCurrentStep('zone'); 
+
+    sessionStorage.setItem("buildingId", selectedBuildingId); 
+    sessionStorage.setItem("buildingName", selectedBuildingName);
+    sessionStorage.setItem("zoneSelectStep", 'zone');
+
+    setIsInternalChange(true);
+    setCurrentStep('zone');
+  };
+
+  const handleBack = () => {
+    sessionStorage.setItem("zoneSelectStep", 'building');
+    setIsInternalChange(true);
+    setCurrentStep('building');
   };
 
+  useEffect(() => {
+    const handlePopState = () => {
+      const savedStep = sessionStorage.getItem("zoneSelectStep") as 'white' | 'building' | 'zone' | null;
+      if (savedStep) {
+        setCurrentStep(savedStep);
+      } else {
+        setCurrentStep('building');
+      }
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  useEffect(() => {
+    if (!isInternalChange) return;
+
+    if (currentStep === 'building' && location.pathname !== '/zone/select/building') {
+      navigate('/zone/select/building', { replace: false });
+    } else if (currentStep === 'zone' && location.pathname !== '/zone/select/zone') {
+      navigate('/zone/select/zone', { replace: false });
+    }
+
+    setIsInternalChange(false); // reset flag
+  }, [currentStep, navigate, location.pathname, isInternalChange]);
+
+  useEffect(() => {
+    if (location.pathname === '/zone/select') {
+      navigate('/zone/select/building', { replace: true });
+    }
+  }, [location.pathname, navigate]);
+
+  useEffect(() => {
+    if (location.pathname === '/zone/select/building') {
+      sessionStorage.setItem('zoneSelectStep', 'building');
+    } else if (location.pathname === '/zone/select/zone') {
+      sessionStorage.setItem('zoneSelectStep', 'zone');
+    }
+  }, [location.pathname]);
+
   return (
     <div
       className="zone-select-page-wrapper"
@@ -36,14 +97,12 @@ const ZoneSelectPage: React.FC = () => {
       <div className="zone-select-page-card-wrapper">
         <ZoneSelectGreenCard />
         {currentStep === 'white' && <ZoneSelectWhiteCard />}
-        {currentStep === 'building' && (
-          <ZoneSelectMainBuildingCard onNext={handleNext} />
-        )}
+        {currentStep === 'building' && <ZoneSelectMainBuildingCard onNext={handleNext} />}
         {currentStep === 'zone' && buildingId && buildingName && (
           <ZoneSelectMainZoneCard 
             buildingId={buildingId} 
             buildingName={buildingName} 
-            onBack={() => setCurrentStep('building')}
+            onBack={handleBack}
           />
         )}
       </div>