zenn/zenn.inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[260218]

Browse Source 
- 카드 깜빡임 보완
- 모달 상태, 가격 표시 방법 수정
This commit is contained in:
zenn
2026-02-18 03:35:55 +09:00
parent bde819d1a1
commit cfd3fb8b75
6 changed files with 119 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
scripts/modal.js
View File

@@ -1,7 +1,7 @@
/** 상품 상세 모달 (열기/닫기·콘텐츠 채우기·링크 복사) */
import { productsData } from './state.js';
import { initBetterCarousel } from './carousel.js';
import { TAG_STYLES, TAG_DEFAULT_STYLE } from './config.js';
import { TAG_STYLES, TAG_DEFAULT_STYLE, PRODUCT_CONDITIONS } from './config.js';
export function openModal(id) {
const product = productsData.find((p) => p.id === id);
@@ -11,7 +11,7 @@ export function openModal(id) {
modal.classList.remove('hidden');
modal.classList.add('flex');
const images = product.images;
const loopImages = [images[images.length - 1], ...images, images[0]];
@@ -51,7 +51,6 @@ export function openModal(id) {
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;
@@ -95,17 +94,21 @@ export function openModal(id) {
}
}
// 제품 상태(specs.condition): 값이 있을 때만 행 노출
const conditionText = product.specs?.condition;
const conditionKey = product.specs?.condition;
const isVerified = product.specs?.isVerified;
// PRODUCT_CONDITIONS에서 라벨을 가져오되, 없으면 원본 키 표시
const conditionData = PRODUCT_CONDITIONS[conditionKey];
// 데이터가 객체라면 .label을 쓰고, 아니면 원본 키를 씁니다.
const conditionLabel = conditionData?.label || conditionKey || '';
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 (conditionKey && String(conditionKey).trim() !== '') {
if (conditionValueEl) conditionValueEl.textContent = conditionLabel;
if (conditionRowWrap) {
conditionRowWrap.classList.remove('hidden');
conditionRowWrap.classList.add('flex');
@@ -121,17 +124,30 @@ export function openModal(id) {
}
}
// 가격 표시 로직 수정
const priceElement = document.getElementById('modal-price');
if (priceElement) {
// 가격 표시 로직 수정
const priceValueEl = document.getElementById('modal-price');
const priceRowEl = document.getElementById('modal-price-row');
const priceRowWrap = priceRowEl?.parentElement;
if (priceValueEl && priceRowWrap) {
// [중요] 새로운 상품을 열 때마다 일단 hidden을 제거하여 초기화합니다.
priceRowWrap.classList.remove('hidden');
// 1. 최우선 순위: 미판매 상태 체크
if (product.status === '미판매') {
// 미판매 상태일 때의 처리
priceElement.textContent = 'NOT FOR SALE';
priceElement.classList.add('text-gray-500'); // 시각적으로 구분되도록 스타일 추가 가능
} else {
// 정상 판매 중인 경우
priceElement.textContent = `${product.currency}${product.price.toLocaleString()}`;
priceElement.classList.remove('text-gray-500');
priceValueEl.textContent = 'NOT FOR SALE';
priceValueEl.classList.add('text-gray-500');
}
// 2. 가격 데이터가 아예 없는 경우 (null, undefined, 빈 문자열)
// 숫자 0은 가격으로 인정하고 싶다면 (product.price === null || product.price === undefined)로 씁니다.
else if (product.price === null || product.price === undefined || product.price === '') {
priceRowWrap.classList.add('hidden');
}
// 3. 가격이 존재하는 경우 (0원을 포함하여 값이 있는 경우)
else {
const currency = product.currency || '₩';
priceValueEl.textContent = `${currency}${Number(product.price).toLocaleString()}`;
priceValueEl.classList.remove('text-gray-500');
}
}
@@ -141,9 +157,7 @@ export function openModal(id) {
if (product.status === '미판매') {
modalDesc.innerHTML = '<p class="text-gray-400 italic">판매중인 상품이 아니기에 정보가 제공되지 않습니다.</p>';
} else {
modalDesc.innerHTML = Array.isArray(product.fullDescription)
? product.fullDescription.join('<br>')
: product.fullDescription || '';
modalDesc.innerHTML = Array.isArray(product.fullDescription) ? product.fullDescription.join('<br>') : product.fullDescription || '';
}
}
@@ -178,7 +192,7 @@ export function openModal(id) {
export function closeModal() {
const modal = document.getElementById('product-modal');
// 1. 이미지 캐러셀 영역 초기화
const carouselContainer = document.getElementById('modal-main-carousel-container');
if (carouselContainer) {