refactor: 페이지네이션 적용

Hoya324 · Nov 10, 2024 · 6007b7a · 6007b7a
1 parent 3c0fff2
commit 6007b7a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 58 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -1,4 +1,3 @@
-/* Global Styles */
 body {
     font-family: Arial, sans-serif;
     color: #333;
@@ -8,8 +7,7 @@ body {
     box-sizing: border-box;
 }
 
-/* Hide unwanted elements */
-.masthead, .page__footer {
+.header-container, .masthead, .page__footer {
     display: none;
     visibility: hidden;
 }
@@ -202,7 +200,6 @@ h1 {
     top: 0;
 }
 
-/* Blinking cursor animation */
 @keyframes blink {
     from {
         opacity: 1;
@@ -212,30 +209,25 @@ h1 {
     }
 }
 
-/* Responsive Adjustments */
 @media (max-width: 1180px) {
-    /* Hide actual links (email, GitHub, blog) on mid-sized screens */
     .contact-info-inner div {
         display: none;
     }
 }
 
 @media (max-width: 768px) {
-    /* Gallery Container */
     .gallery-container {
         flex-direction: column;
         align-items: center;
     }
 
-    /* Sidebar */
     .gallery-sidebar {
         width: 100%;
         text-align: center;
         padding-right: 0;
         padding-bottom: 20px;
     }
 
-    /* Center-align contact info */
     .contact-info {
         max-width: 90%;
         text-align: center;
@@ -257,7 +249,6 @@ h1 {
         justify-content: center;
     }
 
-    /* Gallery Items */
     .gallery-item {
         flex: 1 1 calc(50% - 5px);
     }
@@ -267,14 +258,12 @@ h1 {
     }
 }
 
-/* Desktop view: Keep the text on one line */
 @media (min-width: 769px) {
     .typewriter-text {
         display: inline;
     }
 }
 
-/* Mobile view: Force line break */
 @media (max-width: 768px) {
     .typewriter-text {
         display: block;

diff --git a/assets/js/gallery.js b/assets/js/gallery.js
@@ -1,60 +1,71 @@
 document.addEventListener("DOMContentLoaded", function () {
-    // Check if the .gallery-grid element exists before proceeding
-    const grid = document.querySelector(".gallery-grid");
+        const grid = document.getElementById("galleryGrid");
+    let currentPage = 1;
+    const imagesPerPage = 10; // 한 번에 로드할 이미지 수
 
-    if (grid) {
-        function arrangeImages() {
-            const items = document.querySelectorAll(".gallery-item img");
+    // 이미지 로드 함수
+    async function loadImages(page) {
+        const response = await fetch(`/assets/data/photos.json`);
+        const photos = await response.json();
+        const startIndex = (page - 1) * imagesPerPage;
+        const endIndex = page * imagesPerPage;
+        const images = photos.slice(startIndex, endIndex);
 
-            items.forEach(img => {
-                const item = img.closest('.gallery-item');
-                const aspectRatio = img.naturalWidth / img.naturalHeight;
+        images.forEach(photo => {
+            const item = document.createElement("div");
+            item.className = "gallery-item";
+            const img = document.createElement("img");
+            img.src = `/assets/images/gallery/${photo.src}`;
+            img.alt = photo.alt;
+            img.loading = "lazy";
+            item.appendChild(img);
+            grid.appendChild(item);
+        });
+    }
 
-                if ((img.naturalWidth > img.naturalHeight) || aspectRatio > 1.5) {
-                    item.classList.add("wide");
-                } else {
-                    item.classList.remove("wide");
-                }
-            });
-        }
+    // 초기 이미지 로드
+    loadImages(currentPage);
 
-        arrangeImages();
-        window.addEventListener('resize', arrangeImages);
-    } else {
-        console.warn("Gallery grid not found in the DOM.");
-    }
+    // 스크롤 이벤트로 페이지 네이션 로드
+    window.addEventListener("scroll", () => {
+        if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+            currentPage++;
+            loadImages(currentPage);
+        }
+    });
 
-    // Lightbox functionality with error handling
-    try {
-        const lightbox = document.createElement('div');
+    // Lightbox 생성
+    let lightbox = document.getElementById('lightbox');
+    if (!lightbox) {
+        lightbox = document.createElement('div');
         lightbox.id = 'lightbox';
         document.body.appendChild(lightbox);
+    }
 
-        document.querySelectorAll('.gallery-item img').forEach(image => {
-            image.addEventListener('click', () => {
-                lightbox.classList.add('active');
-                const img = document.createElement('img');
-                img.src = image.src;
-                lightbox.innerHTML = ''; // Clear previous content
-                lightbox.appendChild(img);
-            });
-        });
-
-        // Close lightbox on click or ESC key
-        function closeLightbox() {
-            lightbox.classList.remove('active');
+    // Lightbox 기능 구현
+    document.addEventListener('click', (event) => {
+        const target = event.target;
+        if (target.tagName === 'IMG' && target.closest('.gallery-item')) {
+            lightbox.classList.add('active');
+            const img = document.createElement('img');
+            img.src = target.src;
+            lightbox.innerHTML = ''; // 이전 콘텐츠 제거
+            lightbox.appendChild(img);
         }
+    });
 
-        lightbox.addEventListener('click', closeLightbox);
-        document.addEventListener('keydown', (event) => {
-            if (event.key === "Escape") {
-                closeLightbox();
-            }
-        });
-    } catch (error) {
-        console.error("Error setting up lightbox:", error);
+    // Lightbox 닫기 기능
+    function closeLightbox() {
+        lightbox.classList.remove('active');
     }
 
+    lightbox.addEventListener('click', closeLightbox);
+    document.addEventListener('keydown', (event) => {
+        if (event.key === "Escape") {
+            closeLightbox();
+        }
+    });
+
     // Typewriter effect with support for <br> tags and blinking cursor
     function typeWriter(element, text, delay = 50) {
         let index = 0;

diff --git a/index.html b/index.html
@@ -28,7 +28,6 @@
     <link rel="icon" href="/assets/static/favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="/assets/static/favicon.ico" type="image/x-icon">
     <link rel="apple-touch-icon" href="/assets/static/favicon.ico">
-
     <link rel="stylesheet" href="/assets/css/styles.css">
     <script src="/assets/js/gallery.js" defer></script>
 </head>
@@ -41,7 +40,7 @@
     <main>
         <div class="gallery-container">
             <aside class="gallery-sidebar">
-                <h2 class="typewriter-text">반가워요!</h2>
+                <h2 class="typewriter-text"> 반가워요!</h2>
                 <h3 class="typewriter-text">나경호의<br>사진 저장소입니다.</h3>
                 <div class="contact-info">
                     <div class="contact-info-inner">
@@ -71,5 +70,11 @@ <h3 class="typewriter-text">나경호의<br>사진 저장소입니다.</h3>
     <footer class="gallery-footer">
         <p>© 나경호(Hoya324)</p>
     </footer>
+
+    <div id="lightbox" onclick="closeLightbox()">
+        <img id="lightbox-img" src="" alt="">
+    </div>
+
+    <script src="/assets/js/gallery.js"></script>
 </body>
 </html>