CreatorLMS Editor

</h1>
    <div class="text-muted">발송 요청 및 결과(성공/실패)를 조회합니다.</div>
  </div>
  <div class="d-flex gap-2">
    <button class="btn btn-outline-secondary btn-sm" type="button" onclick="protoAlert('엑셀 다운로드 기능(예정)')">엑셀</button>
  </div>
</div>

.filter-actions{ display:flex; justify-content:center; margin-top:12px; gap:.5rem; }
  .filter-actions .btn{ min-width:180px; font-weight:700; }

.table-sms td, .table-sms th { white-space:nowrap; }
  .td-msg { max-width:420px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .code-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
</style>

<div class="card mb-3">
  <div class="card-body">
    <div class="filter-stack">
      <div class="filter-rowline">
        <div class="filter-label">기간</div>
        <div class="filter-input">
          <div class="d-flex flex-wrap gap-2 align-items-center">
            <input type="date" class="form-control" style="max-width:200px;">
            <span class="text-muted">~</span>
            <input type="date" class="form-control" style="max-width:200px;">
          </div>
        </div>
      </div>

<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between">
    <div class="fw-bold">발송 내역</div>
    <div class="text-muted small">총 <span class="fw-semibold">128</span>건</div>
  </div>

<div class="table-responsive">
    <table class="table table-hover align-middle mb-0 table-sms">
      <thead class="table-light">
        <tr>
          <th style="width:60px;">번호</th>
          <th style="width:170px;">발송일시</th>
          <th style="width:140px;">수신번호</th>
          <th style="width:120px;">발송유형</th>
          <th>메시지</th>
          <th style="width:90px;">상태</th>
          <th style="width:220px;">실패사유</th>
          <th style="width:190px;">참조 ID</th>
          <th style="width:110px;">채널</th>
          <th style="width:140px;">관리</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>128</td>
          <td class="code-mono">2026-02-14 11:32:10</td>
          <td class="code-mono">010-****-4821</td>
          <td>인증(OTP)</td>
          <td class="td-msg">[CreatorLMS] 인증번호는 493812 입니다. 3분 내 입력해주세요.</td>
          <td><span class="badge text-bg-success">성공</span></td>
          <td class="text-muted">-</td>
          <td class="code-mono">OTP_20260214_104821</td>
          <td>SMS</td>
          <td>
            <button class="btn btn-sm btn-outline-primary" type="button"
              data-bs-toggle="modal" data-bs-target="#smsDetailModal"
              data-sms='{
                "sent_at":"2026-02-14 11:32:10",
                "status":"성공",
                "type":"인증(OTP)",
                "channel":"SMS",
                "to":"010-1234-4821",
                "from":"1544-0000",
                "ref_id":"OTP_20260214_104821",
                "vendor_code":"200",
                "vendor_msg":"OK",
                "message":"[CreatorLMS] 인증번호는 493812 입니다. 3분 내 입력해주세요.",
                "params":"{\"otp\":\"493812\",\"ttl_sec\":180}"
              }'>상세</button>
            <button class="btn btn-sm btn-outline-secondary" type="button" onclick="protoAlert('프로토타입: 재전송 팝업(예정)')">재전송</button>
          </td>
        </tr>

<tr>
          <td>127</td>
          <td class="code-mono">2026-02-14 11:21:03</td>
          <td class="code-mono">010-****-9012</td>
          <td>일반</td>
          <td class="td-msg">[CreatorLMS] 결제 완료: C-Start / 다음 결제일 2026-03-14</td>
          <td><span class="badge text-bg-success">성공</span></td>
          <td class="text-muted">-</td>
          <td class="code-mono">PAY_20260214_000127</td>
          <td>LMS</td>
          <td>
            <button class="btn btn-sm btn-outline-primary" type="button"
              data-bs-toggle="modal" data-bs-target="#smsDetailModal"
              data-sms='{
                "sent_at":"2026-02-14 11:21:03",
                "status":"성공",
                "type":"일반",
                "channel":"LMS",
                "to":"010-7777-9012",
                "from":"1544-0000",
                "ref_id":"PAY_20260214_000127",
                "vendor_code":"200",
                "vendor_msg":"OK",
                "message":"[CreatorLMS] 결제 완료: C-Start / 다음 결제일 2026-03-14",
                "params":"{\"plan\":\"C-Start\",\"next_pay\":\"2026-03-14\"}"
              }'>상세</button>
            <button class="btn btn-sm btn-outline-secondary" type="button" onclick="protoAlert('프로토타입: 재전송 팝업(예정)')">재전송</button>
          </td>
        </tr>

<tr>
          <td>126</td>
          <td class="code-mono">2026-02-14 10:58:41</td>
          <td class="code-mono">010-****-3344</td>
          <td>알림톡 대체발송</td>
          <td class="td-msg">[CreatorLMS] 구독 만료 3일 전입니다. 결제정보를 확인해주세요.</td>
          <td><span class="badge text-bg-warning">대기</span></td>
          <td class="text-muted">-</td>
          <td class="code-mono">BILL_20260214_000126</td>
          <td>SMS</td>
          <td>
            <button class="btn btn-sm btn-outline-primary" type="button"
              data-bs-toggle="modal" data-bs-target="#smsDetailModal"
              data-sms='{
                "sent_at":"2026-02-14 10:58:41",
                "status":"대기",
                "type":"알림톡 대체발송",
                "channel":"SMS",
                "to":"010-5555-3344",
                "from":"1544-0000",
                "ref_id":"BILL_20260214_000126",
                "vendor_code":"-",
                "vendor_msg":"QUEUE",
                "message":"[CreatorLMS] 구독 만료 3일 전입니다. 결제정보를 확인해주세요.",
                "params":"{\"days_left\":3}"
              }'>상세</button>
            <button class="btn btn-sm btn-outline-secondary" type="button" onclick="protoAlert('프로토타입: 재전송 팝업(예정)')">재전송</button>
          </td>
        </tr>

<tr>
          <td>125</td>
          <td class="code-mono">2026-02-14 10:42:19</td>
          <td class="code-mono">010-****-7788</td>
          <td>일반</td>
          <td class="td-msg">[CreatorLMS] 관리자 공지: 금일 23시 점검 예정입니다.</td>
          <td><span class="badge text-bg-danger">실패</span></td>
          <td>수신번호 오류(형식 불일치)</td>
          <td class="code-mono">OPS_20260214_000125</td>
          <td>SMS</td>
          <td>
            <button class="btn btn-sm btn-outline-primary" type="button"
              data-bs-toggle="modal" data-bs-target="#smsDetailModal"
              data-sms='{
                "sent_at":"2026-02-14 10:42:19",
                "status":"실패",
                "type":"일반",
                "channel":"SMS",
                "to":"010-12-7788",
                "from":"1544-0000",
                "ref_id":"OPS_20260214_000125",
                "vendor_code":"422",
                "vendor_msg":"INVALID_MSISDN",
                "message":"[CreatorLMS] 관리자 공지: 금일 23시 점검 예정입니다.",
                "params":"{}"
              }'>상세</button>
            <button class="btn btn-sm btn-outline-secondary" type="button" onclick="protoAlert('프로토타입: 재전송 팝업(예정)')">재전송</button>
          </td>
        </tr>

<tr>
          <td>124</td>
          <td class="code-mono">2026-02-14 10:10:02</td>
          <td class="code-mono">010-****-1122</td>
          <td>인증(OTP)</td>
          <td class="td-msg">[CreatorLMS] 인증번호는 701254 입니다. 3분 내 입력해주세요.</td>
          <td><span class="badge text-bg-danger">실패</span></td>
          <td>통신사 응답 지연(Timeout)</td>
          <td class="code-mono">OTP_20260214_101122</td>
          <td>SMS</td>
          <td>
            <button class="btn btn-sm btn-outline-primary" type="button"
              data-bs-toggle="modal" data-bs-target="#smsDetailModal"
              data-sms='{
                "sent_at":"2026-02-14 10:10:02",
                "status":"실패",
                "type":"인증(OTP)",
                "channel":"SMS",
                "to":"010-9999-1122",
                "from":"1544-0000",
                "ref_id":"OTP_20260214_101122",
                "vendor_code":"504",
                "vendor_msg":"TIMEOUT",
                "message":"[CreatorLMS] 인증번호는 701254 입니다. 3분 내 입력해주세요.",
                "params":"{\"otp\":\"701254\",\"ttl_sec\":180}"
              }'>상세</button>
            <button class="btn btn-sm btn-outline-secondary" type="button" onclick="protoAlert('프로토타입: 재전송 팝업(예정)')">재전송</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

<div class="modal fade" id="smsDetailModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">SMS 발송 상세</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

// 상세 모달 데이터 바인딩
  (function(){
    var modal = document.getElementById('smsDetailModal');
    if(!modal) return;

modal.addEventListener('show.bs.modal', function (event) {
      var btn = event.relatedTarget;
      if(!btn) return;

var raw = btn.getAttribute('data-sms') || '{}';
      var data;
      try { data = JSON.parse(raw); } catch(e) { data = {}; }

setText('d_sent_at', data.sent_at);
      setText('d_status', data.status);
      setText('d_type', data.type);
      setText('d_channel', data.channel);
      setText('d_to', data.to);
      setText('d_from', data.from);
      setText('d_ref_id', data.ref_id);
      setText('d_vendor_code', data.vendor_code);
      setText('d_vendor_msg', data.vendor_msg);

var msgEl = document.getElementById('d_message');
      if(msgEl) msgEl.value = data.message || '';

var paramsEl = document.getElementById('d_params');
      if(paramsEl) paramsEl.textContent = data.params || '{}';
    });

function setText(id, v){
      var el = document.getElementById(id);
      if(el) el.textContent = (v === undefined || v === null || v === '') ? '-' : v;
    }
  })();
</script>

간단 소스 편집기