From 96e7ae05399474670b72e80c862462cc6f6d25c0 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Fri, 2 Jan 2026 12:20:08 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20AlbumGallery=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EB=A1=9C=EB=93=9C=20=EC=95=A0=EB=8B=88=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/pc/AlbumGallery.jsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/pc/AlbumGallery.jsx b/frontend/src/pages/pc/AlbumGallery.jsx
index 8c55e20..b838a23 100644
--- a/frontend/src/pages/pc/AlbumGallery.jsx
+++ b/frontend/src/pages/pc/AlbumGallery.jsx
@@ -5,8 +5,18 @@ import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
 import { RowsPhotoAlbum } from 'react-photo-album';
 import 'react-photo-album/rows.css';
 
-// CSS로 호버 효과 추가 + overflow 문제 수정
+// CSS로 호버 효과 추가 + overflow 문제 수정 + 로드 애니메이션
 const galleryStyles = `
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
 .react-photo-album {
     overflow: visible !important;
 }
@@ -17,12 +27,25 @@ const galleryStyles = `
     transition: transform 0.3s ease, filter 0.3s ease !important;
     cursor: pointer;
     overflow: visible !important;
+    animation: fadeInUp 0.4s ease-out backwards;
 }
 .react-photo-album--photo:hover {
     transform: scale(1.05);
     filter: brightness(0.9);
     z-index: 10;
 }
+/* 순차적 로드 애니메이션 */
+.react-photo-album--photo:nth-child(1) { animation-delay: 0.02s; }
+.react-photo-album--photo:nth-child(2) { animation-delay: 0.04s; }
+.react-photo-album--photo:nth-child(3) { animation-delay: 0.06s; }
+.react-photo-album--photo:nth-child(4) { animation-delay: 0.08s; }
+.react-photo-album--photo:nth-child(5) { animation-delay: 0.1s; }
+.react-photo-album--photo:nth-child(6) { animation-delay: 0.12s; }
+.react-photo-album--photo:nth-child(7) { animation-delay: 0.14s; }
+.react-photo-album--photo:nth-child(8) { animation-delay: 0.16s; }
+.react-photo-album--photo:nth-child(9) { animation-delay: 0.18s; }
+.react-photo-album--photo:nth-child(10) { animation-delay: 0.2s; }
+.react-photo-album--photo:nth-child(n+11) { animation-delay: 0.22s; }
 `;
 
 function AlbumGallery() {