diff --git a/src/App.tsx b/src/App.tsx index e8d1c8b..d53332e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,67 @@ -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom'; +import { useEffect } from 'react'; + import LoginSwitcher from './components/switcher/LoginSwitcher'; import BuildingSelectPage from './pages/BuildingSelectPage'; import ZoneSelectPage from './pages/ZoneSelectPage'; import QRCodeScanner from './pages/QRCodeScanner'; +function GlobalPopStateHandler() { + useEffect(() => { + const handlePopState = () => { + const currentPath = window.location.pathname; + console.log("[Global] popstate 발생:", currentPath); + + const scannerInstance = (window as any).scannerRef?.current; + if (scannerInstance?.clear) { + scannerInstance.clear() + .then(() => { + console.log("[Global] 카메라 정리 완료 (popstate)"); + }) + .catch(console.error) + .finally(() => { + (window as any).scannerRef = null; + }); + } else { + console.log("[Global] scannerRef가 없음"); + } + }; + + window.addEventListener("popstate", handlePopState); + return () => window.removeEventListener("popstate", handlePopState); + }, []); + + return null; +} + +function LocationWatcher() { + const location = useLocation(); + + useEffect(() => { + if (!location.pathname.startsWith('/qr')) { + const scannerInstance = (window as any).scannerRef?.current; + if (scannerInstance?.clear) { + scannerInstance.clear() + .then(() => { + console.log("[Global] 카메라 정리 완료 (location change)"); + }) + .catch(console.error) + .finally(() => { + (window as any).scannerRef = null; + }); + } + } + }, [location.pathname]); + + return null; +} + function App() { return ( + + } /> } /> diff --git a/src/pages/QRCodeScanner.tsx b/src/pages/QRCodeScanner.tsx index 0a6b37b..56e39c9 100644 --- a/src/pages/QRCodeScanner.tsx +++ b/src/pages/QRCodeScanner.tsx @@ -80,6 +80,9 @@ const QRCodeScanner = () => { } }; + scannerRef.current = scanner; + (window as any).scannerRef = scannerRef; + showMessage(STATUS_MESSAGES.SCANNING); scanner.render( @@ -118,22 +121,6 @@ const QRCodeScanner = () => { () => {} ); - scannerRef.current = scanner; - - return () => { - const instance = scannerRef.current; - if (instance && instance.qrCodeScanner) { - const html5QrInstance = instance.qrCodeScanner; - - html5QrInstance - .stop() - .then(() => html5QrInstance.clear()) - .catch(console.error) - .finally(() => { - scannerRef.current = null; - }); - } - }; }, []); useEffect(() => {