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

fix(project): 보드 세션(컬럼) 배경이 페이지와 구분 안 되던 문제 수정

Browse Source 
.pj-col 배경(#f6f5fb)이 흰 페이지 배경과 거의 같아 세션 구분이 안 보였다.
회색 톤(#eef0f4)+테두리로 아사나처럼 컬럼 경계를 뚜렷하게 표시.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-15 21:51:05 +09:00
parent b3d6a35651
commit 5c72e66305
4 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/project/templates/project/inbox.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916e" />
<link rel="stylesheet" href="/static/project.css?v=20260916f" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}
app/modules/project/templates/project/index.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916e" />
<link rel="stylesheet" href="/static/project.css?v=20260916f" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}
app/modules/project/templates/project/project.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916e" />
<link rel="stylesheet" href="/static/project.css?v=20260916f" />
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
<!-- 타임라인 vis-timeline — self-host -->
app/static/project.css
+10 -4
View File
@@ -184,14 +184,20 @@
/* ── 보드(칸반) ── */
.pj-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.pj-col { flex: 0 0 280px; background: #f6f5fb; border-radius: 14px; padding: 12px; }
.pj-col-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 2px 6px 12px; color: var(--pj-ink); }
/* 세션(보드 컬럼) — 배경이 페이지와 거의 같으면 구분이 안 되므로(#f6f5fb ≈
흰 배경) 뚜렷한 회색 톤 + 테두리로 아사나처럼 컬럼 경계를 분명히 준다. */
.pj-col { flex: 0 0 280px; background: #eef0f4; border: 1px solid #e2e4ea; border-radius: 14px; padding: 12px; }
.pj-col-head {
display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px;
padding: 2px 6px 12px; margin-bottom: 4px; color: var(--pj-ink);
border-bottom: 1px solid #e2e4ea;
}
.pj-col-count {
margin-left: auto; color: var(--pj-ink-soft); font-weight: 700; font-size: 11px;
background: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px;
background: #fff; border: 1px solid #e2e4ea; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px;
display: inline-flex; align-items: center; justify-content: center;
}
.pj-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; border-radius: 8px; }
.pj-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; border-radius: 8px; padding-top: 8px; }
.pj-col-body.is-over { background: var(--pj-accent-tint); outline: 2px dashed var(--pj-accent); }
.pj-card {
background: #fff; border: 1px solid var(--pj-border); border-radius: var(--pj-card-radius);