fix(project): 달력 드래그를 포인터 기반으로 재구현

HTML5 네이티브 DnD 가 절대배치 grid 오버레이 달력에서 dragstart 를 잡지
못해(콘솔 에러 없이 무동작) 드래그가 안 됐다. mousedown→mousemove→mouseup
포인터 기반으로 직접 구현:
- 5px 이상 움직이면 드래그 시작, 고스트 라벨이 커서 따라다님
- 드래그 중 bar pointer-events 해제 → elementFromPoint 가 날짜 셀 반환
- 놓은 칸의 날짜로 기간 유지 이동, 안 움직이면 클릭=모달
- 네이티브 draggable 속성 제거

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-25 12:57:56 +09:00
parent 7a85367db8
commit 105e036573
5 changed files with 61 additions and 60 deletions
+5 -2
View File
@@ -137,10 +137,13 @@
.pj-bar-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.pj-bar-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.pj-bar-done { opacity: .75; text-decoration: line-through; }
/* 드래그 이동 — 드래그 중엔 bar 가 이벤트 가로채지 않게(날짜 셀이 드롭 받도록) */
/* 드래그 이동(포인터 기반) — 드래그 중엔 bar 가 이벤트 가로채지 않게(elementFromPoint 가 날짜 셀 반환) */
.pj-cal-dragging { cursor: grabbing; }
.pj-cal-dragging .pj-bar { pointer-events: none; }
.pj-bar[draggable="true"] { cursor: grab; }
.pj-project-view[data-can-manage="true"] .pj-bar { cursor: grab; }
.pj-day.pj-drop-over { background: #e6ecfa; box-shadow: inset 0 0 0 2px #aebfe6; }
/* 드래그 중 따라다니는 고스트 라벨 */
.pj-bar-ghost { position: fixed; z-index: 2000; pointer-events: none; padding: 2px 10px; border-radius: 6px; background: #1e1f21; color: #fff; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.3); white-space: nowrap; }
/* ── 타임라인 컨테이너 ── */
#pj-timeline { background: #fff; border-radius: 12px; padding: 6px; }