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

ui(cupang): 입고센터 페이지 좌우 배치 + 목록 가나다순/900px 스크롤

Browse Source 
- 추가 폼에서 정렬순서 입력란 제거(좌측), 센터 목록 우측
- 센터 목록 이름 오름차순, 프레임 900px 고정 내부 스크롤, 1열 행
- 행 편집은 이름 저장 + 활성/비활성 + 삭제 (정렬 입력 제거)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
king
2026-05-30 04:39:47 +09:00
parent f9c1dc140b
commit 4113a034f4
3 changed files with 71 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/cupang/router.py
+1 -1
View File
@@ -454,7 +454,7 @@ async def centers_page(request: Request) -> HTMLResponse:
if not isinstance(guard, tuple):
return guard
store, user = guard
centers = store.list_centers(include_inactive=True)
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"])
app/modules/cupang/templates/cupang/centers.html
+48 -47
View File
@@ -9,57 +9,58 @@
<a class="erp-btn erp-btn-primary" href="/cupang/">◀◀ 달력</a>
</div>
<!-- 추가 (슬림) -->
<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="min-width:180px" />
<input class="erp-input" type="number" name="sort_order" value="0" style="width:70px" title="정렬순서" />
<button type="submit" class="erp-btn erp-btn-primary">추가</button>
</form>
</div>
<div class="cpg-center-layout">
<!-- 목록 (2열 그리드, 한 줄/센터) -->
<div class="erp-card cpg-form-card">
<div class="cpg-card-head">
<h2>센터 목록 ({{ centers|length }})</h2>
<span class="erp-muted">사용 중 센터는 삭제 시 비활성화됩니다.</span>
<!-- 왼쪽: 입고센터 추가 -->
<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" />
<button type="submit" class="erp-btn erp-btn-primary">추가</button>
</form>
</div>
<div class="cpg-center-grid">
{% 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 }}" />
<input class="erp-input cpg-center-sort" type="number" name="sort_order" value="{{ c.sort_order }}" title="정렬" />
<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>
<!-- 오른쪽: 센터 목록 (높이 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>
{% endfor %}
</div>
</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>
</div>
</section>
{% endblock %}
app/static/cupang.css
+22 -7
View File
@@ -98,17 +98,32 @@
.cpg-inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.cpg-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* ── 입고센터 관리 (컴팩트) ── */
.cpg-center-add { padding: 12px 16px; }
/* ── 입고센터 관리 (좌: 추가 / 우: 목록) ── */
.cpg-center-layout {
display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
}
.cpg-center-add {
width: 360px; flex: 0 0 auto;
padding: 16px;
}
.cpg-center-listcard {
flex: 1 1 480px; min-width: 0;
height: 900px;
display: flex; flex-direction: column; overflow: hidden;
}
@media (max-width: 820px) {
.cpg-center-add, .cpg-center-listcard { width: 100%; flex-basis: 100%; }
}
.cpg-center-add-title { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.cpg-btn-sm { padding: 3px 8px; font-size: 12px; }
.cpg-center-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 16px;
/* 목록: 카드 높이 채우고 내부 스크롤 */
.cpg-center-list {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; gap: 6px;
padding-right: 4px;
}
@media (max-width: 820px) { .cpg-center-grid { grid-template-columns: 1fr; } }
.cpg-center-row {
display: flex; align-items: center; gap: 8px;