fix(cupang): 달마다 다르던 달력 칸 크기 통일

주 수(5주/6주)에 따라 1fr 로 나뉘던 행 높이를 고정값(--mcal-row)으로 바꿔
두 달의 칸 크기와 세로 간격을 동일하게 맞춘다. 화면 높이에 따라 84/72/62px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-02 14:38:02 +09:00
parent ba2478d461
commit bf8f36bc40
6 changed files with 16 additions and 11 deletions
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903k" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903l" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903k" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903l" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903k" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903l" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903k" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903l" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903k" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903l" />{% endblock %}
{% block content %} {% block content %}
{# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #} {# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #}
+11 -6
View File
@@ -31,7 +31,7 @@
@media (max-width: 980px) { .cpg-layout { grid-template-columns: 1fr; } } @media (max-width: 980px) { .cpg-layout { grid-template-columns: 1fr; } }
.cpg-cal-card, .cpg-list-card { padding: 16px; } .cpg-cal-card, .cpg-list-card { padding: 16px; }
.cpg-cal-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .cpg-cal-card { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.cpg-list-card { min-height: 0; overflow-y: auto; } .cpg-list-card { min-height: 0; overflow-y: auto; }
.cpg-cal-head { .cpg-cal-head {
@@ -1080,7 +1080,7 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.cpg-mcal-months { grid-template-columns: minmax(0, 1fr); } .cpg-mcal-months { grid-template-columns: minmax(0, 1fr); }
} }
.cpg-mcal { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .cpg-mcal { display: flex; flex-direction: column; min-height: 0; min-width: 0; align-self: start; }
/* 달 머리글 — 가운데 정렬, 출고 건수는 오른쪽 끝에 겹쳐 놓는다 */ /* 달 머리글 — 가운데 정렬, 출고 건수는 오른쪽 끝에 겹쳐 놓는다 */
.cpg-mcal-h { .cpg-mcal-h {
@@ -1099,15 +1099,19 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
background: var(--color-deep-black); color: #fff; background: var(--color-deep-black); color: #fff;
} }
/* 날짜 격자 */ /* 날짜 격자 — 주 수(5주/6주)가 달라도 칸 크기가 같도록 행 높이를 고정한다.
(1fr 로 남은 높이를 나누면 5주 달과 6주 달의 칸 높이가 달라진다) */
.cpg-mcal-grid { .cpg-mcal-grid {
display: grid; display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr));
grid-template-rows: auto; /* 요일 행은 내용 높이만 */ grid-template-rows: auto; /* 요일 행은 내용 높이만 */
grid-auto-rows: minmax(0, 1fr); /* 주 행만 남은 높이 균등 분할 */ grid-auto-rows: var(--mcal-row, 84px);
gap: 4px; gap: 4px;
flex: 1 1 auto; min-height: 0; flex: 0 0 auto; min-height: 0;
align-content: start;
} }
@media (max-height: 900px) { .cpg-mcal-grid { --mcal-row: 72px; } }
@media (max-height: 780px) { .cpg-mcal-grid { --mcal-row: 62px; } }
.cpg-mcal-wd { .cpg-mcal-wd {
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
height: 34px; padding: 0; height: 34px; padding: 0;
@@ -1121,7 +1125,8 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
.cpg-mcal-cell { .cpg-mcal-cell {
position: relative; position: relative;
display: flex; flex-direction: column; align-items: center; gap: 4px; display: flex; flex-direction: column; align-items: center; gap: 4px;
min-height: 70px; min-width: 0; padding: 6px 4px 7px; height: 100%; min-height: 0; min-width: 0; padding: 6px 4px 7px;
justify-content: flex-start;
border: 1px solid var(--color-subtle-ash); border: 1px solid var(--color-subtle-ash);
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;