dbx-main/app/modules/cafe24/templates/cafe24/_editor.html

{# 오른쪽 편집기 조각.
   전체 페이지(products.html)가 include 하고, JS 가 /products/{no}/pane 으로
   같은 조각만 다시 받아 끼워 넣는다. 그래서 여기에는 <script> 를 두지 않는다
   (innerHTML 로 삽입된 script 는 실행되지 않는다 — JS 는 products.html 에 있고
   삽입 후 cf24BindEditor() 로 다시 연결한다). #}

{% if editor_error %}
<div class="cf24-flash cf24-flash-err">
  카페24 조회에 실패했습니다: {{ editor_error }}<br />
  <a href="/cafe24/system">시스템 화면에서 연결 상태를 확인하세요.</a>
</div>
{% endif %}

<div class="cf24-editor-head">
  <div>
    <h3 class="cf24-editor-title">{{ info.product_name or '상품' }}</h3>
    <p class="cf24-editor-sub">
      상품번호 {{ product_no }}
      {% if info.product_code %}· <code>{{ info.product_code }}</code>{% endif %}
      {% if info.price %}· {{ info.price }}{% endif %}
      {% if info.updated_date %}· 최근 수정 {{ info.updated_date }}{% endif %}
    </p>
  </div>
  <div class="cf24-editor-badges">
    {% if info.display %}<span class="erp-badge cf24-badge-ok">진열</span>
    {% else %}<span class="erp-badge cf24-badge-off">미진열</span>{% endif %}
    {% if info.selling %}<span class="erp-badge cf24-badge-ok">판매</span>
    {% else %}<span class="erp-badge cf24-badge-off">중지</span>{% endif %}
  </div>
</div>

{# 고객이 보는 상세페이지 주소. readonly input 이라 기존 복사 버튼(data-copy)이
   그대로 동작한다(값을 box.value 로 읽는다). #}
{% if product_url %}
<div class="cf24-url-row">
  <input class="cf24-url" id="cf24-url" type="text" readonly value="{{ product_url }}"
         onclick="this.select();" aria-label="상품 상세페이지 주소" />
  <button class="erp-btn erp-btn-outline" type="button" data-copy="cf24-url">주소 복사</button>
  <a class="erp-btn erp-btn-outline" href="{{ product_url }}"
     target="_blank" rel="noopener noreferrer">쇼핑몰에서 열기</a>
</div>
{% endif %}

{% if desc %}
<form class="cf24-editor-form" method="post"
      action="/cafe24/products/{{ product_no }}/apply"
      data-confirm="카페24 쇼핑몰에 바로 반영됩니다. 적용할까요?&#10;&#10;직전 내용은 자동으로 백업되어 되돌릴 수 있습니다.">
  <input type="hidden" name="base_fingerprint" value="{{ fingerprint }}" />
  <input type="hidden" name="list_query" value="{{ list_query }}" />

  <div class="cf24-editor-bar">
    <span class="cf24-muted">상세설명 HTML · {{ desc.description | length }}자 · PC/모바일 공통</span>
    <span class="cf24-editor-bar-right">
      <input class="cf24-memo" type="text" name="memo" maxlength="200"
             placeholder="변경 메모 (버전 이력에 남습니다)" />
      <button class="erp-btn erp-btn-outline" type="button" data-copy="cf24-html-pc">복사</button>
      <button class="erp-btn erp-btn-outline" type="button"
              data-reload="{{ product_no }}"
              title="카페24에서 현재 소스를 다시 읽어옵니다. 카페24 관리자에서 방금 고쳤다면 이걸 누르세요.">다시 읽기</button>
      <button class="erp-btn erp-btn-primary" type="submit">카페24에 적용</button>
    </span>
  </div>

  {# 색칠된 <pre> 위에 투명한 <textarea> 를 겹쳐 문법 강조를 만든다.
     <pre> 가 크기를 정하고 <textarea> 는 inset:0 으로 그 위를 정확히 덮는다.
     줄바꿈을 하지 않고(wrap=off) 가로로 스크롤하므로 줄 번호가 항상 맞는다.
     두 요소의 폰트·여백이 다르면 글자가 어긋난다 — CSS 에서 함께 관리한다. #}
  <div class="cf24-code" id="cf24-code-pc">
    <div class="cf24-gutter" aria-hidden="true"><div class="cf24-gutter-inner" id="cf24-gutter-pc"></div></div>
    <div class="cf24-code-body">
      <pre class="cf24-code-hl" id="cf24-hl-pc" aria-hidden="true"></pre>
      <textarea id="cf24-html-pc" class="cf24-code-input" name="html" wrap="off"
                spellcheck="false" autocapitalize="off" autocorrect="off">{{ html_pc }}</textarea>
    </div>
  </div>
</form>

{# 예약 — 적용 폼과 형제로 둔다(폼 중첩은 불가). 위 편집기 내용을 JS 가 hidden 에
   복사해 함께 보낸다. 등록 시점 내용이 DRAFT 버전으로 고정되므로, 이후 편집기를
   더 고쳐도 예약된 내용은 바뀌지 않는다. #}
<details class="cf24-details">
  <summary>예약 적용 — 지정한 시각에 자동 반영</summary>
  <form class="cf24-schedule-form" id="cf24-schedule-form" method="post"
        action="/cafe24/schedules"
        data-confirm="지정한 시각에 자동으로 반영됩니다. 예약을 등록할까요?">
    <input type="hidden" name="product_no" value="{{ product_no }}" />
    <input type="hidden" name="list_query" value="{{ list_query }}" />
    <input type="hidden" name="html" id="cf24-schedule-html" />

    <div class="cf24-schedule-grid">
      <label class="cf24-schedule-datetime">
        <span>예약 시각</span>
        <input class="cf24-schedule-input" type="datetime-local" name="scheduled_at" required />
      </label>
      <label>
        <span>진열</span>
        <select class="cf24-schedule-input" name="set_display">
          <option value="">변경 없음</option>
          <option value="on">진열</option>
          <option value="off">미진열</option>
        </select>
      </label>
      <label>
        <span>판매</span>
        <select class="cf24-schedule-input" name="set_selling">
          <option value="">변경 없음</option>
          <option value="on">판매</option>
          <option value="off">중지</option>
        </select>
      </label>
      <label class="cf24-schedule-wide">
        <span>메모</span>
        <input class="cf24-schedule-input" type="text" name="memo" maxlength="200"
               placeholder="예: 8월 프로모션 시작" />
      </label>
    </div>

    <div class="cf24-toolbar" style="margin-top:8px;">
      <label class="cf24-check-inline" style="margin-left:0;">
        <input type="checkbox" name="apply_html" value="1" checked />
        위 편집기 내용을 그 시각에 적용
      </label>
      <button class="erp-btn erp-btn-primary" type="submit">예약 등록</button>
      <a class="erp-btn erp-btn-outline" href="/cafe24/schedules">예약 목록</a>
    </div>
    <p class="cf24-muted" style="margin:8px 0 0;">
      진열·판매만 바꾸려면 위 체크를 해제하세요. 셋 중 하나 이상은 선택해야 합니다.
    </p>
  </form>
</details>

<details class="cf24-details">
  <summary>버전 이력 {% if revisions %}({{ revisions | length }}건){% endif %}</summary>
  {% if revisions %}
  <div class="cf24-scroll">
    <table class="erp-table cf24-compact">
      <thead>
        <tr><th>시각</th><th>유형</th><th>길이</th><th>작업자</th><th>메모</th></tr>
      </thead>
      <tbody>
        {% for rev in revisions %}
        <tr>
          <td class="cf24-nowrap">{{ rev.created_at }}</td>
          <td class="cf24-nowrap"><code>{{ rev.revision_type }}</code></td>
          <td class="cf24-nowrap">{{ rev.html_length }}자</td>
          <td class="cf24-nowrap">{{ rev.created_by or '—' }}</td>
          <td>{{ rev.memo or '' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <p class="cf24-muted">버전 선택 복원은 Phase 6 에서 붙습니다. 내용은 모두 보관됩니다.</p>
  {% else %}
  <p class="cf24-muted">아직 이 상품의 변경 이력이 없습니다.</p>
  {% endif %}
</details>
{% endif %}