first commit

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

@@ -0,0 +1,280 @@
+
+//* =========================== 메인 슬라이드 */
+// ① 슬라이드별 텍스트 데이터
+const slideData = [
+    {
+        mainTit: 'FINANCE TECHNOLOGY SERVICE',
+        subTitLine: '금융과 기술이 하나로 결합된',
+        subTitBold: '핀테크 솔루션 전문 기업',
+        btn1: { href: '/company/intro',    text: '회사소개' },
+        btn2: { href: '/business/intro', text: '사업소개' },
+    },
+    {
+        mainTit: 'PAYMENT GATEWAY SOLUTION',
+        subTitLine: '안정적인 전자결제 인프라를 구축하는',
+        subTitBold: 'PG 전문 컨설팅 기업',
+        btn1: { href: './etc',  text: 'PG업 등록' },
+        btn2: { href: '/business/pg', text: 'PG시스템' },
+    },
+    {
+        mainTit: 'FINANCIAL LICENSE CONSULTING',
+        subTitLine: '인허가 취득부터 사후 관리까지',
+        subTitBold: '금융 라이선스 전문 기업',
+        btn1: { href: '/business/progress', text: '사업진행현황' },
+        btn2: { href: '/bbs/partnership', text: '제휴 문의' },
+    },
+];
+
+// ② 텍스트 업데이트 함수 (fade out → 내용 교체 → fade in)
+function updateSlideText(index) {
+    const d = slideData[index];
+    const $box = $('#mainVisual .txt_box');
+
+    $box.removeClass('animate-in');
+
+    $box.find('.main-tit').text(d.mainTit);
+    $box.find('.sub-tit-line').text(d.subTitLine);
+    $box.find('.sub-tit-bold').text(d.subTitBold);
+
+    // 클래스명 대신 순서로 선택
+    const $btns = $box.find('.visual-btn');
+    $btns.eq(0).attr('href', d.btn1.href).find('.btn-txt').text(d.btn1.text);
+    $btns.eq(1).attr('href', d.btn2.href).find('.btn-txt').text(d.btn2.text);
+
+    setTimeout(function () {
+        $box.addClass('animate-in');
+    }, 0);
+}
+// ③ Swiper 초기화
+const mySwiper = new Swiper('.MainSwiper', {
+    loop: true,
+    effect: 'fade',
+    fadeEffect: { crossFade: true },
+    speed: 800,
+    autoplay: {
+        delay: 4000,
+        disableOnInteraction: false,
+    },
+    navigation: {
+        nextEl: '#mainVisual .swiper-controller .btn--next',
+        prevEl: '#mainVisual .swiper-controller .btn--prev',
+    },
+    pagination: {
+        el: '#mainVisual .swiper-controller .swiper-pagination',
+        clickable: true,
+    },
+    keyboard: { enabled: true, onlyInViewport: true },
+    a11y: {
+        enabled: true,
+        prevSlideMessage: '이전 슬라이드로 이동',
+        nextSlideMessage: '다음 슬라이드로 이동',
+        firstSlideMessage: '첫 번째 슬라이드입니다',
+        lastSlideMessage: '마지막 슬라이드입니다',
+    },
+    on: {
+        init: function () {
+            const realCount = this.slides.length - this.loopedSlides * 2;
+            $('#mainVisual .cur-slide').text(this.realIndex + 1);
+            $('#mainVisual .total-slide').text(realCount);
+        },
+        slideChangeTransitionStart: function () {
+            // 배경 전환 시작과 동시에 텍스트도 업데이트
+            updateSlideText(this.realIndex);
+        },
+        slideChangeTransitionEnd: function () {
+            // 카운터만 여기서 처리
+            const realCount = this.slides.length - this.loopedSlides * 2;
+            $('#mainVisual .cur-slide').text(this.realIndex + 1);
+            $('#mainVisual .total-slide').text(realCount);
+        },
+    },    
+});
+
+//* =========================== inc01 탭 */
+// 첫번째 탭 활성화 (초기값)
+const initFirstTab = () => {
+    const $firstCont = $("#inc01 .tab-cont li:first-child");
+    const $firstMenu = $("#inc01 .tab-menu li:first-child");
+
+    $firstCont.addClass('active');
+    $firstMenu.addClass('active').attr("aria-selected", "true");
+};
+
+// 반응형 초기화
+const resetLayout = () => {
+    $("#inc01 .tab-cont li, #inc01 .tab-menu li").removeClass('active');
+    $("#inc01 .tab-menu li").attr("aria-selected", "false");
+    gsap.set("#inc01 .full-w", { clearProps: "all" });
+};
+
+ScrollTrigger.matchMedia({
+    "all": function() {
+        ScrollTrigger.refresh();
+    },
+
+    // 1025px 이상
+    "(min-width: 1025px)": function() {
+        gsap.set("#inc01 .full-w", { justifyContent: "center" });
+    
+        ScrollTrigger.create({
+            trigger: "#inc01",
+            start: "0% 30%",
+            onEnter: () => {
+                gsap.to("#inc01 .full-w", { justifyContent: "flex-start" });
+                initFirstTab();
+            }
+        });
+        return () => resetLayout();
+    },
+
+    // 1024px 이하
+    "(max-width: 1024px)": function() {
+        gsap.set("#inc01 .full-w", { justifyContent: "flex-start" });
+    
+        ScrollTrigger.create({
+            trigger: "#inc01",
+            start: "0% 100%",
+            onEnter: () => {
+                initFirstTab();
+            }
+        });
+        return () => resetLayout();
+    }
+});
+
+// 탭메뉴 (메뉴 + 콘텐츠 매칭)
+const tabMenuEls = document.querySelectorAll("#inc01 .tab-menu li");
+const tabContEls = document.querySelectorAll("#inc01 .tab-cont li");
+const tabContWrap = document.querySelector("#inc01 .tab-cont");
+const container = document.querySelector("#inc01 .full-w");
+
+function activeTab(data) {
+    // 기준 너비 및 gap
+    const inactiveItem = document.querySelector("#inc01 .tab-cont li:not(.active)") || tabContEls[0];
+    const baseWidth = inactiveItem.offsetWidth / 2; 
+    const gap = parseInt(window.getComputedStyle(tabContWrap).gap) || 0;
+
+    const isDesktop = window.innerWidth >= 1025;
+
+    // 초기화
+    const targetMenu = document.querySelector(`[data-target="${data}"]`);
+    const targetCont = document.querySelector(`[data-id="${data}"]`);
+    if (!targetMenu || !targetCont) return;
+
+    tabMenuEls.forEach(menu => {
+        menu.classList.remove('active');
+        menu.setAttribute('aria-selected', 'fasle');
+    });
+
+    tabContEls.forEach(item => item.classList.remove('active'));
+
+    // 클릭 시 active 활성화
+    targetMenu.classList.add('active');
+    targetMenu.setAttribute('aria-selected', 'true');
+    targetCont.classList.add('active');
+
+
+    // 인덱스 기반 이동 계산
+    if(isDesktop){
+        const idx = Array.from(tabContEls).indexOf(targetCont); 
+        if (idx !== -1) {
+            const moveDistance = (baseWidth + gap) * idx;
+            container.style.transition = "transform 0.8s ease";
+            container.style.transform = `translateX(-${moveDistance}px)`;
+        }
+    }else{
+        const idx = Array.from(tabContEls).indexOf(targetCont); 
+        const moveDistance = (inactiveItem.offsetWidth + gap) * idx;
+        container.style.transition = "transform 0.8s ease";
+        container.style.transform = `translateX(-${moveDistance}px)`;
+    }
+}
+
+// 이벤트 리스너
+const handleTabClick = (e, attr) => {
+    const isDesktop = window.innerWidth >= 1025;
+    if(attr === 'data-id' && !isDesktop) return;
+
+    const data = e.currentTarget.getAttribute(attr);
+    activeTab(data);
+};
+
+tabMenuEls.forEach(menu => {
+    menu.addEventListener('click', (e) => handleTabClick(e, 'data-target'));
+});
+
+tabContEls.forEach(item => {
+    item.addEventListener('click', (e) => handleTabClick(e, 'data-id'));
+});
+
+// 현재 활성화된 탭 위치를 재계산
+function updateLayout() {
+    const activeCont = document.querySelector("#inc01 .tab-cont li.active");
+    if (!activeCont) return;
+    const currentId = activeCont.getAttribute('data-id');
+    activeTab(currentId);
+}
+
+// Resize 
+let resizeTimer;
+window.addEventListener('resize', () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+        updateLayout();
+    });
+});
+
+
+//* =========================== inc02 글자 */
+
+gsap.to("#inc02 h2 span",{backgroundSize:"100% 100%",
+    scrollTrigger:{
+        trigger:"#inc02",
+        start:"0% 0%",
+        end:"100% 100%",
+        scrub:0.6,
+    }
+});
+
+//* =========================== inc03 슬라이드 */
+
+const inc03_swiper = new Swiper("#inc03 .swiper-container",{
+	slidesPerView:1.2,
+	spaceBetween:14,
+	centeredSlides:true,
+	loop:true,
+	speed:800,
+	autoplay: {delay: 3000, disableOnInteraction: false},
+	navigation:{
+		prevEl:"#inc03 .swiper-navigation .btn--prev",
+		nextEl:"#inc03 .swiper-navigation .btn--next",
+	},
+	breakpoints:{
+		1025:{
+			slidesPerView:"auto",
+			spaceBetween:20,
+			centeredSlides:false
+		},
+		769:{
+			slidesPerView:2.3,
+			spaceBetween:14,
+			centeredSlides:false
+		},
+		601:{
+			slidesPerView:2,
+			spaceBetween:14,
+			centeredSlides:false
+		}
+	},
+	keyboard: {
+		enabled: true,
+		onlyInViewport: true,
+	},
+	a11y: {
+		enabled: true,
+		prevSlideMessage: '이전 슬라이드로 이동',
+		nextSlideMessage: '다음 슬라이드로 이동',
+		firstSlideMessage: '첫 번째 슬라이드입니다',
+		lastSlideMessage: '마지막 슬라이드입니다',
+	},
+});

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();
+        });
+    });
+});

src/main/resources/static/js/topmenu_script.js

@@ -0,0 +1,127 @@
+$(document).ready(function () {
+
+    // 로고 고정 페이지 판별 함수
+    function isStaticLogoPage() {
+        return $("body").hasClass("page-inquiry");
+    }
+
+    if (!$("#hd").hasClass("sub")) {
+        var visualHeight = $("#mainVisual").height();
+
+        function applyHeaderState(scrollTop) {
+            if (scrollTop > visualHeight) {
+                $("#top_nav_wrap").addClass("fixed");
+                $("#top_nav_wrap #top_logo img").attr("src", "/img/common/logo_d.png");
+                $("#topmenuM").addClass("fixed");
+                $("#topmenuM #m_logo img").attr("src", "/img/common/logo_d.png");
+            } else {
+                $("#top_nav_wrap").removeClass("fixed");
+                $("#topmenuM").removeClass("fixed");
+                if (!isStaticLogoPage()) {
+                    $("#top_nav_wrap #top_logo img").attr("src", "/img/common/logo.png");
+                    $("#topmenuM #m_logo img").attr("src", "/img/common/logo.png");
+                }
+            }
+        }
+
+        applyHeaderState($(window).scrollTop());
+        $(window).on("scroll", function () {
+            applyHeaderState($(this).scrollTop());
+        });
+    }
+
+    $(document).on("mouseenter", "#top_nav", function () {
+        $('#top_nav > li > ul').stop().slideDown(300);
+        $(".top_nav_bg").stop().slideDown(200);
+
+        const $topNav = $("#top_nav_wrap");
+        const $logoImg = $("#top_nav_wrap #top_logo img");
+
+        if ($topNav.hasClass('sub')) {
+            $topNav.addClass('on');
+            $logoImg.attr("src", "/img/common/logo_d.png");
+            return;
+        }
+
+        if ($topNav.hasClass('main') && !$topNav.hasClass('fixed')) {
+            $topNav.addClass('on');
+        }
+
+        $logoImg.attr("src", "/img/common/logo_d.png");
+    });
+
+    $(document).on("mouseleave", "#top_nav", function () {
+        $('#top_nav > li > ul').stop().slideUp(100);
+        $(".top_nav_bg").stop().slideUp(150);
+
+        const $topNav = $("#top_nav_wrap");
+        const $logoImg = $("#top_nav_wrap #top_logo img");
+
+        if ($topNav.hasClass('sub')) {
+            $topNav.removeClass('on');
+            if (!isStaticLogoPage()) {
+                $logoImg.attr("src", "/img/common/logo.png");
+            }
+            return;
+        }
+
+        if ($topNav.hasClass('main')) {
+            $topNav.removeClass('on');
+        }
+
+        if ($topNav.hasClass('fixed')) return;
+        if (!isStaticLogoPage()) {
+            $logoImg.attr("src", "/img/common/logo.png");
+        }
+    });
+
+    var m = 0;
+
+    $(document).on("click", "#m_navBtn", function () {
+        m++;
+        if (m % 2 == 1) {
+            $("#m_navBtn").addClass("on");
+            $("#navWrap").fadeIn(300).addClass("on");
+        } else {
+            navClose();
+        }
+    });
+
+    $(document).on("click", "#topmenuM .m_bmenu", function () {
+        $('.m_smenu').not($(this).next()).slideUp(200);
+        $('.m_bmenu').removeClass('on');
+        $(this).addClass('on');
+        $(this).next().slideDown(200);
+    });
+
+    function navClose() {
+        $("#pfBtn").removeClass("active");
+        $("#allWrap").fadeOut(600).removeClass("active");
+        $("#m_navBtn").removeClass("on");
+        $("#navWrap").fadeOut(300).removeClass("on");
+        m = 0;
+    }
+
+    const mq480 = window.matchMedia("(max-width: 480px)");
+
+    function updateMobileLogo(e) {
+        if (e.matches && $("#hd").hasClass("sub")) {
+            $("#topmenuM #m_logo img").attr("src", "/img/common/logo_d.png");
+            $("#topmenuM").addClass('dark');
+        } else {
+            if (!isStaticLogoPage()) {
+                $("#topmenuM #m_logo img").attr("src", "/img/common/logo.png");
+            }
+            $("#topmenuM").removeClass('dark');
+        }
+    }
+
+    mq480.addEventListener("change", updateMobileLogo);
+    updateMobileLogo(mq480);
+
+    // ✅ 초기 로고 설정 (page-recruit / page-inquiry 공통)
+    if (isStaticLogoPage()) {
+        $("#top_nav_wrap #top_logo img").attr("src", "/img/common/logo_d.png");
+        $("#topmenuM #m_logo img").attr("src", "/img/common/logo_d.png");
+    }
+});