CreatorLMS Editor

<style>
  /* paid_account_view 전용 최소 CSS (Bootstrap 5 위에 얹기) */
  .kv-list{ display:flex; flex-direction:column; gap:.55rem; }
  .kv-row{ display:flex; align-items:flex-start; gap:12px; }
  .kv-label{
    width:160px;
    font-weight:600;
    color:#374151;
    white-space:nowrap;
    padding-top:6px;
  }
  .kv-sep{
    width:1px;
    background:rgba(0,0,0,.08);
    margin-top:4px;
    margin-bottom:4px;
  }
  .kv-value{ flex:1; min-width:0; padding-top:4px; }
  .kv-actions{ display:inline-flex; gap:.4rem; flex-wrap:wrap; margin-left:.5rem; }

.table-mini thead th{ font-size:.85rem; }
  .table-mini td{ vertical-align:middle; }

.memo-item{
    padding:12px 12px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:.75rem;
    background:#fff;
  }
  .memo-meta{ color:#6b7280; font-size:.85rem; }
</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 class="d-flex gap-2">
    <a class="btn btn-outline-secondary btn-sm" href="app.php?p=page/account/paid_account_list.html">목록으로</a>
  </div>
</div>

<div class="col-12 col-xl-6">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <div class="fw-semibold">계정 사용자 정보</div>
        <a class="btn btn-outline-primary btn-sm" href="#">정보수정</a>
      </div>
      <div class="card-body">
        <div class="kv-list">
          <div class="kv-row">
            <div class="kv-label">계정 ID(도메인)</div><div class="kv-sep"></div>
            <div class="kv-value">min_eng.creatorlms.com</div>
          </div>
          <div class="kv-row">
            <div class="kv-label">계정 타이틀</div><div class="kv-sep"></div>
            <div class="kv-value">김민수 영어학원 ABC 클래스</div>
          </div>
          <div class="kv-row">
            <div class="kv-label">사용자명</div><div class="kv-sep"></div>
            <div class="kv-value">김민수</div>
          </div>
          <div class="kv-row">
            <div class="kv-label">이메일</div><div class="kv-sep"></div>
            <div class="kv-value">user01@example.com</div>
          </div>
          <div class="kv-row">
            <div class="kv-label">전화번호</div><div class="kv-sep"></div>
            <div class="kv-value">010-2301-1037</div>
          </div>
          <div class="kv-row">
            <div class="kv-label">가입 채널</div><div class="kv-sep"></div>
            <div class="kv-value">네이버 검색</div>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="col-12 col-xl-6">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <div class="fw-semibold">서비스 정보</div>
        <div class="d-flex gap-2">
                <a class="btn btn-outline-secondary btn-sm" href="#">상품 변경</a>
                <a class="btn btn-outline-secondary btn-sm" href="#">만료일  변경</a>
                <a class="btn btn-outline-secondary btn-sm" href="#">운영상태 변경</a>
                <a class="btn btn-outline-secondary btn-sm" href="#">도메인 세팅</a>
                <a class="btn btn-outline-secondary btn-sm" href="#">계정옵션 변경</a>
        </div>
      </div>
      <div class="card-body">
        <div class="kv-list">
          <div class="kv-row">
            <div class="kv-label">서비스 상품</div><div class="kv-sep"></div>
            <div class="kv-value">
              <span class="badge text-bg-light">Growth</span>
              <span class="kv-actions">
                <a class="btn btn-outline-secondary btn-sm" href="#">상품변경 로그</a>
              </span>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">도메인</div><div class="kv-sep"></div>
            <div class="kv-value">
              naver.com
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">잔여 포인트</div><div class="kv-sep"></div>
            <div class="kv-value">
              <span class="fw-semibold">20,550</span> point
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">계정 옵션</div><div class="kv-sep"></div>
            <div class="kv-value">
                    게시판 생성 기능 <span class="badge badge-soft">ON</span>
                    <br>
                    정산 기능 <span class="badge badge-soft">OFF</span>
                    <br>
                    중앙 약관 동의 <span class="badge badge-soft">ON</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="col-12 col-xl-6">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <div class="fw-semibold">결제 내역</div>
        <a class="btn btn-outline-secondary btn-sm" href="#">상세보기</a>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0 table-mini">
            <thead>
              <tr class="text-muted">
                <th style="width:70px;">번호</th>
                <th style="width:160px;">결제시각</th>
                <th style="width:140px;">결제액</th>
                <th>결제내역</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="fw-semibold">5</td>
                <td>2026-02-21 13:02</td>
                <td class="text-end">₩55,000</td>
                <td>Growth 월구독 결제</td>
              </tr>
              <tr>
                <td class="fw-semibold">4</td>
                <td>2026-01-21 13:05</td>
                <td class="text-end">₩55,000</td>
                <td>Growth 월구독 결제</td>
              </tr>
              <tr>
                <td class="fw-semibold">3</td>
                <td>2025-12-21 13:01</td>
                <td class="text-end">₩55,000</td>
                <td>Growth 월구독 결제</td>
              </tr>
              <tr>
                <td class="fw-semibold">2</td>
                <td>2025-11-21 13:03</td>
                <td class="text-end">₩55,000</td>
                <td>Growth 월구독 결제</td>
              </tr>
              <tr>
                <td class="fw-semibold">1</td>
                <td>2025-10-21 13:02</td>
                <td class="text-end">₩55,000</td>
                <td>Growth 월구독 결제</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

<div class="col-12 col-xl-6">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <div class="fw-semibold">포인트 사용 내역</div>
        <a class="btn btn-outline-secondary btn-sm" href="#">상세보기</a>
      </div>
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-2">
          <div class="text-muted">잔여포인트</div>
          <div class="fw-semibold">20,550 point</div>
        </div>

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

<div class="col-12 col-xl-6">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <div class="fw-semibold">1:1 상담 내역</div>
        <a class="btn btn-outline-secondary btn-sm" href="#">상세보기</a>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0 table-mini">
            <thead>
              <tr class="text-muted">
                <th style="width:70px;">번호</th>
                <th style="width:160px;">등록일</th>
                <th>답변여부</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="fw-semibold">5</td>
                <td>2026-02-20</td>
                <td><span class="badge badge-soft">답변완료</span></td>
              </tr>
              <tr>
                <td class="fw-semibold">4</td>
                <td>2026-02-18</td>
                <td><span class="badge text-bg-light">대기</span></td>
              </tr>
              <tr>
                <td class="fw-semibold">3</td>
                <td>2026-02-15</td>
                <td><span class="badge badge-soft">답변완료</span></td>
              </tr>
              <tr>
                <td class="fw-semibold">2</td>
                <td>2026-02-11</td>
                <td><span class="badge text-bg-light">대기</span></td>
              </tr>
              <tr>
                <td class="fw-semibold">1</td>
                <td>2026-02-03</td>
                <td><span class="badge badge-soft">답변완료</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </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 class="border-top pt-3">
          <div class="mb-2 fw-semibold">메모 추가</div>
          <textarea class="form-control" rows="3" placeholder="관리자 메모를 입력하세요 (작성자/일시는 저장 시 자동)"></textarea>
          <div class="d-flex justify-content-end mt-2">
            <button class="btn btn-primary" type="button">등록</button>
          </div>
          <div class="form-text">* 프로토타입: 실제 저장 동작은 없습니다.</div>
        </div>

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

</div>

간단 소스 편집기