feat: OTC 모달에 제품 썸네일 이미지 표시

- product_images.db에서 thumbnail_base64 조회
- drug_code로 이미지 매칭
- 이미지 없으면 💊 placeholder
This commit is contained in:
thug0bin
2026-03-04 23:59:13 +09:00
parent ebf2e8a016
commit 088d88878a
2 changed files with 76 additions and 8 deletions

View File

@@ -261,14 +261,40 @@
}
.otc-purchase-item {
display: flex;
justify-content: space-between;
padding: 5px 0;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 0.85rem;
border-bottom: 1px solid #f1f5f9;
}
.otc-purchase-item:last-child { border-bottom: none; }
.otc-purchase-item .name { color: #1e293b; }
.otc-purchase-item .qty { color: #64748b; }
.otc-purchase-item .thumb {
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: cover;
background: #f1f5f9;
flex-shrink: 0;
}
.otc-purchase-item .thumb-placeholder {
width: 40px;
height: 40px;
border-radius: 6px;
background: #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
font-size: 1.2rem;
flex-shrink: 0;
}
.otc-purchase-item .info {
flex: 1;
min-width: 0;
}
.otc-purchase-item .name { color: #1e293b; font-weight: 500; }
.otc-purchase-item .category { font-size: 0.75rem; color: #64748b; }
.otc-purchase-item .qty { color: #64748b; white-space: nowrap; }
/* 약품 목록 */
.medication-list {
@@ -1118,7 +1144,14 @@
<div class="otc-purchase-items">
${p.items.map(item => `
<div class="otc-purchase-item">
<span class="name">${item.name}</span>
${item.image
? `<img class="thumb" src="data:image/jpeg;base64,${item.image}" alt="">`
: `<div class="thumb-placeholder">💊</div>`
}
<div class="info">
<div class="name">${item.name}</div>
${item.category ? `<div class="category">${item.category}</div>` : ''}
</div>
<span class="qty">${item.quantity}개 / ${item.price.toLocaleString()}원</span>
</div>
`).join('')}