라이트박스 닫기 시 이전 페이지로 이동하는 버그 수정

- ref를 사용해 히스토리 push 상태 추적
- X 버튼 클릭 시 히스토리가 push된 경우에만 history.back() 호출
- 하드웨어 백버튼과 X 버튼 닫기 동작 분리

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-01-21 12:17:24 +09:00
parent a1090e56c0
commit beabcc094f
2 changed files with 28 additions and 6 deletions

View file

@ -292,11 +292,21 @@ function XSection({ schedule }) {
// //
const [lightboxOpen, setLightboxOpen] = useState(false); const [lightboxOpen, setLightboxOpen] = useState(false);
const [lightboxIndex, setLightboxIndex] = useState(0); const [lightboxIndex, setLightboxIndex] = useState(0);
const historyPushedRef = useRef(false);
const openLightbox = (index) => { const openLightbox = (index) => {
setLightboxIndex(index); setLightboxIndex(index);
setLightboxOpen(true); setLightboxOpen(true);
window.history.pushState({ lightbox: true }, ''); window.history.pushState({ lightbox: true }, '');
historyPushedRef.current = true;
};
const closeLightbox = () => {
setLightboxOpen(false);
if (historyPushedRef.current) {
historyPushedRef.current = false;
window.history.back();
}
}; };
const goToPrev = () => { const goToPrev = () => {
@ -323,10 +333,11 @@ function XSection({ schedule }) {
}; };
}, [lightboxOpen]); }, [lightboxOpen]);
// // ( )
useEffect(() => { useEffect(() => {
const handlePopState = () => { const handlePopState = () => {
if (lightboxOpen) { if (lightboxOpen) {
historyPushedRef.current = false;
setLightboxOpen(false); setLightboxOpen(false);
} }
}; };
@ -457,12 +468,12 @@ function XSection({ schedule }) {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
className="fixed inset-0 bg-black z-50 flex items-center justify-center" className="fixed inset-0 bg-black z-50 flex items-center justify-center"
onClick={() => window.history.back()} onClick={closeLightbox}
> >
{/* 닫기 버튼 */} {/* 닫기 버튼 */}
<button <button
className="absolute top-4 right-4 p-2 text-white/70 z-10" className="absolute top-4 right-4 p-2 text-white/70 z-10"
onClick={() => window.history.back()} onClick={closeLightbox}
> >
<X size={28} /> <X size={28} />
</button> </button>

View file

@ -1,4 +1,4 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback, useRef } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import Linkify from 'react-linkify'; import Linkify from 'react-linkify';
import { decodeHtmlEntities } from './utils'; import { decodeHtmlEntities } from './utils';
@ -15,17 +15,28 @@ function XSection({ schedule }) {
// //
const [lightboxOpen, setLightboxOpen] = useState(false); const [lightboxOpen, setLightboxOpen] = useState(false);
const [lightboxIndex, setLightboxIndex] = useState(0); const [lightboxIndex, setLightboxIndex] = useState(0);
const historyPushedRef = useRef(false);
const openLightbox = useCallback((index) => { const openLightbox = useCallback((index) => {
setLightboxIndex(index); setLightboxIndex(index);
setLightboxOpen(true); setLightboxOpen(true);
window.history.pushState({ lightbox: true }, ''); window.history.pushState({ lightbox: true }, '');
historyPushedRef.current = true;
}, []); }, []);
// const closeLightbox = useCallback(() => {
setLightboxOpen(false);
if (historyPushedRef.current) {
historyPushedRef.current = false;
window.history.back();
}
}, []);
// ( )
useEffect(() => { useEffect(() => {
const handlePopState = () => { const handlePopState = () => {
if (lightboxOpen) { if (lightboxOpen) {
historyPushedRef.current = false;
setLightboxOpen(false); setLightboxOpen(false);
} }
}; };
@ -156,7 +167,7 @@ function XSection({ schedule }) {
images={schedule.imageUrls || []} images={schedule.imageUrls || []}
currentIndex={lightboxIndex} currentIndex={lightboxIndex}
isOpen={lightboxOpen} isOpen={lightboxOpen}
onClose={() => window.history.back()} onClose={closeLightbox}
onIndexChange={setLightboxIndex} onIndexChange={setLightboxIndex}
/> />
</div> </div>