feat(project): 프로젝트 멤버 아이콘으로 업무 팝업, 편집후 목록유지, 사이드바 스타일

- 좌측 "프로젝트 멤버" 아이콘 클릭 시 이 프로젝트 안에서 그 사람이 담당하는
  업무 팝업(전체 멤버 팝업과 같은 UI/정렬/더블클릭 편집). 제목은
  "[프로젝트 이름]의 [사용자]님의 업무" + 아이콘. GET /api/users/tasks 에
  project_id 옵션 추가(멀티호밍 포함 단일 프로젝트 조회 재사용)
- 멤버 업무 팝업에서 더블클릭으로 업무 편집 후 닫으면, 그 자리에 같은
  목록을 다시 열어 유지(MutationObserver로 taskModal 닫힘 감지 후 재오픈)
- 멤버 업무 팝업 제목에 아바타 아이콘 추가, "닫기" 버튼 accent 색 적용
- 좌측 "프로젝트"/"프로젝트 멤버" 헤더 더 굵게, 프로젝트 멤버 아이콘 2배 확대

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-17 13:48:05 +09:00
parent b21e42e949
commit bb6a2c12a3
6 changed files with 77 additions and 17 deletions
+7 -1
View File
@@ -203,11 +203,15 @@
}
.pj-side-block { margin-bottom: 22px; }
.pj-side-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.pj-side-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.pj-member-list { list-style: none; margin: 0; padding: 0; }
.pj-member-list li { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 7px; }
.pj-member-list li:hover { background: #f6f7f8; }
.pj-member-name { font-size: 13px; flex: 1; }
/* 프로젝트 멤버 아이콘 — 기존 대비 2배(사진 18→36px, 기본 아이콘 24→48px).
클릭하면 이 프로젝트 안에서 그 사람이 담당하는 업무 팝업. */
.pj-avatar.pj-member-avatar-lg { width: 36px; height: 36px; }
.pj-gicon.pj-member-avatar-lg { font-size: 48px; }
/* ── 아사나식 프로젝트 트리(사이드바) — 프로젝트 이름만 나열, 업무 목록 없음 ── */
.pj-tree { list-style: none; margin: 0; padding: 0; }
@@ -625,6 +629,8 @@
/* ── 전체 멤버 클릭 팝업 — 담당 업무 목록(프로젝트/세션/제목/마감일) ── */
.pj-mt-card { width: min(600px, 94vw); }
.pj-mt-card h3 { display: flex; align-items: center; gap: 6px; }
.pj-mt-title-avatar { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; vertical-align: middle; }
.pj-mt-head {
display: grid; grid-template-columns: 100px 90px 1fr 80px; gap: 8px;
padding: 6px; border-bottom: 2px solid #eef0f2; margin-bottom: 2px;