라이트박스 닫기 시 이전 페이지로 이동하는 버그 수정
- 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 [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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue