[260219] 카드 터치 이벤트 수정
This commit is contained in:
@@ -3,6 +3,90 @@ import { state, saveSelection } from './state.js';
|
||||
import { ITEMS_PER_PAGE, STATUS_META, STATUS_COLOR, PRODUCT_CONDITIONS } from './config.js';
|
||||
import { updateSummary } from './main.js';
|
||||
|
||||
// --- 터치 및 드래그 관련 전역 변수 및 핸들러 ---
|
||||
window.isDragging = false;
|
||||
let touchStartX = 0;
|
||||
let touchStartY = 0;
|
||||
|
||||
// 터치 기기 여부 확인
|
||||
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||||
|
||||
window.handleTouchStart = function (e) {
|
||||
window.isDragging = false;
|
||||
touchStartX = e.touches[0].clientX;
|
||||
touchStartY = e.touches[0].clientY;
|
||||
};
|
||||
|
||||
window.handleTouchMove = function (e) {
|
||||
const touchX = e.touches[0].clientX;
|
||||
const touchY = e.touches[0].clientY;
|
||||
|
||||
// 10px 이상 움직이면 드래그(스크롤)로 간주
|
||||
if (Math.abs(touchX - touchStartX) > 10 || Math.abs(touchY - touchStartY) > 10) {
|
||||
window.isDragging = true;
|
||||
}
|
||||
};
|
||||
|
||||
window.handleTouchEnd = function (e) {
|
||||
// 필요한 경우 추가 로직 작성 가능 (현재는 isDragging 상태 유지만으로 충분)
|
||||
};
|
||||
|
||||
// 썸네일 호버 핸들러 (PC에서만 동작하도록 수정)
|
||||
window.handleThumbnailHover = function (e, id) {
|
||||
if (isTouchDevice) return; // 모바일에서는 호버 로직 실행 안 함
|
||||
|
||||
const product = state.visibleProducts.find((p) => p.id === id);
|
||||
if (!product || !product.images || product.images.length <= 1) return;
|
||||
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const sectionWidth = rect.width / product.images.length;
|
||||
const index = Math.floor(x / sectionWidth);
|
||||
|
||||
const thumb = document.getElementById(`thumb-${id}`);
|
||||
const indicators = document.querySelector(`#indicator-${id}`)?.children;
|
||||
|
||||
if (thumb && product.images[index]) {
|
||||
thumb.style.backgroundImage = `url("${product.images[index]}")`;
|
||||
}
|
||||
|
||||
if (indicators) {
|
||||
Array.from(indicators).forEach((dot, i) => {
|
||||
if (i === index) {
|
||||
dot.classList.add('bg-white', 'scale-125');
|
||||
dot.classList.remove('bg-white/40');
|
||||
} else {
|
||||
dot.classList.remove('bg-white', 'scale-125');
|
||||
dot.classList.add('bg-white/40');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.handleThumbnailLeave = function (id) {
|
||||
if (isTouchDevice) return;
|
||||
|
||||
const product = state.visibleProducts.find((p) => p.id === id);
|
||||
const thumb = document.getElementById(`thumb-${id}`);
|
||||
const indicators = document.querySelector(`#indicator-${id}`)?.children;
|
||||
|
||||
if (thumb && product) {
|
||||
thumb.style.backgroundImage = `url("${product.images[0]}")`;
|
||||
}
|
||||
|
||||
if (indicators) {
|
||||
Array.from(indicators).forEach((dot, i) => {
|
||||
if (i === 0) {
|
||||
dot.classList.add('bg-white', 'scale-125');
|
||||
dot.classList.remove('bg-white/40');
|
||||
} else {
|
||||
dot.classList.remove('bg-white', 'scale-125');
|
||||
dot.classList.add('bg-white/40');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 1. 체크박스 전역 핸들러 등록
|
||||
window.toggleSelectItem = function (id) {
|
||||
if (state.selectedIds.has(id)) {
|
||||
@@ -24,32 +108,24 @@ export function renderProducts(page = 1) {
|
||||
|
||||
if (!grid || !tableWrapper) return;
|
||||
|
||||
// 1. 결과가 0개인 경우 안내
|
||||
if (state.visibleProducts.length === 0) {
|
||||
grid.classList.remove('grid');
|
||||
grid.classList.add('hidden');
|
||||
tableWrapper.classList.add('hidden');
|
||||
|
||||
// 검색 결과 없음 메시지를 표시할 별도의 컨테이너가 없다면 grid 영역을 빌려 씁니다.
|
||||
const emptyMsg = `
|
||||
<div class="col-span-full flex flex-col items-center justify-center py-20 w-full text-center">
|
||||
<svg class="w-20 h-20 text-slate-300 dark:text-slate-700 mb-6"
|
||||
viewBox="0 -960 960 960"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="w-20 h-20 text-slate-300 dark:text-slate-700 mb-6" viewBox="0 -960 960 960" fill="currentColor">
|
||||
<path d="M138.5-138.5Q80-197 80-280t58.5-141.5Q197-480 280-480t141.5 58.5Q480-363 480-280t-58.5 141.5Q363-80 280-80t-141.5-58.5ZM824-120 568-376q-12-13-25.5-26.5T516-428q38-24 61-64t23-88q0-75-52.5-127.5T420-760q-75 0-127.5 52.5T240-580q0 6 .5 11.5T242-557q-18 2-39.5 8T164-535q-2-11-3-22t-1-23q0-109 75.5-184.5T420-840q109 0 184.5 75.5T680-580q0 43-13.5 81.5T629-428l251 252-56 56Zm-615-61 71-71 70 71 29-28-71-71 71-71-28-28-71 71-71-71-28 28 71 71-71 71 28 28Z"/>
|
||||
</svg>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">검색 결과가 없습니다</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm">입력하신 검색어나 선택한 필터를 확인해 주세요.</p>
|
||||
</div>
|
||||
`;
|
||||
</div>`;
|
||||
grid.innerHTML = emptyMsg;
|
||||
grid.classList.remove('hidden');
|
||||
if (paginationContainer) paginationContainer.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 뷰 모드 설정 및 컨테이너 노출 정리 (hidden/flex/grid 충돌 방지)
|
||||
if (state.viewMode === 'grid') {
|
||||
grid.classList.remove('hidden');
|
||||
grid.classList.add('grid');
|
||||
@@ -62,21 +138,17 @@ export function renderProducts(page = 1) {
|
||||
grid.classList.remove('grid');
|
||||
grid.classList.add('hidden');
|
||||
tableWrapper.classList.remove('hidden');
|
||||
updateSummary(); // 테이블일 때만 요약바 노출 여부 결정
|
||||
updateSummary();
|
||||
}
|
||||
|
||||
// 3. 현재 페이지 데이터 계산
|
||||
const startIndex = (page - 1) * ITEMS_PER_PAGE;
|
||||
const pagedProducts = state.visibleProducts.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
||||
|
||||
if (state.viewMode === 'grid') {
|
||||
grid.innerHTML = '';
|
||||
pagedProducts.forEach((product) => {
|
||||
// 1. 상태 판별
|
||||
const isSold = STATUS_META[product.status]?.soldOut === true;
|
||||
const isNonSale = product.status === '미판매'; // 상태값이 '미판매'일 때
|
||||
|
||||
// 2. 스펙(Condition) 정보 추출
|
||||
const isNonSale = product.status === '미판매';
|
||||
const conditionKey = product.specs?.condition;
|
||||
const conditionConfig = PRODUCT_CONDITIONS[conditionKey];
|
||||
const conditionDisplay = conditionConfig ? conditionConfig.label : conditionKey || '';
|
||||
@@ -84,111 +156,95 @@ export function renderProducts(page = 1) {
|
||||
grid.insertAdjacentHTML(
|
||||
'beforeend',
|
||||
`
|
||||
<div
|
||||
class="product-card group flex flex-col gap-4 cursor-pointer"
|
||||
data-id="${product.id}"
|
||||
onclick="if(!window.isDragging) window.openModal('${product.id}')"
|
||||
${
|
||||
!isSold
|
||||
? `
|
||||
onmousemove="window.handleThumbnailHover(event, '${product.id}')"
|
||||
onmouseleave="window.handleThumbnailLeave('${product.id}')"
|
||||
ontouchstart="window.handleTouchStart(event)"
|
||||
ontouchmove="window.handleTouchMove(event, '${product.id}')"
|
||||
ontouchend="window.handleTouchEnd(event, '${product.id}')"
|
||||
`
|
||||
: `
|
||||
ontouchend="window.handleTouchEnd(event, '${product.id}')"
|
||||
`
|
||||
}>
|
||||
<div class="relative w-full aspect-card bg-slate-200 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm">
|
||||
<div id="thumb-${product.id}"
|
||||
class="w-full h-full bg-center bg-no-repeat bg-cover absolute inset-0 transition-all duration-500 ${isSold ? 'grayscale opacity-60' : 'group-hover:scale-105'}"
|
||||
style="background-image: none; will-change: background-image, transform;">
|
||||
</div>
|
||||
|
||||
<div id="thumb-fade-${product.id}"
|
||||
class="w-full h-full bg-center bg-no-repeat bg-cover absolute inset-0 opacity-0 pointer-events-none transition-all duration-500 ${isSold ? 'grayscale' : 'group-hover:scale-105'}"
|
||||
style="background-image: none; will-change: background-image, opacity, transform;">
|
||||
</div>
|
||||
|
||||
<div class="absolute top-3 left-3 z-10">
|
||||
<span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${STATUS_COLOR[product.status]} backdrop-blur-md border">${product.status}</span>
|
||||
</div>
|
||||
|
||||
${
|
||||
!isSold && product.images?.length > 1
|
||||
? `
|
||||
<div id="indicator-${product.id}" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-10">
|
||||
${product.images
|
||||
.map(
|
||||
(_, i) => `
|
||||
<div class="w-1.5 h-1.5 rounded-full transition-all duration-300 shadow-sm ${i === 0 ? 'bg-white scale-125' : 'bg-white/40'}"></div>
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
<div class="product-card group flex flex-col gap-4 cursor-pointer"
|
||||
data-id="${product.id}"
|
||||
onclick="if(!window.isDragging) window.openModal('${product.id}')"
|
||||
ontouchstart="window.handleTouchStart(event)"
|
||||
ontouchmove="window.handleTouchMove(event)"
|
||||
ontouchend="window.handleTouchEnd(event)"
|
||||
onmousemove="window.handleThumbnailHover(event, '${product.id}')"
|
||||
onmouseleave="window.handleThumbnailLeave('${product.id}')">
|
||||
|
||||
<div class="relative w-full aspect-card bg-slate-200 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm">
|
||||
<div id="thumb-${product.id}"
|
||||
class="w-full h-full bg-center bg-no-repeat bg-cover absolute inset-0 transition-all duration-500 ${isSold ? 'grayscale opacity-60' : 'group-hover:scale-105'}"
|
||||
style="background-image: none; will-change: background-image, transform;">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex flex-col justify-between items-start sm:items-baseline gap-1">
|
||||
<h3 class="text-slate-900 dark:text-white text-base font-semibold leading-tight break-keep ${isSold ? 'line-through text-slate-400' : ''}">${product.title}</h3>
|
||||
<p class="text-base font-bold whitespace-nowrap ${isNonSale ? 'text-slate-400 font-medium text-xs uppercase' : 'text-slate-900 dark:text-white'}">${isNonSale ? 'Not for Sale' : `${product.currency || '₩'}${product.price.toLocaleString()}`}</p>
|
||||
</div>
|
||||
<div id="thumb-fade-${product.id}"
|
||||
class="w-full h-full bg-center bg-no-repeat bg-cover absolute inset-0 opacity-0 pointer-events-none transition-all duration-500 ${isSold ? 'grayscale' : 'group-hover:scale-105'}"
|
||||
style="background-image: none; will-change: background-image, opacity, transform;">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
${conditionDisplay ? `<span class="text-[11px] font-medium text-slate-400 mb-0.5">${conditionDisplay}</span>` : ''}
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm font-normal line-clamp-1 italic">${product.description}</p>
|
||||
</div>
|
||||
<div class="absolute top-3 left-3 z-10">
|
||||
<span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${STATUS_COLOR[product.status]} backdrop-blur-md border">${product.status}</span>
|
||||
</div>
|
||||
|
||||
${
|
||||
!isSold && product.images?.length > 1
|
||||
? `
|
||||
<div id="indicator-${product.id}" class="absolute bottom-3 left-1/2 -translate-x-1/2 hidden md:flex gap-1.5 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-10">
|
||||
${product.images
|
||||
.map(
|
||||
(_, i) => `
|
||||
<div class="w-1.5 h-1.5 rounded-full transition-all duration-300 shadow-sm ${i === 0 ? 'bg-white scale-125' : 'bg-white/40'}"></div>
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>`
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex flex-col justify-between items-start sm:items-baseline gap-1">
|
||||
<h3 class="text-slate-900 dark:text-white text-base font-semibold leading-tight break-keep ${isSold ? 'line-through text-slate-400' : ''}">${product.title}</h3>
|
||||
<p class="text-base font-bold whitespace-nowrap ${isNonSale ? 'text-slate-400 font-medium text-xs uppercase' : 'text-slate-900 dark:text-white'}">
|
||||
${isNonSale ? 'Not for Sale' : `${product.currency || '₩'}${product.price.toLocaleString()}`}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
${conditionDisplay ? `<span class="text-[11px] font-medium text-slate-400 mb-0.5">${conditionDisplay}</span>` : ''}
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm font-normal line-clamp-1 italic">${product.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
</div>`,
|
||||
);
|
||||
});
|
||||
|
||||
setupLazyLoading();
|
||||
} else {
|
||||
// 테이블 렌더링
|
||||
// 테이블 렌더링 로직 (생략 없이 유지)
|
||||
tableBody.innerHTML = pagedProducts
|
||||
.map((product) => {
|
||||
const meta = STATUS_META[product.status];
|
||||
const isSold = meta?.soldOut === true;
|
||||
const isSelectable = meta?.selectable !== false;
|
||||
|
||||
const conditionKey = product.specs.condition;
|
||||
const conditionConfig = PRODUCT_CONDITIONS[conditionKey];
|
||||
let conditionDisplay = conditionConfig ? conditionConfig.label : conditionKey || '상세 설명 참고 ℹ️';
|
||||
let conditionClass = conditionConfig ? conditionConfig.color : 'text-slate-500';
|
||||
|
||||
return `
|
||||
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors ${isSold ? 'opacity-50 grayscale cursor-not-allowed' : 'cursor-pointer'}"
|
||||
onclick="if(event.target.type !== 'checkbox') {
|
||||
${isSold ? "alert('판매 완료된 상품입니다.');" : `window.openModal('${product.id}')`}
|
||||
}">
|
||||
<td class="py-4 px-4 text-center" onclick="event.stopPropagation()">
|
||||
<input type="checkbox"
|
||||
class="product-check rounded border-slate-300 w-4 h-4 ${isSelectable ? 'cursor-pointer text-primary' : 'opacity-20 cursor-not-allowed'}"
|
||||
${state.selectedIds.has(product.id) ? 'checked' : ''}
|
||||
${isSelectable ? '' : 'disabled'}
|
||||
onchange="window.toggleSelectItem('${product.id}')">
|
||||
</td>
|
||||
<td class="py-4 px-4 font-semibold ${isSold ? 'line-through text-slate-400' : 'text-slate-900 dark:text-white'}">${product.title}</td>
|
||||
<td class="py-4 px-4 text-xs break-keep ${conditionClass}">${conditionDisplay}</td>
|
||||
<td class="py-4 px-4 text-right font-bold text-slate-900 dark:text-white">
|
||||
₩${product.price.toLocaleString()}
|
||||
</td>
|
||||
<td class="hidden lg:table-cell py-4 px-4 text-center">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold border ${STATUS_COLOR[product.status]}">${product.status}</span>
|
||||
</td>
|
||||
</tr>`;
|
||||
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors ${isSold ? 'opacity-50 grayscale cursor-not-allowed' : 'cursor-pointer'}"
|
||||
onclick="if(event.target.type !== 'checkbox') {
|
||||
${isSold ? "alert('판매 완료된 상품입니다.');" : `window.openModal('${product.id}')`}
|
||||
}">
|
||||
<td class="py-4 px-4 text-center" onclick="event.stopPropagation()">
|
||||
<input type="checkbox" class="product-check rounded border-slate-300 w-4 h-4 ${isSelectable ? 'cursor-pointer text-primary' : 'opacity-20 cursor-not-allowed'}"
|
||||
${state.selectedIds.has(product.id) ? 'checked' : ''} ${isSelectable ? '' : 'disabled'}
|
||||
onchange="window.toggleSelectItem('${product.id}')">
|
||||
</td>
|
||||
<td class="py-4 px-4 font-semibold ${isSold ? 'line-through text-slate-400' : 'text-slate-900 dark:text-white'}">${product.title}</td>
|
||||
<td class="py-4 px-4 text-xs break-keep ${conditionClass}">${conditionDisplay}</td>
|
||||
<td class="py-4 px-4 text-right font-bold text-slate-900 dark:text-white">₩${product.price.toLocaleString()}</td>
|
||||
<td class="hidden lg:table-cell py-4 px-4 text-center">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold border ${STATUS_COLOR[product.status]}">${product.status}</span>
|
||||
</td>
|
||||
</tr>`;
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
|
||||
// 전체 선택 체크박스 상태 동기화
|
||||
const selectAllCheck = document.getElementById('select-all-current');
|
||||
if (selectAllCheck) {
|
||||
const startIndex = (page - 1) * ITEMS_PER_PAGE;
|
||||
@@ -196,10 +252,7 @@ export function renderProducts(page = 1) {
|
||||
selectAllCheck.checked = currentSelectableItems.length > 0 && currentSelectableItems.every((p) => state.selectedIds.has(p.id));
|
||||
}
|
||||
|
||||
// 페이지네이션 함수 호출 (이 함수는 외부에 정의되어 있어야 함)
|
||||
if (typeof renderPagination === 'function') {
|
||||
renderPagination();
|
||||
}
|
||||
if (typeof renderPagination === 'function') renderPagination();
|
||||
}
|
||||
|
||||
function setupLazyLoading() {
|
||||
|
||||
Reference in New Issue
Block a user