From 6007b7a9452d2f4419e3e24f8ec8d05a53ca5c98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=82=98=EA=B2=BD=ED=98=B8?= Date: Sun, 10 Nov 2024 23:51:36 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/styles.css | 13 +----- assets/js/gallery.js | 99 ++++++++++++++++++++++++------------------- index.html | 9 +++- 3 files changed, 63 insertions(+), 58 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 1951ff9..4ab0eb2 100644 --- 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,22 +209,18 @@ 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; @@ -235,7 +228,6 @@ h1 { 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 index bfb86f5..d394dbd 100644 --- 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
tags and blinking cursor function typeWriter(element, text, delay = 50) { let index = 0; diff --git a/index.html b/index.html index 87928d0..b383e57 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,6 @@ - @@ -41,7 +40,7 @@