refactor(cupang): 입고센터 관리 UI 단순화

센터 목록은 이름 등록·조회·관리가 목적이므로 "사용중" 표시를 없애고
활성/비활성/삭제만 남긴다. 좌우 2단(추가 카드 360px + 900px 고정 목록)
대신 상단 추가·검색 바 + 다중 컬럼 그리드로 바꿔 29개 이상 센터를
한 화면에서 훑을 수 있게 했다.

- 행마다 폼 하나(formaction/name=active)로 저장·토글·삭제 처리
- 상태는 배지 대신 좌측 점(활성 초록 / 비활성 회색+흐리게)
- 클라이언트 검색 필터, 카운트 실시간 갱신
- 라우터에서 center_in_use 조회 제거(화면에서 미사용)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-31 11:59:44 +09:00
parent 26beab1ae7
commit 026a9ab526
9 changed files with 81 additions and 83 deletions
+1 -4
View File
@@ -418,9 +418,6 @@ async def centers_page(request: Request) -> HTMLResponse:
return guard
store, user = guard
centers = sorted(store.list_centers(include_inactive=True), key=lambda c: c["name"])
# 사용 중 여부 표시
for c in centers:
c["in_use"] = store.center_in_use(center_id=c["id"])
return render_template(
request,
"cupang/centers.html",
@@ -429,7 +426,7 @@ async def centers_page(request: Request) -> HTMLResponse:
"is_admin": is_admin(user),
"nav_items": build_erp_nav(user, active="cupang"),
"page_title": "쿠팡 밀크런 — 입고센터 관리",
"page_subtitle": "추가 · 수정 · 비활성화. 사용 중 센터는 삭제되지 않고 비활성화됩니다.",
"page_subtitle": "센터명 등록 · 수정 · 활성/비활성 · 삭제.",
"centers": centers,
},
)
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829l" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831a" />{% endblock %}
{% block content %}
<section class="cpg">
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829l" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831a" />{% endblock %}
{% block content %}
<section class="cpg">
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829l" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831a" />{% endblock %}
{% block content %}
<section class="cpg">
@@ -9,58 +9,63 @@
<a class="erp-btn erp-btn-primary" href="/cupang/">◀◀ 달력</a>
</div>
<div class="cpg-center-layout">
<div class="erp-card cpg-form-card cpg-center-card">
<!-- 왼쪽: 입고센터 추가 -->
<div class="erp-card cpg-form-card cpg-center-add">
<h2 class="cpg-center-add-title">입고센터 추가</h2>
<form method="post" action="/cupang/centers" class="cpg-inline-form">
<input class="erp-input" type="text" name="name" placeholder="센터명 (예: 대구3)" required style="flex:1 1 auto;min-width:0" />
<!-- 상단: 추가 + 검색 -->
<div class="cpg-center-bar">
<form method="post" action="/cupang/centers" class="cpg-center-addform">
<input class="erp-input cpg-center-addinput" type="text" name="name"
placeholder="센터명 입력 (예: 대구3)" required autocomplete="off" />
<button type="submit" class="erp-btn erp-btn-primary">추가</button>
</form>
<input class="erp-input cpg-center-search" type="search" id="cpgCenterSearch"
placeholder="센터 검색" autocomplete="off" />
</div>
<!-- 오른쪽: 센터 목록 (높이 900 고정, 내부 스크롤) -->
<div class="erp-card cpg-form-card cpg-center-listcard">
<div class="cpg-card-head">
<h2>센터 목록 ({{ centers|length }})</h2>
<span class="erp-muted">사용 중 센터는 삭제 시 비활성화됩니다.</span>
</div>
<div class="cpg-card-head cpg-center-head">
<h2>센터 목록 <span class="erp-muted" id="cpgCenterCount">({{ centers|length }})</span></h2>
<span class="erp-muted">이름을 고치면 저장, 쓰지 않는 센터는 비활성 또는 삭제.</span>
</div>
<div class="cpg-center-list">
{% for c in centers %}
<div class="cpg-center-row {% if not c.active %}is-inactive{% endif %}">
<form method="post" action="/cupang/centers/{{ c.id }}/edit" class="cpg-center-edit">
<input class="erp-input cpg-center-name" type="text" name="name" value="{{ c.name }}" />
<button type="submit" class="erp-btn erp-btn-outline cpg-btn-sm" title="이름 저장">저장</button>
</form>
<span class="cpg-center-state">
{% if c.in_use %}<span class="erp-badge erp-badge-inverse cpg-mini">사용중</span>{% endif %}
{% if c.active %}<span class="erp-badge erp-badge-success cpg-mini">활성</span>
{% else %}<span class="erp-badge erp-badge-neutral cpg-mini">비활성</span>{% endif %}
</span>
<span class="cpg-center-act">
{% if c.active %}
<form method="post" action="/cupang/centers/{{ c.id }}/edit" class="cpg-inline-form">
<input type="hidden" name="active" value="0" />
<button type="submit" class="erp-btn erp-btn-outline cpg-btn-sm">비활성</button>
</form>
{% else %}
<form method="post" action="/cupang/centers/{{ c.id }}/edit" class="cpg-inline-form">
<input type="hidden" name="active" value="1" />
<button type="submit" class="erp-btn erp-btn-outline cpg-btn-sm">활성</button>
</form>
{% endif %}
<form method="post" action="/cupang/centers/{{ c.id }}/delete" class="cpg-inline-form"
onsubmit="return confirm('{% if c.in_use %}사용 중 → 비활성화됩니다.{% else %}삭제합니다.{% endif %} 계속?');">
<button type="submit" class="erp-btn erp-btn-danger cpg-btn-sm">삭제</button>
</form>
</span>
</div>
{% endfor %}
</div>
<!-- 목록: 여러 열로 한 화면에 -->
<div class="cpg-center-grid" id="cpgCenterGrid">
{% for c in centers %}
<form method="post" action="/cupang/centers/{{ c.id }}/edit"
class="cpg-center-row {% if not c.active %}is-inactive{% endif %}"
data-name="{{ c.name|lower }}">
<span class="cpg-center-dot" title="{% if c.active %}활성{% else %}비활성{% endif %}"></span>
<input class="erp-input cpg-center-name" type="text" name="name" value="{{ c.name }}" />
<button type="submit" class="erp-btn erp-btn-outline cpg-btn-sm" title="이름 저장">저장</button>
<button type="submit" name="active" value="{% if c.active %}0{% else %}1{% endif %}"
class="erp-btn erp-btn-outline cpg-btn-sm"
title="{% if c.active %}비활성으로 전환{% else %}활성으로 전환{% endif %}">{% if c.active %}비활성{% else %}활성{% endif %}</button>
<button type="submit" formaction="/cupang/centers/{{ c.id }}/delete" formnovalidate
class="erp-btn erp-btn-danger cpg-btn-sm"
onclick="return confirm('{{ c.name }} 센터를 삭제할까요?');">삭제</button>
</form>
{% endfor %}
</div>
</div>
</section>
<script>
(function () {
var box = document.getElementById('cpgCenterSearch');
var grid = document.getElementById('cpgCenterGrid');
var count = document.getElementById('cpgCenterCount');
if (!box || !grid) return;
var rows = Array.prototype.slice.call(grid.querySelectorAll('.cpg-center-row'));
box.addEventListener('input', function () {
var q = box.value.trim().toLowerCase();
var n = 0;
rows.forEach(function (r) {
var hit = !q || (r.dataset.name || '').indexOf(q) !== -1;
r.style.display = hit ? '' : 'none';
if (hit) n += 1;
});
if (count) count.textContent = '(' + n + ')';
});
})();
</script>
{% endblock %}
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829l" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831a" />{% endblock %}
{% block content %}
<section class="cpg">
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829l" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831a" />{% endblock %}
{% block content %}
<section class="cpg">
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829l" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831a" />{% endblock %}
{% block content %}
<section class="cpg">
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829l" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831a" />{% endblock %}
{% block content %}
<section class="cpg">