diff --git a/app/modules/project/router.py b/app/modules/project/router.py index b4d8def..b372577 100644 --- a/app/modules/project/router.py +++ b/app/modules/project/router.py @@ -319,6 +319,8 @@ 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) my_tasks = st.list_tasks(assignee_email=user["email"], limit=500) # 내 업무를 프로젝트별로 묶어 트리로 표시 diff --git a/app/modules/project/store.py b/app/modules/project/store.py index ff398f4..7abf8b5 100644 --- a/app/modules/project/store.py +++ b/app/modules/project/store.py @@ -22,7 +22,7 @@ PRIORITIES: tuple[str, ...] = ("low", "normal", "high") PRIORITY_LABELS: dict[str, str] = {"low": "낮음", "normal": "보통", "high": "높음"} # 프로젝트 상태 -PROJECT_STATUSES: tuple[str, ...] = ("active", "archived") +PROJECT_STATUSES: tuple[str, ...] = ("active", "completed", "archived") # 멤버 역할 MEMBER_ROLES: tuple[str, ...] = ("manager", "member") diff --git a/app/modules/project/templates/project/index.html b/app/modules/project/templates/project/index.html index bd97bde..c568f78 100644 --- a/app/modules/project/templates/project/index.html +++ b/app/modules/project/templates/project/index.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + {% endblock %} @@ -14,6 +14,12 @@

프로젝트

+ {% set done_count = tree | selectattr('status', 'equalto', 'completed') | list | length %} + {% if done_count %} + + {% endif %} notifications @@ -34,19 +40,35 @@
{% endif %} -
+
+ + + {% endif %} - + {% endblock %} diff --git a/app/static/project.css b/app/static/project.css index bfde81d..45a13aa 100644 --- a/app/static/project.css +++ b/app/static/project.css @@ -35,10 +35,26 @@ .pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .pj-project-card { - display: flex; gap: 12px; padding: 16px; border: 1px solid #e7e9ec; border-radius: 14px; - background: #fff; text-decoration: none; color: inherit; transition: box-shadow .14s, transform .1s; + position: relative; border: 1px solid #e7e9ec; border-radius: 14px; + background: #fff; transition: box-shadow .14s, transform .1s; } .pj-project-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); } +.pj-project-cardlink { display: flex; gap: 12px; padding: 16px; text-decoration: none; color: inherit; } +/* 완료 프로젝트 — 비활성(흐리게) */ +.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; + display: inline-flex; align-items: center; justify-content: center; + border-radius: 8px; color: #6b7280; opacity: 0; transition: opacity .12s; +} +.pj-card-edit .material-symbols-outlined { font-size: 18px; } +.pj-project-card:hover .pj-card-edit { opacity: 1; } +.pj-card-edit:hover { background: #eceef0; color: #1e1f21; } .pj-project-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pj-color, #4573d2); margin-top: 5px; flex: 0 0 auto; } .pj-project-name { font-weight: 700; font-size: 15px; } .pj-project-desc { color: #6b7280; font-size: 12.5px; margin-top: 3px; } diff --git a/app/static/project.js b/app/static/project.js index 7911bd8..262741b 100644 --- a/app/static/project.js +++ b/app/static/project.js @@ -33,9 +33,9 @@ } // ── 색상 팔레트 렌더 ─────────────────────────────────────── - function renderColorPalette(container, onPick) { + function renderColorPalette(container, onPick, initial) { const colors = window.PJ_COLORS || ["#4573d2"]; - let selected = colors[0]; + let selected = (initial && colors.indexOf(initial) >= 0) ? initial : colors[0]; container.innerHTML = ""; colors.forEach(function (c) { const b = document.createElement("button"); @@ -60,27 +60,91 @@ // 홈 페이지 — 새 프로젝트 // ════════════════════════════════════════════════════════════ function initHome() { + const grid = el("pj-project-grid"); + if (!grid && !el("pj-toggle-done")) return; // 홈 아님 + + // ── 완료 프로젝트 숨기기 토글 (localStorage 기억) ── + const toggleBtn = el("pj-toggle-done"); + if (toggleBtn) { + const KEY = "pj_hide_done"; + function apply(hide) { + if (grid) grid.classList.toggle("pj-hide-done", 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")); + try { localStorage.setItem(KEY, hide ? "1" : "0"); } catch (_) {} + apply(hide); + }); + } + + // ── 새 프로젝트 모달 ── const newBtn = el("pj-new-project"); const modal = el("pj-modal-project"); - if (!newBtn || !modal) return; - wireModalClose(modal); - const getColor = renderColorPalette(el("pj-f-colors")); + if (newBtn && modal) { + wireModalClose(modal); + const getColor = renderColorPalette(el("pj-f-colors")); + newBtn.addEventListener("click", function () { openModal(modal); }); + el("pj-save-project").addEventListener("click", async function () { + const name = el("pj-f-name").value.trim(); + if (!name) { alert("이름을 입력하세요."); return; } + try { + await api("POST", "/project/api/projects", { + name: name, + description: el("pj-f-desc").value.trim(), + start_date: el("pj-f-start").value || null, + due_date: el("pj-f-due").value || null, + color: getColor(), + }); + location.reload(); + } catch (e) { alert("생성 실패: " + e.message); } + }); + } - newBtn.addEventListener("click", function () { openModal(modal); }); - el("pj-save-project").addEventListener("click", async function () { - const name = el("pj-f-name").value.trim(); - if (!name) { alert("이름을 입력하세요."); return; } - try { - await api("POST", "/project/api/projects", { - name: name, - description: el("pj-f-desc").value.trim(), - start_date: el("pj-f-start").value || null, - due_date: el("pj-f-due").value || null, - color: getColor(), + // ── 프로젝트 수정 모달 ── + const editModal = el("pj-modal-edit"); + if (editModal && grid) { + wireModalClose(editModal); + let getEditColor = null; + grid.querySelectorAll(".pj-card-edit").forEach(function (btn) { + btn.addEventListener("click", function (e) { + e.preventDefault(); e.stopPropagation(); + const card = btn.closest(".pj-project-card"); + el("pj-e-id").value = card.dataset.id; + el("pj-e-name").value = card.dataset.name || ""; + el("pj-e-desc").value = card.dataset.desc || ""; + el("pj-e-start").value = card.dataset.start || ""; + el("pj-e-due").value = card.dataset.due || ""; + el("pj-e-done").checked = card.dataset.status === "completed"; + getEditColor = renderColorPalette(el("pj-e-colors"), null, card.dataset.color); + openModal(editModal); }); - location.reload(); - } catch (e) { alert("생성 실패: " + e.message); } - }); + }); + 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; + if (!confirm("이 프로젝트를 삭제할까요? 안의 업무도 모두 삭제됩니다.")) return; + try { await api("DELETE", "/project/api/projects/" + id); location.reload(); } + catch (e) { alert("삭제 실패: " + e.message); } + }); + } } // ════════════════════════════════════════════════════════════