CreatorLMS Editor

<style>
  /* 검색영역 전용: 세로 1열(상하 1레코드) + 라벨/입력 좌우 분리 */
  .filter-stack { display:flex; flex-direction:column; gap:.65rem; }
  .filter-rowline { display:flex; gap:12px; align-items:flex-start; }
  .filter-rowline .filter-label { width:140px; padding-top:6px; font-weight:600; color:#374151; white-space:nowrap; }
  .filter-rowline .filter-input { flex:1; min-width:0; text-align:left; }

.chk-row { display:flex; flex-wrap:wrap; gap:.55rem .9rem; }
  .chk-row .form-check { margin:0; }

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

.table-pointlog td, .table-pointlog th { white-space:nowrap; }
  .code-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.9rem; }
  .subnote { font-size:.85rem; color:#6b7280; }
</style>

<div class="d-flex align-items-center justify-content-between mb-3">
  <div>
    <h1 class="h4 mb-1">포인트 사용 로그

</h1>
    <div class="text-muted">포인트 차감/환불(복원) 내역을 채널별로 조회합니다.</div>
  </div>
</div>

<div class="filter-rowline">
        <div class="filter-label">키워드 검색</div>
        <div class="filter-input">
          <div class="d-flex gap-2 flex-wrap">
            <select class="form-select" style="max-width:180px;" id="kwField">
              <option value="account_title">계정 타이틀</option>
              <option value="account_id">계정 아이디</option>
              <option value="email">이메일</option>
              <option value="user_name">사용자명</option>
              <option value="phone">전화번호</option>
              <option value="sender">발신</option>
              <option value="ref_id">참조ID(캠페인/발송ID)</option>
            </select>
            <input
              type="text"
              class="form-control"
              placeholder="검색어를 입력하세요"
              id="kwText"
              maxlength="60"
              style="max-width:600px;"
            />
          </div>
        </div>
      </div>

<div class="filter-rowline">
        <div class="filter-label">사용기간</div>
        <div class="filter-input">
          <div class="d-flex gap-2 flex-wrap">
            <input type="date" class="form-control" style="max-width:200px;" id="useFrom" />
            <div class="d-flex align-items-center text-muted">~</div>
            <input type="date" class="form-control" style="max-width:200px;" id="useTo" />
            <div class="text-muted d-flex align-items-center">* 기본값은 빈 값입니다.</div>
          </div>
        </div>
      </div>

<div class="filter-rowline">
        <div class="filter-label">채널</div>
        <div class="filter-input">
          <div class="chk-row" data-group="channel">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="ch_all" checked>
              <label class="form-check-label" for="ch_all">전체</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="ch_email" checked>
              <label class="form-check-label" for="ch_email">이메일</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="ch_sms" checked>
              <label class="form-check-label" for="ch_sms">SMS</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="ch_lms" checked>
              <label class="form-check-label" for="ch_lms">LMS</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="ch_mms" checked>
              <label class="form-check-label" for="ch_mms">MMS</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="ch_kakao" checked>
              <label class="form-check-label" for="ch_kakao">카카오</label>
            </div>
          </div>
          <div class="subnote mt-1">카카오는 알림톡/친구톡/기타를 포함(프로토타입)</div>
        </div>
      </div>

<div class="filter-rowline">
        <div class="filter-label">사용구분</div>
        <div class="filter-input">
          <div class="chk-row" data-group="use_kind">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="uk_all" checked>
              <label class="form-check-label" for="uk_all">전체</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="uk_send" checked>
              <label class="form-check-label" for="uk_send">발송</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="uk_resend" checked>
              <label class="form-check-label" for="uk_resend">재발송</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="uk_test" checked>
              <label class="form-check-label" for="uk_test">테스트</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="uk_refund" checked>
              <label class="form-check-label" for="uk_refund">환불(복원)</label>
            </div>
          </div>
        </div>
      </div>

<div class="filter-rowline">
        <div class="filter-label">처리상태</div>
        <div class="filter-input">
          <div class="chk-row" data-group="status">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="st_all" checked>
              <label class="form-check-label" for="st_all">전체</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="st_ok" checked>
              <label class="form-check-label" for="st_ok">성공</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="st_fail" checked>
              <label class="form-check-label" for="st_fail">실패</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="st_cancel" checked>
              <label class="form-check-label" for="st_cancel">취소</label>
            </div>
          </div>
        </div>
      </div>

<div class="filter-actions">
        <div class="d-flex gap-2">
          <button class="btn btn-primary" type="button">검색</button>
          <button class="btn btn-outline-secondary" type="button">조건 초기화</button>
        </div>
      </div>

</div>
  </div>
</div>

<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
    <div class="text-muted">
      검색결과 <span class="fw-semibold">96</span>건 / 총 <span class="fw-semibold">12,480</span>건
      <span class="ms-2 subnote">* 예시 화면: 한 셀엔 한 통화만 표시</span>
    </div>
    <div class="d-flex align-items-center gap-2">
      <div class="text-muted small">리스팅 개수</div>
      <select class="form-select form-select-sm" style="width:120px;">
        <option value="10">10</option>
        <option value="20" selected>20</option>
        <option value="30">30</option>
        <option value="50">50</option>
      </select>
    </div>
  </div>

<div class="card-body">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0 table-pointlog">
        <thead>
          <tr class="text-muted text-center">
            <th style="width:70px;">번호</th>
            <th>계정 ID</th>
            <th>이메일</th>
            <th>계정 타이틀</th>
            <th>채널</th>
            <th>사용구분</th>
            <th>발신</th>
            <th>메시지 건수</th>
            <th>증감(잔여포인트)</th>
            <th>상태</th>
            <th>참조ID</th>
            <th>처리시각</th>
            <th style="width:90px;">상세</th>
          </tr>
        </thead>

<tbody class="text-center">
          <tr>
            <td class="fw-semibold">10</td>
            <td>example10</td>
            <td>acct10@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td><span class="badge text-bg-light">이메일</span></td>
            <td>발송</td>
            <td class="code-mono">no-reply@demo.com</td>
            <td class="code-mono">2,400건</td>
            <td class="text-end">-$48.00 (잔여 $233.00)</td>
            <td><span class="badge text-bg-success">성공</span></td>
            <td class="code-mono">MAIL-202602-0010</td>
            <td>2026-02-09 10:33:21</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">9</td>
            <td>example9</td>
            <td>acct09@example.com</td>
            <td>데모 사이트 003</td>
            <td><span class="badge text-bg-light">SMS</span></td>
            <td>발송</td>
            <td class="code-mono">010-1234-5678</td>
            <td class="code-mono">312건</td>
            <td class="text-end">-₩2,400 (잔여 ₩60,000)</td>
            <td><span class="badge text-bg-success">성공</span></td>
            <td class="code-mono">SMS-202602-0009</td>
            <td>2026-02-09 10:05:10</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">8</td>
            <td>example8</td>
            <td>acct08@example.com</td>
            <td>데모 사이트 002</td>
            <td><span class="badge text-bg-light">LMS</span></td>
            <td>재발송</td>
            <td class="code-mono">010-7777-2222</td>
            <td class="code-mono">120건</td>
            <td class="text-end">-₩1,200 (잔여 ₩25,800)</td>
            <td><span class="badge text-bg-warning">취소</span></td>
            <td class="code-mono">LMS-202602-0008</td>
            <td>2026-02-09 09:41:03</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">7</td>
            <td>example7</td>
            <td>acct07@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td><span class="badge text-bg-light">MMS</span></td>
            <td>발송</td>
            <td class="code-mono">010-5555-1111</td>
            <td class="code-mono">48건</td>
            <td class="text-end">-₩3,600 (잔여 ₩10,000)</td>
            <td><span class="badge text-bg-danger">실패</span></td>
            <td class="code-mono">MMS-202602-0007</td>
            <td>2026-02-08 22:19:44</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">6</td>
            <td>example6</td>
            <td>acct06@example.com</td>
            <td>데모 사이트 001</td>
            <td><span class="badge text-bg-light">카카오</span></td>
            <td>발송</td>
            <td class="code-mono">알림톡</td>
            <td class="code-mono">1,020건</td>
            <td class="text-end">-$20.40 (잔여 $118.60)</td>
            <td><span class="badge text-bg-success">성공</span></td>
            <td class="code-mono">KAKAO-AT-202602-0006</td>
            <td>2026-02-08 17:03:11</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">5</td>
            <td>example5</td>
            <td>acct05@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td><span class="badge text-bg-light">카카오</span></td>
            <td>환불(복원)</td>
            <td class="code-mono">친구톡</td>
            <td class="code-mono">240건</td>
            <td class="text-end">+$4.80 (잔여 $140.00)</td>
            <td><span class="badge text-bg-secondary">성공</span></td>
            <td class="code-mono">REFUND-KAKAO-202602-0005</td>
            <td>2026-02-08 12:44:29</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">4</td>
            <td>example4</td>
            <td>acct04@example.com</td>
            <td>데모 사이트 003</td>
            <td><span class="badge text-bg-light">이메일</span></td>
            <td>테스트</td>
            <td class="code-mono">test@demo.com</td>
            <td class="code-mono">5건</td>
            <td class="text-end">-$0.10 (잔여 $232.90)</td>
            <td><span class="badge text-bg-success">성공</span></td>
            <td class="code-mono">MAIL-TEST-202602-0004</td>
            <td>2026-02-07 21:10:33</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">3</td>
            <td>example3</td>
            <td>acct03@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td><span class="badge text-bg-light">SMS</span></td>
            <td>발송</td>
            <td class="code-mono">070-0000-0000</td>
            <td class="code-mono">980건</td>
            <td class="text-end">-₩9,800 (잔여 ₩50,200)</td>
            <td><span class="badge text-bg-success">성공</span></td>
            <td class="code-mono">SMS-202602-0003</td>
            <td>2026-02-07 09:18:02</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">2</td>
            <td>example2</td>
            <td>acct02@example.com</td>
            <td>데모 사이트 002</td>
            <td><span class="badge text-bg-light">LMS</span></td>
            <td>발송</td>
            <td class="code-mono">010-9090-8080</td>
            <td class="code-mono">64건</td>
            <td class="text-end">-$1.92 (잔여 $28.08)</td>
            <td><span class="badge text-bg-danger">실패</span></td>
            <td class="code-mono">LMS-202602-0002</td>
            <td>2026-02-06 14:02:09</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">1</td>
            <td>example1</td>
            <td>acct01@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td><span class="badge text-bg-light">MMS</span></td>
            <td>재발송</td>
            <td class="code-mono">010-3333-4444</td>
            <td class="code-mono">18건</td>
            <td class="text-end">-₩1,080 (잔여 ₩8,920)</td>
            <td><span class="badge text-bg-warning">취소</span></td>
            <td class="code-mono">MMS-202602-0001</td>
            <td>2026-02-05 08:31:47</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>
        </tbody>
      </table>
    </div>

간단 소스 편집기