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; }

.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; }
</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_name">계정 타이틀</option>
              <option value="account_id">계정 아이디</option>
	      <option value="email">이메일</option>
              <option value="domain">도메인</option>
              <option value="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="chk-row" data-group="account_type">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="acct_all" checked>
              <label class="form-check-label" for="acct_all">전체</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="acct_ops" checked>
              <label class="form-check-label" for="acct_ops">운영</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="acct_test" checked>
              <label class="form-check-label" for="acct_test">테스트</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="acct_demo" checked>
              <label class="form-check-label" for="acct_demo">데모</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_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_exp" checked>
              <label class="form-check-label" for="st_exp">만료</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="st_stop" checked>
              <label class="form-check-label" for="st_stop">정지</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="st_del" checked>
              <label class="form-check-label" for="st_del">삭제</label>
            </div>
          </div>
        </div>
      </div>

<div class="filter-rowline">
        <div class="filter-label">도메인</div>
        <div class="filter-input">
          <div class="chk-row" data-group="domain">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="dm_none" checked>
              <label class="form-check-label" for="dm_none">미적용</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="dm_custom" checked>
              <label class="form-check-label" for="dm_custom">소유도메인</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="dm_free" checked>
              <label class="form-check-label" for="dm_free">무료도메인</label>
            </div>
          </div>
        </div>
      </div>

<div class="filter-rowline">
        <div class="filter-label">언어</div>
        <div class="filter-input">
          <div class="chk-row" data-group="lang">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="lg_ko" checked>
              <label class="form-check-label" for="lg_ko">한국어</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="lg_en" checked>
              <label class="form-check-label" for="lg_en">English</label>
            </div>
          </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="dateType">
              <option value="expire">만료일</option>
              <option value="created">신청일</option>
            </select>
            <input type="date" class="form-control" style="max-width:200px;" id="dateFrom" />
            <div class="d-flex align-items-center text-muted">~</div>
            <input type="date" class="form-control" style="max-width:200px;" id="dateTo" /> * 기본값은 빈 값입니다.
          </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" id="sortField" style="max-width:260px;">
              <option value="created">신청일</option>
              <option value="expire">만료일</option>
              <option value="members">회원수</option>
              
            </select>
            <select class="form-select" style="max-width:180px;" id="sortDir">
              <option value="asc">오름차순</option>
              <option value="desc" selected>내림차순</option>
            </select>
          </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">230</span>건 / 총 <span class="fw-semibold">1,500</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>

<tbody class="text-center">
          
      
          <tr>
            <td class="fw-semibold">5</td>
            <td>test5</td>
            <td>user05@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td>정현우</td>
            <td>010-2305-1185</td>
            <td><span class="badge text-bg-light">테스트</span></td>
            <td>2025-06-06</td>
            <td>2026-09-13</td>
            <td class="text-end">235</td>
            <td><span class="badge badge-soft" title="도메인: hyunwoo-lms.kr">소유</span></td>
            <td>삭제</td>
            <td><button type="button" class="btn btn-outline-secondary btn-sm" onclick="openPaidMemoLayer()">Memo</button></td>
            <td><a class="btn btn-outline-primary btn-sm" href="app.php?p=page/account/free_account_view_tab.html">상세</a></td>
            <td><a class="btn btn-primary btn-sm" href="https://admin-creatorlms.pages.dev/admin/" target="_blank" rel="noopener">로그인</a></td>
          </tr>

<tr>
            <td class="fw-semibold">4</td>
            <td>test4</td>
            <td>user04@example.com</td>
            <td>반응형 테스트 사이트</td>
            <td>최유진</td>
            <td>010-2304-1148</td>
            <td><span class="badge text-bg-light">운영</span></td>
            <td>2025-05-05</td>
            <td>2026-08-12</td>
            <td class="text-end">198</td>
            <td><span class="badge badge-soft" title="도메인: yujin-study.com">소유</span></td>
            <td>정상</td>
            <td><button type="button" class="btn btn-outline-secondary btn-sm" onclick="openPaidMemoLayer()">Memo</button></td>
            <td><a class="btn btn-outline-primary btn-sm" href="app.php?p=page/account/free_account_view_tab.html">상세</a></td>
            <td><a class="btn btn-primary btn-sm" href="https://admin-creatorlms.pages.dev/admin/" target="_blank" rel="noopener">로그인</a></td>
          </tr>

<tr>
            <td class="fw-semibold">3</td>
            <td>test3</td>
            <td>user03@example.com</td>
            <td>데모 사이트 001</td>
            <td>박지훈</td>
            <td>010-2303-1111</td>
            <td><span class="badge text-bg-light">데모</span></td>
            <td>2025-04-04</td>
            <td>2026-07-11</td>
            <td class="text-end">161</td>
            <td><span class="badge text-bg-light">미적용</span></td>
            <td>만료</td>
            <td><button type="button" class="btn btn-outline-secondary btn-sm" onclick="openPaidMemoLayer()">Memo</button></td>
            <td><a class="btn btn-outline-primary btn-sm" href="app.php?p=page/account/free_account_view_tab.html">상세</a></td>
            <td><a class="btn btn-primary btn-sm" href="https://admin-creatorlms.pages.dev/admin/" target="_blank" rel="noopener">로그인</a></td>
          </tr>

<tr>
            <td class="fw-semibold">2</td>
            <td>test2</td>
            <td>user02@example.com</td>
            <td>데모 사이트 002</td>
            <td>이서연</td>
            <td>010-2302-1074</td>
            <td><span class="badge text-bg-light">테스트</span></td>
            <td>2025-03-03</td>
            <td>2026-06-10</td>
            <td class="text-end">124</td>
            <td><span class="badge badge-soft" title="도메인: seoyeon-academy.kr">무료</span></td>
            <td>정지</td>
            <td><button type="button" class="btn btn-outline-secondary btn-sm" onclick="openPaidMemoLayer()">Memo</button></td>
            <td><a class="btn btn-outline-primary btn-sm" href="app.php?p=page/account/free_account_view_tab.html">상세</a></td>
            <td><a class="btn btn-primary btn-sm" href="https://admin-creatorlms.pages.dev/admin/" target="_blank" rel="noopener">로그인</a></td>
          </tr>

<tr>
            <td class="fw-semibold">1</td>
            <td>test1</td>
            <td>user01@example.com</td>
            <td>데모 사이트 003</td>
            <td>김민수</td>
            <td>010-2301-1037</td>
            <td><span class="badge text-bg-light">운영</span></td>
            <td>2025-02-02</td>
            <td>2026-05-09</td>
            <td class="text-end">87</td>
            <td><span class="badge badge-soft" title="도메인: minsoo-class.com">무료</span></td>
            <td>삭제</td>
            <td><button type="button" class="btn btn-outline-secondary btn-sm" onclick="openPaidMemoLayer()">Memo</button></td>
            <td><a class="btn btn-outline-primary btn-sm" href="app.php?p=page/account/free_account_view_tab.html">상세</a></td>
            <td><a class="btn btn-primary btn-sm" href="https://admin-creatorlms.pages.dev/admin/" target="_blank" rel="noopener">로그인</a></td>
          </tr>
        </tbody>
      </table>
    </div>

<style>
  /* 최소 모달 스타일(프로토타입용) */
  .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="memo-item">
          <div class="d-flex align-items-start justify-content-between gap-2">
            <div>
              <div class="fw-semibold">결제 확인 완료 및 도메인 연결 안내 발송</div>
              <div class="memo-meta">2026-02-21 14:10 · 관리자 홍길동</div>
            </div>
            <div class="d-flex gap-2 flex-shrink-0">
              <a class="btn btn-outline-secondary btn-sm" href="#">수정</a>
              <a class="btn btn-outline-danger btn-sm" href="#">삭제</a>
            </div>
          </div>
        </div>

<div class="memo-item">
          <div class="d-flex align-items-start justify-content-between gap-2">
            <div>
              <div class="fw-semibold">상품 변경 문의 접수 (Starter → Growth 검토)</div>
              <div class="memo-meta">2026-02-12 10:05 · 관리자 오세훈</div>
            </div>
            <div class="d-flex gap-2 flex-shrink-0">
              <a class="btn btn-outline-secondary btn-sm" href="#">수정</a>
              <a class="btn btn-outline-danger btn-sm" href="#">삭제</a>
            </div>
          </div>
        </div>

</div>

<div class="border-top pt-3 mt-3">
        <div class="mb-2 fw-semibold">메모 추가</div>
        <textarea class="form-control" rows="3" placeholder="관리자 메모를 입력하세요 (작성자/일시는 저장 시 자동)"></textarea>
        <div class="border-top pt-3 mt-3 d-flex justify-content-center gap-2">
          <button class="btn btn-primary" type="button">등록</button>
        </div>
        <div class="form-text">* 프로토타입: 실제 저장 동작은 없습니다.</div>
      </div>
    </div>
  </div>
</div>

간단 소스 편집기