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-refund td, .table-refund th { white-space:nowrap; }
  .code-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.9rem; }
</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="domain">도메인</option>
              <option value="name">사용자명</option>
              <option value="phone">전화번호</option>
              <option value="pay_code">결제코드</option>
              <option value="txn_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="refundFrom" />
            <div class="d-flex align-items-center text-muted">~</div>
            <input type="date" class="form-control" style="max-width:200px;" id="refundTo" />
            <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="refund_status">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rs_all" checked>
              <label class="form-check-label" for="rs_all">전체</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rs_req" checked>
              <label class="form-check-label" for="rs_req">요청</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rs_ing" checked>
              <label class="form-check-label" for="rs_ing">처리중</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rs_done" checked>
              <label class="form-check-label" for="rs_done">완료</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rs_reject" checked>
              <label class="form-check-label" for="rs_reject">거절</label>
            </div>
          </div>
        </div>
      </div>

<div class="filter-rowline">
        <div class="filter-label">환불수단</div>
        <div class="filter-input">
          <div class="chk-row" data-group="refund_method">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rm_all" checked>
              <label class="form-check-label" for="rm_all">전체</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rm_origin" checked>
              <label class="form-check-label" for="rm_origin">원결제수단</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rm_point" checked>
              <label class="form-check-label" for="rm_point">포인트</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rm_bank" checked>
              <label class="form-check-label" for="rm_bank">계좌환불</label>
            </div>
          </div>
        </div>
      </div>

<div class="filter-rowline">
        <div class="filter-label">PG사</div>
        <div class="filter-input">
          <div class="chk-row" data-group="pg">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="pg_all" checked>
              <label class="form-check-label" for="pg_all">전체</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="pg_toss" checked>
              <label class="form-check-label" for="pg_toss">토스페이먼츠</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="pg_stripe" checked>
              <label class="form-check-label" for="pg_stripe">Stripe</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="pg_paypal" checked>
              <label class="form-check-label" for="pg_paypal">PayPal</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">64</span>건 / 총 <span class="fw-semibold">1,240</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-refund">
        <thead>
          <tr class="text-muted text-center">
            <th style="width:70px;">번호</th>
            <th>계정 ID</th>
            <th>이메일</th>
            <th>계정 타이틀</th>
            <th>결제코드</th>
            <th>거래ID</th>
            <th>사용자명</th>
            <th>전화번호</th>
            <th>결제액</th>
            <th>환불액</th>
            <th>환불상태</th>
            <th>환불수단</th>
            <th>PG사</th>
            <th>환불요청일</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>pay10@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td class="code-mono">PAY-202602-0010</td>
            <td class="code-mono">TXN-TOSS-8F3A21</td>
            <td>송하늘</td>
            <td>010-2310-1370</td>
            <td class="text-end">₩39,000</td>
            <td class="text-end">₩39,000</td>
            <td><span class="badge text-bg-secondary">환불</span></td>
            <td>원결제수단</td>
            <td>토스페이먼츠</td>
            <td>2026-02-09</td>
            <td>2026-02-09</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>pay09@example.com</td>
            <td>데모 사이트 003</td>
            <td class="code-mono">PAY-202602-0009</td>
            <td class="code-mono">TXN-STRIPE-7C19D0</td>
            <td>김민수</td>
            <td>010-2301-1037</td>
            <td class="text-end">$299</td>
            <td class="text-end">$199</td>
            <td><span class="badge text-bg-warning">처리중</span></td>
            <td>원결제수단</td>
            <td>Stripe</td>
            <td>2026-02-09</td>
            <td>-</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>pay08@example.com</td>
            <td>데모 사이트 002</td>
            <td class="code-mono">PAY-202602-0008</td>
            <td class="code-mono">TXN-PAYPAL-5A8B11</td>
            <td>이서연</td>
            <td>010-2302-1074</td>
            <td class="text-end">$50</td>
            <td class="text-end">$50</td>
            <td><span class="badge text-bg-success">완료</span></td>
            <td>원결제수단</td>
            <td>PayPal</td>
            <td>2026-02-08</td>
            <td>2026-02-08</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>pay07@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td class="code-mono">PAY-202602-0007</td>
            <td class="code-mono">TXN-TOSS-0C2F9A</td>
            <td>오세훈</td>
            <td>010-2307-1259</td>
            <td class="text-end">₩15,000</td>
            <td class="text-end">₩5,000</td>
            <td><span class="badge text-bg-warning">요청</span></td>
            <td>포인트</td>
            <td>토스페이먼츠</td>
            <td>2026-02-08</td>
            <td>-</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>pay06@example.com</td>
            <td>데모 사이트 001</td>
            <td class="code-mono">PAY-202602-0006</td>
            <td class="code-mono">TXN-STRIPE-2E0A77</td>
            <td>박지훈</td>
            <td>010-2303-1111</td>
            <td class="text-end">$199</td>
            <td class="text-end">$99</td>
            <td><span class="badge text-bg-secondary">거절</span></td>
            <td>계좌환불</td>
            <td>Stripe</td>
            <td>2026-02-08</td>
            <td>-</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>pay05@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td class="code-mono">PAY-202602-0005</td>
            <td class="code-mono">TXN-TOSS-9B10C4</td>
            <td>최유진</td>
            <td>010-2304-1148</td>
            <td class="text-end">₩100,000</td>
            <td class="text-end">₩100,000</td>
            <td><span class="badge text-bg-success">완료</span></td>
            <td>원결제수단</td>
            <td>토스페이먼츠</td>
            <td>2026-02-07</td>
            <td>2026-02-07</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>pay04@example.com</td>
            <td>데모 사이트 003</td>
            <td class="code-mono">PAY-202602-0004</td>
            <td class="code-mono">TXN-PAYPAL-18D3F2</td>
            <td>한지민</td>
            <td>010-2306-1222</td>
            <td class="text-end">$29</td>
            <td class="text-end">$10</td>
            <td><span class="badge text-bg-warning">처리중</span></td>
            <td>계좌환불</td>
            <td>PayPal</td>
            <td>2026-02-07</td>
            <td>-</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>pay03@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td class="code-mono">PAY-202601-0133</td>
            <td class="code-mono">TXN-TOSS-3D7E8A</td>
            <td>윤아름</td>
            <td>010-2308-1296</td>
            <td class="text-end">₩299,000</td>
            <td class="text-end">₩199,000</td>
            <td><span class="badge text-bg-warning">요청</span></td>
            <td>포인트</td>
            <td>토스페이먼츠</td>
            <td>2026-02-06</td>
            <td>-</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>pay02@example.com</td>
            <td>데모 사이트 002</td>
            <td class="code-mono">PAY-202601-0102</td>
            <td class="code-mono">TXN-STRIPE-BC0F14</td>
            <td>강도윤</td>
            <td>010-2309-1333</td>
            <td class="text-end">$100</td>
            <td class="text-end">$100</td>
            <td><span class="badge text-bg-success">완료</span></td>
            <td>원결제수단</td>
            <td>Stripe</td>
            <td>2026-02-06</td>
            <td>2026-02-06</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>pay01@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td class="code-mono">PAY-202601-0001</td>
            <td class="code-mono">TXN-PAYPAL-7E2AA0</td>
            <td>정현우</td>
            <td>010-2305-1185</td>
            <td class="text-end">₩39,000</td>
            <td class="text-end">₩19,000</td>
            <td><span class="badge text-bg-secondary">거절</span></td>
            <td>계좌환불</td>
            <td>PayPal</td>
            <td>2026-02-05</td>
            <td>-</td>
            <td><a class="btn btn-outline-secondary btn-sm" href="#">상세</a></td>
          </tr>
        </tbody>
      </table>
    </div>

간단 소스 편집기