라이트박스 닫기 시 이전 페이지로 이동하는 버그 수정
- ref를 사용해 히스토리 push 상태 추적 - X 버튼 클릭 시 히스토리가 push된 경우에만 history.back() 호출 - 하드웨어 백버튼과 X 버튼 닫기 동작 분리 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
a1090e56c0
commit
beabcc094f
2 changed files with 28 additions and 6 deletions
|
|
@ -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}
|
||||
>
|
||||
{/* 닫기 버튼 */}
|
||||
<button
|
||||
className="absolute top-4 right-4 p-2 text-white/70 z-10"
|
||||
onClick={() => window.history.back()}
|
||||
onClick={closeLightbox}
|
||||
>
|
||||
<X size={28} />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue