From 1710c8f8112b19828fcece1783f65335bd615f98 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Wed, 16 Sep 2026 01:39:27 +0900
Subject: [PATCH] =?UTF-8?q?feat(project):=20=EC=A2=8C=EC=B8=A1=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EB=AA=A9=EB=A1=9D=EC=97=90=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95(=E2=9C=8E)=20=EB=B2=84=ED=8A=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

프로젝트 상세 화면 좌측 트리는 renderTree()가 매번 JS로 다시 그리므로
(라이브 새로고침 포함) 실제 동작은 projectsMeta/treeProjLi/wireTreeHandlers
쪽에 구현 — 홈 화면과 같은 프로젝트 수정 모달(이름/설명/기간/색상/완료
토글)을 재사용. 서버 쪽 projects_meta·nav_projects 에 description/status
필드 추가(기존엔 없어서 수정 폼을 못 채웠음). Jinja 쪽 nav_projects 루프도
동일하게 맞춰뒀지만 JS가 즉시 덮어쓰므로 첫 페인트용일 뿐 — 기존 삭제
버튼도 같은 이중 구조였음(관례를 그대로 따름).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/modules/project/router.py                 |  6 ++
 .../project/templates/project/inbox.html      |  2 +-
 .../project/templates/project/index.html      |  2 +-
 .../project/templates/project/project.html    | 36 +++++++++-
 app/static/project.js                         | 70 +++++++++++++++++--
 5 files changed, 107 insertions(+), 9 deletions(-)

diff --git a/app/modules/project/router.py b/app/modules/project/router.py
index aeb9929..43ca4cd 100644
--- a/app/modules/project/router.py
+++ b/app/modules/project/router.py
@@ -523,12 +523,18 @@ async def project_page(request: Request, project_id: int) -> HTMLResponse:
             "start_date": p.get("start_date"),
             "due_date": p.get("due_date"),
             "created_by": p.get("created_by") or "",
+            "description": p.get("description") or "",
+            "status": p.get("status") or "active",
         })
         nav_projects.append({
             "id": p["id"],
             "name": p["name"],
             "color": p.get("color") or "#4573d2",
             "created_by": p.get("created_by") or "",
+            "description": p.get("description") or "",
+            "start_date": p.get("start_date"),
+            "due_date": p.get("due_date"),
+            "status": p.get("status") or "active",
             "tasks": [
                 {"id": t["id"], "title": t["title"],
                  "color": t.get("project_color") or p.get("color") or "#4573d2",
diff --git a/app/modules/project/templates/project/inbox.html b/app/modules/project/templates/project/inbox.html
index bd9668b..56ca719 100644
--- a/app/modules/project/templates/project/inbox.html
+++ b/app/modules/project/templates/project/inbox.html
@@ -45,5 +45,5 @@
   {% endif %}
 </div>
 
-<script src="/static/project.js?v=20260917c" defer></script>
+<script src="/static/project.js?v=20260917d" defer></script>
 {% endblock %}
diff --git a/app/modules/project/templates/project/index.html b/app/modules/project/templates/project/index.html
index a13613a..71fb137 100644
--- a/app/modules/project/templates/project/index.html
+++ b/app/modules/project/templates/project/index.html
@@ -393,5 +393,5 @@
 <script>
   window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
 </script>
-<script src="/static/project.js?v=20260917c" defer></script>
+<script src="/static/project.js?v=20260917d" defer></script>
 {% endblock %}
diff --git a/app/modules/project/templates/project/project.html b/app/modules/project/templates/project/project.html
index 88b74de..d76ec4d 100644
--- a/app/modules/project/templates/project/project.html
+++ b/app/modules/project/templates/project/project.html
@@ -39,7 +39,11 @@
         {% if nav_projects %}
         <ul class="pj-tree" id="pj-tree-root">
           {% for p in nav_projects %}
-          <li class="pj-tree-li" data-id="{{ p.id }}">
+          <li class="pj-tree-li" data-id="{{ p.id }}"
+              data-name="{{ p.name }}" data-desc="{{ p.description or '' }}"
+              data-start="{{ p.start_date or '' }}" data-due="{{ p.due_date or '' }}"
+              data-color="{{ p.color }}" data-status="{{ p.status or 'active' }}"
+              data-creator="{{ p.created_by or '' }}">
             <div class="pj-tree-row {% if p.id == project.id %}is-active{% endif %}">
               <a class="pj-tree-link" href="/project/p/{{ p.id }}">
                 <span class="pj-tree-avatar" style="background: {{ p.color }}">{{ p.name[0] | upper }}</span>
@@ -47,6 +51,7 @@
               </a>
               {% if is_admin %}
               <span class="pj-tree-acts">
+                <button type="button" class="pj-icon-btn pj-tree-edit" title="프로젝트 수정">✎</button>
                 <button type="button" class="pj-icon-btn pj-tree-del" data-id="{{ p.id }}" data-name="{{ p.name }}" data-creator="{{ p.created_by }}" title="프로젝트 삭제">×</button>
               </span>
               {% endif %}
@@ -218,6 +223,32 @@
   </div>
 </div>
 
+<!-- 프로젝트 수정 모달 — 좌측 프로젝트 목록의 ✎ 버튼 -->
+<div class="pj-modal" id="pj-modal-edit" hidden>
+  <div class="pj-modal-card">
+    <h3>프로젝트 수정</h3>
+    <input type="hidden" id="pj-e-id" />
+    <label>이름<input type="text" id="pj-e-name" placeholder="프로젝트 이름" /></label>
+    <label>설명<textarea id="pj-e-desc" rows="2"></textarea></label>
+    <div class="pj-form-row">
+      <label>시작일<input type="date" id="pj-e-start" /></label>
+      <label>마감일<input type="date" id="pj-e-due" /></label>
+    </div>
+    <label>색상
+      <span class="pj-color-palette" id="pj-e-colors"></span>
+    </label>
+    <label class="pj-time-toggle">
+      <input type="checkbox" id="pj-e-done" /> 프로젝트 완료 (목록 끝으로 이동·비활성)
+    </label>
+    <div class="pj-modal-actions">
+      <button type="button" class="pj-btn pj-btn-danger" id="pj-delete-project">삭제</button>
+      <span style="flex:1"></span>
+      <button type="button" class="pj-btn" data-close>취소</button>
+      <button type="button" class="pj-btn pj-btn-primary" id="pj-save-edit">저장</button>
+    </div>
+  </div>
+</div>
+
 <!-- 업무 모달 -->
 <div class="pj-modal" id="pj-modal-task" hidden>
   <div class="pj-modal-card pj-task-modal-card">
@@ -388,6 +419,7 @@
 </div>
 {% endif %}
 
+<script>window.PJ_COLORS = {{ color_palette | tojson }};</script>
 <!-- 데이터 -->
 <script id="pj-data" type="application/json">
 {
@@ -406,5 +438,5 @@
 </script>
 
 <script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
-<script src="/static/project.js?v=20260917c" defer></script>
+<script src="/static/project.js?v=20260917d" defer></script>
 {% endblock %}
diff --git a/app/static/project.js b/app/static/project.js
index 4994800..f21d456 100644
--- a/app/static/project.js
+++ b/app/static/project.js
@@ -1979,16 +1979,24 @@
     // ── 프로젝트 트리(사이드바) — 아사나처럼 프로젝트 이름만 나열한다(업무 목록은
     // 안 보여준다 — 업무는 가운데 화면에서만 본다). 색상 원(첫 글자) 아이콘.
     function treeProjLi(p) {
-      const del = isAdmin
-        ? '<span class="pj-tree-acts"><button type="button" class="pj-icon-btn pj-tree-del" data-id="' + p.id +
-          '" data-name="' + escapeHtml(p.name) + '" data-creator="' + escapeHtml(p.created_by || "") + '" title="프로젝트 삭제">×</button></span>'
-        : "";
+      let acts = "";
+      if (isAdmin) {
+        acts = '<span class="pj-tree-acts">' +
+          '<button type="button" class="pj-icon-btn pj-tree-edit" data-id="' + p.id +
+          '" data-name="' + escapeHtml(p.name) + '" data-desc="' + escapeHtml(p.description || "") +
+          '" data-start="' + (p.start_date || "") + '" data-due="' + (p.due_date || "") +
+          '" data-color="' + (p.color || "#4573d2") + '" data-status="' + (p.status || "active") +
+          '" title="프로젝트 수정">✎</button>' +
+          '<button type="button" class="pj-icon-btn pj-tree-del" data-id="' + p.id +
+          '" data-name="' + escapeHtml(p.name) + '" data-creator="' + escapeHtml(p.created_by || "") + '" title="프로젝트 삭제">×</button>' +
+          "</span>";
+      }
       const initial = escapeHtml((p.name || "?").trim().charAt(0).toUpperCase() || "?");
       return '<li class="pj-tree-li" data-id="' + p.id + '"><div class="pj-tree-row ' +
         (p.id === projectId ? "is-active" : "") + '">' +
         '<a class="pj-tree-link" href="/project/p/' + p.id + '">' +
         '<span class="pj-tree-avatar" style="background:' + (p.color || "#4573d2") + '">' + initial + "</span>" +
-        '<span class="pj-tree-name">' + escapeHtml(p.name) + "</span></a>" + del + "</div></li>";
+        '<span class="pj-tree-name">' + escapeHtml(p.name) + "</span></a>" + acts + "</div></li>";
     }
     function wireTreeHandlers(rootUl) {
       rootUl.querySelectorAll(".pj-tree-del").forEach(function (b) {
@@ -2003,6 +2011,12 @@
           } catch (err) { alert("삭제 실패: " + err.message); }
         });
       });
+      rootUl.querySelectorAll(".pj-tree-edit").forEach(function (b) {
+        b.addEventListener("click", function (e) {
+          e.preventDefault(); e.stopPropagation();
+          openProjectEditModal(b.dataset);
+        });
+      });
     }
     function renderTree() {
       const rootUl = el("pj-tree-root");
@@ -2024,6 +2038,52 @@
       } catch (e) { alert("생성 실패: " + e.message); }
     });
 
+    // ── 좌측 프로젝트 목록 ✎ 버튼 — 프로젝트 수정 모달(홈 화면과 동일).
+    // 트리는 renderTree() 로 매번 다시 그려지므로(라이브 새로고침 포함) 열기
+    // 로직을 재사용 가능한 함수로 두고, wireTreeHandlers 에서 매번 다시 건다.
+    const editModal = el("pj-modal-edit");
+    let getEditColor = null;
+    function openProjectEditModal(data) {
+      el("pj-e-id").value = data.id;
+      el("pj-e-name").value = data.name || "";
+      el("pj-e-desc").value = data.desc || "";
+      el("pj-e-start").value = data.start || "";
+      el("pj-e-due").value = data.due || "";
+      el("pj-e-done").checked = data.status === "completed";
+      getEditColor = renderColorPalette(el("pj-e-colors"), null, data.color);
+      openModal(editModal);
+    }
+    if (editModal) {
+      wireModalClose(editModal);
+      el("pj-save-edit").addEventListener("click", async function () {
+        const id = el("pj-e-id").value;
+        const name = el("pj-e-name").value.trim();
+        if (!name) { alert("이름을 입력하세요."); return; }
+        try {
+          await api("PUT", "/project/api/projects/" + id, {
+            name: name,
+            description: el("pj-e-desc").value.trim(),
+            start_date: el("pj-e-start").value || null,
+            due_date: el("pj-e-due").value || null,
+            color: getEditColor ? getEditColor() : undefined,
+            status: el("pj-e-done").checked ? "completed" : "active",
+          });
+          location.reload();
+        } catch (e) { alert("저장 실패: " + e.message); }
+      });
+      el("pj-delete-project").addEventListener("click", async function () {
+        const id = el("pj-e-id").value;
+        const p = projectsMeta.find(function (x) { return String(x.id) === String(id); });
+        if (p && !canDelete(p.created_by)) { alert(DELETE_DENIED); return; }
+        if (!confirm("이 프로젝트를 삭제할까요? 안의 업무도 모두 삭제됩니다.")) return;
+        try {
+          await api("DELETE", "/project/api/projects/" + id);
+          if (String(id) === String(projectId)) location.href = "/project/";
+          else location.reload();
+        } catch (e) { alert("삭제 실패: " + e.message); }
+      });
+    }
+
     // ── 멤버 배정/제외 (관리자) ──
     const memberModal = el("pj-modal-member");
     wireModalClose(memberModal);