feat(dispatch): 한글/영문 토글(말레이시아 직원용)

- _nav 에 KO/EN 토글 버튼 + 공용 JS(data-ko/data-en 텍스트, data-*-ph placeholder
  교체, localStorage 저장 → 전 페이지 공통, dsp:lang 이벤트 발행)
- batches/new/detail/picking/handover 정적 라벨 이중언어화
- 동적 텍스트도 언어 반영: 완료 N/M 라벨, 일괄 토글 확인창, 업로드 안내/파일 라벨
- 카드 작업 버튼은 기존대로 한/영 동시 표기 유지

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-22 15:47:32 +09:00
parent 90524100ed
commit 1d3b97c8fc
6 changed files with 154 additions and 61 deletions
@@ -5,17 +5,17 @@
{% include "dispatch/_nav.html" %}
<div class="erp-card" style="max-width:640px;">
<div class="cpg-card-head"><h2>출고 파일 업로드</h2></div>
<div class="cpg-card-head"><h2 data-ko="출고 파일 업로드" data-en="Upload Dispatch Files">출고 파일 업로드</h2></div>
<p class="erp-muted" id="dsp-intro" style="margin:4px 0 16px;"></p>
<form method="post" action="/dispatch/batches" enctype="multipart/form-data" style="display:flex;flex-direction:column;gap:14px;">
<label style="display:flex;flex-direction:column;gap:4px;">
<span>출고 날짜 <span style="color:#dc2626;">*</span></span>
<span><span data-ko="출고 날짜" data-en="Dispatch Date">출고 날짜</span> <span style="color:#dc2626;">*</span></span>
<input class="erp-input" type="date" name="dispatch_date" value="{{ today }}" required />
</label>
<label style="display:flex;flex-direction:column;gap:4px;">
<span>플랫폼</span>
<span data-ko="플랫폼" data-en="Platform">플랫폼</span>
<select class="erp-select" name="platform" id="dsp-platform">
{% for pf in platforms %}
<option value="{{ pf }}">{{ pf }}</option>
@@ -24,8 +24,11 @@
</label>
<label style="display:flex;flex-direction:column;gap:4px;">
<span>배치명 <span class="erp-muted">(예: 2026-06-19 오전 출고)</span></span>
<input class="erp-input" type="text" name="batch_name" placeholder="오전 출고 / 오후 출고 등으로 구분" />
<span><span data-ko="배치명" data-en="Batch name">배치명</span>
<span class="erp-muted" data-ko="(예: 2026-06-19 오전 출고)" data-en="(e.g. 2026-06-19 AM)">(예: 2026-06-19 오전 출고)</span></span>
<input class="erp-input" type="text" name="batch_name"
data-ko-ph="오전 출고 / 오후 출고 등으로 구분" data-en-ph="e.g. AM dispatch / PM dispatch"
placeholder="오전 출고 / 오후 출고 등으로 구분" />
</label>
<label style="display:flex;flex-direction:column;gap:4px;">
@@ -40,8 +43,8 @@
</label>
<div style="display:flex;gap:8px;margin-top:8px;">
<button class="erp-btn erp-btn-primary" type="submit">업로드 후 배치 생성</button>
<a class="erp-btn erp-btn-outline" href="/dispatch/">취소</a>
<button class="erp-btn erp-btn-primary" type="submit" data-ko="업로드 후 배치 생성" data-en="Upload &amp; Create">업로드 후 배치 생성</button>
<a class="erp-btn erp-btn-outline" href="/dispatch/" data-ko="취소" data-en="Cancel">취소</a>
</div>
</form>
</div>
@@ -51,27 +54,43 @@
{% block scripts %}
<script>
(function () {
// 플랫폼별 안내/파일 라벨. 데이터 엑셀 필수, 라벨 PDF 선택(보관용).
// 플랫폼별 안내/파일 라벨(한/영). 데이터 엑셀 필수, 라벨 PDF 선택(보관·PII 추출용).
var CFG = {
"TikTok": {
intro: "TikTok: Order Export.xlsx 로 출고 리스트가 생성됩니다. 받는 사람 이름/주소는 라벨 PDF 에서 가져오니 PDF 도 함께 올리세요.",
label: "📄 Shipping label + Packing slip.pdf <span class='erp-muted'>(받는 사람 이름/주소 추출 · 권장)</span>",
data: "📊 TikTok Order Export.xlsx <span style='color:#dc2626;'>*</span> <span class='erp-muted'>(자동 출고 리스트 기준)</span>"
ko: {
"TikTok": {
intro: "TikTok: Order Export.xlsx 로 출고 리스트가 생성됩니다. 받는 사람 이름/주소는 라벨 PDF 에서 가져오니 PDF 도 함께 올리세요.",
label: "📄 Shipping label + Packing slip.pdf <span class='erp-muted'>(받는 사람 이름/주소 추출 · 권장)</span>",
data: "📊 TikTok Order Export.xlsx <span style='color:#dc2626;'>*</span> <span class='erp-muted'>(자동 출고 리스트 기준)</span>"
},
"Shopee": {
intro: "Shopee: Packing List.Doorstep Delivery.xlsx 로 출고 리스트가 생성됩니다. 받는 사람 이름/주소는 Shopee Seller Centre.pdf 에서 가져오니 PDF 도 함께 올리세요.",
label: "📄 Shopee Seller Centre.pdf <span class='erp-muted'>(받는 사람 이름/주소 추출 · 권장)</span>",
data: "📊 Packing List.Doorstep Delivery.xlsx <span style='color:#dc2626;'>*</span> <span class='erp-muted'>(자동 출고 리스트 기준)</span>"
}
},
"Shopee": {
intro: "Shopee: Packing List.Doorstep Delivery.xlsx 로 출고 리스트가 생성됩니다. 받는 사람 이름/주소는 Shopee Seller Centre.pdf 에서 가져오니 PDF 도 함께 올리세요.",
label: "📄 Shopee Seller Centre.pdf <span class='erp-muted'>(받는 사람 이름/주소 추출 · 권장)</span>",
data: "📊 Packing List.Doorstep Delivery.xlsx <span style='color:#dc2626;'>*</span> <span class='erp-muted'>(자동 출고 리스트 기준)</span>"
en: {
"TikTok": {
intro: "TikTok: the dispatch list is built from Order Export.xlsx. Recipient name/address come from the label PDF, so please upload the PDF too.",
label: "📄 Shipping label + Packing slip.pdf <span class='erp-muted'>(recipient name/address · recommended)</span>",
data: "📊 TikTok Order Export.xlsx <span style='color:#dc2626;'>*</span> <span class='erp-muted'>(dispatch list source)</span>"
},
"Shopee": {
intro: "Shopee: the dispatch list is built from Packing List.Doorstep Delivery.xlsx. Recipient name/address come from Shopee Seller Centre.pdf, so please upload the PDF too.",
label: "📄 Shopee Seller Centre.pdf <span class='erp-muted'>(recipient name/address · recommended)</span>",
data: "📊 Packing List.Doorstep Delivery.xlsx <span style='color:#dc2626;'>*</span> <span class='erp-muted'>(dispatch list source)</span>"
}
}
};
var sel = document.getElementById('dsp-platform');
function apply() {
var c = CFG[sel.value] || CFG["TikTok"];
var lang = (window.dspLang && window.dspLang() === 'en') ? 'en' : 'ko';
var c = (CFG[lang] && CFG[lang][sel.value]) || CFG[lang]["TikTok"];
document.getElementById('dsp-intro').textContent = c.intro;
document.getElementById('dsp-label-lbl').innerHTML = c.label;
document.getElementById('dsp-data-lbl').innerHTML = c.data;
}
sel.addEventListener('change', apply);
document.addEventListener('dsp:lang', apply); // 언어 토글 시 재적용
apply();
})();
</script>