[260204] 역할별 스크립트 분리, 다크모드 추가
This commit is contained in:
154
scripts/modal.js
Normal file
154
scripts/modal.js
Normal file
@@ -0,0 +1,154 @@
|
||||
/** 상품 상세 모달 (열기/닫기·콘텐츠 채우기·링크 복사) */
|
||||
import { productsData } from './state.js';
|
||||
import { initBetterCarousel } from './carousel.js';
|
||||
import { TAG_STYLES, TAG_DEFAULT_STYLE } from './config.js';
|
||||
|
||||
export function openModal(id) {
|
||||
const product = productsData.find((p) => p.id === id);
|
||||
if (!product) return;
|
||||
|
||||
const modal = document.getElementById('product-modal');
|
||||
const images = product.images;
|
||||
|
||||
const loopImages = [images[images.length - 1], ...images, images[0]];
|
||||
const mainImagesHtml = loopImages
|
||||
.map(
|
||||
(img) => `
|
||||
<div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-0 md:p-4 select-none">
|
||||
<div class="w-full h-full max-w-full max-h-full rounded-xl md:rounded-2xl overflow-hidden flex items-center justify-center">
|
||||
<img src="${img}" draggable="false" class="max-w-full max-h-full w-auto h-auto object-contain sm:object-cover pointer-events-none rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
|
||||
const thumbnailsHtml = product.images
|
||||
.map(
|
||||
(img, idx) => `
|
||||
<div onclick="scrollToImage(${idx})"
|
||||
class="modal-thumb-item size-16 rounded-lg border-2 ${idx === 0 ? 'border-primary' : 'border-transparent'}
|
||||
bg-cover bg-center overflow-hidden cursor-pointer ${idx === 0 ? 'opacity-100' : 'opacity-70'}
|
||||
hover:opacity-100 transition-all flex-shrink-0"
|
||||
style="background-image: url('${img}');"></div>
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
|
||||
const dotsHtml = product.images
|
||||
.map(
|
||||
(_, idx) => `
|
||||
<div class="modal-dot-item ${idx === 0 ? 'w-4 bg-primary' : 'w-2 bg-gray-300 dark:bg-gray-700'} h-2 rounded-full transition-all"></div>
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
|
||||
document.getElementById('modal-main-carousel').innerHTML = mainImagesHtml;
|
||||
document.getElementById('modal-thumbnails').innerHTML = thumbnailsHtml;
|
||||
document.getElementById('modal-dots').innerHTML = dotsHtml;
|
||||
document.getElementById('modal-title').textContent = product.title;
|
||||
document.getElementById('modal-price').textContent = `${product.currency}${product.price.toLocaleString()}`;
|
||||
|
||||
const modalCategory = document.getElementById('modal-category');
|
||||
if (modalCategory) modalCategory.textContent = product.category;
|
||||
|
||||
const modalStatus = document.getElementById('modal-status');
|
||||
if (modalStatus) {
|
||||
modalStatus.textContent = product.status;
|
||||
const statusStyles = {
|
||||
판매중: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
|
||||
판매예정: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
|
||||
판매완료: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
|
||||
미판매: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',
|
||||
};
|
||||
modalStatus.className = 'inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap ' + (statusStyles[product.status] || statusStyles['미판매']);
|
||||
}
|
||||
|
||||
const customTagElement = document.getElementById('modal-custom-tag');
|
||||
const tagText = product.customTag?.trim();
|
||||
if (tagText) {
|
||||
customTagElement.textContent = tagText;
|
||||
customTagElement.classList.remove('hidden');
|
||||
customTagElement.className = `inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap ${TAG_STYLES[tagText] || TAG_DEFAULT_STYLE}`;
|
||||
} else {
|
||||
customTagElement.classList.add('hidden');
|
||||
}
|
||||
|
||||
// 구매일자: 값이 있을 때만 행 노출
|
||||
const modalDate = document.getElementById('modal-date');
|
||||
const modalDateRow = document.getElementById('modal-date-row');
|
||||
const pDate = product.specs?.purchaseDate;
|
||||
if (pDate && String(pDate).trim() !== '' && String(pDate) !== 'null') {
|
||||
if (modalDate) modalDate.textContent = pDate;
|
||||
if (modalDateRow) {
|
||||
modalDateRow.classList.remove('hidden');
|
||||
modalDateRow.classList.add('flex');
|
||||
}
|
||||
} else {
|
||||
if (modalDateRow) {
|
||||
modalDateRow.classList.add('hidden');
|
||||
modalDateRow.classList.remove('flex');
|
||||
}
|
||||
}
|
||||
|
||||
// 제품 상태(specs.condition): 값이 있을 때만 행 노출
|
||||
const conditionText = product.specs?.condition;
|
||||
const isVerified = product.specs?.isVerified;
|
||||
const conditionValueEl = document.getElementById('modal-condition');
|
||||
const conditionRowEl = document.getElementById('modal-condition-row');
|
||||
const conditionRowWrap = conditionRowEl?.parentElement; // 라벨+값 전체 행
|
||||
const verifiedIcon = document.getElementById('modal-verified-icon');
|
||||
if (conditionText && String(conditionText).trim() !== '') {
|
||||
if (conditionValueEl) conditionValueEl.textContent = conditionText;
|
||||
if (conditionRowWrap) {
|
||||
conditionRowWrap.classList.remove('hidden');
|
||||
conditionRowWrap.classList.add('flex');
|
||||
}
|
||||
if (verifiedIcon) {
|
||||
if (isVerified) verifiedIcon.classList.remove('hidden');
|
||||
else verifiedIcon.classList.add('hidden');
|
||||
}
|
||||
} else {
|
||||
if (conditionRowWrap) {
|
||||
conditionRowWrap.classList.add('hidden');
|
||||
conditionRowWrap.classList.remove('flex');
|
||||
}
|
||||
}
|
||||
|
||||
const modalDesc = document.getElementById('modal-desc');
|
||||
if (modalDesc) {
|
||||
modalDesc.innerHTML = Array.isArray(product.fullDescription) ? product.fullDescription.join('<br>') : product.fullDescription || '';
|
||||
}
|
||||
|
||||
const copyBtn = document.getElementById('copy-link-btn');
|
||||
const copyBtnText = document.getElementById('copy-btn-text');
|
||||
if (copyBtn) {
|
||||
copyBtn.onclick = () => {
|
||||
const shareUrl = `${window.location.origin}${window.location.pathname}?id=${product.id}`;
|
||||
navigator.clipboard.writeText(shareUrl).then(() => {
|
||||
if (copyBtnText) copyBtnText.textContent = '링크가 복사되었습니다!';
|
||||
copyBtn.classList.add('!bg-green-600');
|
||||
setTimeout(() => {
|
||||
if (copyBtnText) copyBtnText.textContent = '상품 링크 복사하기';
|
||||
copyBtn.classList.remove('!bg-green-600');
|
||||
}, 2000);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
const container = document.getElementById('modal-main-carousel-container');
|
||||
container.style.scrollBehavior = 'auto';
|
||||
container.scrollLeft = container.clientWidth;
|
||||
|
||||
initBetterCarousel(container, images.length);
|
||||
}
|
||||
|
||||
export function closeModal() {
|
||||
document.getElementById('product-modal').classList.add('hidden');
|
||||
document.body.style.overflow = 'auto';
|
||||
const cleanUrl = window.location.origin + window.location.pathname;
|
||||
window.history.replaceState(null, '', cleanUrl);
|
||||
}
|
||||
Reference in New Issue
Block a user