🐛 Fix: 모달 관련 추가

Author: ruehan

src/pages/WalkPage/components/MapComponent/index.tsx

@@ -16,6 +16,7 @@ import XYZ from 'ol/source/XYZ'
 import ReactDOMServer from 'react-dom/server'
 import * as S from '~pages/WalkPage/styles'
 import { MIN_ACCURACY, MIN_DISTANCE, MIN_TIME_INTERVAL } from '~types/map'
+import { useNavigate } from 'react-router-dom'
 
 const ORS_API_URL = '/ors/v2/directions/foot-walking/geojson'
 
@@ -30,7 +31,12 @@ export const getMarkerIconString = () => {
   return svgString
 }
 
-export default function MapComponent() {
+// 모달 상태를 props로 받도록 수정
+interface MapComponentProps {
+  isModalOpen?: boolean
+}
+
+export default function MapComponent({ isModalOpen = false }: MapComponentProps) {
   // 지도 관련 ref
   const mapRef = useRef<Map | null>(null)
   const currentLocationMarkerRef = useRef<Feature<Geometry> | null>(null)
@@ -63,6 +69,8 @@ export default function MapComponent() {
   const [autoRotate, setAutoRotate] = useState<boolean>(false)
   const lastHeadingRef = useRef<number>(0)
 
+  const navigate = useNavigate()
+
   useEffect(() => {
     return () => {
       if (currentLocationMarkerRef.current) {
@@ -591,6 +599,8 @@ export default function MapComponent() {
           duration: 500,
         })
       }
+
+      navigate('/walk-complete')
     }
   }
 
@@ -700,6 +710,7 @@ export default function MapComponent() {
             $bgColor={isWalking ? 'font_1' : 'default'}
             $fontWeight='700'
             $isWalking={isWalking}
+            disabled={isModalOpen} // 모달이 열려있을 때 버튼 비활성화
           >
             {isWalking ? '산책 끝' : '산책 시작'}
           </S.StyledActionButton>
@@ -716,6 +727,7 @@ export default function MapComponent() {
             $bgColor={isWalking ? 'font_1' : 'default'}
             $fontWeight='700'
             $isWalking={isWalking}
+            disabled={isModalOpen} // 모달이 열려있을 때 버튼 비활성화
           >
             {isWalking ? '산책 끝' : '산책 시작'}
           </S.StyledActionButton>

src/pages/WalkPage/index.tsx

@@ -39,7 +39,6 @@ export default function WalkPage() {
       </S.Header>
 
       <MapComponent isModalOpen={isModalOpen} />
-
       <WalkerListModal isOpen={isWalkerListOpen} onClose={handleWalkerListClose} isClosing={isClosing} />
     </S.WalkPage>
   )