feat(project): 달력을 휴가 모듈식 월간 그리드로 교체
FullCalendar 제거. 휴가 모듈과 동일한 서버 렌더 월간 달력(구글식 bar 레인 배치)로 변경. 업무 start~due 기간을 bar 로 표시, 클릭 시 모달. ?y=&m= 로 월 이동, 프로젝트 색상 반영, 완료 업무는 회색+취소선. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+36
-3
@@ -100,10 +100,43 @@
|
||||
.pj-table td { padding: 10px; border-bottom: 1px solid #f1f2f4; }
|
||||
.pj-table tr.is-done td { color: #9aa1a9; text-decoration: line-through; }
|
||||
|
||||
/* ── 달력/타임라인 컨테이너 ── */
|
||||
#pj-calendar { background: #fff; border-radius: 12px; padding: 10px; }
|
||||
/* ── 달력 (휴가 모듈과 동일한 월간 그리드 룩) ── */
|
||||
.pj-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
|
||||
.pj-cal-title { font-size: 18pt; font-weight: 600; margin: 0; letter-spacing: -0.45px; }
|
||||
.pj-nav-btn { padding: 2px 12px; font-size: 18pt; line-height: 1; }
|
||||
.pj-today-btn { margin-left: auto; }
|
||||
|
||||
.pj-cal { border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.pj-wd-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #f2f2f2; border-bottom: 1px solid #e5e5e5; }
|
||||
.pj-wd { text-align: center; padding: 8px 0; font-size: 15px; font-weight: 600; color: #0a0a0a; border-right: 1px solid #e5e5e5; }
|
||||
.pj-wd:last-child { border-right: none; }
|
||||
|
||||
/* 주(week) — 날짜 셀 위에 bar 레이어 오버레이. 6주가 높이 균등 분할. */
|
||||
.pj-week { position: relative; border-bottom: 1px solid #e5e5e5; flex: 1 1 0; min-height: 92px; display: flex; flex-direction: column; }
|
||||
.pj-week:last-child { border-bottom: none; }
|
||||
.pj-week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1 1 auto; min-height: 0; }
|
||||
.pj-day { height: 100%; border-right: 1px solid #e5e5e5; padding: 6px 8px; box-sizing: border-box; }
|
||||
.pj-day:last-child { border-right: none; }
|
||||
.pj-day-num { font-size: 20px; font-weight: 600; color: #0a0a0a; }
|
||||
.pj-out { background: #fafafa; }
|
||||
.pj-out .pj-day-num { color: #bbb; }
|
||||
.pj-today { background: #f5f5f5; }
|
||||
.pj-today .pj-day-num { background: #0a0a0a; color: #fff !important; border-radius: 9999px; padding: 2px 9px; }
|
||||
.pj-today .pj-day-num.pj-red { background: #c22b10; }
|
||||
.pj-today .pj-day-num.pj-blue { background: #1d4ed8; }
|
||||
.pj-red { color: #c22b10 !important; }
|
||||
.pj-blue { color: #1d4ed8 !important; }
|
||||
|
||||
/* bar 오버레이 — 날짜 숫자 아래(top)부터 7열 그리드로 겹쳐 그림 */
|
||||
.pj-week-bars { position: absolute; left: 0; right: 0; top: 38px; bottom: 4px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 22px; row-gap: 3px; pointer-events: none; }
|
||||
.pj-bar { margin: 0 3px; padding: 0 8px; height: 20px; line-height: 20px; border-radius: 6px; font-size: 13px; color: #fff; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; align-self: center; pointer-events: auto; cursor: pointer; }
|
||||
.pj-bar-label { pointer-events: none; }
|
||||
.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; }
|
||||
|
||||
/* ── 타임라인 컨테이너 ── */
|
||||
#pj-timeline { background: #fff; border-radius: 12px; padding: 6px; }
|
||||
.fc { font-size: 13px; }
|
||||
|
||||
/* ── 모달 ── */
|
||||
.pj-modal { position: fixed; inset: 0; background: rgba(20,22,26,.46); display: flex; align-items: center; justify-content: center; z-index: 1000; }
|
||||
|
||||
+18
-37
@@ -100,7 +100,6 @@
|
||||
const members = data.members || [];
|
||||
const priorityLabels = data.priorityLabels || {};
|
||||
|
||||
let calendar = null;
|
||||
let timeline = null;
|
||||
let currentView = "calendar";
|
||||
|
||||
@@ -121,45 +120,26 @@
|
||||
});
|
||||
|
||||
function renderView(view) {
|
||||
if (view === "calendar") renderCalendar();
|
||||
if (view === "calendar") wireCalendar();
|
||||
else if (view === "timeline") renderTimeline();
|
||||
else if (view === "board") renderBoard();
|
||||
else if (view === "list") renderList();
|
||||
}
|
||||
|
||||
// ── 달력 (FullCalendar) ──
|
||||
function taskEvents() {
|
||||
return tasks.filter(function (t) { return t.due_date || t.start_date; })
|
||||
.map(function (t) {
|
||||
const start = t.start_date || t.due_date;
|
||||
// FullCalendar end 는 배타적 → 마감일 포함 위해 +1일은 생략(단일일 표시)
|
||||
return {
|
||||
id: String(t.id),
|
||||
title: t.title,
|
||||
start: start,
|
||||
end: t.due_date && t.due_date !== start ? t.due_date : undefined,
|
||||
backgroundColor: t.completed_at ? "#9aa5b1" : (t.project_color || "#4573d2"),
|
||||
borderColor: "transparent",
|
||||
extendedProps: { task: t },
|
||||
};
|
||||
// ── 달력 (휴가식 서버 렌더 그리드) ──
|
||||
// bar 는 서버가 그려둠. 클릭하면 업무 모달 열기(관리 권한 시).
|
||||
let calendarWired = false;
|
||||
function wireCalendar() {
|
||||
if (calendarWired) return;
|
||||
calendarWired = true;
|
||||
document.querySelectorAll(".pj-bar[data-task-id]").forEach(function (bar) {
|
||||
bar.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
if (!canManage) return;
|
||||
const t = tasks.find(function (x) { return String(x.id) === bar.dataset.taskId; });
|
||||
if (t) openTaskModal(t);
|
||||
});
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
const node = el("pj-calendar");
|
||||
if (calendar) { calendar.removeAllEvents(); calendar.addEventSource(taskEvents()); calendar.render(); return; }
|
||||
calendar = new FullCalendar.Calendar(node, {
|
||||
initialView: "dayGridMonth",
|
||||
locale: "ko",
|
||||
height: "auto",
|
||||
headerToolbar: { left: "prev,next today", center: "title", right: "dayGridMonth,dayGridWeek" },
|
||||
events: taskEvents(),
|
||||
eventClick: function (info) {
|
||||
info.jsEvent.preventDefault();
|
||||
if (canManage) openTaskModal(info.event.extendedProps.task);
|
||||
},
|
||||
});
|
||||
calendar.render();
|
||||
}
|
||||
|
||||
// ── 타임라인 (vis-timeline) ──
|
||||
@@ -281,8 +261,9 @@
|
||||
}
|
||||
|
||||
function refreshActiveView() {
|
||||
if (currentView === "calendar" && calendar) { calendar.removeAllEvents(); calendar.addEventSource(taskEvents()); }
|
||||
else renderView(currentView);
|
||||
// 달력은 서버 렌더라 변경 반영 위해 새로고침. 그 외 뷰는 즉시 재렌더.
|
||||
if (currentView === "calendar") { location.reload(); return; }
|
||||
renderView(currentView);
|
||||
}
|
||||
|
||||
// ── 업무 모달 ──
|
||||
@@ -382,8 +363,8 @@
|
||||
});
|
||||
});
|
||||
|
||||
// 최초 렌더
|
||||
renderCalendar();
|
||||
// 최초 렌더 — 달력은 서버 렌더, 클릭 핸들러만 연결
|
||||
wireCalendar();
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
|
||||
Reference in New Issue
Block a user