feat: 제품 검색 페이지 및 QR 라벨 인쇄 기능

- /admin/products: 전체 제품 검색 페이지 (OTC)
- /api/products: 제품 검색 API (세트상품 바코드 포함)
- qr_printer.py: Brother QL-710W 프린터 연동
- /api/qr-print, /api/qr-preview: QR 라벨 인쇄/미리보기 API
- 판매상세 페이지에 QR 인쇄 버튼 추가
- 수량 선택 UI (+/- 버튼, 최대 10장)
- 세트상품 제조사 표시 개선
- 대시보드 헤더에 제품검색/판매조회 탭 추가

backend/templates/admin_sales_detail.html

@@ -261,6 +261,152 @@
             color: #64748b;
         }
 
+        /* ── QR 인쇄 버튼 ── */
+        .btn-qr {
+            background: #8b5cf6;
+            color: #fff;
+            border: none;
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-size: 11px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            white-space: nowrap;
+        }
+        .btn-qr:hover { background: #7c3aed; }
+        .btn-qr:disabled {
+            background: #cbd5e1;
+            cursor: not-allowed;
+        }
+        .btn-qr.printing {
+            background: #f59e0b;
+        }
+
+        /* ── 모달 ── */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-overlay.active { display: flex; }
+        .modal-box {
+            background: #fff;
+            border-radius: 16px;
+            padding: 24px;
+            max-width: 400px;
+            width: 90%;
+            text-align: center;
+        }
+        .modal-title {
+            font-size: 18px;
+            font-weight: 700;
+            margin-bottom: 16px;
+        }
+        .modal-preview {
+            margin: 16px 0;
+        }
+        .modal-preview img {
+            max-width: 200px;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+        }
+
+        /* ── 수량 선택기 ── */
+        .qty-selector {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0;
+            margin: 20px 0;
+        }
+        .qty-btn {
+            width: 44px;
+            height: 44px;
+            border: none;
+            background: #f1f5f9;
+            font-size: 24px;
+            font-weight: 600;
+            color: #64748b;
+            cursor: pointer;
+            transition: all 0.15s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            user-select: none;
+        }
+        .qty-btn:first-child {
+            border-radius: 12px 0 0 12px;
+        }
+        .qty-btn:last-child {
+            border-radius: 0 12px 12px 0;
+        }
+        .qty-btn:hover {
+            background: #e2e8f0;
+            color: #334155;
+        }
+        .qty-btn:active {
+            transform: scale(0.95);
+            background: #cbd5e1;
+        }
+        .qty-btn:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+        .qty-value {
+            width: 64px;
+            height: 44px;
+            background: #fff;
+            border: 2px solid #e2e8f0;
+            border-left: none;
+            border-right: none;
+            font-size: 20px;
+            font-weight: 700;
+            color: #1e293b;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .qty-label {
+            font-size: 13px;
+            color: #64748b;
+            margin-bottom: 8px;
+        }
+
+        .modal-btns {
+            display: flex;
+            gap: 12px;
+            justify-content: center;
+            margin-top: 20px;
+        }
+        .modal-btn {
+            padding: 10px 24px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            border: none;
+            transition: all 0.15s;
+        }
+        .modal-btn.cancel {
+            background: #f1f5f9;
+            color: #64748b;
+        }
+        .modal-btn.cancel:hover { background: #e2e8f0; }
+        .modal-btn.confirm {
+            background: #8b5cf6;
+            color: #fff;
+        }
+        .modal-btn.confirm:hover { background: #7c3aed; }
+        .modal-btn.confirm:active { transform: scale(0.98); }
+
         /* ── 반응형 ── */
         @media (max-width: 768px) {
             .stats-grid { grid-template-columns: repeat(2, 1fr); }
@@ -355,10 +501,11 @@
                         <th>수량</th>
                         <th>단가</th>
                         <th>합계</th>
+                        <th>QR</th>
                     </tr>
                 </thead>
                 <tbody id="salesTableBody">
-                    <tr><td colspan="6" class="loading">로딩 중...</td></tr>
+                    <tr><td colspan="7" class="loading">로딩 중...</td></tr>
                 </tbody>
             </table>
         </div>
@@ -415,11 +562,11 @@
         const tbody = document.getElementById('salesTableBody');
         
         if (salesData.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="6" class="empty-state">판매 내역이 없습니다</td></tr>';
+            tbody.innerHTML = '<tr><td colspan="7" class="empty-state">판매 내역이 없습니다</td></tr>';
             return;
         }
 
-        tbody.innerHTML = salesData.map(item => `
+        tbody.innerHTML = salesData.map((item, idx) => `
             <tr>
                 <td style="white-space:nowrap;font-size:12px;color:#64748b;">${item.sale_date}</td>
                 <td>
@@ -430,6 +577,11 @@
                 <td class="qty">${item.quantity}</td>
                 <td class="price">${formatPrice(item.unit_price)}</td>
                 <td class="price">${formatPrice(item.total_price)}</td>
+                <td>
+                    <button class="btn-qr" onclick="printQR(${idx})" title="QR 라벨 인쇄">
+                        🏷️ QR
+                    </button>
+                </td>
             </tr>
         `).join('');
     }
@@ -445,7 +597,7 @@
         const barcodeFilter = document.getElementById('barcodeFilter').value;
 
         document.getElementById('salesTableBody').innerHTML = 
-            '<tr><td colspan="6" class="loading">로딩 중...</td></tr>';
+            '<tr><td colspan="7" class="loading">로딩 중...</td></tr>';
 
         fetch(`/api/sales-detail?days=${period}&search=${encodeURIComponent(search)}&barcode=${barcodeFilter}`)
             .then(res => res.json())
@@ -463,17 +615,164 @@
                     renderTable();
                 } else {
                     document.getElementById('salesTableBody').innerHTML = 
-                        `<tr><td colspan="6" class="empty-state">오류: ${data.error}</td></tr>`;
+                        `<tr><td colspan="7" class="empty-state">오류: ${data.error}</td></tr>`;
                 }
             })
             .catch(err => {
                 document.getElementById('salesTableBody').innerHTML = 
-                    `<tr><td colspan="6" class="empty-state">데이터 로드 실패</td></tr>`;
+                    `<tr><td colspan="7" class="empty-state">데이터 로드 실패</td></tr>`;
             });
     }
 
+    // QR 인쇄 관련
+    let selectedItem = null;
+    let printQty = 1;
+    const MAX_QTY = 10;
+    const MIN_QTY = 1;
+
+    function adjustQty(delta) {
+        printQty = Math.max(MIN_QTY, Math.min(MAX_QTY, printQty + delta));
+        updateQtyUI();
+    }
+
+    function updateQtyUI() {
+        document.getElementById('qtyValue').textContent = printQty;
+        document.getElementById('qtyMinus').disabled = printQty <= MIN_QTY;
+        document.getElementById('qtyPlus').disabled = printQty >= MAX_QTY;
+        
+        const btn = document.getElementById('printBtn');
+        btn.textContent = printQty > 1 ? `${printQty}장 인쇄` : '인쇄';
+    }
+
+    function printQR(idx) {
+        selectedItem = salesData[idx];
+        printQty = 1;
+        
+        // 미리보기 요청
+        const modal = document.getElementById('qrModal');
+        const preview = document.getElementById('qrPreview');
+        const info = document.getElementById('qrInfo');
+        
+        preview.innerHTML = '<p style="color:#64748b;">미리보기 로딩 중...</p>';
+        info.innerHTML = `
+            <strong>${escapeHtml(selectedItem.product_name)}</strong><br>
+            <span style="color:#64748b;font-size:13px;">
+                바코드: ${selectedItem.barcode || selectedItem.drug_code || 'N/A'}<br>
+                가격: ${formatPrice(selectedItem.unit_price)}
+            </span>
+        `;
+        updateQtyUI();
+        modal.classList.add('active');
+        
+        // 미리보기 이미지 로드
+        fetch('/api/qr-preview', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                drug_name: selectedItem.product_name,
+                barcode: selectedItem.barcode || '',
+                drug_code: selectedItem.drug_code || '',
+                sale_price: selectedItem.unit_price || 0
+            })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if (data.success && data.image) {
+                preview.innerHTML = `<img src="${data.image}" alt="QR 미리보기">`;
+            } else {
+                preview.innerHTML = '<p style="color:#ef4444;">미리보기 실패</p>';
+            }
+        })
+        .catch(err => {
+            preview.innerHTML = '<p style="color:#ef4444;">미리보기 오류</p>';
+        });
+    }
+
+    function closeQRModal() {
+        document.getElementById('qrModal').classList.remove('active');
+        selectedItem = null;
+        printQty = 1;
+    }
+
+    async function confirmPrintQR() {
+        if (!selectedItem) return;
+        
+        const btn = document.getElementById('printBtn');
+        const totalQty = printQty;
+        btn.disabled = true;
+        
+        let successCount = 0;
+        let errorMsg = '';
+        
+        for (let i = 0; i < totalQty; i++) {
+            btn.textContent = `인쇄 중... (${i + 1}/${totalQty})`;
+            
+            try {
+                const res = await fetch('/api/qr-print', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({
+                        drug_name: selectedItem.product_name,
+                        barcode: selectedItem.barcode || '',
+                        drug_code: selectedItem.drug_code || '',
+                        sale_price: selectedItem.unit_price || 0
+                    })
+                });
+                const data = await res.json();
+                
+                if (data.success) {
+                    successCount++;
+                } else {
+                    errorMsg = data.error || '알 수 없는 오류';
+                    break;
+                }
+                
+                // 연속 인쇄 시 약간의 딜레이
+                if (i < totalQty - 1) {
+                    await new Promise(r => setTimeout(r, 500));
+                }
+            } catch (err) {
+                errorMsg = err.message;
+                break;
+            }
+        }
+        
+        btn.disabled = false;
+        updateQtyUI();
+        
+        if (successCount === totalQty) {
+            alert(`✅ QR 라벨 ${totalQty}장 인쇄 완료!`);
+            closeQRModal();
+        } else if (successCount > 0) {
+            alert(`⚠️ ${successCount}/${totalQty}장 인쇄 완료\n오류: ${errorMsg}`);
+        } else {
+            alert(`❌ 인쇄 실패: ${errorMsg}`);
+        }
+    }
+
     // 초기 로드
     loadSalesData();
     </script>
+
+    <!-- QR 인쇄 모달 -->
+    <div class="modal-overlay" id="qrModal" onclick="if(event.target===this)closeQRModal()">
+        <div class="modal-box">
+            <div class="modal-title">🏷️ QR 라벨 인쇄</div>
+            <div id="qrInfo" style="margin-bottom:12px;"></div>
+            <div class="modal-preview" id="qrPreview">
+                <p style="color:#64748b;">미리보기 로딩 중...</p>
+            </div>
+            <div class="qty-label">인쇄 매수</div>
+            <div class="qty-selector">
+                <button class="qty-btn" onclick="adjustQty(-1)" id="qtyMinus">−</button>
+                <div class="qty-value" id="qtyValue">1</div>
+                <button class="qty-btn" onclick="adjustQty(1)" id="qtyPlus">+</button>
+            </div>
+            <div class="modal-btns">
+                <button class="modal-btn cancel" onclick="closeQRModal()">취소</button>
+                <button class="modal-btn confirm" onclick="confirmPrintQR()" id="printBtn">인쇄</button>
+            </div>
+        </div>
+    </div>
 </body>
 </html>