From 872a369c7c0482765c638e2070ffcf55ea2fc16d Mon Sep 17 00:00:00 2001 From: king Date: Tue, 15 Sep 2026 23:28:19 +0900 Subject: [PATCH] =?UTF-8?q?fix(project):=20=ED=99=88=20=ED=99=94=EB=A9=B4?= =?UTF-8?q?=EB=8F=84=20=ED=95=9C=20=ED=99=94=EB=A9=B4=20=EC=B1=84=EC=9B=80?= =?UTF-8?q?=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=E2=80=94=20=EB=82=B4?= =?UTF-8?q?=20=EC=97=85=EB=AC=B4=20=ED=8C=A8=EB=84=90=20=EC=9E=90=EC=B2=B4?= =?UTF-8?q?=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=ED=99=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 홈 화면의 내 업무 패널이 max-height:calc(100vh-160px) 로는 뷰포트에 맞게 잘리지 않아 페이지 전체가 스크롤되고 패널 자체 스크롤바가 안 생겼다. 프로젝트 상세와 같은 방식으로 .pj-wrap 을 flex:1 로 늘리고 .pj-home 의 행을 1fr 로 확정해, 프로젝트 목록(좌)·내 업무(우)가 각자 안에서만 스크롤 하도록 변경. 커스텀 스크롤바는 트랙까지 연회색으로 그려 항상 보이게 하고 .pj-home-main 에도 적용. Co-Authored-By: Claude Fable 5.1 --- .../project/templates/project/inbox.html | 2 +- .../project/templates/project/index.html | 2 +- .../project/templates/project/project.html | 2 +- app/static/project.css | 53 ++++++++++++------- 4 files changed, 37 insertions(+), 22 deletions(-) diff --git a/app/modules/project/templates/project/inbox.html b/app/modules/project/templates/project/inbox.html index de32e2b..9498440 100644 --- a/app/modules/project/templates/project/inbox.html +++ b/app/modules/project/templates/project/inbox.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + {% endblock %} diff --git a/app/modules/project/templates/project/index.html b/app/modules/project/templates/project/index.html index 1cc65e7..b37f4fa 100644 --- a/app/modules/project/templates/project/index.html +++ b/app/modules/project/templates/project/index.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + {% endblock %} diff --git a/app/modules/project/templates/project/project.html b/app/modules/project/templates/project/project.html index a8156d2..3c05214 100644 --- a/app/modules/project/templates/project/project.html +++ b/app/modules/project/templates/project/project.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + diff --git a/app/static/project.css b/app/static/project.css index e71f2b0..b62dfee 100644 --- a/app/static/project.css +++ b/app/static/project.css @@ -43,9 +43,22 @@ .pj-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef0f2; color: #525860; font-size: 11px; font-weight: 600; } .pj-chip-sm { padding: 1px 6px; font-size: 10px; } -/* ── 홈 ── */ -.pj-home { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; } -@media (max-width: 980px) { .pj-home { grid-template-columns: 1fr; } } +/* ── 홈 — 프로젝트 상세와 같은 "한 화면 채움" 레이아웃. 페이지(.erp-page)는 + 스크롤하지 않고 프로젝트 목록(좌)·내 업무(우)가 각자 안에서만 스크롤. + .erp-page 는 flex column 이라 .pj-wrap 을 flex:1 로 늘려 남은 높이를 + 확보하고, .pj-home 의 행을 1fr 로 확정해야 자식 height:100% 가 먹는다. */ +.erp-page > .pj-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 8px; } +.pj-home { + flex: 1 1 auto; min-height: 0; + display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr); + gap: 28px; align-items: stretch; +} +.pj-home-main { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; padding-right: 4px; } +@media (max-width: 980px) { + .erp-page > .pj-wrap:not(.pj-project-view) { display: block; } + .pj-home { display: block; } + .pj-home-main { height: auto; overflow: visible; } +} .pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; } .pj-project-card { @@ -116,11 +129,13 @@ .pj-section-head-done { margin-top: 22px; } .pj-section-head-done h2 { font-size: 14px; color: #6b7280; } -/* max-height 는 항상 값을 갖는 안전한 fallback(홈 화면처럼 부모가 고정 - 높이가 아닌 곳에서도 동작) — 프로젝트 상세 화면은 .pj-project-mytasks 가 - 더 구체적인 height:100% 로 덮어써서 화면 꽉 채움 레이아웃을 그대로 쓴다. */ -.pj-home-side { width: 300px; border-left: 1px solid #eef0f2; padding-left: 24px; max-height: calc(100vh - 160px); overflow-y: auto; } -@media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; } } +/* 홈/프로젝트 상세 공통 "내 업무" 패널 — 부모 grid 행(1fr)에 맞춰 높이를 + 확정하고 자기 안에서만 스크롤. 300px 는 padding 포함(border-box). */ +.pj-home-side { + width: 300px; box-sizing: border-box; min-height: 0; height: 100%; overflow-y: auto; + border-left: 1px solid #eef0f2; padding-left: 24px; padding-right: 4px; +} +@media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; height: auto; overflow: visible; } } .pj-mytask-list { list-style: none; margin: 0; padding: 0; } .pj-mytask a { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-radius: 8px; text-decoration: none; color: inherit; } .pj-mytask a:hover { background: #f6f7f8; } @@ -155,26 +170,26 @@ 스크롤바 때문(호버해야만 잠깐 보이는 스타일). 여기 자체 스크롤 패널들은 막대가 항상 보이도록 커스텀 스크롤바를 그린다(윈도우 설정과 무관하게 고정 표시). */ -.pj-home-side, .pj-project-mytasks, .pj-side, .pj-board { - scrollbar-width: thin; scrollbar-color: #c7c9cf transparent; +.pj-home-side, .pj-home-main, .pj-project-mytasks, .pj-side, .pj-board { + scrollbar-width: thin; scrollbar-color: #b9bcc4 #f1f2f4; } -.pj-home-side::-webkit-scrollbar, .pj-project-mytasks::-webkit-scrollbar, -.pj-side::-webkit-scrollbar, .pj-board::-webkit-scrollbar { width: 8px; height: 8px; } -.pj-home-side::-webkit-scrollbar-track, .pj-project-mytasks::-webkit-scrollbar-track, -.pj-side::-webkit-scrollbar-track, .pj-board::-webkit-scrollbar-track { background: transparent; } -.pj-home-side::-webkit-scrollbar-thumb, .pj-project-mytasks::-webkit-scrollbar-thumb, +.pj-home-side::-webkit-scrollbar, .pj-home-main::-webkit-scrollbar, .pj-project-mytasks::-webkit-scrollbar, +.pj-side::-webkit-scrollbar, .pj-board::-webkit-scrollbar { width: 9px; height: 9px; } +.pj-home-side::-webkit-scrollbar-track, .pj-home-main::-webkit-scrollbar-track, .pj-project-mytasks::-webkit-scrollbar-track, +.pj-side::-webkit-scrollbar-track, .pj-board::-webkit-scrollbar-track { background: #f1f2f4; border-radius: 999px; } +.pj-home-side::-webkit-scrollbar-thumb, .pj-home-main::-webkit-scrollbar-thumb, .pj-project-mytasks::-webkit-scrollbar-thumb, .pj-side::-webkit-scrollbar-thumb, .pj-board::-webkit-scrollbar-thumb { - background-color: #c7c9cf; border-radius: 999px; + background-color: #b9bcc4; border-radius: 999px; } -.pj-home-side::-webkit-scrollbar-thumb:hover, .pj-project-mytasks::-webkit-scrollbar-thumb:hover, -.pj-side::-webkit-scrollbar-thumb:hover, .pj-board::-webkit-scrollbar-thumb:hover { background-color: #a7aab3; } +.pj-home-side::-webkit-scrollbar-thumb:hover, .pj-home-main::-webkit-scrollbar-thumb:hover, .pj-project-mytasks::-webkit-scrollbar-thumb:hover, +.pj-side::-webkit-scrollbar-thumb:hover, .pj-board::-webkit-scrollbar-thumb:hover { background-color: #979ba5; } @media (max-width: 1280px) { .pj-layout { grid-template-columns: 230px 1fr; } .pj-project-mytasks { display: none; } } @media (max-width: 900px) { .erp-page:has(> .pj-wrap) { max-width: 1550px; } - .pj-project-view { display: block; } + .erp-page > .pj-wrap.pj-project-view { display: block; } .pj-layout { display: block; height: auto; } .pj-side, .pj-main { height: auto; overflow: visible; } }