트러블슈팅: 이미지 교체 시 바코드 전달 오류

날짜: 2026-03-02
해결 상태: ✅ 해결됨

증상

제품 이미지 관리 페이지에서 "교체" 버튼을 눌러 이미지 URL을 입력하면:

기존 제품의 이미지가 교체되지 않음
대신 새로운 레코드가 생성됨
새 레코드의 barcode, product_name이 null로 저장됨

원인

1차 원인: JavaScript 템플릿 리터럴에서 escapeHtml 문제

// 문제 코드
onclick="openReplaceModal('${item.barcode}', '${escapeHtml(item.product_name)}')"

제품명에 특수문자(따옴표 등)가 포함되면 escapeHtml 함수가 문자열을 변환하면서 onclick 속성이 깨짐.

2차 원인: 전역 변수 참조 문제

replaceTargetBarcode 변수가 모달 제출 시 undefined 또는 "null" 문자열로 전달됨.

해결 방법

1. data 속성으로 바코드 전달 (HTML)

// 수정 후
<button class="btn btn-primary btn-sm" 
        data-barcode="${item.barcode}" 
        data-name="${item.product_name || ''}" 
        onclick="openReplaceModal(this.dataset.barcode, this.dataset.name)">교체</button>

data-* 속성을 사용하여 값을 안전하게 저장하고, this.dataset으로 접근.

2. 바코드 유효성 검증 추가 (JavaScript)

function openReplaceModal(barcode, productName) {
    console.log('openReplaceModal called with:', barcode, productName);
    
    // 바코드 검증
    if (!barcode || barcode === 'null' || barcode === 'undefined') {
        showToast('바코드 정보가 없습니다', 'error');
        return;
    }
    
    replaceTargetBarcode = barcode;
    // ...
}

async function submitReplace() {
    // 바코드 검증
    if (!replaceTargetBarcode || replaceTargetBarcode === 'null' || replaceTargetBarcode === 'undefined') {
        showToast('바코드 정보가 없습니다. 다시 시도해주세요.', 'error');
        return;
    }
    
    const barcode = replaceTargetBarcode;  // 로컬 변수에 복사
    // ...
}

3. 백엔드 UPDATE 쿼리 수정 (Python)

# 기존 레코드 확인 후 이미지만 업데이트 (product_name, drug_code 유지)
cursor.execute("SELECT product_name, drug_code FROM product_images WHERE barcode = ?", (barcode,))
existing = cursor.fetchone()

if existing:
    # 기존 레코드 있으면 이미지만 업데이트
    cursor.execute("""
        UPDATE product_images 
        SET image_base64 = ?, thumbnail_base64 = ?, image_url = ?, 
            status = 'manual', error_message = NULL, updated_at = datetime('now')
        WHERE barcode = ?
    """, (image_base64, thumbnail_base64, image_url, barcode))

교훈

onclick에 동적 값 전달 시 주의: 템플릿 리터럴 + escapeHtml 조합은 예상치 못한 오류 발생 가능. data-* 속성 사용 권장.
전역 변수 의존 최소화: 모달 등 비동기 흐름에서 전역 변수 사용 시 값이 바뀔 수 있음. 로컬 변수에 복사 후 사용.
입력 검증은 프론트/백 양쪽에서: null, undefined, "null" 문자열 등 예외 케이스 모두 검증.
디버깅 로그 활용: console.log로 실제 전달되는 값 확인하면 원인 파악이 빠름.

3.5 KiB Raw Blame History