feat(project): 완료 프로젝트를 "완료 프로젝트" 별도 섹션으로 다시 분류

같은 그리드 안에서 끝으로만 보내던 것을 되돌려, 진행중/완료를 다시
분리된 섹션(그리드)으로 나눔. 완료 체크 시 카드가 "완료 프로젝트"
섹션으로 옮겨지고(반투명은 기존 .is-done 유지), 해제하면 "진행중인
프로젝트"로 복귀 — 각 섹션 안에서는 sort_order 기준 정렬 유지.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/static/project.css

@@ -35,6 +35,8 @@
 .pj-icon-btn:hover { background: #eceef0; color: #1e1f21; }
 
 .pj-section-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
+.pj-section-head-done { margin-top: 22px; }
+.pj-section-head-done h2 { font-size: 14px; color: #6b7280; }
 .pj-section-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
 
 .pj-empty { padding: 28px; text-align: center; color: #6b7280; background: #f7f8f9; border-radius: 12px; }

app/static/project.js

@@ -570,25 +570,29 @@
           }
         } else if (dueChip) dueChip.remove();
       }
-      // 완료 체크 시 반투명 + 대시보드 맨 끝으로, 해제하면 sort_order 기준
-      // 원래 자리로(세션 완료 처리와 같은 원칙 — resortProjectGrid 가 매번
-      // "완료 여부 → sort_order → id" 순으로 안정 재배치한다).
-      resortProjectGrid();
+      // 완료 체크 시 "완료 프로젝트" 섹션으로, 해제하면 "진행중인 프로젝트"로
+      // 되돌린다. 각 섹션 안에서는 sort_order 기준 안정 정렬 — 드래그로 손댄
+      // 적 없으면 원래 순서 그대로 유지된다.
+      moveProjectCardToSection(card, p.status === "completed");
     }
-    function resortProjectGrid() {
-      const grid = el("pj-project-grid");
+    function sortGridByOrder(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); });
     }
+    function moveProjectCardToSection(card, isDone) {
+      // "완료 프로젝트" 섹션이 화면에 아직 없으면(이번이 첫 완료 프로젝트)
+      // 다음 새로고침까지 원래 자리에 남는다 — 드문 경우라 허용.
+      const targetGrid = el(isDone ? "pj-project-grid-done" : "pj-project-grid");
+      if (!targetGrid) return;
+      targetGrid.appendChild(card);
+      sortGridByOrder(targetGrid);
+    }
     // 새 프로젝트 카드 DOM — project_card(p) 매크로(index.html)를 그대로 미러링.
     // 방금 만든 프로젝트라 멤버/업무는 아직 없다(멤버는 생성 직후 별도 배정,
     // 업무는 카드의 "업무 추가"로 나중에). 만든 사람은 자동 owner 라 관리 가능.
@@ -1343,7 +1347,7 @@
   // 프로젝트 카드 드래그 순서 변경 — 진행중/완료 그리드 각각 안에서만
   // 재정렬(그리드 사이 드래그로 옮기면 상태가 바뀐 것처럼 보이니 막는다).
   function wireProjectGridDrag() {
-    const grids = [el("pj-project-grid")].filter(Boolean);
+    const grids = [el("pj-project-grid"), el("pj-project-grid-done")].filter(Boolean);
     if (!grids.length) return;
     let dragCard = null, sourceGrid = null;
     grids.forEach(function (grid) {