first commit 2

2026-06-11 18:47:38 +09:00
parent c768729ce6
commit 6f534e33a6
11095 changed files with 1595758 additions and 0 deletions
@@ -0,0 +1,92 @@
+// 이 스크립트는 main_visual 모듈이 로드될 때 즉시 실행됩니다.
+(function() {
+    const storySliderEl = document.querySelector('.story-slider');
+
+    // 슬라이더 요소가 없거나, 이미 초기화되었다면 중복 실행을 방지합니다.
+    if (!storySliderEl || storySliderEl.classList.contains('swiper-initialized')) {
+        return;
+    }
+
+    /**
+     * 슬라이더 내의 모든 비디오를 찾아 리셋하는 함수
+     * @param {HTMLElement} sliderElement - 슬라이더 컨테이너 요소
+     */
+    const resetAllVideos = (sliderElement) => {
+        sliderElement.querySelectorAll('video').forEach(video => {
+            if (!video.paused) {
+                video.pause();
+            }
+            video.currentTime = 0;
+        });
+    };
+
+    /**
+     * 현재 활성화된 슬라이드를 처리하는 함수
+     * @param {object} swiper - Swiper 인스턴스
+     */
+    const handleActiveSlide = (swiper) => {
+        // 💡 [안정성 강화] swiper 객체가 유효한지 확인 후 진행합니다.
+        if (!swiper || !swiper.el) {
+            console.error("handleActiveSlide: 유효하지 않은 Swiper 인스턴스입니다.");
+            return;
+        }
+
+        // 다른 모든 비디오를 먼저 리셋합니다.
+        resetAllVideos(swiper.el);
+
+        const activeSlide = swiper.slides[swiper.activeIndex];
+        const activeVideo = activeSlide?.querySelector('video');
+
+        if (activeSlide?.dataset?.type === 'video' && activeVideo) {
+            // 활성 슬라이드가 비디오일 경우, 자동재생을 멈춥니다.
+            swiper.autoplay.stop();
+
+            // 비디오를 재생합니다. (브라우저 정책에 의한 실패 대비)
+            activeVideo.play().catch(error => {
+                console.error("비디오 자동재생이 차단되었습니다:", error);
+                // 재생에 실패하면 다음 슬라이드로 즉시 이동합니다.
+                swiper.slideNext();
+            });
+
+            // 비디오가 끝나면 다음 슬라이드로 이동하도록 이벤트를 설정합니다.
+            activeVideo.onended = () => {
+                swiper.slideNext();
+            };
+        } else {
+            // 활성 슬라이드가 이미지일 경우, 자동재생을 다시 시작합니다.
+            swiper.autoplay.start();
+        }
+    };
+
+    // Swiper 라이브러리가 로드되었는지 확인 후 슬라이더를 초기화합니다.
+    if (typeof Swiper !== 'undefined') {
+        const swiper = new Swiper(storySliderEl, {
+            loop: true,
+            effect: 'fade',
+            fadeEffect: {
+                crossFade: true
+            },
+            pagination: {
+                el: '.swiper-pagination',
+                clickable: true,
+            },
+            autoplay: {
+                delay: 5000, // 💡 [개선] 비디오 재생을 고려하여 딜레이를 5초로 늘립니다.
+                disableOnInteraction: false,
+            },
+            on: {
+                // 💡 [수정] 'this'를 사용하여 Swiper 인스턴스를 안정적으로 전달합니다.
+                slideChange: function () {
+                    handleActiveSlide(this);
+                },
+                init: function () {
+                    handleActiveSlide(this);
+                }
+            }
+        });
+        // 초기화되었음을 표시하여 중복 실행을 막습니다.
+        storySliderEl.classList.add('swiper-initialized');
+    } else {
+        console.error('Swiper 라이브러리가 로드되지 않았습니다.');
+    }
+})();