king/dbx-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cafe24): 일괄수정 — 상세페이지 <style> 블록 통일

Browse Source 
87개 상품의 상세설명 맨 위 <style> 을 정해진 내용으로 바꾸는 화면을 추가했다.

    <style>
    	div {
    		text-align: center;
    	}
    </style>

그냥 덮어쓰지 않고 검사 → 선택 → 적용 2단계로 만들었다. 상품 131번의 style 안에는
"비디오 태그 모바일 반응형 스타일" 같은 CSS 가 들어 있어서, 무엇이 지워지는지 보지
않고 87건을 일괄 실행하면 필요한 규칙이 조용히 사라진다. 검사 결과 표에 지금 들어
있는 CSS 를 그대로 보여주고, 변경이 필요한 상품만 자동 선택한다(이미 같은 내용이면
「이미 동일」로 제외).

맨 앞 <style> 블록 하나만 바꾼다. 아래쪽에 <style> 이 더 있으면 건드리지 않고
「블록 2개 · 주의」로 표시해 사람이 판단하게 한다 — 일괄 작업이 남의 CSS 를 조용히
지우는 것이 가장 위험하다. 블록이 없는 상품은 맨 앞에 넣는다.

상품 1건당 1요청으로 쪼갰다. 87건을 한 요청으로 묶으면 1분 가까이 걸려 프록시
타임아웃에 걸리고, 동시에 던지면 카페24 호출 제한(429)에 걸린다. 브라우저가 순차
호출하며 진행률을 보여주고, 한 건 실패가 나머지를 막지 않으며 어디까지 됐는지
화면에 남는다.

적용 순서는 단건 편집과 같은 원칙을 지킨다: 카페24 현재값 재조회 → BACKUP 버전 →
교체 → PUT → MANUAL 버전 + 감사로그(action=bulk_style). 검사 때 읽은 값을 재사용하지
않고 쓰기 직전에 다시 읽는다. PC/모바일 분리 상품은 모바일도 함께 바꾼다.

검증: 유닛테스트 51개 통과(신규 6개 — 앞 블록만 교체하고 뒤 블록 보존, 없을 때 삽입,
멱등, 포맷 후 탭 유지, 여러 줄 원문 정확히 절단). 실제 데이터로 미리보기 로직 확인:
비디오 CSS 가 "지워질 내용"에 잡히고, 이미 동일한 상품은 will_change=False,
style 없는 상품은 삽입 대상으로 판정. 라우트 13개 등록, 템플릿 렌더 확인.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-08-14 14:12:24 +09:00
parent 25ed369583
commit 3522fc2119
7 changed files with 502 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/cafe24/templates/cafe24/_nav.html
+3 -1
View File
@@ -1,7 +1,9 @@
{# 카페24 모듈 공용 상단 탭. active_tab: products | schedules | system #}
{# 카페24 모듈 공용 상단 탭. active_tab: products | bulk | schedules | system #}
<div class="erp-page-actions" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
<a class="erp-btn {% if active_tab=='products' %}erp-btn-primary{% else %}erp-btn-outline{% endif %}"
href="/cafe24/">상품관리</a>
<a class="erp-btn {% if active_tab=='bulk' %}erp-btn-primary{% else %}erp-btn-outline{% endif %}"
href="/cafe24/bulk">일괄수정</a>
<a class="erp-btn {% if active_tab=='schedules' %}erp-btn-primary{% else %}erp-btn-outline{% endif %}"
href="/cafe24/schedules">예약관리</a>
<a class="erp-btn {% if active_tab=='system' %}erp-btn-primary{% else %}erp-btn-outline{% endif %}"
app/modules/cafe24/templates/cafe24/bulk.html
+192
View File
@@ -0,0 +1,192 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/cafe24.css?v=20260814i" />
{% endblock %}
{% block content %}
{% include "cafe24/_nav.html" %}
{% if error %}
<div class="cf24-flash cf24-flash-err">
카페24 조회에 실패했습니다: {{ error }}<br />
<a href="/cafe24/system">시스템 화면에서 연결 상태를 확인하세요.</a>
</div>
{% endif %}
<div class="erp-card cf24-card">
<div class="cf24-card-head">
<h3>상세페이지 &lt;style&gt; 블록 통일</h3>
<span class="cf24-muted">전체 {{ total }}건</span>
</div>
<p class="cf24-note">
각 상품 상세설명의 <strong>맨 위 <code>&lt;style&gt;</code> 블록 하나</strong>를 아래 내용으로 바꿉니다.
아래쪽에 <code>&lt;style&gt;</code> 이 더 있으면 그건 건드리지 않고 「블록 2개」로 표시합니다.<br />
<strong class="cf24-warn">지금 들어 있는 CSS 는 사라집니다.</strong>
비디오 반응형처럼 필요한 규칙이 있을 수 있으니, <strong>먼저 검사</strong>해서 무엇이 지워지는지
확인하고 상품을 골라 적용하세요. 적용 직전 내용은 상품별 <code>BACKUP</code> 버전으로 보관됩니다.
PC/모바일 분리 상품은 모바일도 함께 바꿉니다.
</p>
<label class="cf24-label" for="cf24-target">교체할 내용</label>
<textarea id="cf24-target" class="cf24-html" rows="6" readonly>{{ target_style }}</textarea>
<div class="cf24-toolbar" style="margin-top:12px;">
<button class="erp-btn erp-btn-primary" type="button" id="cf24-scan">1. 전체 검사</button>
<button class="erp-btn erp-btn-outline" type="button" id="cf24-apply" disabled>2. 선택한 상품에 적용</button>
<span class="cf24-muted" id="cf24-progress">검사를 먼저 실행하세요.</span>
</div>
</div>
<div class="erp-card cf24-card">
<div class="cf24-card-head">
<h3>검사 결과</h3>
<span class="cf24-muted">변경이 필요한 상품만 자동 선택됩니다</span>
</div>
<div class="cf24-scroll">
<table class="erp-table cf24-compact" id="cf24-bulk-table">
<thead>
<tr>
<th style="width:34px;"><input type="checkbox" id="cf24-check-all" /></th>
<th style="width:60px;">번호</th>
<th>상품명</th>
<th style="width:70px;">style</th>
<th>현재 내용 (지워질 부분)</th>
<th style="width:90px;">상태</th>
</tr>
</thead>
<tbody>
{% for r in rows %}
<tr data-no="{{ r.product_no }}">
<td><input type="checkbox" class="cf24-pick" disabled /></td>
<td class="cf24-nowrap">{{ r.product_no }}</td>
<td>{{ r.product_name }}</td>
<td class="cf24-nowrap cf24-cell-count">—</td>
<td class="cf24-cell-current"><span class="cf24-muted">검사 전</span></td>
<td class="cf24-nowrap cf24-cell-state"><span class="cf24-muted">대기</span></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
(function () {
var rows = Array.prototype.slice.call(document.querySelectorAll("#cf24-bulk-table tbody tr"));
var scanBtn = document.getElementById("cf24-scan");
var applyBtn = document.getElementById("cf24-apply");
var progress = document.getElementById("cf24-progress");
var checkAll = document.getElementById("cf24-check-all");
function cell(tr, name) { return tr.querySelector(".cf24-cell-" + name); }
function setState(tr, text, cls) {
cell(tr, "state").innerHTML = '<span class="' + (cls || "cf24-muted") + '">' + text + "</span>";
}
// 한 건씩 순차 호출한다 — 87건을 한 요청으로 묶으면 프록시 타임아웃에 걸리고,
// 동시에 던지면 카페24 호출 제한(429)에 걸린다.
function walk(list, step, done) {
var i = 0;
(function next() {
if (i >= list.length) { done(); return; }
var tr = list[i++];
step(tr, function () {
progress.textContent = i + " / " + list.length;
next();
});
})();
}
scanBtn.addEventListener("click", function () {
scanBtn.disabled = true;
applyBtn.disabled = true;
progress.textContent = "검사 중… 0 / " + rows.length;
walk(rows, function (tr, next) {
setState(tr, "검사 중…");
fetch("/cafe24/bulk/scan/" + tr.dataset.no, { credentials: "same-origin" })
.then(function (res) { return res.ok ? res.json() : Promise.reject(res); })
.then(function (data) {
var pick = tr.querySelector(".cf24-pick");
cell(tr, "count").textContent = data.pc.style_count + "개";
if (data.pc.style_count > 1) {
cell(tr, "count").innerHTML += ' <span class="cf24-warn">주의</span>';
}
var current = data.pc.current_style || "";
cell(tr, "current").innerHTML = current
? "<code>" + current.replace(/[&<>]/g, function (c) {
return c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;";
}).slice(0, 400) + "</code>"
: '<span class="cf24-muted">없음 (새로 넣습니다)</span>';
pick.disabled = !data.will_change;
pick.checked = data.will_change;
if (data.pc.already_target && !data.will_change) setState(tr, "이미 동일", "cf24-muted");
else setState(tr, "변경 필요", "cf24-warn");
if (data.separated_mobile) {
cell(tr, "count").innerHTML += ' <span class="cf24-muted">/ 모바일분리</span>';
}
next();
})
.catch(function (res) {
setState(tr, "검사 실패", "cf24-err");
if (res && res.status === 401) window.location.href = "/login";
next();
});
}, function () {
scanBtn.disabled = false;
applyBtn.disabled = false;
var picked = rows.filter(function (tr) { return tr.querySelector(".cf24-pick").checked; }).length;
progress.textContent = "검사 완료 — 변경 필요 " + picked + "건 선택됨";
});
});
checkAll.addEventListener("change", function () {
rows.forEach(function (tr) {
var pick = tr.querySelector(".cf24-pick");
if (!pick.disabled) pick.checked = checkAll.checked;
});
});
applyBtn.addEventListener("click", function () {
var picked = rows.filter(function (tr) { return tr.querySelector(".cf24-pick").checked; });
if (!picked.length) { window.alert("선택된 상품이 없습니다."); return; }
if (!window.confirm(picked.length + "개 상품의 상세페이지에 바로 반영됩니다.\n\n" +
"지금 들어 있는 <style> 내용은 사라집니다(상품별 BACKUP 버전으로 보관).\n계속할까요?")) return;
scanBtn.disabled = true;
applyBtn.disabled = true;
progress.textContent = "적용 중… 0 / " + picked.length;
var ok = 0, fail = 0, skip = 0;
walk(picked, function (tr, next) {
setState(tr, "적용 중…");
fetch("/cafe24/bulk/apply/" + tr.dataset.no, { method: "POST", credentials: "same-origin" })
.then(function (res) {
return res.json().then(function (body) {
if (!res.ok) return Promise.reject(body);
return body;
});
})
.then(function (data) {
if (data.result === "SKIPPED") { skip++; setState(tr, "변경 없음", "cf24-muted"); }
else { ok++; setState(tr, "완료", "cf24-badge-ok"); tr.querySelector(".cf24-pick").checked = false; }
next();
})
.catch(function (body) {
fail++;
setState(tr, "실패", "cf24-err");
if (body && body.detail) cell(tr, "current").innerHTML =
'<span class="cf24-err">' + String(body.detail).slice(0, 200) + "</span>";
next();
});
}, function () {
scanBtn.disabled = false;
applyBtn.disabled = false;
progress.textContent = "적용 완료 — 성공 " + ok + " / 변경없음 " + skip + " / 실패 " + fail;
});
});
})();
</script>
{% endblock %}