diff --git a/frontend/src/pages/mobile/public/ScheduleDetail.jsx b/frontend/src/pages/mobile/public/ScheduleDetail.jsx index 6df9243..ab508c9 100644 --- a/frontend/src/pages/mobile/public/ScheduleDetail.jsx +++ b/frontend/src/pages/mobile/public/ScheduleDetail.jsx @@ -292,11 +292,21 @@ function XSection({ schedule }) { // 라이트박스 상태 const [lightboxOpen, setLightboxOpen] = useState(false); const [lightboxIndex, setLightboxIndex] = useState(0); + const historyPushedRef = useRef(false); const openLightbox = (index) => { setLightboxIndex(index); setLightboxOpen(true); window.history.pushState({ lightbox: true }, ''); + historyPushedRef.current = true; + }; + + const closeLightbox = () => { + setLightboxOpen(false); + if (historyPushedRef.current) { + historyPushedRef.current = false; + window.history.back(); + } }; const goToPrev = () => { @@ -323,10 +333,11 @@ function XSection({ schedule }) { }; }, [lightboxOpen]); - // 뒤로가기 처리 + // 뒤로가기 처리 (하드웨어 백버튼) useEffect(() => { const handlePopState = () => { if (lightboxOpen) { + historyPushedRef.current = false; setLightboxOpen(false); } }; @@ -457,12 +468,12 @@ function XSection({ schedule }) { animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black z-50 flex items-center justify-center" - onClick={() => window.history.back()} + onClick={closeLightbox} > {/* 닫기 버튼 */} diff --git a/frontend/src/pages/pc/public/schedule-sections/XSection.jsx b/frontend/src/pages/pc/public/schedule-sections/XSection.jsx index 7da1278..a56f334 100644 --- a/frontend/src/pages/pc/public/schedule-sections/XSection.jsx +++ b/frontend/src/pages/pc/public/schedule-sections/XSection.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect, useCallback, useRef } from 'react'; import { motion } from 'framer-motion'; import Linkify from 'react-linkify'; import { decodeHtmlEntities } from './utils'; @@ -15,17 +15,28 @@ function XSection({ schedule }) { // 라이트박스 상태 const [lightboxOpen, setLightboxOpen] = useState(false); const [lightboxIndex, setLightboxIndex] = useState(0); + const historyPushedRef = useRef(false); const openLightbox = useCallback((index) => { setLightboxIndex(index); setLightboxOpen(true); window.history.pushState({ lightbox: true }, ''); + historyPushedRef.current = true; }, []); - // 뒤로가기 처리 + const closeLightbox = useCallback(() => { + setLightboxOpen(false); + if (historyPushedRef.current) { + historyPushedRef.current = false; + window.history.back(); + } + }, []); + + // 뒤로가기 처리 (하드웨어 백버튼) useEffect(() => { const handlePopState = () => { if (lightboxOpen) { + historyPushedRef.current = false; setLightboxOpen(false); } }; @@ -156,7 +167,7 @@ function XSection({ schedule }) { images={schedule.imageUrls || []} currentIndex={lightboxIndex} isOpen={lightboxOpen} - onClose={() => window.history.back()} + onClose={closeLightbox} onIndexChange={setLightboxIndex} />