feat(project): 홈 카드 헤더 색상 채우기, 좌측 사이드바 헤더 대비 강화

- 프로젝트 카드: 이름 옆 작은 점 대신 카드 헤더 윗부분 전체를 프로젝트
  색으로 채우고 글자 흰색(보드 세션 헤더와 같은 원칙). 액션 아이콘(업무추가/
  수정)도 흰색으로, "완료" 칩은 반투명 흰 배경으로 대비 확보.
- 프로젝트 수정 후 DOM patch 로직도 새 구조(이름이 헤더 안, 설명은 본문
  맨 앞)에 맞게 수정.
- 좌측 "프로젝트"/"프로젝트 멤버"/"전체 멤버" 헤더 — 굵기만으론 12px
  회색이라 여전히 흐려 보여서, 글자 색을 진한 잉크색으로 올려 대비 확보.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-17 13:59:30 +09:00
parent 7ce8d1d9cf
commit da635f22ce
5 changed files with 31 additions and 17 deletions
+18 -7
View File
@@ -68,26 +68,34 @@
.pj-project-card:hover { box-shadow: var(--pj-card-shadow-hover); transform: translateY(-1px); }
.pj-project-card[draggable="true"] { cursor: grab; }
.pj-project-card.is-dragging { opacity: .45; }
.pj-project-cardlink { display: flex; gap: 12px; padding: 16px; text-decoration: none; color: inherit; }
.pj-project-cardlink { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
/* 카드 헤더 — 예전엔 이름 옆 작은 점(dot)이었지만, 이제 헤더 윗부분 전체를
프로젝트 색으로 채우고 글자는 흰색(세션 헤더 색칠과 같은 원칙). */
.pj-project-header {
display: flex; align-items: center; padding: 12px 16px;
background: var(--pj-color, #4573d2); color: #fff;
border-radius: calc(var(--pj-card-radius) - 1px) calc(var(--pj-card-radius) - 1px) 0 0;
}
.pj-project-name .pj-chip { background: rgba(255,255,255,.28); color: #fff; }
.pj-project-body { padding: 12px 16px 16px; }
/* 완료 프로젝트 — 비활성(흐리게) */
.pj-project-card.is-done { background: #f6f7f8; opacity: .62; }
.pj-project-card.is-done:hover { opacity: .85; }
.pj-project-card.is-done .pj-project-dot { background: #9aa5b1; }
/* 카드 우측 상단 액션(업무 추가/수정) — 호버 시에만 노출 */
/* 카드 우측 상단 액션(업무 추가/수정) — 헤더가 항상 색으로 채워지므로
흰 아이콘으로, 호버 시에만 노출 */
.pj-card-actions {
position: absolute; top: 8px; right: 8px; display: flex; gap: 2px;
}
.pj-card-actions .pj-icon-btn {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; color: #6b7280; opacity: 0; transition: opacity .12s;
border-radius: 8px; color: #fff; opacity: 0; transition: opacity .12s;
}
.pj-card-actions .pj-icon-btn .material-symbols-outlined { font-size: 18px; }
.pj-project-card:hover .pj-card-actions .pj-icon-btn { opacity: 1; }
.pj-card-actions .pj-icon-btn:hover { background: #eceef0; color: #1e1f21; }
.pj-project-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pj-color, #4573d2); margin-top: 5px; flex: 0 0 auto; }
.pj-card-actions .pj-icon-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.pj-project-name { font-weight: 700; font-size: 15px; }
.pj-project-desc { color: #6b7280; font-size: 12.5px; margin-top: 3px; }
.pj-project-desc { color: #6b7280; font-size: 12.5px; }
/* 프로젝트 이름 아래 — 배정 멤버(아이콘+이름) */
.pj-project-members { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; }
.pj-project-member { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #6b7280; }
@@ -204,6 +212,9 @@
.pj-side-block { margin-bottom: 22px; }
.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; }
/* 굵게 지정해도 연한 회색 + 12px 라서 눈에 잘 안 띄었음 — 텍스트만 진한
잉크색으로 대비를 올린다("+" 버튼은 원래 색 유지). */
.pj-side-head span { color: var(--pj-ink); }
.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; }
+5 -3
View File
@@ -518,7 +518,10 @@
if (!descEl) {
descEl = document.createElement("div");
descEl.className = "pj-project-desc";
if (nameEl) nameEl.insertAdjacentElement("afterend", descEl);
// 이름은 이제 색칠된 헤더 안에 있으므로(afterend 로 넣으면 헤더
// 안에 끼어버림), 본문(.pj-project-body) 맨 앞에 넣는다.
const body = card.querySelector(".pj-project-body");
if (body) body.insertBefore(descEl, body.firstChild);
}
descEl.textContent = p.description;
} else if (descEl) descEl.remove();
@@ -556,9 +559,8 @@
' data-start="' + (p.start_date || "") + '" data-due="' + (p.due_date || "") + '"' +
' data-color="' + color + '" data-status="active" data-creator="' + escapeHtml(p.created_by || "") + '">' +
'<a class="pj-project-cardlink" href="/project/p/' + p.id + '">' +
'<span class="pj-project-dot"></span>' +
'<div class="pj-project-header"><span class="pj-project-name">' + escapeHtml(p.name || "") + "</span></div>" +
'<div class="pj-project-body">' +
'<div class="pj-project-name">' + escapeHtml(p.name || "") + "</div>" +
(p.description ? '<div class="pj-project-desc">' + escapeHtml(p.description) + "</div>" : "") +
'<div class="pj-project-meta">' +
(p.due_date ? '<span class="pj-chip">마감 ' + fmtDateKr(p.due_date) + "</span>" : "") +