feat: 갤러리 최적화 및 라우터 개선

- 컨셉 포토 갤러리 페이지 추가 (AlbumGallery.jsx)
- react-photo-album 라이브러리로 Justified 레이아웃 구현
- 썸네일/원본 이미지 분리 (thumb_400, original 폴더)
- 라우터 변경: /discography → /album
- URL 형식 변경: ID 기반 → 앨범명 기반 (/album/하얀 그리움)
- 앨범명 기반 API 추가 (/api/albums/by-name/:name)
- 브레드크럼 스타일 네비게이션 적용
- 라이트박스 슬라이드 애니메이션 추가
- 점 형태 인디케이터로 변경

backend/routes/albums.js

@@ -27,6 +27,73 @@ router.get("/", async (req, res) => {
   }
 });
 
+// 앨범명(slug)으로 조회
+router.get("/by-name/:name", async (req, res) => {
+  try {
+    // URL 디코딩된 앨범명으로 조회
+    const albumName = decodeURIComponent(req.params.name);
+    const [albums] = await pool.query("SELECT * FROM albums WHERE title = ?", [
+      albumName,
+    ]);
+
+    if (albums.length === 0) {
+      return res.status(404).json({ error: "앨범을 찾을 수 없습니다." });
+    }
+
+    const album = albums[0];
+
+    // 트랙 정보 조회 (가사 포함)
+    const [tracks] = await pool.query(
+      "SELECT * FROM tracks WHERE album_id = ? ORDER BY track_number",
+      [album.id]
+    );
+    album.tracks = tracks;
+
+    // 티저 이미지 조회
+    const [teasers] = await pool.query(
+      "SELECT image_url FROM album_teasers WHERE album_id = ? ORDER BY sort_order",
+      [album.id]
+    );
+    album.teasers = teasers.map((t) => t.image_url);
+
+    // 컨셉 포토 조회 (멤버 정보 포함)
+    const [photos] = await pool.query(
+      `SELECT 
+        p.id, p.photo_url, p.photo_type, p.concept_name, p.sort_order,
+        GROUP_CONCAT(m.name ORDER BY m.id SEPARATOR ', ') as members
+      FROM album_photos p
+      LEFT JOIN album_photo_members pm ON p.id = pm.photo_id
+      LEFT JOIN members m ON pm.member_id = m.id
+      WHERE p.album_id = ?
+      GROUP BY p.id
+      ORDER BY p.sort_order`,
+      [album.id]
+    );
+
+    // 컨셉별로 그룹화
+    const conceptPhotos = {};
+    for (const photo of photos) {
+      const concept = photo.concept_name || "Default";
+      if (!conceptPhotos[concept]) {
+        conceptPhotos[concept] = [];
+      }
+      conceptPhotos[concept].push({
+        id: photo.id,
+        url: photo.photo_url,
+        type: photo.photo_type,
+        members: photo.members,
+        sortOrder: photo.sort_order,
+      });
+    }
+    album.conceptPhotos = conceptPhotos;
+
+    res.json(album);
+  } catch (error) {
+    console.error("앨범 조회 오류:", error);
+    res.status(500).json({ error: "앨범 정보를 가져오는데 실패했습니다." });
+  }
+});
+
 // 특정 앨범 조회 (트랙 및 상세 정보 포함)
 router.get("/:id", async (req, res) => {
   try {
@@ -54,6 +121,37 @@ router.get("/:id", async (req, res) => {
     );
     album.teasers = teasers.map((t) => t.image_url);
 
+    // 컨셉 포토 조회 (멤버 정보 포함)
+    const [photos] = await pool.query(
+      `SELECT 
+        p.id, p.photo_url, p.photo_type, p.concept_name, p.sort_order,
+        GROUP_CONCAT(m.name ORDER BY m.id SEPARATOR ', ') as members
+      FROM album_photos p
+      LEFT JOIN album_photo_members pm ON p.id = pm.photo_id
+      LEFT JOIN members m ON pm.member_id = m.id
+      WHERE p.album_id = ?
+      GROUP BY p.id
+      ORDER BY p.sort_order`,
+      [album.id]
+    );
+
+    // 컨셉별로 그룹화
+    const conceptPhotos = {};
+    for (const photo of photos) {
+      const concept = photo.concept_name || "Default";
+      if (!conceptPhotos[concept]) {
+        conceptPhotos[concept] = [];
+      }
+      conceptPhotos[concept].push({
+        id: photo.id,
+        url: photo.photo_url,
+        type: photo.photo_type,
+        members: photo.members,
+        sortOrder: photo.sort_order,
+      });
+    }
+    album.conceptPhotos = conceptPhotos;
+
     res.json(album);
   } catch (error) {
     console.error("앨범 조회 오류:", error);

frontend/package-lock.json

@@ -13,6 +13,7 @@
                 "react": "^18.2.0",
                 "react-device-detect": "^2.2.3",
                 "react-dom": "^18.2.0",
+                "react-photo-album": "^3.4.0",
                 "react-router-dom": "^6.22.3"
             },
             "devDependencies": {
@@ -1179,14 +1180,14 @@
             "version": "15.7.15",
             "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
             "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/@types/react": {
             "version": "18.3.27",
             "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
             "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "@types/prop-types": "*",
@@ -1462,7 +1463,7 @@
             "version": "3.2.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
             "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/debug": {
@@ -2246,6 +2247,27 @@
                 "react": "^18.3.1"
             }
         },
+        "node_modules/react-photo-album": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.4.0.tgz",
+            "integrity": "sha512-pPaCoxEfVDhowpqxECq4SOD5kzP1Uao8PEN11Jasxayv4cZjad3Fy8SlKt6wvtLnVJRtOjsQDU/ZnnUuberwMg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/igordanchenko"
+            },
+            "peerDependencies": {
+                "@types/react": "^18 || ^19",
+                "react": "^18 || ^19"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/react-refresh": {
             "version": "0.17.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

frontend/package.json

@@ -14,6 +14,7 @@
         "react": "^18.2.0",
         "react-device-detect": "^2.2.3",
         "react-dom": "^18.2.0",
+        "react-photo-album": "^3.4.0",
         "react-router-dom": "^6.22.3"
     },
     "devDependencies": {
@@ -25,4 +26,4 @@
         "tailwindcss": "^3.4.18",
         "vite": "^5.4.1"
     }
-}
+}

frontend/src/App.jsx

@@ -6,6 +6,7 @@ import PCHome from './pages/pc/Home';
 import PCMembers from './pages/pc/Members';
 import PCDiscography from './pages/pc/Discography';
 import PCAlbumDetail from './pages/pc/AlbumDetail';
+import PCAlbumGallery from './pages/pc/AlbumGallery';
 import PCSchedule from './pages/pc/Schedule';
 
 // PC 레이아웃
@@ -19,8 +20,9 @@ function App() {
                     <Routes>
                         <Route path="/" element={<PCHome />} />
                         <Route path="/members" element={<PCMembers />} />
-                        <Route path="/discography" element={<PCDiscography />} />
+                        <Route path="/album" element={<PCDiscography />} />
-                        <Route path="/discography/:id" element={<PCAlbumDetail />} />
+                        <Route path="/album/:name" element={<PCAlbumDetail />} />
+                        <Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
                         <Route path="/schedule" element={<PCSchedule />} />
                     </Routes>
                 </PCLayout>

frontend/src/components/pc/Header.jsx

@@ -13,7 +13,7 @@ function Header() {
     const navItems = [
         { path: '/', label: '홈' },
         { path: '/members', label: '멤버' },
-        { path: '/discography', label: '앨범' },
+        { path: '/album', label: '앨범' },
         { path: '/schedule', label: '스케줄' },
     ];
 

frontend/src/pages/pc/AlbumDetail.jsx

@@ -1,18 +1,104 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ArrowLeft, Calendar, Music2, Play, Clock, X, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
 
 function AlbumDetail() {
-    const { id } = useParams();
+    const { name } = useParams();
     const navigate = useNavigate();
     const [album, setAlbum] = useState(null);
     const [loading, setLoading] = useState(true);
     const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0 });
     const [slideDirection, setSlideDirection] = useState(0);
+    const [imageLoaded, setImageLoaded] = useState(false);
+
+    // 라이트박스 네비게이션 함수
+    const goToPrev = useCallback(() => {
+        if (lightbox.images.length <= 1) return;
+        setImageLoaded(false);
+        setSlideDirection(-1);
+        setLightbox(prev => ({
+            ...prev,
+            index: (prev.index - 1 + prev.images.length) % prev.images.length
+        }));
+    }, [lightbox.images.length]);
+
+    const goToNext = useCallback(() => {
+        if (lightbox.images.length <= 1) return;
+        setImageLoaded(false);
+        setSlideDirection(1);
+        setLightbox(prev => ({
+            ...prev,
+            index: (prev.index + 1) % prev.images.length
+        }));
+    }, [lightbox.images.length]);
+
+    const closeLightbox = useCallback(() => {
+        setLightbox(prev => ({ ...prev, open: false }));
+    }, []);
+
+    // 이미지 다운로드 함수
+    const downloadImage = useCallback(async () => {
+        const imageUrl = lightbox.images[lightbox.index];
+        if (!imageUrl) return;
+        
+        try {
+            const response = await fetch(imageUrl);
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `fromis9_photo_${String(lightbox.index + 1).padStart(2, '0')}.webp`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('다운로드 오류:', error);
+        }
+    }, [lightbox.images, lightbox.index]);
+
+    // 키보드 이벤트 핸들러
+    useEffect(() => {
+        if (!lightbox.open) return;
+
+        const handleKeyDown = (e) => {
+            switch (e.key) {
+                case 'ArrowLeft':
+                    goToPrev();
+                    break;
+                case 'ArrowRight':
+                    goToNext();
+                    break;
+                case 'Escape':
+                    closeLightbox();
+                    break;
+                default:
+                    break;
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [lightbox.open, goToPrev, goToNext, closeLightbox]);
+
+    // 이미지 프리로딩 (이전/다음 이미지)
+    useEffect(() => {
+        if (!lightbox.open || lightbox.images.length <= 1) return;
+        
+        const preloadImages = [];
+        const prevIdx = (lightbox.index - 1 + lightbox.images.length) % lightbox.images.length;
+        const nextIdx = (lightbox.index + 1) % lightbox.images.length;
+        
+        [prevIdx, nextIdx].forEach(idx => {
+            const img = new Image();
+            img.src = lightbox.images[idx];
+            preloadImages.push(img);
+        });
+    }, [lightbox.open, lightbox.index, lightbox.images]);
 
     useEffect(() => {
-        fetch(`/api/albums/${id}`)
+        fetch(`/api/albums/by-name/${name}`)
             .then(res => res.json())
             .then(data => {
                 setAlbum(data);
@@ -22,7 +108,20 @@ function AlbumDetail() {
                 console.error('앨범 데이터 로드 오류:', error);
                 setLoading(false);
             });
-    }, [id]);
+    }, [name]);
+
+    // URL을 썸네일/원본 버전으로 변환하는 헬퍼
+    const getThumbUrl = (url) => {
+        const parts = url.split('/');
+        const filename = parts.pop();
+        return [...parts, 'thumb_400', filename].join('/');
+    };
+
+    const getOriginalUrl = (url) => {
+        const parts = url.split('/');
+        const filename = parts.pop();
+        return [...parts, 'original', filename].join('/');
+    };
 
     // 날짜 포맷팅
     const formatDate = (dateStr) => {
@@ -48,7 +147,7 @@ function AlbumDetail() {
 
     // 뒤로가기
     const handleBack = () => {
-        navigate('/discography');
+        navigate('/album');
     };
 
     if (loading) {
@@ -80,16 +179,17 @@ function AlbumDetail() {
             className="py-16"
         >
             <div className="max-w-7xl mx-auto px-6">
-                {/* 뒤로가기 버튼 */}
+                {/* 브레드크럼 네비게이션 */}
-                <motion.button
+                <div className="flex items-center gap-2 text-sm text-gray-500 mb-6">
-                    initial={{ opacity: 0, x: -20 }}
+                    <button 
-                    animate={{ opacity: 1, x: 0 }}
+                        onClick={handleBack}
-                    onClick={handleBack}
+                        className="hover:text-primary transition-colors"
-                    className="flex items-center gap-2 text-gray-500 hover:text-primary mb-8 transition-colors"
+                    >
-                >
+                        앨범
-                    <ArrowLeft size={20} />
+                    </button>
-                    <span>앨범으로 돌아가기</span>
+                    <span>/</span>
-                </motion.button>
+                    <span className="text-gray-700">{album?.title}</span>
+                </div>
 
                 {/* 앨범 정보 헤더 */}
                 <div className="flex gap-8 mb-10">
@@ -148,11 +248,11 @@ function AlbumDetail() {
                                     {album.teasers.map((teaser, index) => (
                                         <div 
                                             key={index}
-                                            onClick={() => setLightbox({ open: true, images: album.teasers, index })}
+                                        onClick={() => setLightbox({ open: true, images: album.teasers.map(t => getOriginalUrl(t)), index })}
                                             className="w-24 h-24 bg-gray-200 rounded-lg overflow-hidden cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-xl hover:z-10"
                                         >
                                             <img 
-                                                src={teaser}
+                                                src={getThumbUrl(teaser)}
                                                 alt={`Teaser ${index + 1}`}
                                                 className="w-full h-full object-cover"
                                             />
@@ -229,36 +329,50 @@ function AlbumDetail() {
                 </div>
 
                 {/* 컨셉 포토 섹션 */}
+                {album.conceptPhotos && Object.keys(album.conceptPhotos).length > 0 && (
                 <motion.div
                     initial={{ opacity: 0, y: 30 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: 0.4, duration: 0.4 }}
                     className="mt-10"
                 >
-                    <div className="flex items-center justify-between mb-4">
+                    {(() => {
-                        <h2 className="text-xl font-bold">컨셉 포토</h2>
+                        // 모든 컨셉 포토를 하나의 배열로 합치고 처음 4개만 표시
-                        <button className="text-sm text-primary hover:underline">
+                        const allPhotos = Object.values(album.conceptPhotos).flat();
-                            전체보기 (12장)
+                        const previewPhotos = allPhotos.slice(0, 4);
-                        </button>
+                        const totalCount = allPhotos.length;
-                    </div>
+                        
-                    {/* 4장 정사각형 그리드 - 실제 이미지는 object-cover로 크롭 */}
+                        return (
-                    <div className="grid grid-cols-4 gap-4">
+                            <>
-                        {[1, 2, 3, 4].map((num) => (
+                                <div className="flex items-center justify-between mb-4">
-                            <div 
+                                    <h2 className="text-xl font-bold">컨셉 포토</h2>
-                                key={num}
+                                    <button 
-                                className="group relative aspect-square bg-gray-200 rounded-xl overflow-hidden cursor-pointer"
+                                        className="text-sm text-primary hover:underline"
-                            >
+                                        onClick={() => navigate(`/album/${name}/gallery`)}
-                                {/* 실제 이미지가 들어갈 자리 - object-cover로 중앙 크롭 */}
+                                    >
-                                {/* <img src={photo.url} className="w-full h-full object-cover" /> */}
+                                        전체보기 ({totalCount}장)
-                                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
+                                    </button>
-                                {/* 더미 플레이스홀더 */}
-                                <div className="absolute inset-0 flex items-center justify-center text-gray-400">
-                                    <span className="text-4xl font-bold">{num}</span>
                                 </div>
-                            </div>
+                                <div className="grid grid-cols-4 gap-4">
-                        ))}
+                                    {previewPhotos.map((photo, idx) => (
-                    </div>
+                                        <div 
+                                            key={photo.id}
+                                            onClick={() => setLightbox({ open: true, images: [getOriginalUrl(photo.url)], index: 0 })}
+                                            className="aspect-square bg-gray-200 rounded-xl overflow-hidden cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-xl hover:z-10"
+                                        >
+                                            <img 
+                                                src={getThumbUrl(photo.url)} 
+                                                alt={`컨셉 포토 ${idx + 1}`}
+                                                className="w-full h-full object-cover"
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </>
+                        );
+                    })()}
                 </motion.div>
+                )}
             </div>
         </motion.div>
 
@@ -272,61 +386,75 @@ function AlbumDetail() {
                 transition={{ duration: 0.2 }}
                 className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
             >
-                {/* 닫기 버튼 */}
+                {/* 상단 버튼들 */}
-                <button 
+                <div className="absolute top-6 right-6 flex gap-3 z-10">
-                    className="absolute top-6 right-6 text-white/70 hover:text-white transition-colors"
+                    {/* 다운로드 버튼 */}
-                    onClick={() => setLightbox({ ...lightbox, open: false })}
+                    <button 
-                >
+                        className="text-white/70 hover:text-white transition-colors"
-                    <X size={32} />
+                        onClick={(e) => {
-                </button>
+                            e.stopPropagation();
+                            downloadImage();
+                        }}
+                    >
+                        <Download size={28} />
+                    </button>
+                    {/* 닫기 버튼 */}
+                    <button 
+                        className="text-white/70 hover:text-white transition-colors"
+                        onClick={closeLightbox}
+                    >
+                        <X size={32} />
+                    </button>
+                </div>
 
                 {/* 이전 버튼 */}
                 {lightbox.images.length > 1 && (
                     <button 
-                        className="absolute left-6 text-white/70 hover:text-white transition-colors"
+                        className="absolute left-6 text-white/70 hover:text-white transition-colors z-10"
                         onClick={(e) => {
                             e.stopPropagation();
-                            setSlideDirection(-1);
+                            goToPrev();
-                            setLightbox({
-                                ...lightbox,
-                                index: (lightbox.index - 1 + lightbox.images.length) % lightbox.images.length
-                            });
                         }}
                     >
                         <ChevronLeft size={48} />
                     </button>
                 )}
 
+                {/* 로딩 스피너 */}
+                {!imageLoaded && (
+                    <div className="absolute inset-0 flex items-center justify-center">
+                        <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent"></div>
+                    </div>
+                )}
+
                 {/* 이미지 */}
                 <motion.img 
                     key={lightbox.index}
                     src={lightbox.images[lightbox.index]}
                     alt="확대 이미지"
-                    className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
+                    className={`max-w-[90vw] max-h-[90vh] object-contain rounded-lg transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
                     onClick={(e) => e.stopPropagation()}
-                    initial={{ opacity: 0, x: slideDirection * 100 }}
+                    onLoad={() => setImageLoaded(true)}
-                    animate={{ opacity: 1, x: 0 }}
+                    initial={{ x: slideDirection * 100 }}
+                    animate={{ x: 0 }}
                     transition={{ duration: 0.25, ease: 'easeOut' }}
                 />
 
                 {/* 다음 버튼 */}
                 {lightbox.images.length > 1 && (
                     <button 
-                        className="absolute right-6 text-white/70 hover:text-white transition-colors"
+                        className="absolute right-6 text-white/70 hover:text-white transition-colors z-10"
                         onClick={(e) => {
                             e.stopPropagation();
-                            setSlideDirection(1);
+                            goToNext();
-                            setLightbox({
-                                ...lightbox,
-                                index: (lightbox.index + 1) % lightbox.images.length
-                            });
                         }}
                     >
                         <ChevronRight size={48} />
                     </button>
                 )}
 
-                {/* 인디케이터 */}
+                {/* 인디케이터 - 이미지 2개 이상일 때만 표시 */}
+                {lightbox.images.length > 1 && (
                 <div className="absolute bottom-6 flex gap-2">
                     {lightbox.images.map((_, i) => (
                         <button
@@ -339,6 +467,7 @@ function AlbumDetail() {
                         />
                     ))}
                 </div>
+                )}
             </motion.div>
         )}
         </AnimatePresence>

frontend/src/pages/pc/AlbumGallery.jsx

@@ -0,0 +1,316 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
+import { RowsPhotoAlbum } from 'react-photo-album';
+import 'react-photo-album/rows.css';
+
+function AlbumGallery() {
+    const { name } = useParams();
+    const navigate = useNavigate();
+    const [album, setAlbum] = useState(null);
+    const [photos, setPhotos] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [lightbox, setLightbox] = useState({ open: false, index: 0 });
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [slideDirection, setSlideDirection] = useState(0);
+
+    // URL을 썸네일/원본 버전으로 변환하는 헬퍼
+    const getThumbUrl = (url) => {
+        // https://s3.../photo/01.webp → https://s3.../photo/thumb_400/01.webp
+        const parts = url.split('/');
+        const filename = parts.pop();
+        return [...parts, 'thumb_400', filename].join('/');
+    };
+
+    const getOriginalUrl = (url) => {
+        const parts = url.split('/');
+        const filename = parts.pop();
+        return [...parts, 'original', filename].join('/');
+    };
+
+    // 이미지 dimensions 로드
+    const loadImageDimensions = (url) => {
+        return new Promise((resolve) => {
+            const img = new Image();
+            img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            img.onerror = () => resolve({ width: 3, height: 4 }); // 기본 3:4 비율
+            img.src = url;
+        });
+    };
+
+    useEffect(() => {
+        fetch(`/api/albums/by-name/${name}`)
+            .then(res => res.json())
+            .then(async data => {
+                setAlbum(data);
+                const allPhotos = [];
+                
+                if (data.conceptPhotos && typeof data.conceptPhotos === 'object') {
+                    Object.entries(data.conceptPhotos).forEach(([concept, photos]) => {
+                        photos.forEach(p => allPhotos.push({ 
+                            thumbUrl: getThumbUrl(p.url),
+                            originalUrl: getOriginalUrl(p.url),
+                            title: concept,
+                            members: p.members ? p.members.split(', ') : []
+                        }));
+                    });
+                }
+                
+                // 모든 이미지 dimensions 로드
+                const photosWithDimensions = await Promise.all(
+                    allPhotos.map(async (photo) => {
+                        const dims = await loadImageDimensions(photo.thumbUrl);
+                        return { ...photo, width: dims.width, height: dims.height };
+                    })
+                );
+                
+                setPhotos(photosWithDimensions);
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('앨범 데이터 로드 오류:', error);
+                setLoading(false);
+            });
+    }, [id]);
+
+    // 라이트박스 열기
+    const openLightbox = (index) => {
+        setImageLoaded(false);
+        setLightbox({ open: true, index });
+    };
+
+    // 라이트박스 닫기
+    const closeLightbox = useCallback(() => {
+        setLightbox(prev => ({ ...prev, open: false }));
+    }, []);
+
+    // 이전/다음 이미지
+    const goToPrev = useCallback(() => {
+        if (photos.length <= 1) return;
+        setImageLoaded(false);
+        setSlideDirection(-1);
+        setLightbox(prev => ({
+            ...prev,
+            index: (prev.index - 1 + photos.length) % photos.length
+        }));
+    }, [photos.length]);
+
+    const goToNext = useCallback(() => {
+        if (photos.length <= 1) return;
+        setImageLoaded(false);
+        setSlideDirection(1);
+        setLightbox(prev => ({
+            ...prev,
+            index: (prev.index + 1) % photos.length
+        }));
+    }, [photos.length]);
+
+    // 다운로드
+    const downloadImage = useCallback(async () => {
+        const photo = photos[lightbox.index];
+        if (!photo) return;
+        
+        try {
+            const response = await fetch(photo.originalUrl);
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `fromis9_${album?.title || 'photo'}_${String(lightbox.index + 1).padStart(2, '0')}.webp`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('다운로드 오류:', error);
+        }
+    }, [photos, lightbox.index, album?.title]);
+
+    // 키보드 이벤트
+    useEffect(() => {
+        if (!lightbox.open) return;
+
+        const handleKeyDown = (e) => {
+            switch (e.key) {
+                case 'ArrowLeft': goToPrev(); break;
+                case 'ArrowRight': goToNext(); break;
+                case 'Escape': closeLightbox(); break;
+                default: break;
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [lightbox.open, goToPrev, goToNext, closeLightbox]);
+
+    // 프리로딩
+    useEffect(() => {
+        if (!lightbox.open || photos.length <= 1) return;
+        
+        const prevIdx = (lightbox.index - 1 + photos.length) % photos.length;
+        const nextIdx = (lightbox.index + 1) % photos.length;
+        
+        [prevIdx, nextIdx].forEach(idx => {
+            const img = new Image();
+            img.src = photos[idx].originalUrl;
+        });
+    }, [lightbox.open, lightbox.index, photos]);
+
+    if (loading) {
+        return (
+            <motion.div 
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="py-16 flex justify-center items-center min-h-[60vh]"
+            >
+                <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+            </motion.div>
+        );
+    }
+
+    return (
+        <>
+        <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+            className="py-16"
+        >
+            <div className="container mx-auto px-4">
+                {/* 브레드크럼 스타일 헤더 */}
+                <div className="mb-8">
+                    <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+                        <button 
+                            onClick={() => navigate('/album')}
+                            className="hover:text-primary transition-colors"
+                        >
+                            앨범
+                        </button>
+                        <span>/</span>
+                        <button 
+                            onClick={() => navigate(`/album/${name}`)}
+                            className="hover:text-primary transition-colors"
+                        >
+                            {album?.title}
+                        </button>
+                        <span>/</span>
+                        <span className="text-gray-700">컨셉 포토</span>
+                    </div>
+                    <h1 className="text-3xl font-bold">컨셉 포토</h1>
+                    <p className="text-gray-500 mt-1">{photos.length}장의 사진</p>
+                </div>
+
+                {/* Justified 갤러리 - react-photo-album */}
+                <RowsPhotoAlbum
+                    photos={photos.map((photo, idx) => ({
+                        src: photo.thumbUrl,
+                        width: photo.width || 300,
+                        height: photo.height || 400,
+                        key: idx.toString()
+                    }))}
+                    targetRowHeight={300}
+                    spacing={8}
+                    onClick={({ index }) => openLightbox(index)}
+                    componentsProps={{
+                        container: { style: { cursor: 'pointer' } },
+                        image: { 
+                            loading: 'lazy',
+                            style: { borderRadius: '8px', transition: 'transform 0.3s' }
+                        }
+                    }}
+                />
+            </div>
+        </motion.div>
+
+        {/* 라이트박스 */}
+        <AnimatePresence>
+        {lightbox.open && (
+            <motion.div 
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="fixed inset-0 bg-black/95 z-50 flex items-center justify-center"
+            >
+                {/* 상단 버튼들 */}
+                <div className="absolute top-6 right-6 flex gap-3 z-10">
+                    <button 
+                        className="text-white/70 hover:text-white transition-colors"
+                        onClick={downloadImage}
+                    >
+                        <Download size={28} />
+                    </button>
+                    <button 
+                        className="text-white/70 hover:text-white transition-colors"
+                        onClick={closeLightbox}
+                    >
+                        <X size={32} />
+                    </button>
+                </div>
+
+                {/* 카운터 */}
+                <div className="absolute top-6 left-6 text-white/70 text-sm z-10">
+                    {lightbox.index + 1} / {photos.length}
+                </div>
+
+                {/* 이전 버튼 */}
+                {photos.length > 1 && (
+                    <button 
+                        className="absolute left-6 text-white/70 hover:text-white transition-colors z-10"
+                        onClick={goToPrev}
+                    >
+                        <ChevronLeft size={48} />
+                    </button>
+                )}
+
+                {/* 로딩 스피너 */}
+                {!imageLoaded && (
+                    <div className="absolute inset-0 flex items-center justify-center">
+                        <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent"></div>
+                    </div>
+                )}
+
+                {/* 이미지 */}
+                <motion.img 
+                    key={lightbox.index}
+                    src={photos[lightbox.index]?.originalUrl}
+                    alt="확대 이미지"
+                    className={`max-w-[90vw] max-h-[85vh] object-contain rounded-lg transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+                    onLoad={() => setImageLoaded(true)}
+                    initial={{ x: slideDirection * 100 }}
+                    animate={{ x: 0 }}
+                    transition={{ duration: 0.25, ease: 'easeOut' }}
+                />
+
+                {/* 다음 버튼 */}
+                {photos.length > 1 && (
+                    <button 
+                        className="absolute right-6 text-white/70 hover:text-white transition-colors z-10"
+                        onClick={goToNext}
+                    >
+                        <ChevronRight size={48} />
+                    </button>
+                )}
+
+                {/* 하단 점 인디케이터 */}
+                <div className="absolute bottom-6 flex gap-1.5 flex-wrap justify-center max-w-[80vw]">
+                    {photos.map((_, i) => (
+                        <button
+                            key={i}
+                            className={`w-2 h-2 rounded-full transition-colors ${i === lightbox.index ? 'bg-white' : 'bg-white/40'}`}
+                            onClick={() => {
+                                setImageLoaded(false);
+                                setLightbox({ ...lightbox, index: i });
+                            }}
+                        />
+                    ))}
+                </div>
+            </motion.div>
+        )}
+        </AnimatePresence>
+        </>
+    );
+}
+
+export default AlbumGallery;

frontend/src/pages/pc/Discography.jsx

@@ -44,8 +44,8 @@ function Discography() {
     };
 
     // 앨범 클릭 핸들러
-    const handleAlbumClick = (albumId) => {
+    const handleAlbumClick = (albumTitle) => {
-        navigate(`/discography/${albumId}`);
+        navigate(`/album/${encodeURIComponent(albumTitle)}`);
     };
 
     if (loading) {
@@ -112,7 +112,7 @@ function Discography() {
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: index * 0.1 }}
                             className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 cursor-pointer"
-                            onClick={() => handleAlbumClick(album.id)}
+                            onClick={() => handleAlbumClick(album.title)}
                         >
                             {/* 앨범 커버 */}
                             <div 

frontend/src/pages/pc/Home.jsx

@@ -63,7 +63,7 @@ function Home() {
                             <p className="text-gray-500 group-hover:text-white/80">5명의 멤버를 만나보세요</p>
                         </Link>
                         <Link
-                            to="/discography"
+                            to="/album"
                             className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
                         >
                             <Disc3 size={40} className="mb-4 text-primary group-hover:text-white" />