feat(project): 달력에서 bar 드래그로 일정 이동

서버 렌더 달력의 업무 bar 를 다른 날짜로 드래그하면 기간을 유지한 채
일정 이동(시작일 앵커, 없으면 마감일). 드롭 시 PUT /api/tasks/{id} 로
start/due 갱신 후 새로고침. 드래그 중엔 bar pointer-events 해제해 날짜
셀이 드롭을 받도록 하고, 드롭 대상 칸은 하이라이트.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-25 12:37:19 +09:00
parent 776f655db4
commit 15eabd0bbf
5 changed files with 67 additions and 8 deletions
+55 -1
View File
@@ -127,11 +127,26 @@
}
// ── 달력 (휴가식 서버 렌더 그리드) ──
// bar 는 서버가 그려둠. 클릭하면 업무 모달 열기(관리 권한 시).
// bar 는 서버가 그려둠. 클릭=업무 모달, 드래그=일정 이동(관리 권한 시).
let calendarWired = false;
// 날짜 문자열 더하기(일 단위). 'YYYY-MM-DD' 입출력.
function addDays(dstr, days) {
if (!dstr) return null;
const d = new Date(dstr + "T00:00:00");
d.setDate(d.getDate() + days);
const y = d.getFullYear(), m = String(d.getMonth() + 1).padStart(2, "0"), dd = String(d.getDate()).padStart(2, "0");
return y + "-" + m + "-" + dd;
}
function dayDiff(a, b) {
return Math.round((new Date(b + "T00:00:00") - new Date(a + "T00:00:00")) / 86400000);
}
function wireCalendar() {
if (calendarWired) return;
calendarWired = true;
const cal = document.querySelector(".pj-cal");
document.querySelectorAll(".pj-bar[data-task-id]").forEach(function (bar) {
bar.addEventListener("click", function (e) {
e.preventDefault();
@@ -139,6 +154,45 @@
const t = tasks.find(function (x) { return String(x.id) === bar.dataset.taskId; });
if (t) openTaskModal(t);
});
if (canManage) {
bar.draggable = true;
bar.addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", bar.dataset.taskId);
e.dataTransfer.effectAllowed = "move";
if (cal) cal.classList.add("pj-cal-dragging");
});
bar.addEventListener("dragend", function () {
if (cal) cal.classList.remove("pj-cal-dragging");
document.querySelectorAll(".pj-day.pj-drop-over").forEach(function (d) { d.classList.remove("pj-drop-over"); });
});
}
});
if (!canManage || !cal) return;
document.querySelectorAll(".pj-day[data-date]").forEach(function (cell) {
cell.addEventListener("dragover", function (e) { e.preventDefault(); cell.classList.add("pj-drop-over"); });
cell.addEventListener("dragleave", function () { cell.classList.remove("pj-drop-over"); });
cell.addEventListener("drop", async function (e) {
e.preventDefault();
cell.classList.remove("pj-drop-over");
const taskId = e.dataTransfer.getData("text/plain");
const t = tasks.find(function (x) { return String(x.id) === String(taskId); });
if (!t) return;
const dropDate = cell.dataset.date;
// 앵커(시작일 우선, 없으면 마감일) 기준 이동량 → 기간 유지하며 시프트
const anchor = t.start_date || t.due_date;
if (!anchor) return;
const delta = dayDiff(anchor, dropDate);
if (delta === 0) return;
const payload = {
start_date: t.start_date ? addDays(t.start_date, delta) : null,
due_date: t.due_date ? addDays(t.due_date, delta) : null,
};
try {
await api("PUT", "/project/api/tasks/" + taskId, payload);
location.reload();
} catch (err) { alert("이동 실패: " + err.message); }
});
});
}