feat(project): 홈 카드도 완료 체크 시 반투명 + 대시보드 끝으로(세션과 동일 원칙)

기존엔 완료 프로젝트가 "완료된 프로젝트" 별도 섹션(숨기기 토글 포함)으로
빠졌는데, 요청에 따라 세션 완료 처리와 같은 방식으로 바꿈 — 같은 그리드
안에서 완료 여부 → sort_order → id 순으로 안정 정렬해 완료면 맨 끝으로,
해제하면 sort_order 기준 원래 자리로 자동 복귀(resortProjectGrid, 서버
쪽도 index() 에서 같은 기준으로 미리 정렬해 내려줌: _group 아님, 별도
정렬 한 줄 sorted(tree, key=...)). 완료 섹션/숨기기 토글 관련 죽은
코드(JS·CSS·템플릿) 정리.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-17 14:48:19 +09:00
parent 8d765ec60d
commit 4a2e20520e
6 changed files with 41 additions and 57 deletions
+21 -27
View File
@@ -473,7 +473,7 @@
// ════════════════════════════════════════════════════════════
function initHome() {
const grid = el("pj-project-grid");
if (!grid && !el("pj-toggle-done")) return; // 홈 아님
if (!grid) return; // 홈 아님
const wrap = document.querySelector(".pj-wrap");
const me = ((wrap && wrap.dataset.me) || "").toLowerCase();
const isSuper = !!(wrap && wrap.dataset.isSuper === "true");
@@ -570,10 +570,24 @@
}
} else if (dueChip) dueChip.remove();
}
// 진행중 ↔ 완료 그리드 이동. 완료 그리드가 화면에 아직 없으면(첫 완료
// 프로젝트) 다음 새로고침까지 원래 위치에 남는다 — 드문 경우라 허용.
const targetGrid = el(p.status === "completed" ? "pj-project-grid-done" : "pj-project-grid");
if (targetGrid && card.parentElement !== targetGrid) targetGrid.appendChild(card);
// 완료 체크 시 반투명 + 대시보드 맨 끝으로, 해제하면 sort_order 기준
// 원래 자리로(세션 완료 처리와 같은 원칙 — resortProjectGrid 가 매번
// "완료 여부 → sort_order → id" 순으로 안정 재배치한다).
resortProjectGrid();
}
function resortProjectGrid() {
const grid = el("pj-project-grid");
if (!grid) return;
const cards = Array.prototype.slice.call(grid.querySelectorAll(".pj-project-card"));
cards.sort(function (a, b) {
const da = a.dataset.status === "completed" ? 1 : 0;
const db = b.dataset.status === "completed" ? 1 : 0;
if (da !== db) return da - db;
const oa = Number(a.dataset.sortOrder) || 0, ob = Number(b.dataset.sortOrder) || 0;
if (oa !== ob) return oa - ob;
return Number(a.dataset.id) - Number(b.dataset.id);
});
cards.forEach(function (c) { grid.appendChild(c); });
}
// 새 프로젝트 카드 DOM — project_card(p) 매크로(index.html)를 그대로 미러링.
// 방금 만든 프로젝트라 멤버/업무는 아직 없다(멤버는 생성 직후 별도 배정,
@@ -586,7 +600,7 @@
' data-desc="' + escapeHtml(p.description || "") + '"' +
' data-start="' + (p.start_date || "") + '" data-due="' + (p.due_date || "") + '"' +
' data-color="' + color + '" data-status="active" data-creator="' + escapeHtml(p.created_by || "") + '"' +
' data-has-stages="false">' +
' data-has-stages="false" data-sort-order="' + (p.sort_order || 0) + '">' +
'<a class="pj-project-cardlink" href="/project/p/' + p.id + '">' +
'<div class="pj-project-header"><span class="pj-project-name">' + escapeHtml(p.name || "") + "</span></div>" +
'<div class="pj-project-body">' +
@@ -872,26 +886,6 @@
updateMyTreeCounts(groupEl);
}
// ── 완료 프로젝트 섹션 접기/펼치기 (localStorage 기억) ──
// display 를 인라인 스타일로 직접 제어 — 외부 CSS 규칙과의 특이도/우선순위
// 문제를 원천 차단(어떤 스타일시트보다 인라인 style 이 항상 우선한다).
const toggleBtn = el("pj-toggle-done");
const doneGrid = el("pj-project-grid-done");
if (toggleBtn && doneGrid) {
const KEY = "pj_hide_done";
let hideDone = localStorage.getItem(KEY) === "1";
function apply() {
doneGrid.style.display = hideDone ? "none" : "";
const n = toggleBtn.dataset.count;
toggleBtn.textContent = hideDone ? "완료 " + n + "개 보기" : "완료 " + n + "개 숨기기";
}
apply();
toggleBtn.addEventListener("click", function () {
hideDone = !hideDone;
try { localStorage.setItem(KEY, hideDone ? "1" : "0"); } catch (_) {}
apply();
});
}
// ── 새 프로젝트 모달 ──
const newBtn = el("pj-new-project");
@@ -1349,7 +1343,7 @@
// 프로젝트 카드 드래그 순서 변경 — 진행중/완료 그리드 각각 안에서만
// 재정렬(그리드 사이 드래그로 옮기면 상태가 바뀐 것처럼 보이니 막는다).
function wireProjectGridDrag() {
const grids = [el("pj-project-grid"), el("pj-project-grid-done")].filter(Boolean);
const grids = [el("pj-project-grid")].filter(Boolean);
if (!grids.length) return;
let dragCard = null, sourceGrid = null;
grids.forEach(function (grid) {