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-domainlog td, .table-domainlog 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; }

.err-box{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:.9rem;
    white-space:pre-wrap;
    background: #0b1220;
    color: #e5e7eb;
    border-radius: .5rem;
    padding: 12px;
  }
</style>

<div class="d-flex align-items-center justify-content-between mb-3">
  <div>
    <h1 class="h4 mb-1">도메인 SSL 연장 로그

</h1>
    <div class="text-muted">무료 도메인과 SSL의 자동 연장 처리 내역을 조회합니다.</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">계정 ID</option>
              <option value="domain">도메인</option>
              <option value="email">이메일</option>
              <option value="user_name">사용자명</option>
              <option value="phone">전화번호</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="expFrom" />
            <div class="d-flex align-items-center text-muted">~</div>
            <input type="date" class="form-control" style="max-width:200px;" id="expTo" />
            <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="kind">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="kd_all" checked>
              <label class="form-check-label" for="kd_all">전체</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="kd_domain" checked>
              <label class="form-check-label" for="kd_domain">도메인</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="kd_ssl" checked>
              <label class="form-check-label" for="kd_ssl">SSL</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>
        </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">5</span>건 / 총 <span class="fw-semibold">248</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" selected>10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="50">50</option>
      </select>
    </div>
  </div>

<tbody class="text-center">
          
          <tr>
            <td class="fw-semibold">5</td>
            <td class="code-mono">example5</td>
            <td>acct05@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td class="code-mono">demo05.com</td>
            <td>도메인</td>
            <td><span class="badge text-bg-success">성공</span></td>
            <td>2026-02-11</td>
            <td>2027-02-11</td>
            <td class="text-muted">-</td>
          </tr>

<tr>
            <td class="fw-semibold">4</td>
            <td class="code-mono">example4</td>
            <td>acct04@example.com</td>
            <td>데모 사이트 003</td>
            <td class="code-mono">demo03.io</td>
            <td>SSL</td>
            <td><span class="badge text-bg-success">성공</span></td>
            <td>2026-02-10</td>
            <td>2026-05-10</td>
            <td class="text-muted">-</td>
          </tr>

<tr>
            <td class="fw-semibold">3</td>
            <td class="code-mono">example3</td>
            <td>acct03@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td class="code-mono">demo03.com</td>
            <td>도메인</td>
            <td><span class="badge text-bg-danger">실패</span></td>
            <td>2026-02-09</td>
            <td>2027-02-09</td>
            <td>
              <button
                type="button"
                class="btn btn-outline-danger btn-sm js-open-error"
                data-bs-toggle="modal"
                data-bs-target="#errorLogModal"
                data-title="example3 / demo03.com (도메인)"
                data-error="E_DOMAIN_RENEW_FAIL
- provider: registrar-A
- http_status: 409
- message: Domain is locked (clientTransferProhibited)
- action: unlock domain and retry"
              >에러로그</button>
            </td>
          </tr>

<tr>
            <td class="fw-semibold">2</td>
            <td class="code-mono">example2</td>
            <td>acct02@example.com</td>
            <td>데모 사이트 002</td>
            <td class="code-mono">demo02.net</td>
            <td>SSL</td>
            <td><span class="badge text-bg-danger">실패</span></td>
            <td>2026-02-08</td>
            <td>2026-05-08</td>
            <td>
              <button
                type="button"
                class="btn btn-outline-danger btn-sm js-open-error"
                data-bs-toggle="modal"
                data-bs-target="#errorLogModal"
                data-title="example2 / demo02.net (SSL)"
                data-error="E_SSL_RENEW_FAIL
- provider: acme
- message: DNS TXT record not found
- detail: _acme-challenge.demo02.net
- action: add TXT record, wait for propagation, retry"
              >에러로그</button>
            </td>
          </tr>

<tr>
            <td class="fw-semibold">1</td>
            <td class="code-mono">example1</td>
            <td>acct01@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td class="code-mono">demo01.co.kr</td>
            <td>도메인</td>
            <td><span class="badge text-bg-success">성공</span></td>
            <td>2026-02-07</td>
            <td>2027-02-07</td>
            <td class="text-muted">-</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 class="modal fade" id="errorLogModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <div class="fw-semibold">에러로그</div>
          <div class="text-muted small" id="errTitle">-</div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="err-box" id="errBody">-</div>
        <div class="text-muted small mt-2">* 프로토타입: 실제 로그/추적 기능은 포함하지 않습니다.</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">닫기</button>
      </div>
    </div>
  </div>
</div>

document.addEventListener("click", function(e){
      var btn = e.target.closest(".js-open-error");
      if (!btn) return;

var d = btn.dataset || {};
      setText("errTitle", d.title);
      setText("errBody", d.error);
    }, false);
  })();
</script>

간단 소스 편집기