djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 메인페이지 반응형 수정

Browse Source
This commit is contained in:
hong
2026-07-14 10:35:14 +09:00
parent 28a9ff1a7f
commit 23bd0c1207
2 changed files with 971 additions and 934 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/sass/pages/_index.scss
+711 -521
View File
File diff suppressed because it is too large Load Diff
src/main/resources/templates/views/apps/main/index.html
+278 -431
View File
@@ -5,125 +5,6 @@
<body> <body>
<th:block layout:fragment="contentFragment"> <th:block layout:fragment="contentFragment">
<!-- Hero Carousel Section -->
<!-- <section class="hero-carousel-section">-->
<!-- &lt;!&ndash; Carousel Container &ndash;&gt;-->
<!-- <div class="hero-carousel-container">-->
<!-- <div class="hero-carousel-track">-->
<!-- &lt;!&ndash; Slide 1 &ndash;&gt;-->
<!-- <div class="hero-slide active" data-slide="0">-->
<!-- <div class="hero-slide-content">-->
<!-- <div class="hero-text-content">-->
<!-- <div class="hero-text">-->
<!-- <p class="hero-subtitle">세상의 모든 서비스</p>-->
<!-- <h2 class="hero-title">DJBank API가<br>함께 합니다.</h2>-->
<!-- </div>-->
<!-- <a href="#" class="btn-hero-signup">회원가입하기 <i class="bi bi-chevron-right"></i></a>-->
<!-- </div>-->
<!-- <div class="hero-image-content">-->
<!-- &lt;!&ndash; Inline SVG Tech Illustration &ndash;&gt;-->
<!-- <svg class="hero-illustration" viewBox="0 0 500 400" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <circle cx="250" cy="200" r="160" fill="url(#hero-grad-1)" opacity="0.15" />-->
<!-- <rect x="120" y="80" width="260" height="240" rx="20" fill="#FFFFFF" stroke="#0049B4" stroke-width="6"-->
<!-- class="floating-slow" />-->
<!-- <rect x="150" y="120" width="200" height="30" rx="6" fill="#E9F9FF" />-->
<!-- <rect x="150" y="170" width="130" height="15" rx="4" fill="#0049B4" opacity="0.3" />-->
<!-- <rect x="150" y="200" width="160" height="15" rx="4" fill="#0049B4" opacity="0.3" />-->
<!-- <circle cx="320" cy="270" r="25" fill="#0049B4" />-->
<!-- <path d="M315 270L323 275L331 265" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"-->
<!-- stroke-linejoin="round" />-->
<!-- <rect x="80" y="220" width="90" height="80" rx="12" fill="#008AE2" opacity="0.9"-->
<!-- class="floating-fast" />-->
<!-- <circle cx="125" cy="260" r="20" fill="#FFFFFF" opacity="0.2" />-->
<!-- </svg>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Slide 2 &ndash;&gt;-->
<!-- <div class="hero-slide" data-slide="1">-->
<!-- <div class="hero-slide-content">-->
<!-- <div class="hero-text-content">-->
<!-- <div class="hero-text">-->
<!-- <p class="hero-subtitle">더 안전하고 완벽한 거래</p>-->
<!-- <h2 class="hero-title">광주은행 오픈 API<br>보안 솔루션</h2>-->
<!-- </div>-->
<!-- <a href="#" class="btn-hero-signup">개발 가이드 보기 <i class="bi bi-chevron-right"></i></a>-->
<!-- </div>-->
<!-- <div class="hero-image-content">-->
<!-- <svg class="hero-illustration" viewBox="0 0 500 400" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <circle cx="250" cy="200" r="160" fill="url(#hero-grad-2)" opacity="0.15" />-->
<!-- <path d="M250 80L370 130V240C370 310 250 360 250 360C250 360 130 310 130 240V130L250 80Z" fill="#FFFFFF"-->
<!-- stroke="#008AE2" stroke-width="6" class="floating-slow" />-->
<!-- <path d="M250 140V280M180 210H320" stroke="#0049B4" stroke-width="6" stroke-linecap="round"-->
<!-- opacity="0.2" />-->
<!-- <circle cx="250" cy="210" r="45" fill="#0049B4" />-->
<!-- <path d="M235 210L245 220L265 200" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"-->
<!-- stroke-linejoin="round" />-->
<!-- </svg>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Slide 3 &ndash;&gt;-->
<!-- <div class="hero-slide" data-slide="2">-->
<!-- <div class="hero-slide-content">-->
<!-- <div class="hero-text-content">-->
<!-- <div class="hero-text">-->
<!-- <p class="hero-subtitle">상상하는 금융의 구현</p>-->
<!-- <h2 class="hero-title">기업의 비즈니스를<br>혁신합니다.</h2>-->
<!-- </div>-->
<!-- <a href="#" class="btn-hero-signup">제휴 문의하기 <i class="bi bi-chevron-right"></i></a>-->
<!-- </div>-->
<!-- <div class="hero-image-content">-->
<!-- <svg class="hero-illustration" viewBox="0 0 500 400" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <circle cx="250" cy="200" r="160" fill="url(#hero-grad-1)" opacity="0.15" />-->
<!-- <path d="M120 280L210 170L300 240L400 110" stroke="#0049B4" stroke-width="8" stroke-linecap="round"-->
<!-- stroke-linejoin="round" class="draw-line" />-->
<!-- <circle cx="120" cy="280" r="12" fill="#008AE2" />-->
<!-- <circle cx="210" cy="170" r="12" fill="#008AE2" />-->
<!-- <circle cx="300" cy="240" r="12" fill="#008AE2" />-->
<!-- <circle cx="400" cy="110" r="16" fill="#0049B4" class="pulsing" />-->
<!-- </svg>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Navigation Buttons &ndash;&gt;-->
<!-- <button class="hero-nav-btn hero-nav-prev" id="heroPrevBtn" aria-label="이전 슬라이드">-->
<!-- <svg width="18" height="32" viewBox="0 0 18 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: scaleX(-1);">-->
<!-- <path d="M2.17021 31.1127L-0.000440909 28.942L13.3853 15.5564L-0.000438653 2.17065L2.17021 4.76837e-07L17.7266 15.5564L2.17021 31.1127Z" fill="#0049B4"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- <button class="hero-nav-btn hero-nav-next" id="heroNextBtn" aria-label="다음 슬라이드">-->
<!-- <svg width="18" height="32" viewBox="0 0 18 32" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="M2.17021 31.1127L-0.000440909 28.942L13.3853 15.5564L-0.000438653 2.17065L2.17021 4.76837e-07L17.7266 15.5564L2.17021 31.1127Z" fill="#0049B4"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- &lt;!&ndash; Carousel Indicators &ndash;&gt;-->
<!-- <div class="hero-carousel-indicators">-->
<!-- <button class="hero-indicator active" data-slide-to="0" aria-label="슬라이드 1"></button>-->
<!-- <button class="hero-indicator" data-slide-to="1" aria-label="슬라이드 2"></button>-->
<!-- <button class="hero-indicator" data-slide-to="2" aria-label="슬라이드 3"></button>-->
<!-- &lt;!&ndash; Auto Play Toggle Button &ndash;&gt;-->
<!-- <button class="hero-autoplay-toggle" id="heroAutoplayToggle" aria-label="자동 재생 일시정지">-->
<!-- &lt;!&ndash; Pause Icon (default) &ndash;&gt;-->
<!-- <svg class="pause-icon active" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="M8 14V0H12V14H8ZM0 14V0H4V14H0Z" fill="#1D1B20"/>-->
<!-- </svg>-->
<!-- &lt;!&ndash; Play Icon &ndash;&gt;-->
<!-- <svg class="play-icon" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="M0 0V14L12 7L0 0Z" fill="#0049B4"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- HERO CAROUSEL SECTION -->
<section class="hero-carousel-section"> <section class="hero-carousel-section">
<div class="hero-carousel-container"> <div class="hero-carousel-container">
<div class="hero-carousel-track"> <div class="hero-carousel-track">
@@ -162,8 +43,6 @@
<div class="hero-slide" data-slide="1"> <div class="hero-slide" data-slide="1">
<div class="hero-slide-content"> <div class="hero-slide-content">
<div class="hero-text-content"> <div class="hero-text-content">
<div class="hero-text"> <div class="hero-text">
<p class="hero-subtitle">문서는 상세하게, 연동은 확실하게</p> <p class="hero-subtitle">문서는 상세하게, 연동은 확실하게</p>
<h2 class="hero-title">준비된 DJBank API로 <br>완벽한 서비스를 성공하세요.</h2> <h2 class="hero-title">준비된 DJBank API로 <br>완벽한 서비스를 성공하세요.</h2>
@@ -307,6 +186,18 @@
<div class="search-container"> <div class="search-container">
<div class="search-card-container" data-node-id="1:264"> <div class="search-card-container" data-node-id="1:264">
<!-- Left Side: Title --> <!-- Left Side: Title -->
<div class="search-character-box">
<svg class="search-mascot" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="15" y="15" width="90" height="90" rx="45" fill="#FFFFFF" stroke="#0049B4" stroke-width="4" />
<circle cx="45" cy="50" r="7" fill="#0049B4" />
<circle cx="75" cy="50" r="7" fill="#0049B4" />
<path d="M40 75C40 75 50 85 60 85C70 85 80 75 80 75" stroke="#0049B4" stroke-width="4"
stroke-linecap="round" />
<path d="M90 20L105 35M20 90L5 105" stroke="#008AE2" stroke-width="3" stroke-linecap="round" />
<circle cx="102" cy="72" r="5" fill="#008AE2" />
<circle cx="18" cy="40" r="3" fill="#008AE2" />
</svg>
</div>
<div class="search-card-left" data-node-id="1:297"> <div class="search-card-left" data-node-id="1:297">
<h2 class="search-card-title">원하는 API를<br>지금 검색해 보세요.</h2> <h2 class="search-card-title">원하는 API를<br>지금 검색해 보세요.</h2>
</div> </div>
@@ -458,53 +349,7 @@
</div> </div>
</section> </section>
<!-- 지원 센터 섹션 -->
<!-- <section class="support-center">-->
<!-- <div class="support-background"></div>-->
<!-- <div class="container">-->
<!-- <div class="section-header">-->
<!-- <h2 class="section-title">-->
<!-- <span class="title-regular">비지니스의 시작,</span><br>-->
<!-- <span class="title-bold">DJBank 오픈 API가 함께 하겠습니다.</span>-->
<!-- </h2>-->
<!-- </div>-->
<!-- <div class="support-grid">-->
<!-- &lt;!&ndash; 공지사항 카드 (50% width) &ndash;&gt;-->
<!-- <a th:href="@{/portalnotice}" class="support-card support-card&#45;&#45;notice">-->
<!-- <div class="card-icon">-->
<!-- <img th:src="@{/img/icon_notice.png}" alt="공지사항">-->
<!-- </div>-->
<!-- <div class="card-content">-->
<!-- <h3>공지사항</h3>-->
<!-- <p class="pc">DJBank API의 새로운 소식</p>-->
<!-- <p class="mobile">DJBank API의 <br/>새로운 소식</p>-->
<!-- </div>-->
<!-- </a>-->
<!-- &lt;!&ndash; FAQ Card (25% width) &ndash;&gt;-->
<!-- <a th:href="@{/faq_list}" class="support-card support-card&#45;&#45;faq">-->
<!-- <div class="card-icon">-->
<!-- <img th:src="@{/img/icon_faq.png}" alt="FAQ">-->
<!-- </div>-->
<!-- <div class="card-content">-->
<!-- <h3>FAQ</h3>-->
<!-- <p>자주 묻는 질문</p>-->
<!-- </div>-->
<!-- </a>-->
<!-- &lt;!&ndash; Q&A Card (25% width) &ndash;&gt;-->
<!-- <a th:href="@{/inquiry}" class="support-card support-card&#45;&#45;qna">-->
<!-- <div class="card-icon">-->
<!-- <img th:src="@{/img/icon_qna.png}" alt="Q&A">-->
<!-- </div>-->
<!-- <div class="card-content">-->
<!-- <h3>Q&A</h3>-->
<!-- <p>문의하기</p>-->
<!-- </div>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<section class="support-center"> <section class="support-center">
<div class="support-background"></div> <div class="support-background"></div>
@@ -743,274 +588,276 @@
<img class="ctaImg right" th:src="@{/img/avatar1.svg}" ali="아바타1"> <img class="ctaImg right" th:src="@{/img/avatar1.svg}" ali="아바타1">
<img class="ctaImg left" th:src="@{/img/avatar2.svg}" ali="아바타2"> <img class="ctaImg left" th:src="@{/img/avatar2.svg}" ali="아바타2">
</div> </div>
<div class="cta-divider"></div>
</section> </section>
</th:block> </th:block>
</body> </body>
<th:block layout:fragment="contentScript"> <th:block layout:fragment="contentScript">
<!-- 로그인 후 처리 스크립트 --> <!-- 메인 페이지 전용 스크립트 모듈 추가 -->
<script th:src="@{/js/login-success-handler.js}"></script> <script th:src="@{/js/main.js}"></script>
<script th:inline="javascript"> </th:block>
$(document).ready(function () {
LoginSuccessHandler.init({ </html>
successMsg: [[${ success }]], <script th:inline="javascript">
emailVerificationRequired: [[${ session.emailVerificationRequired }]], $(document).ready(function () {
dormantAccount: [[${ session.dormantAccount }]], LoginSuccessHandler.init({
passwordExpired: [[${ session.passwordExpired }]], successMsg: [[${ success }]],
pendingInvitation: [[${ session.pendingInvitation }]], emailVerificationRequired: [[${ session.emailVerificationRequired }]],
pendingInvitationToken: [[${ session.pendingInvitationToken }]], dormantAccount: [[${ session.dormantAccount }]],
pendingInvitationOrgName: [[${ session.pendingInvitationOrgName }]], passwordExpired: [[${ session.passwordExpired }]],
sessionSuccessMsg: [[${ session.success }]], pendingInvitation: [[${ session.pendingInvitation }]],
redirectUrl: [[${ session.redirectUrl }]] pendingInvitationToken: [[${ session.pendingInvitationToken }]],
}); pendingInvitationOrgName: [[${ session.pendingInvitationOrgName }]],
}); sessionSuccessMsg: [[${ session.success }]],
</script> redirectUrl: [[${ session.redirectUrl }]]
});
<script> });
document.addEventListener('DOMContentLoaded', function () { </script>
// ========================================
// Hero Carousel <script>
// ======================================== document.addEventListener('DOMContentLoaded', function () {
const heroCarousel = { // ========================================
currentSlide: 0, // Hero Carousel
totalSlides: 3, // ========================================
autoPlayInterval: null, const heroCarousel = {
autoPlayDelay: 5000, currentSlide: 0,
isPlaying: true, totalSlides: 3,
autoPlayInterval: null,
init: function () { autoPlayDelay: 5000,
this.slides = document.querySelectorAll('.hero-slide'); isPlaying: true,
this.indicators = document.querySelectorAll('.hero-indicator');
this.prevBtn = document.getElementById('heroPrevBtn'); init: function () {
this.nextBtn = document.getElementById('heroNextBtn'); this.slides = document.querySelectorAll('.hero-slide');
this.autoplayToggle = document.getElementById('heroAutoplayToggle'); this.indicators = document.querySelectorAll('.hero-indicator');
this.pauseIcon = this.autoplayToggle?.querySelector('.pause-icon'); this.prevBtn = document.getElementById('heroPrevBtn');
this.playIcon = this.autoplayToggle?.querySelector('.play-icon'); this.nextBtn = document.getElementById('heroNextBtn');
this.autoplayToggle = document.getElementById('heroAutoplayToggle');
if (!this.slides.length) return; this.pauseIcon = this.autoplayToggle?.querySelector('.pause-icon');
this.playIcon = this.autoplayToggle?.querySelector('.play-icon');
this.bindEvents();
this.startAutoPlay(); if (!this.slides.length) return;
},
this.bindEvents();
bindEvents: function () { this.startAutoPlay();
// Previous button },
if (this.prevBtn) {
this.prevBtn.addEventListener('click', () => { bindEvents: function () {
this.goToSlide(this.currentSlide - 1); // Previous button
this.resetAutoPlay(); if (this.prevBtn) {
}); this.prevBtn.addEventListener('click', () => {
} this.goToSlide(this.currentSlide - 1);
this.resetAutoPlay();
// Next button });
if (this.nextBtn) { }
this.nextBtn.addEventListener('click', () => {
this.goToSlide(this.currentSlide + 1); // Next button
this.resetAutoPlay(); if (this.nextBtn) {
}); this.nextBtn.addEventListener('click', () => {
} this.goToSlide(this.currentSlide + 1);
this.resetAutoPlay();
// Indicators });
this.indicators.forEach((indicator, index) => { }
indicator.addEventListener('click', () => {
this.goToSlide(index); // Indicators
this.resetAutoPlay(); this.indicators.forEach((indicator, index) => {
}); indicator.addEventListener('click', () => {
}); this.goToSlide(index);
this.resetAutoPlay();
// Auto play toggle button });
if (this.autoplayToggle) { });
this.autoplayToggle.addEventListener('click', () => {
this.toggleAutoPlay(); // Auto play toggle button
}); if (this.autoplayToggle) {
} this.autoplayToggle.addEventListener('click', () => {
this.toggleAutoPlay();
// Pause on hover (only if playing) });
const container = document.querySelector('.hero-carousel-container'); }
if (container) {
container.addEventListener('mouseenter', () => { // Pause on hover (only if playing)
if (this.isPlaying) { const container = document.querySelector('.hero-carousel-container');
this.pauseAutoPlay(); if (container) {
} container.addEventListener('mouseenter', () => {
}); if (this.isPlaying) {
container.addEventListener('mouseleave', () => { this.pauseAutoPlay();
if (this.isPlaying) { }
this.startAutoPlay(); });
} container.addEventListener('mouseleave', () => {
}); if (this.isPlaying) {
} this.startAutoPlay();
}
// Touch events for mobile });
let touchStartX = 0; }
let touchEndX = 0;
// Touch events for mobile
if (container) { let touchStartX = 0;
container.addEventListener('touchstart', (e) => { let touchEndX = 0;
touchStartX = e.changedTouches[0].screenX;
}); if (container) {
container.addEventListener('touchstart', (e) => {
container.addEventListener('touchend', (e) => { touchStartX = e.changedTouches[0].screenX;
touchEndX = e.changedTouches[0].screenX; });
this.handleSwipe(touchStartX, touchEndX);
}); container.addEventListener('touchend', (e) => {
} touchEndX = e.changedTouches[0].screenX;
}, this.handleSwipe(touchStartX, touchEndX);
});
goToSlide: function (index) { }
// Wrap around },
if (index < 0) {
index = this.totalSlides - 1; goToSlide: function (index) {
} else if (index >= this.totalSlides) { // Wrap around
index = 0; if (index < 0) {
} index = this.totalSlides - 1;
} else if (index >= this.totalSlides) {
// Update slides index = 0;
this.slides.forEach((slide, i) => { }
slide.classList.toggle('active', i === index);
}); // Update slides
this.slides.forEach((slide, i) => {
// Update indicators slide.classList.toggle('active', i === index);
this.indicators.forEach((indicator, i) => { });
indicator.classList.toggle('active', i === index);
}); // Update indicators
this.indicators.forEach((indicator, i) => {
this.currentSlide = index; indicator.classList.toggle('active', i === index);
}, });
handleSwipe: function (startX, endX) { this.currentSlide = index;
const minSwipeDistance = 50; },
const distance = startX - endX;
handleSwipe: function (startX, endX) {
if (Math.abs(distance) > minSwipeDistance) { const minSwipeDistance = 50;
if (distance > 0) { const distance = startX - endX;
// Swipe left - next slide
this.goToSlide(this.currentSlide + 1); if (Math.abs(distance) > minSwipeDistance) {
} else { if (distance > 0) {
// Swipe right - previous slide // Swipe left - next slide
this.goToSlide(this.currentSlide - 1); this.goToSlide(this.currentSlide + 1);
} } else {
this.resetAutoPlay(); // Swipe right - previous slide
} this.goToSlide(this.currentSlide - 1);
}, }
this.resetAutoPlay();
startAutoPlay: function () { }
this.pauseAutoPlay(); },
this.autoPlayInterval = setInterval(() => {
this.goToSlide(this.currentSlide + 1); startAutoPlay: function () {
}, this.autoPlayDelay); this.pauseAutoPlay();
}, this.autoPlayInterval = setInterval(() => {
this.goToSlide(this.currentSlide + 1);
pauseAutoPlay: function () { }, this.autoPlayDelay);
if (this.autoPlayInterval) { },
clearInterval(this.autoPlayInterval);
this.autoPlayInterval = null; pauseAutoPlay: function () {
} if (this.autoPlayInterval) {
}, clearInterval(this.autoPlayInterval);
this.autoPlayInterval = null;
resetAutoPlay: function () { }
if (this.isPlaying) { },
this.pauseAutoPlay();
this.startAutoPlay(); resetAutoPlay: function () {
} if (this.isPlaying) {
}, this.pauseAutoPlay();
this.startAutoPlay();
toggleAutoPlay: function () { }
this.isPlaying = !this.isPlaying; },
if (this.isPlaying) { toggleAutoPlay: function () {
// Start auto play this.isPlaying = !this.isPlaying;
this.startAutoPlay();
// Update icons if (this.isPlaying) {
if (this.pauseIcon) this.pauseIcon.classList.add('active'); // Start auto play
if (this.playIcon) this.playIcon.classList.remove('active'); this.startAutoPlay();
// Update aria-label // Update icons
if (this.autoplayToggle) { if (this.pauseIcon) this.pauseIcon.classList.add('active');
this.autoplayToggle.setAttribute('aria-label', '자동 재생 일시정지'); if (this.playIcon) this.playIcon.classList.remove('active');
} // Update aria-label
} else { if (this.autoplayToggle) {
// Stop auto play this.autoplayToggle.setAttribute('aria-label', '자동 재생 일시정지');
this.pauseAutoPlay(); }
// Update icons } else {
if (this.pauseIcon) this.pauseIcon.classList.remove('active'); // Stop auto play
if (this.playIcon) this.playIcon.classList.add('active'); this.pauseAutoPlay();
// Update aria-label // Update icons
if (this.autoplayToggle) { if (this.pauseIcon) this.pauseIcon.classList.remove('active');
this.autoplayToggle.setAttribute('aria-label', '자동 재생 시작'); if (this.playIcon) this.playIcon.classList.add('active');
} // Update aria-label
} if (this.autoplayToggle) {
} this.autoplayToggle.setAttribute('aria-label', '자동 재생 시작');
}; }
}
// Initialize hero carousel }
heroCarousel.init(); };
// ======================================== // Initialize hero carousel
// API 검색 기능 heroCarousel.init();
// ========================================
const searchInput = document.getElementById('apiSearchInput'); // ========================================
const searchForm = document.querySelector('.search-form'); // API 검색 기능
const hashtags = document.querySelectorAll('.hashtag-link'); // ========================================
const searchInput = document.getElementById('apiSearchInput');
// 해시태그 클릭 이벤트 const searchForm = document.querySelector('.search-form');
hashtags.forEach(tag => { const hashtags = document.querySelectorAll('.hashtag-link');
tag.addEventListener('click', function (e) {
e.preventDefault(); // 해시태그 클릭 이벤트
const searchTerm = this.getAttribute('data-search'); hashtags.forEach(tag => {
if (searchInput) { tag.addEventListener('click', function (e) {
searchInput.value = searchTerm; e.preventDefault();
} const searchTerm = this.getAttribute('data-search');
// 폼 제출 if (searchInput) {
if (searchForm) { searchInput.value = searchTerm;
searchForm.submit(); }
} // 폼 제출
}); if (searchForm) {
}); searchForm.submit();
}
// ======================================== });
// 숫자 카운트업 애니메이션 });
// ========================================
const observerOptions = { // ========================================
threshold: 0.5, // 숫자 카운트업 애니메이션
rootMargin: '0px 0px -100px 0px' // ========================================
}; const observerOptions = {
threshold: 0.5,
const animateNumbers = (entries, observer) => { rootMargin: '0px 0px -100px 0px'
entries.forEach(entry => { };
if (entry.isIntersecting) {
const numbers = entry.target.querySelectorAll('.stat-number'); const animateNumbers = (entries, observer) => {
entries.forEach(entry => {
numbers.forEach(number => { if (entry.isIntersecting) {
const target = parseInt(number.getAttribute('data-target')); const numbers = entry.target.querySelectorAll('.stat-number');
const duration = 2000; // 2초
const increment = target / (duration / 16); numbers.forEach(number => {
let current = 0; const target = parseInt(number.getAttribute('data-target'));
const duration = 2000; // 2초
const updateNumber = () => { const increment = target / (duration / 16);
current += increment; let current = 0;
if (current < target) {
number.textContent = Math.floor(current).toLocaleString('ko-KR'); const updateNumber = () => {
requestAnimationFrame(updateNumber); current += increment;
} else { if (current < target) {
number.textContent = target.toLocaleString('ko-KR'); number.textContent = Math.floor(current).toLocaleString('ko-KR');
} requestAnimationFrame(updateNumber);
}; } else {
number.textContent = target.toLocaleString('ko-KR');
updateNumber(); }
}); };
observer.unobserve(entry.target); updateNumber();
} });
});
}; observer.unobserve(entry.target);
}
const observer = new IntersectionObserver(animateNumbers, observerOptions); });
const statsSection = document.querySelector('.api-stats-section'); };
if (statsSection) { const observer = new IntersectionObserver(animateNumbers, observerOptions);
observer.observe(statsSection); const statsSection = document.querySelector('.api-stats-section');
}
}); if (statsSection) {
</script> observer.observe(statsSection);
}
});
</script>
</th:block> </th:block>
</html> </html>