fix(project): 타임라인 댓글 아이콘(이모지) + 확대구간 저장 안되던 문제

- vis 가 HTML 정화 → 아이콘 폰트 대신 💬 이모지로 댓글 수 표시
- 저장된 구간을 생성 옵션 start/end 로 주입해 autofit 덮어쓰기 방지,
  rangechanged 는 byUser 일 때만 저장

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-25 17:20:46 +09:00
parent e4fb945474
commit 7c5a62ecc1
3 changed files with 16 additions and 12 deletions
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260625x" />
<link rel="stylesheet" href="/static/project.css?v=20260625y" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}
@@ -167,5 +167,5 @@
<script>
window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
</script>
<script src="/static/project.js?v=20260625x" defer></script>
<script src="/static/project.js?v=20260625y" defer></script>
{% endblock %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260625x" />
<link rel="stylesheet" href="/static/project.css?v=20260625y" />
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
<!-- 타임라인 vis-timeline — self-host -->
@@ -290,5 +290,5 @@
</script>
<script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
<script src="/static/project.js?v=20260625x" defer></script>
<script src="/static/project.js?v=20260625y" defer></script>
{% endblock %}
+12 -8
View File
@@ -491,7 +491,9 @@
const endISO = e + (t.due_time ? "T" + t.due_time : "");
const isRange = (e !== s) || (!!t.start_time && !!t.due_time && t.start_time !== t.due_time);
items.push({
id: t.id, group: grp, content: escapeHtml(t.title || "") + cmtBadge(t, "pj-cmt-ic-tl"),
// vis 가 HTML 을 정화(sanitize)하므로 아이콘 폰트 대신 이모지로 댓글 표시.
id: t.id, group: grp,
content: (t.title || "") + (t.comment_count ? " 💬" + t.comment_count : ""),
start: startISO, end: isRange ? endISO : undefined,
type: isRange ? "range" : "point",
style: "background-color:" + (t.completed_at ? "#9aa5b1" : projColor) + ";color:#fff;border:none;",
@@ -518,7 +520,10 @@
const koWd = function (d) { return ["일", "월", "화", "수", "목", "금", "토"][d.getDay()]; };
const pad2 = function (n) { return ("0" + n).slice(-2); };
timeline = new vis.Timeline(node, new vis.DataSet(items), groups, {
// 저장된 보던 구간이 있으면 생성 옵션에 start/end 로 넣어 자동맞춤(autofit)을 막는다.
// (setWindow 로 나중에 바꾸면 초기 autofit 이 rangechanged 로 덮어써 초기화됨)
const saved = loadTLWindow();
const opts = {
stack: true, height: "520px",
horizontalScroll: true, // 마우스 휠 = 좌우 이동(패닝)
verticalScroll: false,
@@ -549,17 +554,16 @@
}
},
},
});
};
if (saved) { opts.start = new Date(saved.start); opts.end = new Date(saved.end); }
timeline = new vis.Timeline(node, new vis.DataSet(items), groups, opts);
timeline.on("select", function (props) {
if (!canManage || !props.items.length) return;
const t = tasks.find(function (x) { return x.id === props.items[0]; });
if (t) openTaskModal(t);
});
// 확대/이동(보던 구간) 기억 — 저장된 창이 있으면 복원, 사용자가 바꾸면 저장.
const saved = loadTLWindow();
if (saved) timeline.setWindow(new Date(saved.start), new Date(saved.end), { animation: false });
timeline.on("rangechanged", function (p) { saveTLWindow(p.start, p.end); });
// 사용자가 직접 확대/이동했을 때만 저장(autofit 등 프로그램 변경은 무시).
timeline.on("rangechanged", function (p) { if (p.byUser) saveTLWindow(p.start, p.end); });
}
function loadTLWindow() {
try {