feat(project): 좌측 프로젝트 목록에 수정(✎) 버튼 추가

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

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-16 01:39:27 +09:00
parent be9c97e04d
commit 1710c8f811
5 changed files with 107 additions and 9 deletions
+6
View File
@@ -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",
@@ -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 %}
@@ -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 %}
@@ -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 %}