feat(project): 세션 색상/편집, 프로젝트 트리 드래그, 멤버업무 정렬, 댓글팝업 버그수정

- 좌측 프로젝트 리스트 드래그 재정렬(관리자, 홈 카드와 동일 API)
- 세션 추가/편집 팝업: 이름 + 아사나 10색 색상표(project_stages.color, 마이그레이션 004)
- 보드 세션 hover 아이콘 확대, 세션 제목 강조(업무 카드보다 크고 굵게)
- 완료 세션 반투명 + 보드 끝으로(정렬 기준만 변경 — 해제 시 원래 순서 자동 복귀)
- 전체 멤버 업무 팝업에 표 헤더(가운데정렬/굵게) + 정렬 아이콘 + 더블클릭 편집
- 댓글 채팅 팝업을 initCommentsChat() 공용화 — project.html에 모달이 없어 "내 업무"
  패널 댓글 더블클릭이 전혀 동작 안 했던 버그 수정(동적 배지 재바인딩 누락도 같이 수정)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-17 11:55:49 +09:00
parent 2f611767ca
commit 003d29d349
10 changed files with 438 additions and 174 deletions
+22 -4
View File
@@ -227,6 +227,8 @@
.pj-tree-acts { display: none; gap: 0; flex: 0 0 auto; }
.pj-tree-row:hover .pj-tree-acts { display: inline-flex; }
.pj-tree-acts .pj-icon-btn { width: 22px; height: 22px; font-size: 14px; }
.pj-tree-li[draggable="true"] { cursor: grab; }
.pj-tree-li.is-dragging { opacity: .45; }
/* 구글 머티리얼 심볼 아이콘(담당자) */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; vertical-align: middle; }
@@ -303,11 +305,16 @@
position/width/left/top 은 layoutMasonry 가 매번 인라인으로 계산해 준다. */
.pj-col { position: absolute; background: #eef0f4; border: 1px solid #e2e4ea; border-radius: 14px; padding: 12px; box-sizing: border-box; }
.pj-empty { position: static; }
/* 완료로 지정된 세션 — 반투명 + 보드 끝으로(정렬은 JS 쪽 comparator 담당) */
.pj-col.pj-col-done { opacity: .55; }
.pj-col-head {
display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px;
display: flex; align-items: center; gap: 6px; font-size: 13px;
padding: 2px 6px 12px; margin-bottom: 4px; color: var(--pj-ink);
border-bottom: 1px solid #e2e4ea;
}
.pj-col-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
/* 세션 제목 — 업무 카드 제목(pj-card-title 13.5px/600)보다 뚜렷하게 크고 굵게 */
.pj-col-name { font-size: 15.5px; font-weight: 800; }
.pj-col-count {
margin-left: auto; color: var(--pj-ink-soft); font-weight: 700; font-size: 11px;
background: #fff; border: 1px solid #e2e4ea; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px;
@@ -606,11 +613,22 @@
/* ── 전체 멤버 클릭 팝업 — 담당 업무 목록(프로젝트/세션/제목/마감일) ── */
.pj-mt-card { width: min(600px, 94vw); }
.pj-mt-head {
display: grid; grid-template-columns: 100px 90px 1fr 80px; gap: 8px;
padding: 6px; border-bottom: 2px solid #eef0f2; margin-bottom: 2px;
}
.pj-mt-h {
text-align: center; font-weight: 700; font-size: 12px; color: #1e1f21;
cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: center; gap: 3px;
}
.pj-mt-h:hover { color: var(--pj-accent); }
.pj-mt-sort-icon { font-size: 10px; color: var(--pj-accent); }
.pj-mt-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 50vh; overflow-y: auto; }
.pj-mt-row {
display: grid; grid-template-columns: 100px 90px 1fr 80px; gap: 8px; align-items: center;
padding: 8px 6px; border-bottom: 1px solid #f1f2f4; font-size: 12.5px;
padding: 8px 6px; border-bottom: 1px solid #f1f2f4; font-size: 12.5px; cursor: pointer;
}
.pj-mt-row:hover { background: #f6f7f8; }
.pj-mt-row.is-done { color: #9aa1a9; text-decoration: line-through; }
.pj-mt-proj { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-mt-stage { color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -646,9 +664,9 @@
/* ── 보드 단계 컨트롤 ── */
.pj-col-head { position: relative; }
.pj-col-name { font-weight: 700; }
.pj-col-ctrls { display: none; gap: 1px; margin-left: 6px; }
.pj-col-ctrls { display: none; gap: 3px; margin-left: 6px; }
.pj-col:hover .pj-col-ctrls { display: inline-flex; }
.pj-col-ctrls .pj-icon-btn { width: 20px; height: 20px; font-size: 13px; }
.pj-col-ctrls .pj-icon-btn { width: 28px; height: 28px; font-size: 17px; }
.pj-icon-btn[disabled] { opacity: .3; cursor: default; }
.pj-add-stage { width: 100%; padding: 10px; border: 1px dashed #c9cdd3; border-radius: 12px; background: #fff; color: #6b7280; font-size: 13px; font-weight: 600; cursor: pointer; }
.pj-add-stage:hover { border-color: #1e1f21; color: #1e1f21; }