595 lines
31 KiB
PHP
595 lines
31 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', '관리자 SMS 발송')
|
|
@section('page_title', '관리자 SMS 발송')
|
|
@section('page_desc', '단건 / 대량 / 템플릿 발송')
|
|
|
|
@push('head')
|
|
<style>
|
|
/* 이 페이지에서만 쓰는 로컬 스타일 */
|
|
.sms-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:start;}
|
|
@media (max-width: 980px){.sms-grid{grid-template-columns:1fr;}}
|
|
|
|
.sms-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;}
|
|
.sms-badges{margin-left:auto;display:flex;gap:10px;align-items:center;}
|
|
|
|
.sms-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);}
|
|
.sms-tab{padding:8px 12px;font-size:13px;border-radius:999px;line-height:1;border:0;background:transparent;color:inherit;cursor:pointer;}
|
|
.sms-tab.is-active{background:rgba(255,255,255,.14);}
|
|
|
|
.sms-btn{padding:8px 12px;font-size:13px;border-radius:12px;line-height:1.1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
|
|
border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:inherit;cursor:pointer;}
|
|
.sms-btn:hover{background:rgba(255,255,255,.10);}
|
|
.sms-btn--primary{background:rgba(59,130,246,.88);border-color:rgba(59,130,246,.95);color:#fff;}
|
|
.sms-btn--primary:hover{background:rgba(59,130,246,.98);}
|
|
.sms-btn--ghost{background:transparent;}
|
|
|
|
.sms-badge{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:12px;}
|
|
.sms-badge--type{font-weight:800;}
|
|
|
|
.sms-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
|
|
.sms-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
|
|
.sms-select{min-width:280px;}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<form method="POST" action="{{ route('admin.sms.send.store') }}" enctype="multipart/form-data" id="smsSendForm">
|
|
@csrf
|
|
|
|
<input type="hidden" name="send_mode" id="sendMode" value="one">
|
|
<input type="hidden" name="sms_type_hint" id="smsTypeHint" value="auto">
|
|
|
|
{{-- 상단 바 --}}
|
|
<div class="a-card" style="padding:16px; margin-bottom:16px;">
|
|
<div class="sms-toolbar">
|
|
<div style="min-width:280px;">
|
|
<div class="a-muted" style="margin-bottom:6px;">발신번호</div>
|
|
<input class="a-input" name="from_number" value="{{ config('services.sms.from','1833-4856') }}" readonly>
|
|
<div class="a-muted" style="margin-top:6px;">고정 (수정불가)</div>
|
|
</div>
|
|
|
|
<div style="min-width:340px;">
|
|
<div class="a-muted" style="margin-bottom:6px;">발송 시점</div>
|
|
<div class="sms-row">
|
|
<label class="a-pill"><input type="radio" name="schedule_type" value="now" checked> 즉시</label>
|
|
<label class="a-pill"><input type="radio" name="schedule_type" value="schedule"> 예약</label>
|
|
<input class="a-input" type="text" name="scheduled_at" id="scheduledAt"
|
|
placeholder="YYYY-MM-DD HH:mm" style="width:180px" disabled>
|
|
</div>
|
|
<div class="a-muted" style="margin-top:6px;">예약은 5분 단위 권장</div>
|
|
</div>
|
|
|
|
<div class="sms-badges">
|
|
<div class="sms-badge sms-badge--type" id="smsTypeBadge">SMS</div>
|
|
<div class="sms-badge" id="byteBadge">0 Bytes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sms-grid">
|
|
{{-- 좌측: 수신/모드 --}}
|
|
<div class="a-card" style="padding:16px;">
|
|
<div class="a-muted" style="margin-bottom:8px;">발송 유형</div>
|
|
|
|
<div class="sms-seg" style="margin-bottom:12px;">
|
|
<button type="button" class="sms-tab is-active" data-tab="one">단건</button>
|
|
<button type="button" class="sms-tab" data-tab="many">대량</button>
|
|
<button type="button" class="sms-tab" data-tab="template">템플릿</button>
|
|
</div>
|
|
|
|
<section data-panel="one">
|
|
<div class="a-muted" style="margin-bottom:6px;">수신번호 (1건)</div>
|
|
<input class="a-input" name="to_number" id="toNumber" placeholder="01012345678" value="{{ old('to_number') }}">
|
|
</section>
|
|
|
|
<section data-panel="many" style="display:none;">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; gap:8px;">
|
|
<div class="a-muted">수신번호 (여러건)</div>
|
|
<div class="a-muted" id="manyCountText">0건</div>
|
|
</div>
|
|
|
|
<textarea class="a-input" name="to_numbers_text" id="toNumbersText" rows="10"
|
|
placeholder="01011112222, 0103336666 또는 줄바꿈으로 붙여넣기">{{ old('to_numbers_text') }}</textarea>
|
|
|
|
<div class="sms-row" style="margin-top:10px;">
|
|
<label class="sms-btn">
|
|
CSV 업로드
|
|
<input type="file" name="to_numbers_csv" id="toNumbersCsv" accept=".csv,.txt" style="display:none;">
|
|
</label>
|
|
<button type="button" class="sms-btn sms-btn--ghost" id="clearMany">비우기</button>
|
|
<div class="a-muted" id="manyStats"></div>
|
|
</div>
|
|
|
|
<div class="a-muted" style="margin-top:8px;">* 서버에서 최종 정규화/중복/오류 제거합니다.</div>
|
|
</section>
|
|
|
|
<section data-panel="csv" style="display:none;">
|
|
<div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
|
|
<label class="sms-btn">
|
|
CSV 업로드
|
|
<input type="file" name="template_csv" id="templateCsv" accept=".csv,.txt" style="display:none;">
|
|
</label>
|
|
<span class="a-muted">* 첫 번째 컬럼은 <b>수신번호</b>, 이후 컬럼은 <b>치환값</b>입니다.</span>
|
|
</div>
|
|
|
|
{{-- CSV 미리보기 --}}
|
|
<div id="tplCsvPreviewWrap"
|
|
style="display:none; margin-top:12px; padding:12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;">
|
|
<div style="font-weight:800;">CSV 미리보기 (상위 5줄)</div>
|
|
<button type="button" class="sms-btn" id="tplCsvClearBtn">파일 비우기</button>
|
|
</div>
|
|
|
|
<div class="a-muted" id="tplCsvMeta" style="margin-top:8px; line-height:1.6;"></div>
|
|
|
|
<div style="overflow:auto; margin-top:10px;">
|
|
<table class="a-table" style="width:100%; min-width:720px;">
|
|
<thead>
|
|
<tr id="tplCsvHeadRow"></tr>
|
|
</thead>
|
|
<tbody id="tplCsvBodyRows"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="a-muted" id="tplCsvHint" style="margin-top:10px; line-height:1.7;"></div>
|
|
</div>
|
|
|
|
<div class="a-muted" id="tplCsvError" style="display:none; margin-top:10px; line-height:1.6; color:#ff6b6b;"></div>
|
|
|
|
|
|
{{-- 이용 안내 --}}
|
|
<div style="margin-top:12px; padding:12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);">
|
|
<div style="font-weight:800; margin-bottom:8px;">템플릿 CSV 이용 안내</div>
|
|
|
|
<div class="a-muted" style="line-height:1.7;">
|
|
<div style="margin-bottom:10px;">
|
|
<b>1) CSV 파일 작성 요령</b><br>
|
|
<span class="a-muted">각 줄이 “1명”이며, 쉼표(<code>,</code>)로 컬럼을 구분합니다.</span>
|
|
|
|
<div style="margin-top:8px;">
|
|
<div class="a-muted" style="margin-bottom:6px;">예시</div>
|
|
<div style="padding:10px; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06); font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; white-space:pre;">
|
|
01036828958,홍길동,20260111
|
|
01036828901,이순신,20260112
|
|
01036828902,김개똥,20260113
|
|
</div>
|
|
</div>
|
|
|
|
<ul style="margin:10px 0 0 18px;">
|
|
<li><b>1번째 컬럼</b>: 수신 전화번호(고정)</li>
|
|
<li><b>2번째 컬럼</b>: 사용자 문구 1 (→ <code>{_text_02_}</code>)</li>
|
|
<li><b>3번째 컬럼</b>: 사용자 문구 2 (→ <code>{_text_03_}</code>)</li>
|
|
<li>… 이런 식으로 뒤 컬럼이 계속 이어집니다.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="margin-bottom:10px;">
|
|
<b>2) 발송 문구와 매칭(치환) 규칙</b><br>
|
|
<span class="a-muted">발송 문구에 토큰을 넣으면 CSV의 값으로 자동 치환됩니다.</span>
|
|
|
|
<div style="margin-top:8px;">
|
|
<div class="a-muted" style="margin-bottom:6px;">발송 문구 예시</div>
|
|
<div style="padding:10px; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06); font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; white-space:pre;">
|
|
안녕하세요 {_text_02_} 회원님
|
|
오늘 날짜는 {_text_03_} 입니다
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:10px;">
|
|
<div class="a-muted" style="margin-bottom:6px;">치환 결과 예시(첫 줄 기준)</div>
|
|
<ul style="margin:0 0 0 18px;">
|
|
<li><code>{_text_02_}</code> → <b>홍길동</b></li>
|
|
<li><code>{_text_03_}</code> → <b>20210111</b></li>
|
|
</ul>
|
|
<div class="a-muted" style="margin-top:6px;">
|
|
즉, 첫 줄의 값(홍길동/20210111)이 문구에 들어가서 “개인화 메시지”가 됩니다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<b>3) 사용 가능한 토큰 범위</b><br>
|
|
<span class="a-muted">
|
|
사용자 문구는 <code>{_text_02_}</code>부터 최대 8개까지 지원합니다.
|
|
(<code>{_text_02_} ~ {_text_09_}</code>)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
{{-- 우측: 문구/프리셋/액션 --}}
|
|
<div style="display:flex; flex-direction:column; gap:16px;">
|
|
<div class="a-card" style="padding:16px;">
|
|
<div class="a-muted" style="margin-bottom:6px;">문구 템플릿(프리셋) 선택</div>
|
|
|
|
<div class="sms-row">
|
|
<select class="a-input sms-select" id="tplSelect">
|
|
<option value="">선택하세요</option>
|
|
@foreach(($templates ?? []) as $t)
|
|
<option value="{{ $t->id ?? $t['id'] }}">
|
|
{{ ($t->title ?? $t['title']) }} ({{ $t->code ?? $t['code'] }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<button type="button" class="sms-btn" id="tplApplyReplace">덮어쓰기</button>
|
|
<button type="button" class="sms-btn sms-btn--ghost" id="tplApplyAppend">뒤에붙이기</button>
|
|
</div>
|
|
|
|
<div class="a-muted" style="margin-top:8px;">* “덮어쓰기”는 현재 문구를 교체합니다.</div>
|
|
</div>
|
|
|
|
<div class="a-card" style="padding:16px;">
|
|
<div class="a-muted" style="margin-bottom:6px;">발송 문구</div>
|
|
<textarea class="a-input" name="message" id="messageText" rows="10" placeholder="메시지를 입력하세요">{{ old('message') }}</textarea>
|
|
|
|
<div class="sms-row" style="margin-top:10px;">
|
|
<button type="button" class="sms-btn sms-btn--ghost" data-insert="{_text_02_}">{_text_02_}</button>
|
|
<button type="button" class="sms-btn sms-btn--ghost" data-insert="{_text_03_}">{_text_03_}</button>
|
|
<button type="button" class="sms-btn sms-btn--ghost" data-insert="{_text_04_}">{_text_04_}</button>
|
|
<span class="a-muted">토큰 빠른 삽입</span>
|
|
</div>
|
|
|
|
<hr style="margin:16px 0; opacity:.15;">
|
|
|
|
<div class="sms-actions">
|
|
<button type="submit" class="sms-btn sms-btn--primary">발송</button>
|
|
<a class="sms-btn" href="{{ route('admin.sms.logs') }}">발송 이력</a>
|
|
</div>
|
|
|
|
<div class="a-muted" style="margin-top:8px;">* 90 bytes 초과는 MMS 표시(최종은 서버 기준)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(() => {
|
|
const form = document.getElementById('smsSendForm');
|
|
if (!form) return;
|
|
|
|
// 서버에서 내려온 템플릿(본문 포함)
|
|
const templates = @json($templates ?? []);
|
|
|
|
// tabs
|
|
const tabBtns = Array.from(form.querySelectorAll('[data-tab]'));
|
|
const panels = Array.from(form.querySelectorAll('[data-panel]'));
|
|
const sendModeEl = document.getElementById('sendMode');
|
|
|
|
function setTab(tab){
|
|
tabBtns.forEach(b => b.classList.toggle('is-active', b.dataset.tab === tab));
|
|
panels.forEach(p => p.style.display = (p.dataset.panel === tab) ? '' : 'none');
|
|
sendModeEl.value = tab;
|
|
}
|
|
tabBtns.forEach(b => b.addEventListener('click', () => setTab(b.dataset.tab)));
|
|
|
|
// schedule
|
|
const scheduledAt = document.getElementById('scheduledAt');
|
|
form.querySelectorAll('input[name="schedule_type"]').forEach(r => {
|
|
r.addEventListener('change', () => {
|
|
const isSch = form.querySelector('input[name="schedule_type"][value="schedule"]').checked;
|
|
scheduledAt.disabled = !isSch;
|
|
if(!isSch) scheduledAt.value = '';
|
|
});
|
|
});
|
|
|
|
// byte count
|
|
const msg = document.getElementById('messageText');
|
|
const byteBadge = document.getElementById('byteBadge');
|
|
const typeBadge = document.getElementById('smsTypeBadge');
|
|
const smsTypeHint = document.getElementById('smsTypeHint');
|
|
|
|
function calcBytes(str){
|
|
let byte = 0;
|
|
for (let i=0;i<str.length;i++){
|
|
const c = str.charCodeAt(i);
|
|
byte += (c > 127) ? 2 : 1;
|
|
}
|
|
return byte;
|
|
}
|
|
function refreshBytes(){
|
|
const b = calcBytes(msg?.value || '');
|
|
if (byteBadge) byteBadge.textContent = b + ' Bytes';
|
|
const type = (b > 90) ? 'mms' : 'sms';
|
|
if (typeBadge) typeBadge.textContent = type.toUpperCase();
|
|
if (smsTypeHint) smsTypeHint.value = 'auto';
|
|
}
|
|
msg?.addEventListener('input', refreshBytes);
|
|
refreshBytes();
|
|
|
|
// token insert
|
|
form.querySelectorAll('[data-insert]').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
if(!msg) return;
|
|
const token = btn.getAttribute('data-insert') || '';
|
|
const start = msg.selectionStart ?? msg.value.length;
|
|
const end = msg.selectionEnd ?? msg.value.length;
|
|
msg.value = msg.value.slice(0,start) + token + msg.value.slice(end);
|
|
msg.focus();
|
|
msg.selectionStart = msg.selectionEnd = start + token.length;
|
|
refreshBytes();
|
|
});
|
|
});
|
|
|
|
// many stats
|
|
const toNumbersText = document.getElementById('toNumbersText');
|
|
const manyCountText = document.getElementById('manyCountText');
|
|
const manyStats = document.getElementById('manyStats');
|
|
const clearMany = document.getElementById('clearMany');
|
|
|
|
function parsePhonesRough(text){
|
|
const raw = (text||'').split(/[\s,]+/).map(s=>s.trim()).filter(Boolean);
|
|
const digits = raw.map(v=>v.replace(/\D+/g,'')).filter(Boolean);
|
|
const valid = digits.filter(v=>/^01\d{8,9}$/.test(v));
|
|
const invalid = digits.length - valid.length;
|
|
const uniq = Array.from(new Set(valid));
|
|
return {total:digits.length, valid:valid.length, uniq:uniq.length, invalid};
|
|
}
|
|
function refreshMany(){
|
|
if(!toNumbersText) return;
|
|
const r = parsePhonesRough(toNumbersText.value);
|
|
if (manyCountText) manyCountText.textContent = r.uniq + '건';
|
|
if (manyStats) manyStats.textContent = `입력 ${r.total} / 유효 ${r.valid} / 중복제거 ${r.uniq} / 오류 ${r.invalid}`;
|
|
}
|
|
toNumbersText?.addEventListener('input', refreshMany);
|
|
clearMany?.addEventListener('click', () => { if(toNumbersText){ toNumbersText.value=''; refreshMany(); } });
|
|
refreshMany();
|
|
|
|
// template apply (프리셋)
|
|
const sel = document.getElementById('tplSelect');
|
|
const btnR = document.getElementById('tplApplyReplace');
|
|
const btnA = document.getElementById('tplApplyAppend');
|
|
|
|
function getSelectedBody(){
|
|
const id = Number(sel?.value || 0);
|
|
if (!id) return '';
|
|
const t = templates.find(x => Number(x.id) === id);
|
|
if (!t) return '';
|
|
return String(t.body ?? t.content ?? t.message ?? '');
|
|
}
|
|
|
|
function apply(mode){
|
|
if (!msg) return;
|
|
const body = getSelectedBody();
|
|
if (!body) { alert('템플릿을 선택하세요.'); return; }
|
|
|
|
if (mode === 'replace') msg.value = body;
|
|
else msg.value = msg.value ? (msg.value + "\n" + body) : body;
|
|
|
|
msg.dispatchEvent(new Event('input', { bubbles: true }));
|
|
msg.focus();
|
|
}
|
|
|
|
btnR?.addEventListener('click', () => apply('replace'));
|
|
btnA?.addEventListener('click', () => apply('append'));
|
|
|
|
// submit check (최종 검증은 서버)
|
|
form.addEventListener('submit', (e) => {
|
|
const mode = sendModeEl?.value || 'one';
|
|
const m = (msg?.value || '').trim();
|
|
if(!m){ e.preventDefault(); alert('발송 문구를 입력하세요.'); return; }
|
|
|
|
if(mode === 'one'){
|
|
const v = (document.getElementById('toNumber')?.value || '').replace(/\D+/g,'');
|
|
if(!/^01\d{8,9}$/.test(v)){ e.preventDefault(); alert('수신번호(단건)를 올바르게 입력하세요.'); return; }
|
|
}
|
|
if(mode === 'many'){
|
|
const r = parsePhonesRough(toNumbersText?.value || '');
|
|
const hasCsv = (document.getElementById('toNumbersCsv')?.files || []).length > 0;
|
|
if(r.uniq < 1 && !hasCsv){ e.preventDefault(); alert('대량 수신번호를 입력하거나 CSV 업로드하세요.'); return; }
|
|
}
|
|
if(mode === 'template'){
|
|
const hasT = (document.getElementById('templateCsv')?.files || []).length > 0;
|
|
if(!hasT){ e.preventDefault(); alert('템플릿 CSV를 업로드하세요.'); return; }
|
|
}
|
|
const isSch = form.querySelector('input[name="schedule_type"][value="schedule"]')?.checked;
|
|
if(isSch && !(scheduledAt?.value || '').trim()){ e.preventDefault(); alert('예약 시간을 입력하세요.'); return; }
|
|
});
|
|
})();
|
|
</script>
|
|
<script>
|
|
(() => {
|
|
const input = document.getElementById('templateCsv');
|
|
if (!input) return;
|
|
|
|
const wrap = document.getElementById('tplCsvPreviewWrap');
|
|
const meta = document.getElementById('tplCsvMeta');
|
|
const headTr = document.getElementById('tplCsvHeadRow');
|
|
const bodyTb = document.getElementById('tplCsvBodyRows');
|
|
const hint = document.getElementById('tplCsvHint');
|
|
const errBox = document.getElementById('tplCsvError');
|
|
const clearBtn = document.getElementById('tplCsvClearBtn');
|
|
|
|
function showErr(msg){
|
|
if (!errBox) return;
|
|
errBox.style.display = msg ? '' : 'none';
|
|
errBox.textContent = msg || '';
|
|
}
|
|
|
|
function esc(s){
|
|
return String(s ?? '')
|
|
.replaceAll('&','&')
|
|
.replaceAll('<','<')
|
|
.replaceAll('>','>')
|
|
.replaceAll('"','"')
|
|
.replaceAll("'",''');
|
|
}
|
|
|
|
function parseCsvLoose(text){
|
|
// “간단/안전” 파서: 기본은 콤마 분리, 따옴표 포함 라인은 최소한 지원
|
|
// (완전한 CSV RFC 파서는 아니지만 관리자 도구용으로 실사용 충분)
|
|
const lines = (text || '')
|
|
.replace(/^\uFEFF/, '') // BOM 제거
|
|
.split(/\r\n|\n|\r/)
|
|
.map(l => l.trim())
|
|
.filter(Boolean);
|
|
|
|
const rows = [];
|
|
for (const line of lines){
|
|
const cells = [];
|
|
let cur = '';
|
|
let inQ = false;
|
|
|
|
for (let i=0;i<line.length;i++){
|
|
const ch = line[i];
|
|
if (ch === '"'){
|
|
// "" 이스케이프 처리
|
|
if (inQ && line[i+1] === '"'){ cur += '"'; i++; continue; }
|
|
inQ = !inQ;
|
|
continue;
|
|
}
|
|
if (ch === ',' && !inQ){
|
|
cells.push(cur.trim());
|
|
cur = '';
|
|
} else {
|
|
cur += ch;
|
|
}
|
|
}
|
|
cells.push(cur.trim());
|
|
rows.push(cells);
|
|
}
|
|
return rows;
|
|
}
|
|
|
|
function normalizePhone(v){
|
|
const d = String(v||'').replace(/\D+/g,'');
|
|
return d;
|
|
}
|
|
|
|
function buildPreview(rows){
|
|
// 최대 5줄 표시
|
|
const sample = rows.slice(0, 5);
|
|
const maxCols = sample.reduce((m, r) => Math.max(m, r.length), 0);
|
|
|
|
// 헤더(Col1..)
|
|
headTr.innerHTML = '';
|
|
for (let c=0;c<Math.max(1,maxCols);c++){
|
|
const th = document.createElement('th');
|
|
th.textContent = (c===0) ? 'phone' : `val${c+1}`;
|
|
headTr.appendChild(th);
|
|
}
|
|
|
|
// 바디
|
|
bodyTb.innerHTML = '';
|
|
sample.forEach((r, idx) => {
|
|
const tr = document.createElement('tr');
|
|
for (let c=0;c<Math.max(1,maxCols);c++){
|
|
const td = document.createElement('td');
|
|
const val = (r[c] ?? '');
|
|
td.innerHTML = esc(val);
|
|
if (c===0){
|
|
const p = normalizePhone(val);
|
|
if (!/^01\d{8,9}$/.test(p)) {
|
|
td.style.color = '#ff6b6b';
|
|
td.style.fontWeight = '800';
|
|
td.title = '휴대폰 형식이 올바르지 않습니다 (010/011/016/017/018/019 10~11자리)';
|
|
}
|
|
}
|
|
tr.appendChild(td);
|
|
}
|
|
bodyTb.appendChild(tr);
|
|
});
|
|
|
|
// 메타/힌트
|
|
const totalRows = rows.length;
|
|
const sampleCols = maxCols;
|
|
const tokenFrom = 2;
|
|
const tokenTo = Math.min(9, tokenFrom + (sampleCols - 2)); // phone(1) + val2.. -> 토큰 02부터
|
|
const tokenInfo = (sampleCols <= 1)
|
|
? '치환값 컬럼이 없습니다. (phone만 존재)'
|
|
: `치환 가능 토큰: {_text_02_} ~ {_text_0${tokenTo}_} (샘플 기준)`;
|
|
|
|
meta.innerHTML = `
|
|
<div>총 <b>${totalRows}</b>줄 · 샘플 컬럼수 <b>${sampleCols}</b>개</div>
|
|
<div>${tokenInfo}</div>
|
|
`;
|
|
|
|
let hintHtml = '';
|
|
if (sampleCols <= 1){
|
|
hintHtml += `<div>• 현재 CSV는 수신번호만 있어 “개인화 치환”은 불가능합니다.</div>`;
|
|
} else {
|
|
hintHtml += `<div>• 1번째 컬럼(phone) → 수신번호</div>`;
|
|
hintHtml += `<div>• 2번째 컬럼(val2) → <code>{_text_02_}</code></div>`;
|
|
if (sampleCols >= 3) hintHtml += `<div>• 3번째 컬럼(val3) → <code>{_text_03_}</code></div>`;
|
|
if (sampleCols >= 4) hintHtml += `<div>• 4번째 컬럼(val4) → <code>{_text_04_}</code></div>`;
|
|
if (sampleCols > 4) hintHtml += `<div>• 이후 컬럼은 순서대로 <code>{_text_05_}</code> …</div>`;
|
|
}
|
|
hintHtml += `<div class="a-muted" style="margin-top:6px;">* 최종 유효성/중복 제거/치환은 서버에서 한 번 더 처리합니다.</div>`;
|
|
hint.innerHTML = hintHtml;
|
|
}
|
|
|
|
function handleFile(file){
|
|
showErr('');
|
|
if (!file){
|
|
wrap.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const name = (file.name || '').toLowerCase();
|
|
if (!name.endsWith('.csv') && !name.endsWith('.txt')){
|
|
showErr('CSV/TXT 파일만 업로드 가능합니다.');
|
|
input.value = '';
|
|
wrap.style.display = 'none';
|
|
return;
|
|
}
|
|
if (file.size > 5 * 1024 * 1024){
|
|
showErr('파일 용량은 5MB 이하만 가능합니다.');
|
|
input.value = '';
|
|
wrap.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
try{
|
|
const text = String(reader.result || '');
|
|
const rows = parseCsvLoose(text);
|
|
|
|
if (!rows.length){
|
|
showErr('CSV 내용이 비어있습니다.');
|
|
wrap.style.display = 'none';
|
|
return;
|
|
}
|
|
// phone 컬럼 존재 체크
|
|
const badPhone = rows.slice(0, 200).some(r => !/^01\d{8,9}$/.test(normalizePhone(r[0] ?? '')));
|
|
if (badPhone){
|
|
showErr('미리보기 범위 내에 휴대폰 형식이 올바르지 않은 줄이 있습니다. (빨간색 표시)');
|
|
} else {
|
|
showErr('');
|
|
}
|
|
|
|
buildPreview(rows);
|
|
wrap.style.display = '';
|
|
}catch(e){
|
|
showErr('CSV 파싱 중 오류가 발생했습니다. 파일 형식을 확인해 주세요.');
|
|
wrap.style.display = 'none';
|
|
}
|
|
};
|
|
reader.onerror = () => {
|
|
showErr('파일을 읽을 수 없습니다. 다시 시도해 주세요.');
|
|
wrap.style.display = 'none';
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
input.addEventListener('change', () => {
|
|
const file = (input.files || [])[0];
|
|
handleFile(file);
|
|
});
|
|
|
|
clearBtn?.addEventListener('click', () => {
|
|
input.value = '';
|
|
wrap.style.display = 'none';
|
|
showErr('');
|
|
});
|
|
})();
|
|
</script>
|
|
@endpush
|
|
@endsection
|