diff --git a/app/modules/cupang/router.py b/app/modules/cupang/router.py index 7814054..3f72dd4 100644 --- a/app/modules/cupang/router.py +++ b/app/modules/cupang/router.py @@ -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"]) diff --git a/app/modules/cupang/templates/cupang/centers.html b/app/modules/cupang/templates/cupang/centers.html index d21af93..da46153 100644 --- a/app/modules/cupang/templates/cupang/centers.html +++ b/app/modules/cupang/templates/cupang/centers.html @@ -9,57 +9,58 @@ ◀◀ 달력 - -
-

입고센터 추가

-
- - - -
-
+
- -
-
-

센터 목록 ({{ centers|length }})

- 사용 중 센터는 삭제 시 비활성화됩니다. + +
+

입고센터 추가

+
+ + +
-
- {% for c in centers %} -
-
- - - -
- - {% if c.in_use %}사용중{% endif %} - {% if c.active %}활성 - {% else %}비활성{% endif %} - - - {% if c.active %} -
- - -
- {% else %} -
- - -
- {% endif %} -
- -
-
+ +
+
+

센터 목록 ({{ centers|length }})

+ 사용 중 센터는 삭제 시 비활성화됩니다.
- {% endfor %} -
-
+
+ {% for c in centers %} +
+
+ + +
+ + {% if c.in_use %}사용중{% endif %} + {% if c.active %}활성 + {% else %}비활성{% endif %} + + + {% if c.active %} +
+ + +
+ {% else %} +
+ + +
+ {% endif %} +
+ +
+
+
+ {% endfor %} +
+
+ +
{% endblock %} diff --git a/app/static/cupang.css b/app/static/cupang.css index b344729..b07e11a 100644 --- a/app/static/cupang.css +++ b/app/static/cupang.css @@ -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;