From 8cc466dd179d71a754bd12cbf5d8d884ceb0a55e Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Thu, 17 Sep 2026 15:36:45 +0900
Subject: [PATCH] =?UTF-8?q?feat(project):=20=EB=82=B4=20=EC=97=85=EB=AC=B4?=
 =?UTF-8?q?=20=EA=B0=9C=EC=88=98=20=EB=B0=B0=EC=A7=80=20-=20=EB=A7=88?=
 =?UTF-8?q?=EC=9A=B0=EC=8A=A4=20=EB=94=B0=EB=9D=BC=EB=8B=A4=EB=8B=88?=
 =?UTF-8?q?=EB=8A=94=20=ED=88=B4=ED=8C=81=EC=9C=BC=EB=A1=9C=20=EC=A7=84?=
 =?UTF-8?q?=ED=96=89/=EC=99=84=EB=A3=8C=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

네이티브 title 대신 커서를 따라 움직이는 작은 말풍선(공용 [data-tip]
유틸, initHoverTips). 헤드리스 크롬에서 synthetic mouse event로 동작
검증(진행/완료 텍스트 + 좌표 갱신 확인).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../project/templates/project/inbox.html      |  4 +--
 .../project/templates/project/index.html      |  8 +++---
 .../project/templates/project/project.html    |  8 +++---
 app/static/project.css                        | 12 +++++++--
 app/static/project.js                         | 26 +++++++++++++++++++
 5 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/app/modules/project/templates/project/inbox.html b/app/modules/project/templates/project/inbox.html
index dcfdca5..2c125f0 100644
--- a/app/modules/project/templates/project/inbox.html
+++ b/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=20260917z" />
+<link rel="stylesheet" href="/static/project.css?v=20260918a" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
@@ -45,5 +45,5 @@
   {% endif %}
 </div>
 
-<script src="/static/project.js?v=20260917z" defer></script>
+<script src="/static/project.js?v=20260918a" defer></script>
 {% endblock %}
diff --git a/app/modules/project/templates/project/index.html b/app/modules/project/templates/project/index.html
index 4c534d7..e0b7333 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 %}
-<link rel="stylesheet" href="/static/project.css?v=20260917z" />
+<link rel="stylesheet" href="/static/project.css?v=20260918a" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
@@ -159,8 +159,8 @@
             <!-- .pj-mytree-head 자체는 접어도(is-collapsed 는 .pj-mytree-tasks 만
                  숨김) 계속 보인다. -->
             <span class="pj-mytree-counts">
-              <span class="pj-mtc-num pj-mtc-open" title="진행">{{ p.open }}</span>
-              <span class="pj-mtc-num pj-mtc-done" title="완료">{{ p.done }}</span>
+              <span class="pj-mtc-num pj-mtc-open" data-tip="진행">{{ p.open }}</span>
+              <span class="pj-mtc-num pj-mtc-done" data-tip="완료">{{ p.done }}</span>
             </span>
           </div>
           <ul class="pj-mytree-tasks">
@@ -421,5 +421,5 @@
   window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
   window.PJ_STAGE_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772","#e8398a","#a15c43"] | tojson }};
 </script>
-<script src="/static/project.js?v=20260917z" defer></script>
+<script src="/static/project.js?v=20260918a" defer></script>
 {% endblock %}
diff --git a/app/modules/project/templates/project/project.html b/app/modules/project/templates/project/project.html
index e8a14c3..c505259 100644
--- a/app/modules/project/templates/project/project.html
+++ b/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=20260917z" />
+<link rel="stylesheet" href="/static/project.css?v=20260918a" />
 <!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 <!-- 타임라인 vis-timeline — self-host -->
@@ -210,8 +210,8 @@
             <!-- .pj-mytree-head 자체는 접어도(is-collapsed 는 .pj-mytree-tasks 만
                  숨김) 계속 보인다. -->
             <span class="pj-mytree-counts">
-              <span class="pj-mtc-num pj-mtc-open" title="진행">{{ p.open }}</span>
-              <span class="pj-mtc-num pj-mtc-done" title="완료">{{ p.done }}</span>
+              <span class="pj-mtc-num pj-mtc-open" data-tip="진행">{{ p.open }}</span>
+              <span class="pj-mtc-num pj-mtc-done" data-tip="완료">{{ p.done }}</span>
             </span>
           </div>
           <ul class="pj-mytree-tasks">
@@ -544,5 +544,5 @@
 </script>
 
 <script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
-<script src="/static/project.js?v=20260917z" defer></script>
+<script src="/static/project.js?v=20260918a" defer></script>
 {% endblock %}
diff --git a/app/static/project.css b/app/static/project.css
index ca11e95..1b6e0c3 100644
--- a/app/static/project.css
+++ b/app/static/project.css
@@ -418,8 +418,16 @@
   font-size: 10.5px; font-weight: 800;
 }
 /* 파스텔톤 — 배경은 연하게, 글자는 진하게(눈에 덜 튀면서도 대비는 유지) */
-.pj-mtc-num.pj-mtc-open { background: #dcf1fc; color: #0284c7; } /* 진행 = 연한 하늘색 */
-.pj-mtc-num.pj-mtc-done { background: #fbe3df; color: #c22b10; } /* 완료 = 연한 빨강 */
+.pj-mtc-num.pj-mtc-open { background: #dcf1fc; color: #0284c7; cursor: default; } /* 진행 = 연한 하늘색 */
+.pj-mtc-num.pj-mtc-done { background: #fbe3df; color: #c22b10; cursor: default; } /* 완료 = 연한 빨강 */
+/* 마우스를 따라다니는 작은 툴팁([data-tip] 공용) */
+.pj-hovertip {
+  position: fixed; z-index: 4000; pointer-events: none;
+  background: #1e1f21; color: #fff; font-size: 11px; font-weight: 700;
+  padding: 4px 8px; border-radius: 6px; white-space: nowrap;
+  box-shadow: 0 3px 10px rgba(0,0,0,.25);
+}
+.pj-hovertip[hidden] { display: none; }
 .pj-mytree-tasks { list-style: none; margin: 2px 0 0; padding: 0 0 0 8px; border-left: 2px solid #eef0f2; margin-left: 10px; }
 .pj-mytree-group.is-collapsed .pj-mytree-tasks { display: none; }
 .pj-mytree-task a { display: flex; align-items: flex-start; gap: 7px; padding: 6px 6px; border-radius: 7px; text-decoration: none; color: inherit; }
diff --git a/app/static/project.js b/app/static/project.js
index 8a23eb5..63ce034 100644
--- a/app/static/project.js
+++ b/app/static/project.js
@@ -4427,6 +4427,31 @@
       .forEach(attachScrollIndicator);
   }
 
+  // ── 마우스를 따라다니는 작은 툴팁 — [data-tip] 달린 요소 아무데나 공용.
+  // 지금은 "내 업무" 개수 배지(진행/완료)에 쓴다. 배지는 서버가 한 번
+  // 렌더한 뒤 텍스트만 바뀌고 재생성되지 않으므로(updateMyTreeCounts),
+  // 페이지 로드 시 한 번만 wiring 하면 된다(동적으로 새로 생기는 요소 없음).
+  function initHoverTips() {
+    let tipEl = null;
+    function show(text, x, y) {
+      if (!tipEl) {
+        tipEl = document.createElement("div");
+        tipEl.className = "pj-hovertip";
+        document.body.appendChild(tipEl);
+      }
+      tipEl.textContent = text;
+      tipEl.style.left = (x + 14) + "px";
+      tipEl.style.top = (y + 18) + "px";
+      tipEl.hidden = false;
+    }
+    function hide() { if (tipEl) tipEl.hidden = true; }
+    document.querySelectorAll("[data-tip]").forEach(function (el) {
+      el.addEventListener("mouseenter", function (e) { show(el.dataset.tip, e.clientX, e.clientY); });
+      el.addEventListener("mousemove", function (e) { show(el.dataset.tip, e.clientX, e.clientY); });
+      el.addEventListener("mouseleave", hide);
+    });
+  }
+
   document.addEventListener("DOMContentLoaded", function () {
     initHome();
     initProject();
@@ -4435,5 +4460,6 @@
     initLiveRefresh();
     wireMyTreeToggles();
     initScrollIndicators();
+    initHoverTips();
   });
 })();