fix(lightbox): X 버튼 이벤트 버블링 및 닫기 애니메이션 수정

- PC Lightbox X 버튼에 e.stopPropagation() 추가 (이중 닫힘 방지)
- MobileLightbox AnimatePresence 구조 수정 (exit 애니메이션 활성화)
- 모바일 앨범 상세/갤러리 페이지에 헤더 표시 (hideHeader → pageTitle)
- 문서에 MobileLightbox 컴포넌트 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

docs/migration.md

@@ -260,7 +260,8 @@ function App() {
 - [x] Loading.jsx
 - [x] ErrorBoundary.jsx
 - [x] Toast.jsx
-- [x] Lightbox.jsx
+- [x] Lightbox.jsx (PC용)
+- [x] MobileLightbox.jsx (Mobile용, Swiper 기반)
 - [x] LightboxIndicator.jsx
 - [x] Tooltip.jsx
 - [x] ScrollToTop.jsx

frontend-temp/src/App.jsx

@@ -126,7 +126,7 @@ function App() {
           <Route
             path="/album/:name"
             element={
-              <MobileLayout hideHeader>
+              <MobileLayout pageTitle="앨범">
                 <MobileAlbumDetail />
               </MobileLayout>
             }
@@ -142,7 +142,7 @@ function App() {
           <Route
             path="/album/:name/gallery"
             element={
-              <MobileLayout hideHeader>
+              <MobileLayout pageTitle="앨범">
                 <MobileAlbumGallery />
               </MobileLayout>
             }

frontend-temp/src/components/common/Lightbox.jsx

@@ -172,7 +172,10 @@ function Lightbox({
               <button
                 aria-label="닫기"
                 className="text-white/70 hover:text-white transition-colors"
-                onClick={onClose}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClose();
+                }}
               >
                 <X size={32} aria-hidden="true" />
               </button>

frontend-temp/src/components/common/MobileLightbox.jsx

@@ -55,7 +55,7 @@ function MobileLightbox({
 
   // 이미지 다운로드
   const downloadImage = useCallback(async () => {
-    const imageUrl = images[currentIndex];
+    const imageUrl = images?.[currentIndex];
     if (!imageUrl) return;
 
     try {
@@ -109,14 +109,17 @@ function MobileLightbox({
     }
   }, [isOpen]);
 
-  if (!isOpen || !images?.length) return null;
+  // 이미지가 없으면 렌더링하지 않음
+  if (!images?.length) return null;
 
   return (
     <AnimatePresence>
+      {isOpen && (
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
           className="fixed inset-0 bg-black z-[60] flex flex-col"
         >
           {/* 상단 헤더 */}
@@ -257,6 +260,7 @@ function MobileLightbox({
             )}
           </AnimatePresence>
         </motion.div>
+      )}
     </AnimatePresence>
   );
 }