129 lines
4.0 KiB
JavaScript
129 lines
4.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
// --- Hero Carousel Logic ---
|
|
const heroTrack = document.querySelector('.hero-track');
|
|
const heroSlides = document.querySelectorAll('.hero-slide');
|
|
const preventBtn = document.querySelector('.slider-arrow.prev');
|
|
const nextBtn = document.querySelector('.slider-arrow.next');
|
|
const dots = document.querySelectorAll('.dot');
|
|
|
|
let currentSlide = 0;
|
|
const totalSlides = heroSlides.length;
|
|
let autoplayInterval;
|
|
|
|
function updateCarousel() {
|
|
heroTrack.style.transform = `translateX(-${currentSlide * 100}%)`;
|
|
dots.forEach((dot, index) => {
|
|
dot.classList.toggle('active', index === currentSlide);
|
|
});
|
|
}
|
|
|
|
function nextSlide() {
|
|
currentSlide = (currentSlide + 1) % totalSlides;
|
|
updateCarousel();
|
|
}
|
|
|
|
function prevSlide() {
|
|
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
|
|
updateCarousel();
|
|
}
|
|
|
|
// Controls
|
|
if(nextBtn) nextBtn.addEventListener('click', () => {
|
|
nextSlide();
|
|
resetAutoplay();
|
|
});
|
|
|
|
if(preventBtn) preventBtn.addEventListener('click', () => {
|
|
prevSlide();
|
|
resetAutoplay();
|
|
});
|
|
|
|
dots.forEach((dot, index) => {
|
|
dot.addEventListener('click', () => {
|
|
currentSlide = index;
|
|
updateCarousel();
|
|
resetAutoplay();
|
|
});
|
|
});
|
|
|
|
// Autoplay
|
|
function startAutoplay() {
|
|
autoplayInterval = setInterval(nextSlide, 6000);
|
|
}
|
|
|
|
function resetAutoplay() {
|
|
clearInterval(autoplayInterval);
|
|
startAutoplay();
|
|
}
|
|
|
|
// Hover pause
|
|
const heroSlider = document.querySelector('.hero-slider');
|
|
if (heroSlider) {
|
|
heroSlider.addEventListener('mouseenter', () => clearInterval(autoplayInterval));
|
|
heroSlider.addEventListener('mouseleave', startAutoplay);
|
|
startAutoplay();
|
|
}
|
|
|
|
|
|
// --- Header Scroll Effect ---
|
|
const header = document.querySelector('.site-header');
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
header.classList.add('scrolled');
|
|
} else {
|
|
header.classList.remove('scrolled');
|
|
}
|
|
});
|
|
|
|
|
|
// --- Filter Tabs Logic (Client-side simulation) ---
|
|
const tabBtns = document.querySelectorAll('.tab-btn');
|
|
const productGrid = document.querySelector('.product-grid-container');
|
|
const productItems = document.querySelectorAll('.product-item');
|
|
|
|
tabBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
// Active State
|
|
tabBtns.forEach(b => {
|
|
b.classList.remove('active');
|
|
b.setAttribute('aria-selected', 'false');
|
|
});
|
|
btn.classList.add('active');
|
|
btn.setAttribute('aria-selected', 'true');
|
|
|
|
// Filter Logic
|
|
const filter = btn.dataset.filter;
|
|
|
|
// Animation: Fade out
|
|
productGrid.style.opacity = '0';
|
|
productGrid.style.transform = 'translateY(10px)';
|
|
productGrid.style.transition = 'all 0.2s';
|
|
|
|
setTimeout(() => {
|
|
productItems.forEach(item => {
|
|
if (filter === 'all' || item.dataset.category === filter) {
|
|
item.style.display = 'block';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Fade in
|
|
productGrid.style.opacity = '1';
|
|
productGrid.style.transform = 'translateY(0)';
|
|
}, 200);
|
|
});
|
|
});
|
|
|
|
// --- Mobile Menu Toggle ---
|
|
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
|
// In a real implementation, we would toggle a drawer here.
|
|
// For this prototype, we'll just log it or alert.
|
|
if(mobileMenuBtn) {
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
alert('모바일 메뉴 드로어 열림 (구현 예정)');
|
|
});
|
|
}
|
|
});
|