CreatorLMS Editor

/* ===== 레이어 팝업 ===== */
  .ui-layer-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    display:none; z-index:1050;
  }
  .ui-layer{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(920px, calc(100vw - 24px));
    max-height:calc(100vh - 24px);
    overflow:auto;
    display:none; z-index:1060;
  }
</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="card mb-3 filter-card">
  <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 gap-2 flex-wrap">
            <select class="form-select" style="max-width:200px;">
              <option>계정 타이틀</option>
              <option>이메일</option>
              <option>결제코드</option>
              <option>거래ID</option>
              <option>사업자번호</option>
              <option>휴대폰번호</option>
            </select>
            <input type="text" class="form-control" style="max-width:600px;" placeholder="검색어 입력">
          </div>
        </div>
      </div>

<div class="filter-rowline">
        <div class="filter-label">증빙유형</div>
        <div class="filter-input">
          <div class="chk-row">
            <label class="form-check"><input class="form-check-input" type="checkbox" checked> 전체</label>
            <label class="form-check"><input class="form-check-input" type="checkbox" checked> 세금계산서</label>
            <label class="form-check"><input class="form-check-input" type="checkbox" checked> 현금영수증</label>
          </div>
        </div>
      </div>

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

<div class="card">
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-hover align-middle table-tax text-center">
        <thead class="text-muted">
          <tr>
            <th style="width:70px;">번호</th>
            <th>이메일</th>
            <th>계정 타이틀</th>
            <th>결제코드</th>
            <th>증빙유형</th>
            <th>발행상태</th>
            <th>결제금액</th>
            <th>발행일</th>
            <th style="width:90px;">상세</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="fw-semibold">3</td>
            <td>user03@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td>PAY-202602-0003</td>
            <td>세금계산서</td>
            <td><span class="badge text-bg-success">발행완료</span></td>
            <td class="text-end">₩110,000</td>
            <td>2026-02-09</td>
            <td><button class="btn btn-outline-secondary btn-sm" onclick="openTaxLayer()">상세</button></td>
          </tr>

<tr>
            <td class="fw-semibold">2</td>
            <td>user02@example.com</td>
            <td>데모 사이트 002</td>
            <td>PAY-202602-0002</td>
            <td>현금영수증</td>
            <td><span class="badge text-bg-warning">발행대기</span></td>
            <td class="text-end">₩39,000</td>
            <td>-</td>
            <td><button class="btn btn-outline-secondary btn-sm" onclick="openCashLayer()">상세</button></td>
          </tr>

<tr>
            <td class="fw-semibold">1</td>
            <td>user01@example.com</td>
            <td>데모 사이트 001</td>
            <td>PAY-202602-0001</td>
            <td>현금영수증</td>
            <td><span class="badge text-bg-secondary">취소</span></td>
            <td class="text-end">₩39,000</td>
            <td>-</td>
            <td><button class="btn btn-outline-secondary btn-sm" onclick="openCashLayer()">상세</button></td>
          </tr>

</tbody>
      </table>
    </div>

<nav class="mt-3 d-flex justify-content-center" aria-label="pagination">
      <ul class="pagination pagination-sm mb-0">
        <li class="page-item disabled"><a class="page-link" href="#">이전</a></li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item"><a class="page-link" href="#">6</a></li>
        <li class="page-item"><a class="page-link" href="#">7</a></li>
        <li class="page-item"><a class="page-link" href="#">8</a></li>
        <li class="page-item"><a class="page-link" href="#">9</a></li>
        <li class="page-item"><a class="page-link" href="#">10</a></li>
        <li class="page-item"><a class="page-link" href="#">다음</a></li>
      </ul>
    </nav>
  </div>
  </div>

<div id="taxBackdrop" class="ui-layer-backdrop" onclick="closeTaxLayer()"></div>
<div id="taxLayer" class="ui-layer">
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <div class="fw-semibold">세금계산서 상세</div>
      <button class="btn btn-outline-secondary btn-sm" onclick="closeTaxLayer()">닫기</button>
    </div>
    <div class="card-body">
      <div class="row g-2">
        <div class="col-6"><strong>공급자</strong><br>크리에이터 LMS</div>
        <div class="col-6"><strong>공급받는자</strong><br>반응형 테스트 사이트</div>
        <div class="col-6">사업자번호: 123-45-67890</div>
        <div class="col-6">사업자번호: 222-33-44444</div>
        <div class="col-6">공급가액: ₩100,000</div>
        <div class="col-6">부가세: ₩10,000</div>
        <div class="col-12">합계: <strong>₩110,000</strong></div>
        <div class="col-12">승인번호: NTS-20260209-0001</div>
      </div>
      <div class="form-text mt-3">* 프로토타입: 실제 발행 데이터 아님</div>
    </div>
  </div>
</div>

<div id="cashBackdrop" class="ui-layer-backdrop" onclick="closeCashLayer()"></div>
<div id="cashLayer" class="ui-layer">
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <div class="fw-semibold">현금영수증 상세</div>
      <button class="btn btn-outline-secondary btn-sm" onclick="closeCashLayer()">닫기</button>
    </div>
    <div class="card-body">
      <div class="row g-2">
        <div class="col-6">용도: 소득공제</div>
        <div class="col-6">발급수단: 휴대폰번호</div>
        <div class="col-12">휴대폰번호: 010-1234-5678</div>
        <div class="col-12">승인번호: CASH-20260209-0021</div>
        <div class="col-12">금액: <strong>₩39,000</strong></div>
      </div>
      <div class="form-text mt-3">* 프로토타입: 실제 국세청 연동 없음</div>
    </div>
  </div>
</div>

간단 소스 편집기