refactor: typing 모션 오류 fix

Hoya324 · Oct 27, 2024 · c9de186 · c9de186
1 parent 269e85e
commit c9de186
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 44 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -260,3 +260,17 @@ h1 {
         position: absolute;
     }
 }
+
+/* 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; /* Forces line break after each block-level element */
+    }
+}
diff --git a/assets/js/gallery.js b/assets/js/gallery.js
@@ -1,54 +1,62 @@
 document.addEventListener("DOMContentLoaded", function () {
     const grid = document.querySelector(".gallery-grid");
 
-    function arrangeImages() {
-        const items = Array.from(document.querySelectorAll(".gallery-item img"));
+    // Only proceed if .gallery-grid exists
+    if (grid) {
+        function arrangeImages() {
+            const items = Array.from(document.querySelectorAll(".gallery-item img"));
+
+            items.forEach(img => {
+                const item = img.closest('.gallery-item');
+                const aspectRatio = img.naturalWidth / img.naturalHeight;
 
-        items.forEach(img => {
-            const item = img.closest('.gallery-item');
-            const aspectRatio = img.naturalWidth / img.naturalHeight;
+                if ((img.naturalWidth > img.naturalHeight) || aspectRatio > 1.5) {
+                    item.classList.add("wide");
+                } else {
+                    item.classList.remove("wide");
+                }
+            });
+        }
 
-            if ((img.naturalWidth > img.naturalHeight) || aspectRatio > 1.5) {
-                item.classList.add("wide");
-            } else {
-                item.classList.remove("wide");
-            }
-        });
+        arrangeImages();
+        window.addEventListener('resize', arrangeImages);
+    } else {
+        console.warn("Gallery grid not found in the DOM.");
     }
 
-    arrangeImages();
-    window.addEventListener('resize', arrangeImages);
+    // Lightbox functionality with error handling
+    try {
+        const 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;
+                while (lightbox.firstChild) {
+                    lightbox.removeChild(lightbox.firstChild);
+                }
+                lightbox.appendChild(img);
+            });
+        });
 
-    // Lightbox functionality
-    const lightbox = document.createElement('div');
-    lightbox.id = 'lightbox';
-    document.body.appendChild(lightbox);
+        // Close lightbox on click or ESC key
+        function closeLightbox() {
+            lightbox.classList.remove('active');
+        }
 
-    document.querySelectorAll('.gallery-item img').forEach(image => {
-        image.addEventListener('click', () => {
-            lightbox.classList.add('active');
-            const img = document.createElement('img');
-            img.src = image.src;
-            while (lightbox.firstChild) {
-                lightbox.removeChild(lightbox.firstChild);
+        lightbox.addEventListener('click', closeLightbox);
+        document.addEventListener('keydown', (event) => {
+            if (event.key === "Escape") {
+                closeLightbox();
             }
-            lightbox.appendChild(img);
         });
-    });
-
-    // Close lightbox on click or ESC key
-    function closeLightbox() {
-        lightbox.classList.remove('active');
+    } catch (error) {
+        console.error("Error setting up lightbox:", error);
     }
 
-    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;
@@ -75,12 +83,16 @@ document.addEventListener("DOMContentLoaded", function () {
         type();
     }
 
-    // Select elements for typewriter effect with faster delay
+    // Only apply typewriter effect if elements exist
     const typewriterElements = document.querySelectorAll(".typewriter-text");
 
-    typewriterElements.forEach((element, index) => {
-        const text = element.innerHTML; // Get original HTML content including <br> tags
-        element.innerHTML = ""; // Clear initial content for animation
-        setTimeout(() => typeWriter(element, text, 45), index * 1000); // Faster delay of 50ms
-    });
+    if (typewriterElements.length > 0) {
+        typewriterElements.forEach((element, index) => {
+            const text = element.innerHTML; // Get original HTML content including <br> tags
+            element.innerHTML = ""; // Clear initial content for animation
+            setTimeout(() => typeWriter(element, text, 50), index * 1000); // Faster delay of 50ms
+        });
+    } else {
+        console.warn("Typewriter elements not found in the DOM.");
+    }
 });