feat(cafe24): 상세페이지 HTML 편집·적용 + 이미지 경로 한글 표시

1) 한글 파일명이 %EC%9A%A9… 으로 보이던 문제

카페24는 상세페이지 안 이미지 경로를 퍼센트 인코딩해서 저장한다. 화면에서는
읽을 수 없으므로 store.decode_html_urls 로 풀어 보여주고, 저장할 때
encode_html_urls 로 되돌린다. 두 함수는 서로의 역이며 왕복이 보존된다 —
편집하지 않고 적용해도 카페24 저장값이 한 바이트도 달라지지 않는다.

깨뜨리지 않기 위한 두 가지 제약을 뒀다. 디코딩은 non-ASCII(%80~%FF)만 한다.
%20·%3C 를 풀면 URL·HTML 구조가 깨진다. 인코딩은 src/href/poster/data-src 와
CSS url() 안의 값만 한다. 본문 한글 텍스트를 인코딩하면 페이지가 망가진다.
UTF-8 로 해석되지 않는 이스케이프(EUC-KR 등)는 건드리지 않고 그대로 둔다.

2) 편집 후 적용

POST /cafe24/products/{no}/apply 는 이 순서를 지킨다.
  카페24 현재값 재조회 → BACKUP revision → 지문 대조 → PUT → MANUAL revision
현재값을 다시 읽는 것은 로컬 DB 의 마지막 버전이 지금 카페24에 올라간 값이라고
믿을 수 없기 때문이다(관리자 페이지에서 직접 고쳤을 수 있다). 지문(sha256 앞
32자)은 편집 중 남이 바꾼 내용을 조용히 덮어쓰는 것을 막는 낙관적 잠금이다.

미분리 상품(separated_mobile_description='F')은 모바일 필드도 같은 HTML 로
함께 쓴다. PC 만 바꾸면 모바일 상세가 어긋난다. 분리 상품은 모바일을 건드리지
않고 화면에 별도 반영 안내를 띄운다.

빈 내용은 거부한다(상세페이지를 통째로 날리는 실수 방지). 변경이 없으면 API 를
호출하지 않는다. 실패 시에도 BACKUP 은 남아 있으므로 오류 메시지에 버전 번호를
알려준다. 편집 중 페이지 이탈 경고도 넣었다.

버전 이력 표를 상세 화면에 붙였다(목록 조회는 html_content 를 제외하고 길이만
계산한다 — 수 MB 가 될 수 있다). 버전 선택 복원은 Phase 6.

검증: 유닛테스트 30개 통과(신규 7개 — 실제 파일명으로 왕복 동일성, ASCII
이스케이프 미변환, 본문 한글 보존, CSS url(), 잘못된 UTF-8 무시, 지문).
실제 쓰기(PUT)는 서버 배포 후 테스트 상품 1건으로 확인 필요.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

app/modules/cafe24/templates/cafe24/product.html

@@ -1,12 +1,15 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/cafe24.css?v=20260814c" />
+<link rel="stylesheet" href="/static/cafe24.css?v=20260814d" />
 {% endblock %}
 
 {% block content %}
 {% include "cafe24/_nav.html" %}
 
+{% if flash %}<div class="cf24-flash cf24-flash-ok">{{ flash }}</div>{% endif %}
+{% if flash_error %}<div class="cf24-flash cf24-flash-err">{{ flash_error }}</div>{% endif %}
+
 {% if error %}
 <div class="cf24-flash cf24-flash-err">
   카페24 조회에 실패했습니다: {{ error }}<br />
@@ -44,12 +47,12 @@
   </div>
 </div>
 
-{# ── 상세설명 HTML (읽기 전용) ─────────────────────────────── #}
+{# ── 상세설명 편집 ─────────────────────────────────────────── #}
 {% if desc %}
 <div class="erp-card cf24-card">
   <div class="cf24-card-head">
-    <h3>상세페이지 HTML</h3>
-    <span class="cf24-muted">카페24 현재값 · 읽기 전용 (편집·적용은 Phase 3~4)</span>
+    <h3>상세페이지 HTML 편집</h3>
+    <span class="cf24-muted">적용하면 쇼핑몰에 바로 반영됩니다</span>
   </div>
 
   <table class="erp-table cf24-kv">
@@ -60,32 +63,80 @@
         <td>
           {{ desc.mobile_description | length }}자 ·
           {% if desc.separated_mobile %}
-          <span class="cf24-warn">PC와 분리 사용</span> — 수정 시 모바일도 따로 반영해야 합니다.
+          <span class="cf24-warn">PC와 분리 사용</span> — 아래 적용은 PC 만 바꿉니다.
+          모바일은 카페24 관리자에서 따로 반영해야 합니다.
           {% else %}
-          <span class="cf24-muted">PC와 동일 설정</span>
+          <span class="cf24-muted">PC와 동일 설정</span> — 적용 시 모바일도 같은 내용으로 함께 반영됩니다.
           {% endif %}
-          {% if desc.mobile_differs %}<span class="cf24-warn">내용 불일치</span>{% endif %}
+          {% if desc.mobile_differs %}<span class="cf24-warn">현재 내용 불일치</span>{% endif %}
         </td>
       </tr>
     </tbody>
   </table>
 
-  <label class="cf24-label" for="cf24-html-pc">PC 상세설명 HTML</label>
-  <textarea id="cf24-html-pc" class="cf24-html" rows="16" readonly spellcheck="false"
-            >{{ desc.description }}</textarea>
-  <div class="cf24-actions">
-    <button type="button" class="erp-btn erp-btn-outline" data-copy="cf24-html-pc">HTML 복사</button>
-  </div>
+  <p class="cf24-note">
+    이미지 경로의 한글 파일명은 카페24에 <code>%EC%9A%A9…</code> 형태로 저장되어 있습니다.
+    편집기에서는 읽기 쉽게 <strong>한글로 풀어서</strong> 보여주고, 적용할 때 원래 형식으로
+    되돌려 저장합니다. 경로를 직접 고칠 때도 한글로 그냥 쓰시면 됩니다.
+  </p>
+
+  <form method="post" action="/cafe24/products/{{ product_no }}/apply"
+        onsubmit="return confirm('카페24 쇼핑몰에 바로 반영됩니다. 적용할까요?\n\n직전 내용은 자동으로 백업되어 되돌릴 수 있습니다.');">
+    <input type="hidden" name="base_fingerprint" value="{{ fingerprint }}" />
+
+    <label class="cf24-label" for="cf24-html-pc">PC 상세설명 HTML</label>
+    <textarea id="cf24-html-pc" class="cf24-html" name="html" rows="22"
+              spellcheck="false">{{ html_pc }}</textarea>
+
+    <div class="cf24-toolbar" style="margin-top:12px;">
+      <input class="cf24-search" style="flex:1 1 320px;" type="text" name="memo" maxlength="200"
+             placeholder="변경 메모 (버전 이력에 남습니다 — 예: 8월 프로모션 배너 교체)" />
+      <button class="erp-btn erp-btn-primary" type="submit">카페24에 적용</button>
+      <button class="erp-btn erp-btn-outline" type="button" data-copy="cf24-html-pc">HTML 복사</button>
+      <a class="erp-btn erp-btn-outline" href="/cafe24/products/{{ product_no }}">되돌리기(새로고침)</a>
+    </div>
+  </form>
 
   {% if desc.separated_mobile or desc.mobile_differs %}
-  <label class="cf24-label" for="cf24-html-mo">모바일 상세설명 HTML</label>
-  <textarea id="cf24-html-mo" class="cf24-html" rows="16" readonly spellcheck="false"
-            >{{ desc.mobile_description }}</textarea>
+  <label class="cf24-label" for="cf24-html-mo">모바일 상세설명 HTML (읽기 전용)</label>
+  <textarea id="cf24-html-mo" class="cf24-html" rows="12" readonly spellcheck="false"
+            >{{ html_mobile }}</textarea>
   <div class="cf24-actions">
     <button type="button" class="erp-btn erp-btn-outline" data-copy="cf24-html-mo">HTML 복사</button>
   </div>
   {% endif %}
 </div>
+
+{# ── 버전 이력 ─────────────────────────────────────────────── #}
+<div class="erp-card cf24-card">
+  <div class="cf24-card-head">
+    <h3>버전 이력</h3>
+    <span class="cf24-muted">최근 20건 · 적용 직전 내용은 BACKUP 으로 자동 보관</span>
+  </div>
+  {% if revisions %}
+  <div class="cf24-scroll">
+    <table class="erp-table">
+      <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 %}
+</div>
 {% endif %}
 {% endblock %}
 
@@ -109,5 +160,21 @@
       }
     });
   });
+
+  // 편집 중 실수로 페이지를 벗어나는 것 방지.
+  (function () {
+    var box = document.getElementById("cf24-html-pc");
+    if (!box || box.readOnly) return;
+    var initial = box.value;
+    var form = box.form;
+    var submitting = false;
+    if (form) form.addEventListener("submit", function () { submitting = true; });
+    window.addEventListener("beforeunload", function (e) {
+      if (!submitting && box.value !== initial) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
+    });
+  })();
 </script>
 {% endblock %}

app/modules/cafe24/templates/cafe24/products.html

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/cafe24.css?v=20260814c" />
+<link rel="stylesheet" href="/static/cafe24.css?v=20260814d" />
 {% endblock %}
 
 {% block content %}

app/modules/cafe24/templates/cafe24/schedules.html

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/cafe24.css?v=20260814c" />
+<link rel="stylesheet" href="/static/cafe24.css?v=20260814d" />
 {% endblock %}
 
 {% block content %}

app/modules/cafe24/templates/cafe24/system.html

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/cafe24.css?v=20260814c" />
+<link rel="stylesheet" href="/static/cafe24.css?v=20260814d" />
 {% endblock %}
 
 {% block content %}