feat(cafe24): PC/모바일 상품상세 템플릿 편집 추가, 디자인파일 편집기 통합

- 상단 탭에 "PC 상품상세"(/sde_design/skin11/product/detail.html), "모바일
  상품상세"(/sde_design/mobile11/product/detail.html) 버튼 추가. 모바일
  스와이프와 마찬가지로 상품 API가 아닌 디자인 보관함 FTP 파일이며, 상세페이지
  편집기와 완전히 같은 문법강조·색상·단축키를 그대로 재사용.
- 세 파일(swiper/mobile_detail/pc_detail)이 화면·로직 100% 동일해 라우터를
  routes_swiper.py → routes_design_files.py 로 일반화(/cafe24/design/{file_key}
  하나로 공유). 템플릿도 swiper.html → design_editor.html 로 통합.
  db.py 의 add_swiper_revision/list_swiper_revisions 도 file_key 를 받는
  add_design_revision/list_design_revisions 로 일반화(테이블은 처음부터
  file_key 컬럼으로 여러 파일을 담게 설계돼 있어 마이그레이션 불필요).
- PC/모바일 상품상세는 상품 1건이 아니라 전체 상품 페이지가 공유하는
  템플릿이라 적용 확인 문구에 별도 경고 추가.
- 신규 env: CAFE24_MOBILE_DETAIL_FTP_PATH, CAFE24_PC_DETAIL_FTP_PATH
  (FTP 호스트/계정은 기존 CAFE24_FTP_* 공유). .env.example·문서 갱신.
- 유닛테스트 갱신/추가: DESIGN_FILE_SPECS 3종 등록 확인, 경로 env 오버라이드.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-15 14:50:39 +09:00
parent 93037411fb
commit 8c2a9c47e1
3 changed files with 220 additions and 175 deletions
@@ -19,14 +19,15 @@
{# 상세페이지 편집기(_editor.html)와 완전히 같은 문법강조·단축키·버튼을 쓴다.
목록/진열·판매/예약처럼 "상품" 전용인 것만 뺐다 — 이건 상품이 아니라
디자인 보관함(FTP)의 파일 1개다. #}
<section class="erp-card cf24-pane-editor" id="cf24-swiper-pane">
<p class="cf24-editor-sub"><code>{{ swiper_path }}</code></p>
디자인 보관함(FTP)의 파일 1개다(모바일 스와이프 / PC·모바일 상품상세
템플릿이 file_key 만 다르고 화면·로직은 완전히 같다). #}
<section class="erp-card cf24-pane-editor" id="cf24-design-pane">
<p class="cf24-editor-sub"><code>{{ file_path }}</code></p>
{% if not error %}
<form class="cf24-editor-form" id="cf24-swiper-form" method="post"
action="/cafe24/swiper/apply"
data-confirm="카페24 디자인 보관함(FTP)에 바로 반영됩니다. 적용할까요?&#10;&#10;직전 내용은 자동으로 백업되어 되돌릴 수 있습니다.">
<form class="cf24-editor-form" id="cf24-design-form" method="post"
action="/cafe24/design/{{ file_key }}/apply"
data-confirm="{{ apply_confirm }}">
<input type="hidden" name="base_fingerprint" value="{{ fingerprint }}" />
<div class="cf24-editor-bar">
@@ -34,20 +35,20 @@
<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-swiper-code">복사</button>
<button class="erp-btn erp-btn-outline" type="button" id="cf24-swiper-reload"
<button class="erp-btn erp-btn-outline" type="button" data-copy="cf24-design-code">복사</button>
<button class="erp-btn erp-btn-outline" type="button" id="cf24-design-reload"
title="카페24 디자인 보관함(FTP)에서 현재 파일을 다시 읽어옵니다.">다시 읽기</button>
<button class="erp-btn erp-btn-primary" type="submit">카페24에 적용</button>
</span>
</div>
{# 색칠된 <pre> 위에 투명한 <textarea> 를 겹쳐 문법 강조를 만든다 —
상세페이지 편집기와 동일한 방식(store.md 2-2 절 참고). #}
<div class="cf24-code" id="cf24-swiper-code-box">
<div class="cf24-gutter" aria-hidden="true"><div class="cf24-gutter-inner" id="cf24-swiper-gutter"></div></div>
상세페이지 편집기와 동일한 방식(docs/CAFE24_MODULE.md 2-2 절 참고). #}
<div class="cf24-code" id="cf24-design-code-box">
<div class="cf24-gutter" aria-hidden="true"><div class="cf24-gutter-inner" id="cf24-design-gutter"></div></div>
<div class="cf24-code-body">
<pre class="cf24-code-hl" id="cf24-swiper-hl" aria-hidden="true"></pre>
<textarea id="cf24-swiper-code" class="cf24-code-input" name="content" wrap="off"
<pre class="cf24-code-hl" id="cf24-design-hl" aria-hidden="true"></pre>
<textarea id="cf24-design-code" class="cf24-code-input" name="content" wrap="off"
spellcheck="false" autocapitalize="off" autocorrect="off">{{ content }}</textarea>
</div>
</div>
@@ -126,9 +127,9 @@
}
function setupCodeEditor() {
var ta = document.getElementById("cf24-swiper-code");
var hl = document.getElementById("cf24-swiper-hl");
var gutter = document.getElementById("cf24-swiper-gutter");
var ta = document.getElementById("cf24-design-code");
var hl = document.getElementById("cf24-design-hl");
var gutter = document.getElementById("cf24-design-gutter");
if (!ta || !hl) return;
var timer = null;
@@ -322,14 +323,14 @@
});
});
var reloadBtn = document.getElementById("cf24-swiper-reload");
var reloadBtn = document.getElementById("cf24-design-reload");
if (reloadBtn) {
reloadBtn.addEventListener("click", function () {
confirmLeave().then(function (ok) { if (ok) location.reload(); });
});
}
var form = document.getElementById("cf24-swiper-form");
var form = document.getElementById("cf24-design-form");
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();