feat(project): 홈 화면 프로젝트 카드에 업무 미리보기·진행률 표시

카드마다 완료/전체 진행률 바와 미완료 업무 목록(담당자·마감일, 최대 8건)을
붙여 프로젝트 전체 현황을 홈에서 한눈에 볼 수 있게 함.

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

app/modules/project/router.py

@@ -339,6 +339,36 @@ async def index(request: Request) -> HTMLResponse:
     # 완료된 프로젝트는 비활성으로 맨 끝에 (홈 카드 정렬). 안정 정렬.
     projects = sorted(projects, key=lambda p: 1 if p.get("status") == "completed" else 0)
     tree = _build_tree(projects)
+
+    # 아바타 맵: 이메일(소문자) → 구글 프로필 이미지 URL (홈 카드 업무 담당자 표시용)
+    from app.main import user_store  # noqa: WPS433
+    avatars = {
+        store.norm_str(u["email"], lower=True): u.get("picture") or ""
+        for u in user_store.list_all()
+        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")]
+        open_tasks.sort(key=lambda t: (t.get("due_date") is None, t.get("due_date") or "", t["id"]))
+        for t in open_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)
+        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)
+
     my_tasks = st.list_tasks(assignee_email=user["email"], limit=500)
     # 내 업무를 프로젝트별로 묶어 트리로 표시
     my_groups: dict[int, dict[str, Any]] = {}
@@ -366,6 +396,7 @@ async def index(request: Request) -> HTMLResponse:
             "page_subtitle": "달력·타임라인·보드로 프로젝트를 관리하세요.",
             "tree": tree,
             "my_projects": my_projects,
+            "avatars": avatars,
             "today": today_kst().isoformat(),
         },
     )

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=20260626b" />
+<link rel="stylesheet" href="/static/project.css?v=20260915a" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
@@ -63,7 +63,13 @@
               {% if p.description %}<div class="pj-project-desc">{{ p.description }}</div>{% endif %}
               <div class="pj-project-meta">
                 {% if p.due_date %}<span class="pj-chip">마감 {{ p.due_date }}</span>{% endif %}
+                {% if p.task_total %}<span class="pj-chip">업무 {{ p.task_done }}/{{ p.task_total }}</span>{% endif %}
               </div>
+              {% if p.task_total %}
+              <div class="pj-project-progress">
+                <div class="pj-project-progress-bar" style="width: {{ p.task_percent }}%"></div>
+              </div>
+              {% endif %}
             </div>
           </a>
           {% if is_admin %}
@@ -71,6 +77,35 @@
             <span class="material-symbols-outlined">edit</span>
           </button>
           {% endif %}
+
+          {% if p.task_preview %}
+          <ul class="pj-project-tasklist">
+            {% for t in p.task_preview %}
+            <li class="pj-project-taskrow">
+              <a href="/project/p/{{ p.id }}?task={{ t.id }}">
+                <span class="material-symbols-outlined pj-project-task-ic">radio_button_unchecked</span>
+                <span class="pj-project-task-title">{{ t.title }}</span>
+                {% if t.assignee_display %}
+                <span class="pj-project-task-assignee">
+                  {% if avatars.get(t.assignee_email | lower) %}
+                  <img class="pj-avatar pj-gicon-sm" src="{{ avatars[t.assignee_email | lower] }}" alt="" />
+                  {% endif %}
+                  {{ t.assignee_display }}
+                </span>
+                {% endif %}
+                {% if t.due_date %}
+                <span class="pj-project-task-due {% if t.due_overdue %}is-overdue{% endif %}">{{ t.due_date[:10] }}</span>
+                {% endif %}
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+          {% if p.task_more %}
+          <a class="pj-project-more" href="/project/p/{{ p.id }}">+{{ p.task_more }}개 업무 더보기</a>
+          {% endif %}
+          {% elif p.task_total == 0 %}
+          <div class="pj-project-tasks-empty">진행 중인 업무가 없습니다.</div>
+          {% endif %}
         </div>
         {% endfor %}
       </div>

app/static/project.css

@@ -33,7 +33,7 @@
 .pj-home { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
 @media (max-width: 980px) { .pj-home { grid-template-columns: 1fr; } }
 
-.pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
+.pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
 .pj-project-card {
   position: relative; border: 1px solid #e7e9ec; border-radius: 14px;
   background: #fff; transition: box-shadow .14s, transform .1s;
@@ -59,6 +59,33 @@
 .pj-project-name { font-weight: 700; font-size: 15px; }
 .pj-project-desc { color: #6b7280; font-size: 12.5px; margin-top: 3px; }
 .pj-project-meta { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
+.pj-project-progress { margin-top: 10px; height: 5px; border-radius: 999px; background: #eef0f2; overflow: hidden; }
+.pj-project-progress-bar { height: 100%; border-radius: 999px; background: var(--pj-color, #4573d2); }
+
+/* 카드 하단 업무 미리보기 목록 */
+.pj-project-tasklist { list-style: none; margin: 0; padding: 0 10px 6px; border-top: 1px solid #f0f1f3; }
+.pj-project-taskrow a {
+  display: flex; align-items: center; gap: 7px; padding: 7px 6px; border-radius: 7px;
+  text-decoration: none; color: inherit;
+}
+.pj-project-taskrow a:hover { background: #f6f7f8; }
+.pj-project-task-ic { font-size: 16px; flex: 0 0 auto; color: #b7bdc5; }
+.pj-project-task-title {
+  font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.pj-project-task-assignee {
+  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280;
+  flex: 0 0 auto; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.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-more {
+  display: block; padding: 6px 16px 12px; font-size: 12px; font-weight: 600;
+  color: #6b7280; text-decoration: none;
+}
+.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-home-side { border-left: 1px solid #eef0f2; padding-left: 24px; }
 @media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; } }

docs/PROJECT_MODULE.md

@@ -27,6 +27,7 @@
 ## 3. 화면 / 뷰
 
 - **홈** (`/project/`): 프로젝트 카드 그리드 + "내 업무" 사이드. 관리자는 "새 프로젝트".
+  각 카드에 진행률 바(완료/전체 업무)와 미완료 업무 미리보기(담당자·마감일, 최대 8건 + 더보기)를 표시해 전체 현황을 한눈에 파악.
 - **프로젝트** (`/project/p/{id}`): 좌측 서브프로젝트/멤버, 우측 뷰 토글.
   - **달력** — FullCalendar. 업무를 시작~마감 기간으로 표시. 클릭 편집.
   - **타임라인** — vis-timeline(간트형). 기간 있는 업무만.