feat(project): 내 업무 패널에 프로젝트별 전체/진행/완료 개수 배지

프로젝트 이름 오른쪽에 "전체5 진행2 완료3" 형식으로 표시, 숫자는 색깔
있는 동그라미 안에(전체=회색, 진행=파랑, 완료=초록). 서버 렌더용 카운트는
_group_my_tasks() 헬퍼로 통합(홈/프로젝트 화면 중복 제거), 실시간 갱신은
DOM의 실제 <li> 개수를 다시 세는 updateMyTreeCounts()를 기존 sync 함수
(syncMyTaskPanel/syncProjectMyTaskPanel) 안에서 호출해 처리.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-17 14:30:34 +09:00
parent 397ca8684a
commit cc73f79b7c
6 changed files with 87 additions and 39 deletions
+11
View File
@@ -408,6 +408,17 @@
.pj-mytree-toggle:hover { background: #f1f2f4; }
.pj-mytree-proj { display: flex; align-items: center; gap: 7px; text-decoration: none; color: #1e1f21; font-weight: 700; font-size: 13.5px; padding: 4px 2px; border-radius: 7px; flex: 1 1 auto; min-width: 0; }
.pj-mytree-proj:hover { background: #f6f7f8; }
/* 프로젝트 이름 오른쪽 — 전체/진행/완료 개수(숫자는 색깔 있는 동그라미 안에) */
.pj-mytree-counts { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; padding-right: 4px; }
.pj-mtc { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: #9aa1a9; font-weight: 600; }
.pj-mtc-num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
font-size: 10px; font-weight: 800; color: #fff;
}
.pj-mtc-num.pj-mtc-total { background: #8b93a0; } /* 전체 = 중립 회색 */
.pj-mtc-num.pj-mtc-open { background: #4573d2; } /* 진행 = 파랑 */
.pj-mtc-num.pj-mtc-done { background: #37a36c; } /* 완료 = 초록 */
.pj-mytree-tasks { list-style: none; margin: 2px 0 0; padding: 0 0 0 8px; border-left: 2px solid #eef0f2; margin-left: 10px; }
.pj-mytree-group.is-collapsed .pj-mytree-tasks { display: none; }
.pj-mytree-task a { display: flex; align-items: flex-start; gap: 7px; padding: 6px 6px; border-radius: 7px; text-decoration: none; color: inherit; }