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

feat(project): 홈 화면 프로젝트 카드에 업무 미리보기·진행률 표시

Browse Source 
카드마다 완료/전체 진행률 바와 미완료 업무 목록(담당자·마감일, 최대 8건)을
붙여 프로젝트 전체 현황을 홈에서 한눈에 볼 수 있게 함.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-15 08:42:28 +09:00
parent 32cc8299e3
commit 78683a9ae4
4 changed files with 96 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/project.css
+28 -1
View File
@@ -33,7 +33,7 @@
.pj-home { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .pj-home { grid-template-columns: 1fr; } }
.pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.pj-project-card {
position: relative; border: 1px solid #e7e9ec; border-radius: 14px;
background: #fff; transition: box-shadow .14s, transform .1s;
@@ -59,6 +59,33 @@
.pj-project-name { font-weight: 700; font-size: 15px; }
.pj-project-desc { color: #6b7280; font-size: 12.5px; margin-top: 3px; }
.pj-project-meta { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.pj-project-progress { margin-top: 10px; height: 5px; border-radius: 999px; background: #eef0f2; overflow: hidden; }
.pj-project-progress-bar { height: 100%; border-radius: 999px; background: var(--pj-color, #4573d2); }
/* 카드 하단 업무 미리보기 목록 */
.pj-project-tasklist { list-style: none; margin: 0; padding: 0 10px 6px; border-top: 1px solid #f0f1f3; }
.pj-project-taskrow a {
display: flex; align-items: center; gap: 7px; padding: 7px 6px; border-radius: 7px;
text-decoration: none; color: inherit;
}
.pj-project-taskrow a:hover { background: #f6f7f8; }
.pj-project-task-ic { font-size: 16px; flex: 0 0 auto; color: #b7bdc5; }
.pj-project-task-title {
font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-project-task-assignee {
display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280;
flex: 0 0 auto; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-project-task-due { font-size: 11px; color: #9aa1a9; flex: 0 0 auto; }
.pj-project-task-due.is-overdue { color: #c22b10; font-weight: 700; }
.pj-project-more {
display: block; padding: 6px 16px 12px; font-size: 12px; font-weight: 600;
color: #6b7280; text-decoration: none;
}
.pj-project-more:hover { color: #1e1f21; text-decoration: underline; }
.pj-project-tasks-empty { padding: 4px 16px 14px; font-size: 12px; color: #b7bdc5; border-top: 1px solid #f0f1f3; margin-top: 2px; }
.pj-home-side { border-left: 1px solid #eef0f2; padding-left: 24px; }
@media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; } }