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,154 +109,158 @@ function MobileLightbox({
     }
   }, [isOpen]);
 
-  if (!isOpen || !images?.length) return null;
+  // 이미지가 없으면 렌더링하지 않음
+  if (!images?.length) return null;
 
   return (
     <AnimatePresence>
-      <motion.div
+      {isOpen && (
-        initial={{ opacity: 0 }}
+        <motion.div
-        animate={{ opacity: 1 }}
+          initial={{ opacity: 0 }}
-        exit={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
-        className="fixed inset-0 bg-black z-[60] flex flex-col"
+          exit={{ opacity: 0 }}
-      >
+          transition={{ duration: 0.2 }}
-        {/* 상단 헤더 */}
+          className="fixed inset-0 bg-black z-[60] flex flex-col"
-        <div className="absolute top-0 left-0 right-0 flex items-center px-4 py-3 z-20">
-          <div className="flex-1 flex justify-start">
-            <button onClick={() => window.history.back()} className="text-white/80 p-1">
-              <X size={24} />
-            </button>
-          </div>
-          {showCounter && images.length > 1 && (
-            <span className="text-white/70 text-sm tabular-nums">
-              {currentIndex + 1} / {images.length}
-            </span>
-          )}
-          <div className="flex-1 flex justify-end items-center gap-2">
-            {hasPhotoInfo && (
-              <button onClick={openInfo} className="text-white/80 p-1">
-                <Info size={22} />
-              </button>
-            )}
-            {showDownload && (
-              <button onClick={downloadImage} className="text-white/80 p-1">
-                <Download size={22} />
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Swiper */}
-        <Swiper
-          modules={[Virtual]}
-          virtual
-          initialSlide={currentIndex}
-          onSwiper={(swiper) => {
-            swiperRef.current = swiper;
-          }}
-          onSlideChange={(swiper) => onIndexChange(swiper.activeIndex)}
-          className="w-full h-full"
-          spaceBetween={0}
-          slidesPerView={1}
-          resistance={true}
-          resistanceRatio={0.5}
         >
-          {images.map((url, index) => (
+          {/* 상단 헤더 */}
-            <SwiperSlide key={index} virtualIndex={index}>
+          <div className="absolute top-0 left-0 right-0 flex items-center px-4 py-3 z-20">
-              <div className="w-full h-full flex items-center justify-center">
+            <div className="flex-1 flex justify-start">
-                {teasers?.[index]?.media_type === 'video' ? (
+              <button onClick={() => window.history.back()} className="text-white/80 p-1">
-                  <video
+                <X size={24} />
-                    src={url}
+              </button>
-                    className="max-w-full max-h-full object-contain"
+            </div>
-                    controls
+            {showCounter && images.length > 1 && (
-                    autoPlay={index === currentIndex}
+              <span className="text-white/70 text-sm tabular-nums">
-                  />
+                {currentIndex + 1} / {images.length}
-                ) : (
+              </span>
-                  <img
+            )}
-                    src={url}
+            <div className="flex-1 flex justify-end items-center gap-2">
-                    alt=""
+              {hasPhotoInfo && (
-                    className="max-w-full max-h-full object-contain"
+                <button onClick={openInfo} className="text-white/80 p-1">
-                    loading={Math.abs(index - currentIndex) <= 2 ? 'eager' : 'lazy'}
+                  <Info size={22} />
-                  />
+                </button>
-                )}
+              )}
-              </div>
+              {showDownload && (
-            </SwiperSlide>
+                <button onClick={downloadImage} className="text-white/80 p-1">
-          ))}
+                  <Download size={22} />
-        </Swiper>
+                </button>
+              )}
+            </div>
+          </div>
 
-        {/* 인디케이터 */}
+          {/* Swiper */}
-        {images.length > 1 && (
+          <Swiper
-          <LightboxIndicator
+            modules={[Virtual]}
-            count={images.length}
+            virtual
-            currentIndex={currentIndex}
+            initialSlide={currentIndex}
-            goToIndex={(i) => swiperRef.current?.slideTo(i)}
+            onSwiper={(swiper) => {
-            width={120}
+              swiperRef.current = swiper;
-          />
+            }}
-        )}
+            onSlideChange={(swiper) => onIndexChange(swiper.activeIndex)}
-
+            className="w-full h-full"
-        {/* 사진 정보 바텀시트 */}
+            spaceBetween={0}
-        <AnimatePresence>
+            slidesPerView={1}
-          {showInfo && hasPhotoInfo && (
+            resistance={true}
-            <motion.div
+            resistanceRatio={0.5}
-              initial={{ opacity: 0 }}
+          >
-              animate={{ opacity: 1 }}
+            {images.map((url, index) => (
-              exit={{ opacity: 0 }}
+              <SwiperSlide key={index} virtualIndex={index}>
-              className="absolute inset-0 bg-black/60 z-30"
+                <div className="w-full h-full flex items-center justify-center">
-              onClick={() => window.history.back()}
+                  {teasers?.[index]?.media_type === 'video' ? (
-            >
+                    <video
-              <motion.div
+                      src={url}
-                initial={{ y: '100%' }}
+                      className="max-w-full max-h-full object-contain"
-                animate={{ y: 0 }}
+                      controls
-                exit={{ y: '100%' }}
+                      autoPlay={index === currentIndex}
-                transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+                    />
-                drag="y"
+                  ) : (
-                dragConstraints={{ top: 0, bottom: 0 }}
+                    <img
-                dragElastic={{ top: 0, bottom: 0.5 }}
+                      src={url}
-                onDragEnd={(_, info) => {
+                      alt=""
-                  if (info.offset.y > 100 || info.velocity.y > 300) {
+                      className="max-w-full max-h-full object-contain"
-                    window.history.back();
+                      loading={Math.abs(index - currentIndex) <= 2 ? 'eager' : 'lazy'}
-                  }
+                    />
-                }}
-                className="absolute bottom-0 left-0 right-0 bg-zinc-900 rounded-t-3xl"
-                onClick={(e) => e.stopPropagation()}
-              >
-                {/* 드래그 핸들 */}
-                <div className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing">
-                  <div className="w-10 h-1 bg-zinc-600 rounded-full" />
-                </div>
-
-                {/* 정보 내용 */}
-                <div className="px-5 pb-8 space-y-4">
-                  <h3 className="text-white font-semibold text-lg">사진 정보</h3>
-
-                  {hasMembers && (
-                    <div className="flex items-start gap-3">
-                      <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center flex-shrink-0">
-                        <Users size={16} className="text-primary" />
-                      </div>
-                      <div>
-                        <p className="text-zinc-400 text-xs mb-1">멤버</p>
-                        <p className="text-white">{members}</p>
-                      </div>
-                    </div>
-                  )}
-
-                  {hasValidConcept && (
-                    <div className="flex items-start gap-3">
-                      <div className="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center flex-shrink-0">
-                        <Tag size={16} className="text-zinc-400" />
-                      </div>
-                      <div>
-                        <p className="text-zinc-400 text-xs mb-1">컨셉</p>
-                        <p className="text-white">{concept}</p>
-                      </div>
-                    </div>
                   )}
                 </div>
-              </motion.div>
+              </SwiperSlide>
-            </motion.div>
+            ))}
+          </Swiper>
+
+          {/* 인디케이터 */}
+          {images.length > 1 && (
+            <LightboxIndicator
+              count={images.length}
+              currentIndex={currentIndex}
+              goToIndex={(i) => swiperRef.current?.slideTo(i)}
+              width={120}
+            />
           )}
-        </AnimatePresence>
+
-      </motion.div>
+          {/* 사진 정보 바텀시트 */}
+          <AnimatePresence>
+            {showInfo && hasPhotoInfo && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="absolute inset-0 bg-black/60 z-30"
+                onClick={() => window.history.back()}
+              >
+                <motion.div
+                  initial={{ y: '100%' }}
+                  animate={{ y: 0 }}
+                  exit={{ y: '100%' }}
+                  transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+                  drag="y"
+                  dragConstraints={{ top: 0, bottom: 0 }}
+                  dragElastic={{ top: 0, bottom: 0.5 }}
+                  onDragEnd={(_, info) => {
+                    if (info.offset.y > 100 || info.velocity.y > 300) {
+                      window.history.back();
+                    }
+                  }}
+                  className="absolute bottom-0 left-0 right-0 bg-zinc-900 rounded-t-3xl"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {/* 드래그 핸들 */}
+                  <div className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing">
+                    <div className="w-10 h-1 bg-zinc-600 rounded-full" />
+                  </div>
+
+                  {/* 정보 내용 */}
+                  <div className="px-5 pb-8 space-y-4">
+                    <h3 className="text-white font-semibold text-lg">사진 정보</h3>
+
+                    {hasMembers && (
+                      <div className="flex items-start gap-3">
+                        <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center flex-shrink-0">
+                          <Users size={16} className="text-primary" />
+                        </div>
+                        <div>
+                          <p className="text-zinc-400 text-xs mb-1">멤버</p>
+                          <p className="text-white">{members}</p>
+                        </div>
+                      </div>
+                    )}
+
+                    {hasValidConcept && (
+                      <div className="flex items-start gap-3">
+                        <div className="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center flex-shrink-0">
+                          <Tag size={16} className="text-zinc-400" />
+                        </div>
+                        <div>
+                          <p className="text-zinc-400 text-xs mb-1">컨셉</p>
+                          <p className="text-white">{concept}</p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </motion.div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </motion.div>
+      )}
     </AnimatePresence>
   );
 }