first commit

src/main/resources/static/js/sub.js

@@ -0,0 +1,157 @@
+
+/* ========================== Head & Footer */
+$.get("/include/header").done(function (html) {
+    $("#hd").html(html);
+    $("#top_nav_wrap").removeClass("main").addClass("sub");
+});
+$.get("/include/footer").done(function (html) {
+    $("#ft").html(html);
+});
+
+
+/* ========================== SUB BREADCRUMB */
+ $(document).ready(function () {
+ 
+    /* ---- 서브 비주얼 로드 애니메이션 ---- */
+    setTimeout(function () {
+        $('#sub_visual').addClass('loaded');
+    }, 50);
+ 
+ 
+    /* ---- 브레드크럼 드롭다운 ---- */
+    const $bcItems = $('.bc-item');
+ 
+    $bcItems.each(function () {
+        const $item = $(this);
+        const $btn  = $item.find('.bc-btn');
+        const $drop = $item.find('.bc-dropdown');
+ 
+        $btn.on('click', function (e) {
+            e.stopPropagation();
+            const isOpen = $item.hasClass('open');
+ 
+            // 모든 드롭다운 닫기
+            closeAll();
+ 
+            if (!isOpen) {
+                $item.addClass('open');
+                $btn.attr('aria-expanded', 'true');
+                // show 클래스를 requestAnimationFrame으로 추가해 transition 작동
+                $drop.css('display', 'block');
+                requestAnimationFrame(function () {
+                    $drop.addClass('show');
+                });
+            }
+        });
+    });
+ 
+    // 외부 클릭 시 닫기
+    $(document).on('click', function () {
+        closeAll();
+    });
+ 
+    // 드롭다운 내부 클릭은 전파 막기
+    $('.bc-dropdown').on('click', function (e) {
+        e.stopPropagation();
+    });
+ 
+    function closeAll() {
+        $bcItems.each(function () {
+            const $item = $(this);
+            const $btn  = $item.find('.bc-btn');
+            const $drop = $item.find('.bc-dropdown');
+ 
+            $item.removeClass('open');
+            $btn.attr('aria-expanded', 'false');
+            $drop.removeClass('show');
+ 
+            // transition 끝나면 display:none
+            $drop.one('transitionend', function () {
+                if (!$item.hasClass('open')) {
+                    $drop.css('display', 'none');
+                }
+            });
+        });
+    }
+ 
+    // 키보드 ESC 닫기
+    $(document).on('keydown', function (e) {
+        if (e.key === 'Escape') closeAll();
+    });
+ 
+});
+
+
+
+/* ========================== AOS & feather icon */
+AOS.init();
+feather.replace(); 
+
+
+/* ========================== Quick Banner */
+function updateQuickPos() {
+	const quick = document.querySelector('.quick_wrap');
+	const footer = document.getElementById('ft');
+	if (!quick || !footer) return;
+
+	const defaultBottom = window.innerWidth <= 1400 ? 10 : 40; // px
+	const footerTop = footer.getBoundingClientRect().top;
+	const windowH = window.innerHeight;
+
+	if (footerTop < windowH) {
+		// 푸터가 화면에 진입했을 때
+		const offset = windowH - footerTop + defaultBottom;
+		quick.style.bottom = offset + 'px';
+	} else {
+		quick.style.bottom = defaultBottom + 'px';
+	}
+}
+
+window.addEventListener('scroll', updateQuickPos);
+window.addEventListener('resize', updateQuickPos);
+updateQuickPos();
+
+// TOP 버튼 클릭 시 최상단 이동
+document.querySelector('.top_btn').addEventListener('click', function () {
+	window.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+
+
+/* ========================== Tab js */
+
+document.querySelectorAll('.sub-tab').forEach(function(tabWrap) {
+    var btns   = tabWrap.querySelectorAll('.sub-tab__btn');
+    var panels = tabWrap.querySelectorAll('.sub-tab__panel');
+ 
+    btns.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            var targetId = this.getAttribute('aria-controls');
+ 
+            // 탭 버튼 초기화
+            btns.forEach(function(b) {
+                b.classList.remove('is-active');
+                b.setAttribute('aria-selected', 'false');
+            });
+ 
+            // 패널 초기화
+            panels.forEach(function(p) {
+                p.classList.remove('is-active');
+            });
+ 
+            // 활성화
+            this.classList.add('is-active');
+            this.setAttribute('aria-selected', 'true');
+ 
+            var target = document.getElementById(targetId);
+            if (target) target.classList.add('is-active');
+        });
+ 
+        // 키보드 접근성 (좌/우 화살표)
+        btn.addEventListener('keydown', function(e) {
+            var idx = Array.from(btns).indexOf(this);
+            if (e.key === 'ArrowRight') btns[(idx + 1) % btns.length].focus();
+            if (e.key === 'ArrowLeft')  btns[(idx - 1 + btns.length) % btns.length].focus();
+        });
+    });
+});