feat(project): 홈 화면 진행중/완료 프로젝트 구분, 완료 업무 취소선 유지

- 프로젝트 카드를 "진행중"/"완료" 두 섹션으로 분리(완료는 접기/펼치기)
- 완료된 업무도 미리보기 목록에서 숨기지 않고 취소선으로 계속 표시
- 사이드바 빠른 프로젝트 생성(+)에도 마감일 입력 추가 (홈 새 프로젝트 모달은 기존에 지원)
- 카드 편집/삭제 버튼이 완료 섹션 카드도 인식하도록 수정

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

app/modules/project/router.py

@@ -336,9 +336,10 @@ async def index(request: Request) -> HTMLResponse:
         include_archived=False,
         member_email=None if admin else user["email"],
     )
-    # 완료된 프로젝트는 비활성으로 맨 끝에 (홈 카드 정렬). 안정 정렬.
-    projects = sorted(projects, key=lambda p: 1 if p.get("status") == "completed" else 0)
     tree = _build_tree(projects)
+    # 진행중/완료 프로젝트를 구분해 별도 섹션으로 표시.
+    active_projects = [p for p in tree if p.get("status") != "completed"]
+    done_projects = [p for p in tree if p.get("status") == "completed"]
 
     # 아바타 맵: 이메일(소문자) → 구글 프로필 이미지 URL (홈 카드 업무 담당자 표시용)
     from app.main import user_store  # noqa: WPS433
@@ -348,26 +349,29 @@ async def index(request: Request) -> HTMLResponse:
         if u.get("picture")
     }
 
-    # 프로젝트 카드에 업무 미리보기(담당자·마감일·진행률) 붙이기 — 한눈에 현황 파악용
+    # 프로젝트 카드에 업무 미리보기(담당자·마감일·진행률) 붙이기 — 한눈에 현황 파악용.
+    # 완료 업무도 취소선으로 계속 보이도록 목록에 포함하되, 미완료를 먼저 보여준다.
     today_iso = today_kst().isoformat()
     for p in tree:
         p_tasks = st.list_tasks(project_id=p["id"], include_subprojects=True, limit=500)
         total = len(p_tasks)
-        done = sum(1 for t in p_tasks if t.get("completed_at"))
         open_tasks = [t for t in p_tasks if not t.get("completed_at")]
+        done_tasks = [t for t in p_tasks if t.get("completed_at")]
         open_tasks.sort(key=lambda t: (t.get("due_date") is None, t.get("due_date") or "", t["id"]))
-        for t in open_tasks:
+        done_tasks.sort(key=lambda t: t.get("completed_at") or "", reverse=True)
+        ordered_tasks = open_tasks + done_tasks
+        for t in ordered_tasks:
             t["assignee_display"] = (
                 t.get("assignee_name")
                 or (t["assignee_email"].split("@")[0] if t.get("assignee_email") else "")
             )
             d = t.get("due_date")
-            t["due_overdue"] = bool(d and d[:10] < today_iso)
+            t["due_overdue"] = bool(d and d[:10] < today_iso and not t.get("completed_at"))
         p["task_total"] = total
-        p["task_done"] = done
-        p["task_percent"] = round(done * 100 / total) if total else 0
-        p["task_preview"] = open_tasks[:8]
-        p["task_more"] = max(0, len(open_tasks) - 8)
+        p["task_done"] = len(done_tasks)
+        p["task_percent"] = round(len(done_tasks) * 100 / total) if total else 0
+        p["task_preview"] = ordered_tasks[:8]
+        p["task_more"] = max(0, len(ordered_tasks) - 8)
 
     my_tasks = st.list_tasks(assignee_email=user["email"], limit=500)
     # 내 업무를 프로젝트별로 묶어 트리로 표시
@@ -394,7 +398,8 @@ async def index(request: Request) -> HTMLResponse:
             "nav_items": build_erp_nav(user, active="project"),
             "page_title": "프로젝트 관리",
             "page_subtitle": "달력·타임라인·보드로 프로젝트를 관리하세요.",
-            "tree": tree,
+            "active_projects": active_projects,
+            "done_projects": done_projects,
             "my_projects": my_projects,
             "avatars": avatars,
             "today": today_kst().isoformat(),

app/modules/project/templates/project/inbox.html

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260625p" />
+<link rel="stylesheet" href="/static/project.css?v=20260915b" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
@@ -45,5 +45,5 @@
   {% endif %}
 </div>
 
-<script src="/static/project.js?v=20260625p" defer></script>
+<script src="/static/project.js?v=20260915b" defer></script>
 {% endblock %}

app/modules/project/templates/project/index.html

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260915a" />
+<link rel="stylesheet" href="/static/project.css?v=20260915b" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
@@ -10,40 +10,7 @@
      data-is-super="{{ 'true' if user.is_super_admin else 'false' }}"
      data-me="{{ user.email }}">
 
-  <div class="pj-home">
-    <!-- 프로젝트 목록 -->
-    <section class="pj-home-main">
-      <div class="pj-section-head">
-        <h2>프로젝트</h2>
-        <div class="pj-toolbar-right">
-          {% set done_count = tree | selectattr('status', 'equalto', 'completed') | list | length %}
-          {% if done_count %}
-          <button type="button" class="pj-btn" id="pj-toggle-done" data-count="{{ done_count }}">
-            완료 {{ done_count }}개 숨기기
-          </button>
-          {% endif %}
-          <a class="pj-bell" href="/project/inbox" title="알림센터">
-            <span class="material-symbols-outlined">notifications</span>
-            <span class="pj-bell-badge" id="pj-bell-badge" hidden>0</span>
-          </a>
-          {% if is_admin %}
-          <button type="button" class="pj-btn pj-btn-primary" id="pj-new-project">
-            + 새 프로젝트
-          </button>
-          {% endif %}
-        </div>
-      </div>
-
-      {% if not tree %}
-      <div class="pj-empty">
-        아직 프로젝트가 없습니다.
-        {% if is_admin %}상단의 <b>새 프로젝트</b> 버튼으로 만들어 보세요.
-        {% else %}관리자가 프로젝트에 배정하면 여기에 표시됩니다.{% endif %}
-      </div>
-      {% endif %}
-
-      <div class="pj-project-grid" id="pj-project-grid">
-        {% for p in tree %}
+  {% macro project_card(p) %}
     <div class="pj-project-card {% if p.status == 'completed' %}is-done{% endif %}"
          style="--pj-color: {{ p.color }}"
          data-id="{{ p.id }}"
@@ -81,9 +48,9 @@
       {% if p.task_preview %}
       <ul class="pj-project-tasklist">
         {% for t in p.task_preview %}
-            <li class="pj-project-taskrow">
+        <li class="pj-project-taskrow {% if t.completed_at %}is-done{% endif %}">
           <a href="/project/p/{{ p.id }}?task={{ t.id }}">
-                <span class="material-symbols-outlined pj-project-task-ic">radio_button_unchecked</span>
+            <span class="material-symbols-outlined pj-project-task-ic">{% if t.completed_at %}task_alt{% else %}radio_button_unchecked{% endif %}</span>
             <span class="pj-project-task-title">{{ t.title }}</span>
             {% if t.assignee_display %}
             <span class="pj-project-task-assignee">
@@ -107,8 +74,51 @@
       <div class="pj-project-tasks-empty">진행 중인 업무가 없습니다.</div>
       {% endif %}
     </div>
-        {% endfor %}
+  {% endmacro %}
+
+  <div class="pj-home">
+    <!-- 프로젝트 목록 -->
+    <section class="pj-home-main">
+      <div class="pj-section-head">
+        <h2>진행중인 프로젝트</h2>
+        <div class="pj-toolbar-right">
+          <a class="pj-bell" href="/project/inbox" title="알림센터">
+            <span class="material-symbols-outlined">notifications</span>
+            <span class="pj-bell-badge" id="pj-bell-badge" hidden>0</span>
+          </a>
+          {% if is_admin %}
+          <button type="button" class="pj-btn pj-btn-primary" id="pj-new-project">
+            + 새 프로젝트
+          </button>
+          {% endif %}
         </div>
+      </div>
+
+      {% if not active_projects and not done_projects %}
+      <div class="pj-empty">
+        아직 프로젝트가 없습니다.
+        {% if is_admin %}상단의 <b>새 프로젝트</b> 버튼으로 만들어 보세요.
+        {% else %}관리자가 프로젝트에 배정하면 여기에 표시됩니다.{% endif %}
+      </div>
+      {% elif not active_projects %}
+      <div class="pj-empty pj-empty-sm">진행중인 프로젝트가 없습니다.</div>
+      {% endif %}
+
+      <div class="pj-project-grid" id="pj-project-grid">
+        {% for p in active_projects %}{{ project_card(p) }}{% endfor %}
+      </div>
+
+      {% if done_projects %}
+      <div class="pj-section-head pj-section-head-done">
+        <h2>완료된 프로젝트</h2>
+        <button type="button" class="pj-btn" id="pj-toggle-done" data-count="{{ done_projects | length }}">
+          완료 {{ done_projects | length }}개 숨기기
+        </button>
+      </div>
+      <div class="pj-project-grid" id="pj-project-grid-done">
+        {% for p in done_projects %}{{ project_card(p) }}{% endfor %}
+      </div>
+      {% endif %}
     </section>
 
     <!-- 내 업무 -->
@@ -202,5 +212,5 @@
 <script>
   window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
 </script>
-<script src="/static/project.js?v=20260626b" defer></script>
+<script src="/static/project.js?v=20260915b" defer></script>
 {% endblock %}

app/modules/project/templates/project/project.html

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260626b" />
+<link rel="stylesheet" href="/static/project.css?v=20260915b" />
 <!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 <!-- 타임라인 vis-timeline — self-host -->
@@ -291,5 +291,5 @@
 </script>
 
 <script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
-<script src="/static/project.js?v=20260626b" defer></script>
+<script src="/static/project.js?v=20260915b" defer></script>
 {% endblock %}

app/static/project.css

@@ -44,8 +44,6 @@
 .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-project-grid.pj-hide-done .pj-project-card.is-done { display: none; }
 /* 카드 수정 버튼 */
 .pj-card-edit {
   position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
@@ -80,6 +78,8 @@
 }
 .pj-project-task-due { font-size: 11px; color: #9aa1a9; flex: 0 0 auto; }
 .pj-project-task-due.is-overdue { color: #c22b10; font-weight: 700; }
+.pj-project-taskrow.is-done .pj-project-task-title { text-decoration: line-through; color: #9aa1a9; }
+.pj-project-taskrow.is-done .pj-project-task-ic { color: #9aa5b1; }
 .pj-project-more {
   display: block; padding: 6px 16px 12px; font-size: 12px; font-weight: 600;
   color: #6b7280; text-decoration: none;
@@ -87,6 +87,10 @@
 .pj-project-more:hover { color: #1e1f21; text-decoration: underline; }
 .pj-project-tasks-empty { padding: 4px 16px 14px; font-size: 12px; color: #b7bdc5; border-top: 1px solid #f0f1f3; margin-top: 2px; }
 
+/* 완료 프로젝트 섹션 헤더 */
+.pj-section-head-done { margin-top: 22px; }
+.pj-section-head-done h2 { font-size: 14px; color: #6b7280; }
+
 .pj-home-side { border-left: 1px solid #eef0f2; padding-left: 24px; }
 @media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; } }
 .pj-mytask-list { list-style: none; margin: 0; padding: 0; }

app/static/project.js

@@ -71,18 +71,19 @@
       return !!cb && cb === me;
     }
 
-    // ── 완료 프로젝트 숨기기 토글 (localStorage 기억) ──
+    // ── 완료 프로젝트 섹션 접기/펼치기 (localStorage 기억) ──
     const toggleBtn = el("pj-toggle-done");
-    if (toggleBtn) {
+    const doneGrid = el("pj-project-grid-done");
+    if (toggleBtn && doneGrid) {
       const KEY = "pj_hide_done";
       function apply(hide) {
-        if (grid) grid.classList.toggle("pj-hide-done", hide);
+        doneGrid.hidden = hide;
         const n = toggleBtn.dataset.count;
         toggleBtn.textContent = hide ? "완료 " + n + "개 보기" : "완료 " + n + "개 숨기기";
       }
       apply(localStorage.getItem(KEY) === "1");
       toggleBtn.addEventListener("click", function () {
-        const hide = !(grid && grid.classList.contains("pj-hide-done"));
+        const hide = !doneGrid.hidden;
         try { localStorage.setItem(KEY, hide ? "1" : "0"); } catch (_) {}
         apply(hide);
       });
@@ -111,12 +112,12 @@
       });
     }
 
-    // ── 프로젝트 수정 모달 ──
+    // ── 프로젝트 수정 모달 (진행중/완료 두 그리드 모두 대상) ──
     const editModal = el("pj-modal-edit");
     if (editModal && grid) {
       wireModalClose(editModal);
       let getEditColor = null;
-      grid.querySelectorAll(".pj-card-edit").forEach(function (btn) {
+      document.querySelectorAll(".pj-project-card .pj-card-edit").forEach(function (btn) {
         btn.addEventListener("click", function (e) {
           e.preventDefault(); e.stopPropagation();
           const card = btn.closest(".pj-project-card");
@@ -148,7 +149,7 @@
       });
       el("pj-delete-project").addEventListener("click", async function () {
         const id = el("pj-e-id").value;
-        const card = grid.querySelector('.pj-project-card[data-id="' + id + '"]');
+        const card = document.querySelector('.pj-project-card[data-id="' + id + '"]');
         if (card && !canDelete(card.dataset.creator)) { alert("삭제는 만든 사람만 할 수 있습니다."); return; }
         if (!confirm("이 프로젝트를 삭제할까요? 안의 업무도 모두 삭제됩니다.")) return;
         try { await api("DELETE", "/project/api/projects/" + id); location.reload(); }
@@ -1098,8 +1099,9 @@
     if (newProjSide) newProjSide.addEventListener("click", async function () {
       const name = prompt("새 프로젝트 이름");
       if (!name || !name.trim()) return;
+      const due = prompt("마감일 (YYYY-MM-DD, 없으면 취소 없이 비워두고 확인)") || "";
       try {
-        await api("POST", "/project/api/projects", { name: name.trim() });
+        await api("POST", "/project/api/projects", { name: name.trim(), due_date: due.trim() || null });
         location.reload();
       } catch (e) { alert("생성 실패: " + e.message); }
     });

docs/PROJECT_MODULE.md

@@ -26,8 +26,10 @@
 
 ## 3. 화면 / 뷰
 
-- **홈** (`/project/`): 프로젝트 카드 그리드 + "내 업무" 사이드. 관리자는 "새 프로젝트".
-  각 카드에 진행률 바(완료/전체 업무)와 미완료 업무 미리보기(담당자·마감일, 최대 8건 + 더보기)를 표시해 전체 현황을 한눈에 파악.
+- **홈** (`/project/`): "진행중인 프로젝트" / "완료된 프로젝트" 두 섹션으로 구분된 카드 그리드 + "내 업무" 사이드.
+  관리자는 "새 프로젝트"(이름/설명/시작일/마감일/색상 지정). 완료 섹션은 접기/펼치기(localStorage 기억).
+  각 카드에 진행률 바(완료/전체 업무)와 업무 미리보기(담당자·마감일, 최대 8건 + 더보기)를 표시 —
+  완료된 업무도 취소선으로 계속 노출해 전체 현황을 한눈에 파악.
 - **프로젝트** (`/project/p/{id}`): 좌측 서브프로젝트/멤버, 우측 뷰 토글.
   - **달력** — FullCalendar. 업무를 시작~마감 기간으로 표시. 클릭 편집.
   - **타임라인** — vis-timeline(간트형). 기간 있는 업무만.