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

ui(shell): 뷰포트(1883x938) 고정 — 문서 세로 스크롤 제거

Browse Source 
- erp 셸 height:100vh + body overflow:hidden, .erp-page 가 남은 높이 채우고 내부 스크롤
- 휴가 달력: 6주 행이 가용 높이 균등 분할(유동), 날짜 셀 height:100%, 선택일 패널 내부 스크롤
- 쿠팡 출고 폼: 라인 패널 고정 900px 높이 → 가용 높이 채움
- CORM/Order 는 별도 창이라 해당 없음

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
king
2026-05-30 18:12:41 +09:00
parent fde2c9c2e9
commit 9f361c4e6a
15 changed files with 61 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/cupang/templates/cupang/box_rules.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530n" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530o" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/cupang/templates/cupang/centers.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530n" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530o" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/cupang/templates/cupang/detail.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530n" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530o" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/cupang/templates/cupang/form.html
+2 -2
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530n" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530o" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
@@ -109,4 +109,4 @@
</script> </script>
{% endblock %} {% endblock %}
{% block scripts %}<script src="/static/cupang.js?v=20260530n" defer></script>{% endblock %} {% block scripts %}<script src="/static/cupang.js?v=20260530o" defer></script>{% endblock %}
app/modules/cupang/templates/cupang/index.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530n" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530o" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/cupang/templates/cupang/products.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530n" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530o" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/vacation/templates/vacation/detail.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530h" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530i" />{% endblock %}
{% block content %} {% block content %}
<section class="vac"> <section class="vac">
app/modules/vacation/templates/vacation/form.html
+2 -2
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530h" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530i" />{% endblock %}
{% block content %} {% block content %}
<section class="vac"> <section class="vac">
@@ -68,4 +68,4 @@
</section> </section>
{% endblock %} {% endblock %}
{% block scripts %}<script src="/static/vacation.js?v=20260530h" defer></script>{% endblock %} {% block scripts %}<script src="/static/vacation.js?v=20260530i" defer></script>{% endblock %}
app/modules/vacation/templates/vacation/index.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530h" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530i" />{% endblock %}
{% block content %} {% block content %}
<section class="vac"> <section class="vac">
app/modules/vacation/templates/vacation/pending.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530h" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530i" />{% endblock %}
{% block content %} {% block content %}
<section class="vac"> <section class="vac">
app/modules/vacation/templates/vacation/settings.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530h" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530i" />{% endblock %}
{% block content %} {% block content %}
<section class="vac"> <section class="vac">
app/static/cupang.css
+7 -4
View File
@@ -101,14 +101,17 @@
.cpg-form-card { padding: 16px; margin-bottom: 16px; } .cpg-form-card { padding: 16px; margin-bottom: 16px; }
/* 공통 헤더(좌) + 품목 라인(우) 2열 */ /* 공통 헤더(좌) + 품목 라인(우) 2열 */
/* form 이 .cpg(남은 높이) 안에서 세로로 채우도록 */
.cpg > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cpg-form-2col { .cpg-form-2col {
display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch;
flex: 1 1 auto; min-height: 0;
} }
/* 공통 헤더: 너비 450 고정 */ /* 공통 헤더: 너비 450 고정 */
.cpg-form-head { flex: 0 0 450px; width: 450px; min-width: 0; margin-bottom: 0; } .cpg-form-head { flex: 0 0 450px; width: 450px; min-width: 0; margin-bottom: 0; align-self: flex-start; }
/* 품목 라인: 900x900 고정, 내부 스크롤 */ /* 품목 라인: 너비 900 고정, 높이는 가용 영역 채움, 내부 스크롤 */
.cpg-form-lines { .cpg-form-lines {
flex: 0 0 900px; width: 900px; height: 900px; min-width: 0; margin-bottom: 0; flex: 0 0 900px; width: 900px; height: 100%; min-width: 0; margin-bottom: 0;
display: flex; flex-direction: column; overflow: hidden; display: flex; flex-direction: column; overflow: hidden;
} }
@media (max-width: 1400px) { @media (max-width: 1400px) {
app/static/erp-shell.css
+13 -5
View File
@@ -9,13 +9,15 @@
--erp-topbar-h: 56px; --erp-topbar-h: 56px;
} }
/* ── 페이지 전체 컨테이너 ── */ /* ── 페이지 전체 컨테이너 ──
body.erp-app-body { background: var(--color-canvas-white); min-height: 100vh; } 뷰포트(예: 1883×938)에 고정 — 문서 전체 세로 스크롤 제거.
넘치는 콘텐츠는 .erp-page 내부에서만 처리한다(CORM/Order 는 별도 창이라 무관). */
body.erp-app-body { background: var(--color-canvas-white); height: 100vh; overflow: hidden; }
.erp-app { .erp-app {
display: grid; display: grid;
grid-template-columns: var(--erp-sidebar-w) 1fr; grid-template-columns: var(--erp-sidebar-w) 1fr;
min-height: 100vh; height: 100vh;
transition: grid-template-columns .18s ease; transition: grid-template-columns .18s ease;
} }
.erp-app:has(.erp-sidebar[data-collapsed="true"]) { .erp-app:has(.erp-sidebar[data-collapsed="true"]) {
@@ -127,10 +129,10 @@ body.erp-app-body { background: var(--color-canvas-white); min-height: 100vh; }
} }
/* ── 콘텐츠 영역 ── */ /* ── 콘텐츠 영역 ── */
.erp-content { display: flex; flex-direction: column; min-width: 0; } .erp-content { display: flex; flex-direction: column; min-width: 0; height: 100vh; min-height: 0; }
.erp-topbar { .erp-topbar {
height: var(--erp-topbar-h); height: var(--erp-topbar-h); flex-shrink: 0;
position: sticky; top: 0; z-index: 30; position: sticky; top: 0; z-index: 30;
background: var(--color-canvas-white); background: var(--color-canvas-white);
border-bottom: 1px solid var(--color-subtle-ash); border-bottom: 1px solid var(--color-subtle-ash);
@@ -159,7 +161,13 @@ body.erp-app-body { background: var(--color-canvas-white); min-height: 100vh; }
.erp-page { .erp-page {
padding: var(--sp-24); padding: var(--sp-24);
max-width: 1550px; width: 100%; margin: 0 auto; max-width: 1550px; width: 100%; margin: 0 auto;
flex: 1 1 auto; min-height: 0;
overflow-y: auto; /* 넘치면 페이지 영역만 스크롤(문서 전체 X) */
display: flex; flex-direction: column;
} }
/* 달력 등 "한 화면 채움" 페이지: 첫 섹션이 남은 높이를 모두 차지 */
.erp-page > .vac,
.erp-page > .cpg { flex: 1 1 auto; min-height: 0; }
/* ── 홈 대시보드 타일 ── */ /* ── 홈 대시보드 타일 ── */
.erp-hero { margin: var(--sp-8) 0 var(--sp-24); } .erp-hero { margin: var(--sp-8) 0 var(--sp-24); }
app/static/vacation.css
+26 -9
View File
@@ -20,7 +20,7 @@
/* ── 페이지 액션 + 잔여 요약 ── */ /* ── 페이지 액션 + 잔여 요약 ── */
.vac-actions { .vac-actions {
display: flex; align-items: center; justify-content: space-between; display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; gap: 12px; flex-wrap: wrap; flex-shrink: 0;
} }
.vac-actions-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vac-actions-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vac-mini { margin-left: 4px; } .vac-mini { margin-left: 4px; }
@@ -38,26 +38,36 @@
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) 340px; grid-template-columns: minmax(0, 1fr) 340px;
gap: 16px; gap: 16px;
align-items: start; align-items: stretch;
flex: 1 1 auto; min-height: 0; /* 남은 높이 채움 → 문서 스크롤 방지 */
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
.vac-layout { grid-template-columns: 1fr; } .vac-layout { grid-template-columns: 1fr; }
} }
/* ── 달력 카드 ── */ /* ── 달력 카드 ── */
.vac-cal-card { padding: 16px; } .vac-cal-card {
padding: 16px;
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.vac-cal-head { .vac-cal-head {
display: flex; align-items: center; gap: 10px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
flex-shrink: 0;
} }
.vac-cal-title { font-size: 18pt; font-weight: 600; margin: 0; letter-spacing: -0.45px; } .vac-cal-title { font-size: 18pt; font-weight: 600; margin: 0; letter-spacing: -0.45px; }
.vac-nav-btn { padding: 4px 12px; font-size: 18pt; line-height: 1; } .vac-nav-btn { padding: 4px 12px; font-size: 18pt; line-height: 1; }
.vac-today-btn { margin-left: auto; } .vac-today-btn { margin-left: auto; }
.vac-cal { border: 1px solid var(--vac-ash); border-radius: 10px; overflow: hidden; } .vac-cal {
border: 1px solid var(--vac-ash); border-radius: 10px; overflow: hidden;
flex: 1 1 auto; min-height: 0;
display: flex; flex-direction: column;
}
.vac-wd-row { .vac-wd-row {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
background: var(--vac-ghost); border-bottom: 1px solid var(--vac-ash); background: var(--vac-ghost); border-bottom: 1px solid var(--vac-ash);
flex-shrink: 0;
} }
.vac-wd { .vac-wd {
text-align: center; padding: 8px 0; font-size: 15px; font-weight: 600; text-align: center; padding: 8px 0; font-size: 15px; font-weight: 600;
@@ -66,15 +76,20 @@
} }
.vac-wd:last-child { border-right: none; } .vac-wd:last-child { border-right: none; }
/* 주(week) — 정사각형 날짜 셀 위에 bar 레이어를 오버레이 */ /* 주(week) — 날짜 셀 위에 bar 레이어를 오버레이. 6주가 높이를 균등 분할(유동). */
.vac-week { position: relative; border-bottom: 1px solid var(--vac-ash); } .vac-week {
position: relative; border-bottom: 1px solid var(--vac-ash);
flex: 1 1 0; min-height: 88px;
display: flex; flex-direction: column;
}
.vac-week:last-child { border-bottom: none; } .vac-week:last-child { border-bottom: none; }
.vac-week-days { .vac-week-days {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
flex: 1 1 auto; min-height: 0;
} }
.vac-day { .vac-day {
height: 125px; height: 100%;
border-right: 1px solid var(--vac-ash); border-right: 1px solid var(--vac-ash);
padding: 6px 8px; text-decoration: none; padding: 6px 8px; text-decoration: none;
display: block; box-sizing: border-box; display: block; box-sizing: border-box;
@@ -122,12 +137,14 @@
.vac-bar-cancel { background: #fff; border: 1px dashed var(--vac-ash); color: #bbb; opacity: 0.7; } .vac-bar-cancel { background: #fff; border: 1px dashed var(--vac-ash); color: #bbb; opacity: 0.7; }
/* 범례 */ /* 범례 */
.vac-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; } .vac-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; flex-shrink: 0; }
.vac-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vac-muted); } .vac-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vac-muted); }
.vac-dot { width: 14px; height: 12px; border-radius: 4px; display: inline-block; } .vac-dot { width: 14px; height: 12px; border-radius: 4px; display: inline-block; }
/* ── 선택일 리스트 ── */ /* ── 선택일 리스트 ── */
.vac-list-card { padding: 16px; } .vac-list-card {
padding: 16px; min-height: 0; overflow-y: auto; /* 긴 목록은 패널 내부 스크롤 */
}
.vac-list-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .vac-list-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.vac-list-head h2 { font-size: 16px; font-weight: 600; margin: 0; } .vac-list-head h2 { font-size: 16px; font-weight: 600; margin: 0; }
.vac-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .vac-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
app/templates/erp_base.html
+2 -2
View File
@@ -4,8 +4,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ page_title or "ERP" }} — DBX Corporation</title> <title>{{ page_title or "ERP" }} — DBX Corporation</title>
<link rel="stylesheet" href="/static/erp.css?v=20260530o" /> <link rel="stylesheet" href="/static/erp.css?v=20260530p" />
<link rel="stylesheet" href="/static/erp-shell.css?v=20260530o" /> <link rel="stylesheet" href="/static/erp-shell.css?v=20260530p" />
<link rel="stylesheet" href="/static/erp-attach-viewer.css" /> <link rel="stylesheet" href="/static/erp-attach-viewer.css" />
{% block head_extra %}{% endblock %} {% block head_extra %}{% endblock %}
</head> </head>