feat(purchase): 생산소모품 구매 관리 시스템 구현

tkuser: 업체(공급업체) CRUD + 소모품 마스터 CRUD (사진 업로드 포함)
tkfb: 구매신청 → 구매 처리 → 월간 분석/정산 전체 워크플로
설비(equipment) 분류 구매 시 자동 등록 + 실패 시 admin 알림

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

user-management/api/controllers/consumableItemController.js

@@ -0,0 +1,90 @@
+const consumableItemModel = require('../models/consumableItemModel');
+const fs = require('fs');
+const path = require('path');
+
+async function list(req, res) {
+  try {
+    const { category, search, is_active } = req.query;
+    const rows = await consumableItemModel.findAll({
+      category,
+      search,
+      is_active: is_active !== undefined ? is_active === 'true' || is_active === '1' : undefined
+    });
+    res.json({ success: true, data: rows });
+  } catch (err) {
+    console.error('ConsumableItem list error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+async function getById(req, res) {
+  try {
+    const item = await consumableItemModel.findById(req.params.id);
+    if (!item) return res.status(404).json({ success: false, error: '소모품을 찾을 수 없습니다' });
+    res.json({ success: true, data: item });
+  } catch (err) {
+    console.error('ConsumableItem get error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+async function create(req, res) {
+  try {
+    const { item_name, category } = req.body;
+    if (!item_name || !item_name.trim()) {
+      return res.status(400).json({ success: false, error: '품명은 필수입니다' });
+    }
+    if (!category) {
+      return res.status(400).json({ success: false, error: '분류는 필수입니다' });
+    }
+    const data = { ...req.body };
+    if (req.file) {
+      data.photo_path = '/uploads/consumables/' + req.file.filename;
+    }
+    const item = await consumableItemModel.create(data);
+    res.status(201).json({ success: true, data: item });
+  } catch (err) {
+    if (err.code === 'ER_DUP_ENTRY') {
+      return res.status(400).json({ success: false, error: '동일한 품명+메이커 조합이 이미 존재합니다' });
+    }
+    console.error('ConsumableItem create error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+async function update(req, res) {
+  try {
+    const existing = await consumableItemModel.findById(req.params.id);
+    if (!existing) return res.status(404).json({ success: false, error: '소모품을 찾을 수 없습니다' });
+
+    const data = { ...req.body };
+    if (req.file) {
+      data.photo_path = '/uploads/consumables/' + req.file.filename;
+      // 기존 사진 삭제
+      if (existing.photo_path) {
+        const oldPath = path.join(__dirname, '..', existing.photo_path);
+        fs.unlink(oldPath, () => {});
+      }
+    }
+    const item = await consumableItemModel.update(req.params.id, data);
+    res.json({ success: true, data: item });
+  } catch (err) {
+    if (err.code === 'ER_DUP_ENTRY') {
+      return res.status(400).json({ success: false, error: '동일한 품명+메이커 조합이 이미 존재합니다' });
+    }
+    console.error('ConsumableItem update error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+async function deactivate(req, res) {
+  try {
+    await consumableItemModel.deactivate(req.params.id);
+    res.json({ success: true, message: '비활성화 완료' });
+  } catch (err) {
+    console.error('ConsumableItem deactivate error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+module.exports = { list, getById, create, update, deactivate };

user-management/api/controllers/vendorController.js

@@ -0,0 +1,66 @@
+const vendorModel = require('../models/vendorModel');
+
+async function list(req, res) {
+  try {
+    const { search, is_active } = req.query;
+    const rows = await vendorModel.findAll({
+      search,
+      is_active: is_active !== undefined ? is_active === 'true' || is_active === '1' : undefined
+    });
+    res.json({ success: true, data: rows });
+  } catch (err) {
+    console.error('Vendor list error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+async function getById(req, res) {
+  try {
+    const vendor = await vendorModel.findById(req.params.id);
+    if (!vendor) return res.status(404).json({ success: false, error: '업체를 찾을 수 없습니다' });
+    res.json({ success: true, data: vendor });
+  } catch (err) {
+    console.error('Vendor get error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+async function create(req, res) {
+  try {
+    const { vendor_name } = req.body;
+    if (!vendor_name || !vendor_name.trim()) {
+      return res.status(400).json({ success: false, error: '업체명은 필수입니다' });
+    }
+    const vendor = await vendorModel.create(req.body);
+    res.status(201).json({ success: true, data: vendor });
+  } catch (err) {
+    if (err.code === 'ER_DUP_ENTRY') {
+      return res.status(400).json({ success: false, error: '이미 등록된 업체입니다' });
+    }
+    console.error('Vendor create error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+async function update(req, res) {
+  try {
+    const vendor = await vendorModel.update(req.params.id, req.body);
+    if (!vendor) return res.status(404).json({ success: false, error: '업체를 찾을 수 없습니다' });
+    res.json({ success: true, data: vendor });
+  } catch (err) {
+    console.error('Vendor update error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+async function deactivate(req, res) {
+  try {
+    await vendorModel.deactivate(req.params.id);
+    res.json({ success: true, message: '비활성화 완료' });
+  } catch (err) {
+    console.error('Vendor deactivate error:', err);
+    res.status(500).json({ success: false, error: err.message });
+  }
+}
+
+module.exports = { list, getById, create, update, deactivate };

user-management/api/index.js

@@ -18,6 +18,8 @@ const equipmentRoutes = require('./routes/equipmentRoutes');
 const taskRoutes = require('./routes/taskRoutes');
 const vacationRoutes = require('./routes/vacationRoutes');
 const partnerRoutes = require('./routes/partnerRoutes');
+const vendorRoutes = require('./routes/vendorRoutes');
+const consumableItemRoutes = require('./routes/consumableItemRoutes');
 const notificationRecipientRoutes = require('./routes/notificationRecipientRoutes');
 
 const app = express();
@@ -59,6 +61,8 @@ app.use('/api/equipments', equipmentRoutes);
 app.use('/api/tasks', taskRoutes);
 app.use('/api/vacations', vacationRoutes);
 app.use('/api/partners', partnerRoutes);
+app.use('/api/vendors', vendorRoutes);
+app.use('/api/consumable-items', consumableItemRoutes);
 app.use('/api/notification-recipients', notificationRecipientRoutes);
 
 // 404

user-management/api/middleware/upload.js

@@ -5,6 +5,7 @@
 const multer = require('multer');
 const path = require('path');
 const crypto = require('crypto');
+const fs = require('fs');
 
 const storage = multer.diskStorage({
   destination: (req, file, cb) => {
@@ -32,4 +33,26 @@ const upload = multer({
   limits: { fileSize: 5 * 1024 * 1024 }
 });
 
+// 소모품 사진 업로드
+const consumablesDir = path.join(__dirname, '..', 'uploads', 'consumables');
+if (!fs.existsSync(consumablesDir)) { fs.mkdirSync(consumablesDir, { recursive: true }); }
+
+const consumableStorage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, consumablesDir);
+  },
+  filename: (req, file, cb) => {
+    const ext = path.extname(file.originalname).toLowerCase();
+    const uniqueName = `consumable-${Date.now()}-${crypto.randomInt(100000000, 999999999)}${ext}`;
+    cb(null, uniqueName);
+  }
+});
+
+const consumableUpload = multer({
+  storage: consumableStorage,
+  fileFilter,
+  limits: { fileSize: 5 * 1024 * 1024 }
+});
+
 module.exports = upload;
+module.exports.consumableUpload = consumableUpload;

user-management/api/models/consumableItemModel.js

@@ -0,0 +1,56 @@
+const { getPool } = require('./userModel');
+
+// ===== 소모품 마스터 =====
+
+async function findAll({ category, search, is_active } = {}) {
+  const db = getPool();
+  let sql = 'SELECT * FROM consumable_items WHERE 1=1';
+  const params = [];
+  if (is_active !== undefined) { sql += ' AND is_active = ?'; params.push(is_active); }
+  if (category) { sql += ' AND category = ?'; params.push(category); }
+  if (search) { sql += ' AND (item_name LIKE ? OR maker LIKE ?)'; params.push(`%${search}%`, `%${search}%`); }
+  sql += ' ORDER BY category, item_name';
+  const [rows] = await db.query(sql, params);
+  return rows;
+}
+
+async function findById(id) {
+  const db = getPool();
+  const [rows] = await db.query('SELECT * FROM consumable_items WHERE item_id = ?', [id]);
+  return rows[0] || null;
+}
+
+async function create(data) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO consumable_items (item_name, maker, category, base_price, unit, photo_path)
+     VALUES (?, ?, ?, ?, ?, ?)`,
+    [data.item_name, data.maker || null, data.category,
+     data.base_price || 0, data.unit || 'EA', data.photo_path || null]
+  );
+  return findById(result.insertId);
+}
+
+async function update(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+  if (data.item_name !== undefined) { fields.push('item_name = ?'); values.push(data.item_name); }
+  if (data.maker !== undefined) { fields.push('maker = ?'); values.push(data.maker || null); }
+  if (data.category !== undefined) { fields.push('category = ?'); values.push(data.category); }
+  if (data.base_price !== undefined) { fields.push('base_price = ?'); values.push(data.base_price); }
+  if (data.unit !== undefined) { fields.push('unit = ?'); values.push(data.unit || 'EA'); }
+  if (data.photo_path !== undefined) { fields.push('photo_path = ?'); values.push(data.photo_path || null); }
+  if (data.is_active !== undefined) { fields.push('is_active = ?'); values.push(data.is_active); }
+  if (fields.length === 0) return findById(id);
+  values.push(id);
+  await db.query(`UPDATE consumable_items SET ${fields.join(', ')} WHERE item_id = ?`, values);
+  return findById(id);
+}
+
+async function deactivate(id) {
+  const db = getPool();
+  await db.query('UPDATE consumable_items SET is_active = FALSE WHERE item_id = ?', [id]);
+}
+
+module.exports = { findAll, findById, create, update, deactivate };

user-management/api/models/vendorModel.js

@@ -0,0 +1,59 @@
+const { getPool } = require('./userModel');
+
+// ===== 업체(공급업체) =====
+
+async function findAll({ search, is_active } = {}) {
+  const db = getPool();
+  let sql = 'SELECT * FROM vendors WHERE 1=1';
+  const params = [];
+  if (is_active !== undefined) { sql += ' AND is_active = ?'; params.push(is_active); }
+  if (search) { sql += ' AND (vendor_name LIKE ? OR business_number LIKE ? OR contact_name LIKE ?)'; params.push(`%${search}%`, `%${search}%`, `%${search}%`); }
+  sql += ' ORDER BY vendor_name';
+  const [rows] = await db.query(sql, params);
+  return rows;
+}
+
+async function findById(id) {
+  const db = getPool();
+  const [rows] = await db.query('SELECT * FROM vendors WHERE vendor_id = ?', [id]);
+  return rows[0] || null;
+}
+
+async function create(data) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO vendors (vendor_name, business_number, representative, contact_name, contact_phone, address, bank_name, bank_account, notes)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+    [data.vendor_name, data.business_number || null, data.representative || null,
+     data.contact_name || null, data.contact_phone || null, data.address || null,
+     data.bank_name || null, data.bank_account || null, data.notes || null]
+  );
+  return findById(result.insertId);
+}
+
+async function update(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+  if (data.vendor_name !== undefined) { fields.push('vendor_name = ?'); values.push(data.vendor_name); }
+  if (data.business_number !== undefined) { fields.push('business_number = ?'); values.push(data.business_number || null); }
+  if (data.representative !== undefined) { fields.push('representative = ?'); values.push(data.representative || null); }
+  if (data.contact_name !== undefined) { fields.push('contact_name = ?'); values.push(data.contact_name || null); }
+  if (data.contact_phone !== undefined) { fields.push('contact_phone = ?'); values.push(data.contact_phone || null); }
+  if (data.address !== undefined) { fields.push('address = ?'); values.push(data.address || null); }
+  if (data.bank_name !== undefined) { fields.push('bank_name = ?'); values.push(data.bank_name || null); }
+  if (data.bank_account !== undefined) { fields.push('bank_account = ?'); values.push(data.bank_account || null); }
+  if (data.notes !== undefined) { fields.push('notes = ?'); values.push(data.notes || null); }
+  if (data.is_active !== undefined) { fields.push('is_active = ?'); values.push(data.is_active); }
+  if (fields.length === 0) return findById(id);
+  values.push(id);
+  await db.query(`UPDATE vendors SET ${fields.join(', ')} WHERE vendor_id = ?`, values);
+  return findById(id);
+}
+
+async function deactivate(id) {
+  const db = getPool();
+  await db.query('UPDATE vendors SET is_active = FALSE WHERE vendor_id = ?', [id]);
+}
+
+module.exports = { findAll, findById, create, update, deactivate };

user-management/api/routes/consumableItemRoutes.js

@@ -0,0 +1,15 @@
+const express = require('express');
+const router = express.Router();
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+const ctrl = require('../controllers/consumableItemController');
+const { consumableUpload } = require('../middleware/upload');
+
+router.use(requireAuth);
+
+router.get('/', ctrl.list);
+router.get('/:id', ctrl.getById);
+router.post('/', requireAdmin, consumableUpload.single('photo'), ctrl.create);
+router.put('/:id', requireAdmin, consumableUpload.single('photo'), ctrl.update);
+router.delete('/:id', requireAdmin, ctrl.deactivate);
+
+module.exports = router;

user-management/api/routes/vendorRoutes.js

@@ -0,0 +1,14 @@
+const express = require('express');
+const router = express.Router();
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+const ctrl = require('../controllers/vendorController');
+
+router.use(requireAuth);
+
+router.get('/', ctrl.list);
+router.get('/:id', ctrl.getById);
+router.post('/', requireAdmin, ctrl.create);
+router.put('/:id', requireAdmin, ctrl.update);
+router.delete('/:id', requireAdmin, ctrl.deactivate);
+
+module.exports = router;

user-management/web/index.html

@@ -64,6 +64,12 @@
                 <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('partners')">
                     <i class="fas fa-truck mr-2"></i>협력업체
                 </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('vendors')">
+                    <i class="fas fa-store mr-2"></i>업체
+                </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('consumables')">
+                    <i class="fas fa-box-open mr-2"></i>소모품
+                </button>
                 <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('notificationRecipients')">
                     <i class="fas fa-bell mr-2"></i>알림 수신자
                 </button>
@@ -1482,6 +1488,70 @@
             </div>
         </div>
 
+        <!-- ============ 업체(공급업체) 탭 ============ -->
+        <div id="tab-vendors" class="hidden">
+            <div class="grid lg:grid-cols-5 gap-6">
+                <!-- 업체 목록 -->
+                <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-base font-semibold text-gray-800"><i class="fas fa-store text-indigo-500 mr-2"></i>업체 (공급업체)</h2>
+                        <button id="btnAddVendorTkuser" onclick="openAddVendorTkuser()" class="hidden px-3 py-1.5 bg-slate-700 text-white rounded-lg text-xs hover:bg-slate-800">
+                            <i class="fas fa-plus mr-1"></i>업체 등록
+                        </button>
+                    </div>
+                    <div class="flex gap-2 mb-3">
+                        <input type="text" id="vendorSearchTkuser" class="input-field flex-1 px-3 py-1.5 rounded-lg text-sm" placeholder="업체명/사업자번호/담당자 검색">
+                        <select id="vendorFilterActiveTkuser" class="input-field px-2 py-1.5 rounded-lg text-sm">
+                            <option value="true">활성</option>
+                            <option value="">전체</option>
+                            <option value="false">비활성</option>
+                        </select>
+                    </div>
+                    <div id="vendorsListTkuser" class="space-y-2 max-h-[65vh] overflow-y-auto">
+                        <p class="text-gray-400 text-center py-4 text-sm">탭을 선택하면 데이터를 불러옵니다.</p>
+                    </div>
+                </div>
+                <!-- 업체 상세 -->
+                <div class="lg:col-span-3">
+                    <div id="vendorDetailTkuser" class="hidden"></div>
+                    <div id="vendorEmptyTkuser" class="text-center text-gray-400 py-16">
+                        <i class="fas fa-store text-4xl mb-3"></i>
+                        <p>업체를 선택하면 상세 정보를 볼 수 있습니다</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- ============ 소모품 탭 ============ -->
+        <div id="tab-consumables" class="hidden">
+            <div class="bg-white rounded-xl shadow-sm p-5">
+                <div class="flex items-center justify-between mb-4">
+                    <h2 class="text-base font-semibold text-gray-800"><i class="fas fa-box-open text-teal-500 mr-2"></i>소모품 마스터</h2>
+                    <button id="btnAddConsumableTkuser" onclick="openAddConsumableTkuser()" class="hidden px-3 py-1.5 bg-slate-700 text-white rounded-lg text-xs hover:bg-slate-800">
+                        <i class="fas fa-plus mr-1"></i>소모품 등록
+                    </button>
+                </div>
+                <div class="flex gap-2 mb-4 flex-wrap">
+                    <input type="text" id="consumableSearchTkuser" class="input-field flex-1 min-w-[160px] px-3 py-1.5 rounded-lg text-sm" placeholder="품명/메이커 검색">
+                    <select id="consumableFilterCategoryTkuser" class="input-field px-2 py-1.5 rounded-lg text-sm">
+                        <option value="">전체 분류</option>
+                        <option value="consumable">소모품</option>
+                        <option value="safety">안전용품</option>
+                        <option value="repair">수선비</option>
+                        <option value="equipment">설비</option>
+                    </select>
+                    <select id="consumableFilterActiveTkuser" class="input-field px-2 py-1.5 rounded-lg text-sm">
+                        <option value="true">활성</option>
+                        <option value="">전체</option>
+                        <option value="false">비활성</option>
+                    </select>
+                </div>
+                <div id="consumablesListTkuser">
+                    <p class="text-gray-400 text-center py-4 text-sm">탭을 선택하면 데이터를 불러옵니다.</p>
+                </div>
+            </div>
+        </div>
+
         <!-- ============ 알림 수신자 탭 ============ -->
         <div id="tab-notificationRecipients" class="hidden">
             <div class="mb-4">
@@ -1713,6 +1783,213 @@
         </div>
     </div>
 
+    <!-- 업체 등록 모달 -->
+    <div id="addVendorModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeAddVendorTkuser()">
+        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">업체 등록</h3>
+                <button onclick="closeAddVendorTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="addVendorFormTkuser">
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">업체명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="newVendorNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">사업자번호</label>
+                        <input type="text" id="newVendorBizNumTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="000-00-00000">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">대표자</label>
+                        <input type="text" id="newVendorRepTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">담당자명</label>
+                        <input type="text" id="newVendorContactNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">담당자 연락처</label>
+                        <input type="text" id="newVendorContactPhoneTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">주소</label>
+                        <input type="text" id="newVendorAddressTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">은행명</label>
+                        <input type="text" id="newVendorBankNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">계좌번호</label>
+                        <input type="text" id="newVendorBankAccountTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
+                        <input type="text" id="newVendorNotesTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                </div>
+                <div class="flex justify-end mt-4 gap-2">
+                    <button type="button" onclick="closeAddVendorTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
+                    <button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">등록</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 업체 수정 모달 -->
+    <div id="editVendorModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeEditVendorTkuser()">
+        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">업체 수정</h3>
+                <button onclick="closeEditVendorTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="editVendorFormTkuser">
+                <input type="hidden" id="editVendorIdTkuser">
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">업체명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="editVendorNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">사업자번호</label>
+                        <input type="text" id="editVendorBizNumTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">대표자</label>
+                        <input type="text" id="editVendorRepTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">담당자명</label>
+                        <input type="text" id="editVendorContactNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">담당자 연락처</label>
+                        <input type="text" id="editVendorContactPhoneTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">주소</label>
+                        <input type="text" id="editVendorAddressTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">은행명</label>
+                        <input type="text" id="editVendorBankNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">계좌번호</label>
+                        <input type="text" id="editVendorBankAccountTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
+                        <input type="text" id="editVendorNotesTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                </div>
+                <div class="flex justify-end mt-4 gap-2">
+                    <button type="button" onclick="closeEditVendorTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
+                    <button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 소모품 등록 모달 -->
+    <div id="addConsumableModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeAddConsumableTkuser()">
+        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">소모품 등록</h3>
+                <button onclick="closeAddConsumableTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="addConsumableFormTkuser">
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">품명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="newConsumableNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">메이커</label>
+                        <input type="text" id="newConsumableMakerTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">분류 <span class="text-red-400">*</span></label>
+                        <select id="newConsumableCategoryTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                            <option value="">선택</option>
+                            <option value="consumable">소모품</option>
+                            <option value="safety">안전용품</option>
+                            <option value="repair">수선비</option>
+                            <option value="equipment">설비</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">기준가격</label>
+                        <input type="number" id="newConsumablePriceTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" min="0">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">단위</label>
+                        <input type="text" id="newConsumableUnitTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" value="EA">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">사진</label>
+                        <input type="file" id="newConsumablePhotoTkuser" accept="image/jpeg,image/png,image/webp" onchange="previewAddConsumablePhoto()" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                        <div id="addConsumablePhotoPreviewTkuser" class="mt-2"></div>
+                    </div>
+                </div>
+                <div class="flex justify-end mt-4 gap-2">
+                    <button type="button" onclick="closeAddConsumableTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
+                    <button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">등록</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 소모품 수정 모달 -->
+    <div id="editConsumableModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeEditConsumableTkuser()">
+        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">소모품 수정</h3>
+                <button onclick="closeEditConsumableTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="editConsumableFormTkuser">
+                <input type="hidden" id="editConsumableIdTkuser">
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">품명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="editConsumableNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">메이커</label>
+                        <input type="text" id="editConsumableMakerTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">분류 <span class="text-red-400">*</span></label>
+                        <select id="editConsumableCategoryTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                            <option value="consumable">소모품</option>
+                            <option value="safety">안전용품</option>
+                            <option value="repair">수선비</option>
+                            <option value="equipment">설비</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">기준가격</label>
+                        <input type="number" id="editConsumablePriceTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" min="0">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">단위</label>
+                        <input type="text" id="editConsumableUnitTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">사진</label>
+                        <input type="file" id="editConsumablePhotoTkuser" accept="image/jpeg,image/png,image/webp" onchange="previewEditConsumablePhoto()" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                        <div id="editConsumablePhotoPreviewTkuser" class="mt-2"></div>
+                    </div>
+                </div>
+                <div class="flex justify-end mt-4 gap-2">
+                    <button type="button" onclick="closeEditConsumableTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
+                    <button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <!-- 사진 확대 모달 -->
     <div id="photoViewModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-[60] flex items-center justify-center p-4 cursor-pointer" onclick="this.classList.add('hidden')">
         <img id="photoViewImage" class="max-w-full max-h-[90vh] rounded-lg shadow-2xl">
@@ -1732,6 +2009,8 @@
     <script src="/static/js/tkuser-vacations.js?v=20260224"></script>
     <script src="/static/js/tkuser-layout-map.js?v=20260305"></script>
     <script src="/static/js/tkuser-partners.js?v=20260312"></script>
+    <script src="/static/js/tkuser-vendors.js?v=20260313"></script>
+    <script src="/static/js/tkuser-consumables.js?v=20260313"></script>
     <script src="/static/js/tkuser-notificationRecipients.js?v=20260313b"></script>
     <!-- Boot -->
     <script>init();</script>

user-management/web/static/js/tkuser-consumables.js

@@ -0,0 +1,205 @@
+/* ===== tkuser 소모품 마스터 CRUD ===== */
+let consumablesLoaded = false;
+let consumablesList = [];
+
+const CONSUMABLE_CATEGORIES = {
+    consumable: '소모품',
+    safety: '안전용품',
+    repair: '수선비',
+    equipment: '설비'
+};
+const CONSUMABLE_CAT_COLORS = {
+    consumable: 'bg-blue-50 text-blue-600',
+    safety: 'bg-green-50 text-green-600',
+    repair: 'bg-amber-50 text-amber-600',
+    equipment: 'bg-purple-50 text-purple-600'
+};
+
+async function loadConsumablesTab() {
+    if (consumablesLoaded) return;
+    consumablesLoaded = true;
+    if (currentUser && ['admin', 'system'].includes(currentUser.role)) {
+        document.getElementById('btnAddConsumableTkuser')?.classList.remove('hidden');
+    }
+    await loadConsumablesList();
+}
+
+async function loadConsumablesList() {
+    try {
+        const category = document.getElementById('consumableFilterCategoryTkuser')?.value || '';
+        const isActive = document.getElementById('consumableFilterActiveTkuser')?.value;
+        const search = document.getElementById('consumableSearchTkuser')?.value?.trim() || '';
+        const params = new URLSearchParams();
+        if (category) params.set('category', category);
+        if (isActive !== '' && isActive !== undefined) params.set('is_active', isActive);
+        if (search) params.set('search', search);
+        const r = await api('/consumable-items?' + params.toString());
+        consumablesList = r.data || [];
+        renderConsumablesListTkuser();
+    } catch (e) {
+        document.getElementById('consumablesListTkuser').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${e.message}</p></div>`;
+    }
+}
+
+function renderConsumablesListTkuser() {
+    const c = document.getElementById('consumablesListTkuser');
+    if (!consumablesList.length) {
+        c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 소모품이 없습니다.</p>';
+        return;
+    }
+    const isAdmin = currentUser && ['admin', 'system'].includes(currentUser.role);
+    c.innerHTML = `<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">` +
+        consumablesList.map(item => {
+            const catLabel = CONSUMABLE_CATEGORIES[item.category] || item.category;
+            const catColor = CONSUMABLE_CAT_COLORS[item.category] || 'bg-gray-50 text-gray-600';
+            const price = item.base_price ? Number(item.base_price).toLocaleString() + '원' : '-';
+            return `<div class="bg-white border rounded-lg p-3 hover:shadow-md transition-shadow">
+                <div class="flex gap-3">
+                    ${item.photo_path
+                        ? `<img src="${item.photo_path}" class="w-16 h-16 rounded object-cover flex-shrink-0 cursor-pointer" onclick="document.getElementById('photoViewImage').src=this.src; document.getElementById('photoViewModal').classList.remove('hidden');" onerror="this.style.display='none'">`
+                        : `<div class="w-16 h-16 rounded bg-gray-100 flex items-center justify-center flex-shrink-0"><i class="fas fa-box text-gray-300 text-xl"></i></div>`}
+                    <div class="flex-1 min-w-0">
+                        <div class="text-sm font-medium text-gray-800 truncate">${escHtml(item.item_name)}</div>
+                        <div class="text-xs text-gray-500 mt-0.5">${escHtml(item.maker) || '-'}</div>
+                        <div class="flex items-center gap-2 mt-1">
+                            <span class="px-1.5 py-0.5 rounded text-xs ${catColor}">${catLabel}</span>
+                            <span class="text-xs text-gray-600 font-medium">${price}</span>
+                            <span class="text-xs text-gray-400">${escHtml(item.unit) || 'EA'}</span>
+                        </div>
+                        ${!item.is_active ? '<span class="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-400 mt-1 inline-block">비활성</span>' : ''}
+                    </div>
+                </div>
+                ${isAdmin ? `<div class="flex justify-end gap-1 mt-2 pt-2 border-t">
+                    <button onclick="openEditConsumableTkuser(${item.item_id})" class="px-2 py-1 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded text-xs"><i class="fas fa-pen mr-1"></i>수정</button>
+                    ${item.is_active ? `<button onclick="deactivateConsumableTkuser(${item.item_id}, '${escHtml(item.item_name).replace(/'/g, "\\'")}')" class="px-2 py-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded text-xs"><i class="fas fa-ban mr-1"></i>비활성화</button>` : ''}
+                </div>` : ''}
+            </div>`;
+        }).join('') + `</div>`;
+}
+
+/* ===== 소모품 등록 ===== */
+function openAddConsumableTkuser() {
+    document.getElementById('addConsumablePhotoPreviewTkuser').innerHTML = '';
+    document.getElementById('addConsumableModalTkuser').classList.remove('hidden');
+}
+function closeAddConsumableTkuser() { document.getElementById('addConsumableModalTkuser').classList.add('hidden'); document.getElementById('addConsumableFormTkuser').reset(); document.getElementById('addConsumablePhotoPreviewTkuser').innerHTML = ''; }
+
+function previewAddConsumablePhoto() {
+    const file = document.getElementById('newConsumablePhotoTkuser').files[0];
+    const preview = document.getElementById('addConsumablePhotoPreviewTkuser');
+    if (!file) { preview.innerHTML = ''; return; }
+    const reader = new FileReader();
+    reader.onload = e => { preview.innerHTML = `<img src="${e.target.result}" class="w-20 h-20 rounded object-cover">`; };
+    reader.readAsDataURL(file);
+}
+
+async function submitAddConsumableTkuser(e) {
+    e.preventDefault();
+    const itemName = document.getElementById('newConsumableNameTkuser').value.trim();
+    const category = document.getElementById('newConsumableCategoryTkuser').value;
+    if (!itemName) { showToast('품명은 필수입니다', 'error'); return; }
+    if (!category) { showToast('분류는 필수입니다', 'error'); return; }
+
+    const fd = new FormData();
+    fd.append('item_name', itemName);
+    fd.append('maker', document.getElementById('newConsumableMakerTkuser').value.trim());
+    fd.append('category', category);
+    fd.append('base_price', document.getElementById('newConsumablePriceTkuser').value || '0');
+    fd.append('unit', document.getElementById('newConsumableUnitTkuser').value.trim() || 'EA');
+    const photoFile = document.getElementById('newConsumablePhotoTkuser').files[0];
+    if (photoFile) fd.append('photo', photoFile);
+
+    try {
+        const token = getToken();
+        const res = await fetch('/api/consumable-items', {
+            method: 'POST',
+            headers: { 'Authorization': `Bearer ${token}` },
+            body: fd
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || '등록 실패');
+        showToast('소모품이 등록되었습니다');
+        closeAddConsumableTkuser();
+        await loadConsumablesList();
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+/* ===== 소모품 수정 ===== */
+function openEditConsumableTkuser(id) {
+    const item = consumablesList.find(x => x.item_id === id);
+    if (!item) return;
+    document.getElementById('editConsumableIdTkuser').value = item.item_id;
+    document.getElementById('editConsumableNameTkuser').value = item.item_name;
+    document.getElementById('editConsumableMakerTkuser').value = item.maker || '';
+    document.getElementById('editConsumableCategoryTkuser').value = item.category;
+    document.getElementById('editConsumablePriceTkuser').value = item.base_price || '';
+    document.getElementById('editConsumableUnitTkuser').value = item.unit || 'EA';
+    const preview = document.getElementById('editConsumablePhotoPreviewTkuser');
+    preview.innerHTML = item.photo_path ? `<img src="${item.photo_path}" class="w-20 h-20 rounded object-cover">` : '';
+    document.getElementById('editConsumablePhotoTkuser').value = '';
+    document.getElementById('editConsumableModalTkuser').classList.remove('hidden');
+}
+function closeEditConsumableTkuser() { document.getElementById('editConsumableModalTkuser').classList.add('hidden'); }
+
+function previewEditConsumablePhoto() {
+    const file = document.getElementById('editConsumablePhotoTkuser').files[0];
+    const preview = document.getElementById('editConsumablePhotoPreviewTkuser');
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = e => { preview.innerHTML = `<img src="${e.target.result}" class="w-20 h-20 rounded object-cover">`; };
+    reader.readAsDataURL(file);
+}
+
+async function submitEditConsumableTkuser(e) {
+    e.preventDefault();
+    const id = document.getElementById('editConsumableIdTkuser').value;
+    const fd = new FormData();
+    fd.append('item_name', document.getElementById('editConsumableNameTkuser').value.trim());
+    fd.append('maker', document.getElementById('editConsumableMakerTkuser').value.trim());
+    fd.append('category', document.getElementById('editConsumableCategoryTkuser').value);
+    fd.append('base_price', document.getElementById('editConsumablePriceTkuser').value || '0');
+    fd.append('unit', document.getElementById('editConsumableUnitTkuser').value.trim() || 'EA');
+    const photoFile = document.getElementById('editConsumablePhotoTkuser').files[0];
+    if (photoFile) fd.append('photo', photoFile);
+
+    try {
+        const token = getToken();
+        const res = await fetch(`/api/consumable-items/${id}`, {
+            method: 'PUT',
+            headers: { 'Authorization': `Bearer ${token}` },
+            body: fd
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || '수정 실패');
+        showToast('수정되었습니다');
+        closeEditConsumableTkuser();
+        await loadConsumablesList();
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+/* ===== 소모품 비활성화 ===== */
+async function deactivateConsumableTkuser(id, name) {
+    if (!confirm(`"${name}" 소모품을 비활성화하시겠습니까?`)) return;
+    try {
+        await api(`/consumable-items/${id}`, { method: 'DELETE' });
+        showToast('비활성화 완료');
+        await loadConsumablesList();
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+// 검색/필터 이벤트 + 모달 폼 이벤트
+document.addEventListener('DOMContentLoaded', () => {
+    let searchTimeout;
+    const searchEl = document.getElementById('consumableSearchTkuser');
+    if (searchEl) searchEl.addEventListener('input', () => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(loadConsumablesList, 300);
+    });
+    const filterCatEl = document.getElementById('consumableFilterCategoryTkuser');
+    if (filterCatEl) filterCatEl.addEventListener('change', loadConsumablesList);
+    const filterActiveEl = document.getElementById('consumableFilterActiveTkuser');
+    if (filterActiveEl) filterActiveEl.addEventListener('change', loadConsumablesList);
+
+    document.getElementById('addConsumableFormTkuser')?.addEventListener('submit', submitAddConsumableTkuser);
+    document.getElementById('editConsumableFormTkuser')?.addEventListener('submit', submitEditConsumableTkuser);
+});

user-management/web/static/js/tkuser-tabs.js

@@ -29,5 +29,7 @@ function switchTab(name) {
     if (name === 'issueTypes' && !issueTypesLoaded) loadIssueTypes();
     if (name === 'permissions' && !permissionsTabLoaded) loadPermissionsTab();
     if (name === 'partners' && !partnersLoaded) loadPartnersTab();
+    if (name === 'vendors' && !vendorsLoaded) loadVendorsTab();
+    if (name === 'consumables' && !consumablesLoaded) loadConsumablesTab();
     if (name === 'notificationRecipients' && !nrLoaded) loadNotificationRecipientsTab();
 }

user-management/web/static/js/tkuser-vacations.js

@@ -246,7 +246,23 @@ function openVacBalanceModal(editId) {
     // 작업자 셀렉트
     const wSel = document.getElementById('vbWorker');
     wSel.innerHTML = '<option value="">선택</option>';
-    vacWorkers.forEach(w => { wSel.innerHTML += `<option value="${w.worker_id}">${escapeHtml(w.worker_name)}</option>`; });
+    const byDept = {};
+    vacWorkers.forEach(w => {
+        const dept = w.department_name || '부서 미지정';
+        if (!byDept[dept]) byDept[dept] = [];
+        byDept[dept].push(w);
+    });
+    Object.keys(byDept).sort().forEach(dept => {
+        const group = document.createElement('optgroup');
+        group.label = dept;
+        byDept[dept].forEach(w => {
+            const o = document.createElement('option');
+            o.value = w.worker_id;
+            o.textContent = w.worker_name;
+            group.appendChild(o);
+        });
+        wSel.appendChild(group);
+    });
     // 유형 셀렉트
     const tSel = document.getElementById('vbType');
     tSel.innerHTML = '<option value="">선택</option>';

user-management/web/static/js/tkuser-vendors.js

@@ -0,0 +1,183 @@
+/* ===== tkuser 업체(공급업체) CRUD ===== */
+let vendorsLoaded = false;
+let vendorsList = [];
+let selectedVendorIdTkuser = null;
+
+async function loadVendorsTab() {
+    if (vendorsLoaded) return;
+    vendorsLoaded = true;
+    if (currentUser && ['admin', 'system'].includes(currentUser.role)) {
+        document.getElementById('btnAddVendorTkuser')?.classList.remove('hidden');
+    }
+    await loadVendorsList();
+}
+
+async function loadVendorsList() {
+    try {
+        const isActive = document.getElementById('vendorFilterActiveTkuser')?.value;
+        const search = document.getElementById('vendorSearchTkuser')?.value?.trim() || '';
+        const params = new URLSearchParams();
+        if (isActive !== '' && isActive !== undefined) params.set('is_active', isActive);
+        if (search) params.set('search', search);
+        const r = await api('/vendors?' + params.toString());
+        vendorsList = r.data || [];
+        renderVendorsListTkuser();
+    } catch (e) {
+        document.getElementById('vendorsListTkuser').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${e.message}</p></div>`;
+    }
+}
+
+function renderVendorsListTkuser() {
+    const c = document.getElementById('vendorsListTkuser');
+    if (!vendorsList.length) {
+        c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 업체가 없습니다.</p>';
+        return;
+    }
+    const isAdmin = currentUser && ['admin', 'system'].includes(currentUser.role);
+    c.innerHTML = vendorsList.map(v => {
+        return `<div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer ${selectedVendorIdTkuser === v.vendor_id ? 'ring-2 ring-indigo-400' : ''}" onclick="selectVendorTkuser(${v.vendor_id})">
+            <div class="flex-1 min-w-0">
+                <div class="text-sm font-medium text-gray-800 truncate">
+                    <i class="fas fa-store mr-1.5 text-gray-400 text-xs"></i>${escHtml(v.vendor_name)}
+                    ${!v.is_active ? '<span class="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-400 ml-1">비활성</span>' : ''}
+                </div>
+                <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5">
+                    ${v.business_number ? `<span>${escHtml(v.business_number)}</span>` : ''}
+                    ${v.contact_name ? `<span>${escHtml(v.contact_name)}</span>` : ''}
+                </div>
+            </div>
+            ${isAdmin ? `<div class="flex gap-1 ml-2 flex-shrink-0">
+                <button onclick="event.stopPropagation(); openEditVendorTkuser(${v.vendor_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="수정"><i class="fas fa-pen text-xs"></i></button>
+                ${v.is_active ? `<button onclick="event.stopPropagation(); deactivateVendorTkuser(${v.vendor_id}, '${escHtml(v.vendor_name).replace(/'/g, "\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="비활성화"><i class="fas fa-ban text-xs"></i></button>` : ''}
+            </div>` : ''}
+        </div>`;
+    }).join('');
+}
+
+async function selectVendorTkuser(id) {
+    selectedVendorIdTkuser = id;
+    renderVendorsListTkuser();
+    try {
+        const r = await api(`/vendors/${id}`);
+        const v = r.data;
+        renderVendorDetailTkuser(v);
+        document.getElementById('vendorDetailTkuser').classList.remove('hidden');
+        document.getElementById('vendorEmptyTkuser').classList.add('hidden');
+    } catch (e) {
+        showToast('상세 조회 실패: ' + e.message, 'error');
+    }
+}
+
+function renderVendorDetailTkuser(v) {
+    document.getElementById('vendorDetailTkuser').innerHTML = `
+        <div class="bg-white rounded-xl shadow-sm p-5">
+            <h3 class="text-lg font-semibold text-gray-800 mb-3">${escHtml(v.vendor_name)}</h3>
+            <div class="grid grid-cols-2 gap-3 text-sm">
+                <div><span class="text-gray-500">사업자번호:</span> <span class="font-medium">${escHtml(v.business_number) || '-'}</span></div>
+                <div><span class="text-gray-500">대표자:</span> <span class="font-medium">${escHtml(v.representative) || '-'}</span></div>
+                <div><span class="text-gray-500">담당자:</span> <span class="font-medium">${escHtml(v.contact_name) || '-'}</span></div>
+                <div><span class="text-gray-500">연락처:</span> <span class="font-medium">${escHtml(v.contact_phone) || '-'}</span></div>
+                <div class="col-span-2"><span class="text-gray-500">주소:</span> <span class="font-medium">${escHtml(v.address) || '-'}</span></div>
+                <div><span class="text-gray-500">은행:</span> <span class="font-medium">${escHtml(v.bank_name) || '-'}</span></div>
+                <div><span class="text-gray-500">계좌번호:</span> <span class="font-medium">${escHtml(v.bank_account) || '-'}</span></div>
+                ${v.notes ? `<div class="col-span-2"><span class="text-gray-500">비고:</span> ${escHtml(v.notes)}</div>` : ''}
+            </div>
+        </div>`;
+}
+
+/* ===== 업체 등록 ===== */
+function openAddVendorTkuser() { document.getElementById('addVendorModalTkuser').classList.remove('hidden'); }
+function closeAddVendorTkuser() { document.getElementById('addVendorModalTkuser').classList.add('hidden'); document.getElementById('addVendorFormTkuser').reset(); }
+
+async function submitAddVendorTkuser(e) {
+    e.preventDefault();
+    const data = {
+        vendor_name: document.getElementById('newVendorNameTkuser').value.trim(),
+        business_number: document.getElementById('newVendorBizNumTkuser').value.trim() || null,
+        representative: document.getElementById('newVendorRepTkuser').value.trim() || null,
+        contact_name: document.getElementById('newVendorContactNameTkuser').value.trim() || null,
+        contact_phone: document.getElementById('newVendorContactPhoneTkuser').value.trim() || null,
+        address: document.getElementById('newVendorAddressTkuser').value.trim() || null,
+        bank_name: document.getElementById('newVendorBankNameTkuser').value.trim() || null,
+        bank_account: document.getElementById('newVendorBankAccountTkuser').value.trim() || null,
+        notes: document.getElementById('newVendorNotesTkuser').value.trim() || null,
+    };
+    if (!data.vendor_name) { showToast('업체명은 필수입니다', 'error'); return; }
+    try {
+        await api('/vendors', { method: 'POST', body: JSON.stringify(data) });
+        showToast('업체가 등록되었습니다');
+        closeAddVendorTkuser();
+        await loadVendorsList();
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+/* ===== 업체 수정 ===== */
+function openEditVendorTkuser(id) {
+    const v = vendorsList.find(x => x.vendor_id === id);
+    if (!v) return;
+    document.getElementById('editVendorIdTkuser').value = v.vendor_id;
+    document.getElementById('editVendorNameTkuser').value = v.vendor_name;
+    document.getElementById('editVendorBizNumTkuser').value = v.business_number || '';
+    document.getElementById('editVendorRepTkuser').value = v.representative || '';
+    document.getElementById('editVendorContactNameTkuser').value = v.contact_name || '';
+    document.getElementById('editVendorContactPhoneTkuser').value = v.contact_phone || '';
+    document.getElementById('editVendorAddressTkuser').value = v.address || '';
+    document.getElementById('editVendorBankNameTkuser').value = v.bank_name || '';
+    document.getElementById('editVendorBankAccountTkuser').value = v.bank_account || '';
+    document.getElementById('editVendorNotesTkuser').value = v.notes || '';
+    document.getElementById('editVendorModalTkuser').classList.remove('hidden');
+}
+function closeEditVendorTkuser() { document.getElementById('editVendorModalTkuser').classList.add('hidden'); }
+
+async function submitEditVendorTkuser(e) {
+    e.preventDefault();
+    const id = document.getElementById('editVendorIdTkuser').value;
+    const data = {
+        vendor_name: document.getElementById('editVendorNameTkuser').value.trim(),
+        business_number: document.getElementById('editVendorBizNumTkuser').value.trim() || null,
+        representative: document.getElementById('editVendorRepTkuser').value.trim() || null,
+        contact_name: document.getElementById('editVendorContactNameTkuser').value.trim() || null,
+        contact_phone: document.getElementById('editVendorContactPhoneTkuser').value.trim() || null,
+        address: document.getElementById('editVendorAddressTkuser').value.trim() || null,
+        bank_name: document.getElementById('editVendorBankNameTkuser').value.trim() || null,
+        bank_account: document.getElementById('editVendorBankAccountTkuser').value.trim() || null,
+        notes: document.getElementById('editVendorNotesTkuser').value.trim() || null,
+    };
+    try {
+        await api(`/vendors/${id}`, { method: 'PUT', body: JSON.stringify(data) });
+        showToast('수정되었습니다');
+        closeEditVendorTkuser();
+        await loadVendorsList();
+        if (selectedVendorIdTkuser == id) selectVendorTkuser(id);
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+/* ===== 업체 비활성화 ===== */
+async function deactivateVendorTkuser(id, name) {
+    if (!confirm(`"${name}" 업체를 비활성화하시겠습니까?`)) return;
+    try {
+        await api(`/vendors/${id}`, { method: 'DELETE' });
+        showToast('비활성화 완료');
+        await loadVendorsList();
+        if (selectedVendorIdTkuser === id) {
+            document.getElementById('vendorDetailTkuser').classList.add('hidden');
+            document.getElementById('vendorEmptyTkuser').classList.remove('hidden');
+            selectedVendorIdTkuser = null;
+        }
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+// 검색/필터 이벤트 + 모달 폼 이벤트
+document.addEventListener('DOMContentLoaded', () => {
+    let searchTimeout;
+    const searchEl = document.getElementById('vendorSearchTkuser');
+    if (searchEl) searchEl.addEventListener('input', () => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(loadVendorsList, 300);
+    });
+    const filterEl = document.getElementById('vendorFilterActiveTkuser');
+    if (filterEl) filterEl.addEventListener('change', loadVendorsList);
+
+    document.getElementById('addVendorFormTkuser')?.addEventListener('submit', submitAddVendorTkuser);
+    document.getElementById('editVendorFormTkuser')?.addEventListener('submit', submitEditVendorTkuser);
+});