/* global React, diary, L, useI18n */ // =========================================================== // 주간탭 — 주간 조망(7칸 격자) ↔ 하루 상세 슬라이드 전환 // 같은 창 안에서 가로 슬라이드. 모달/별창 없음. // 할 일·작업시간·일기가 같은 YYYY-MM-DD 키로 묶임 (diary.select.dayBundle). // 기분은 dist/asset/Sprite-0002.png 의 16x16 픽셀 타일을 사용. // =========================================================== const { useState, useEffect, useRef, useMemo } = React; // ---- 날짜 유틸 ---- function pad2(n) { return String(n).padStart(2, "0"); } function dateOnly(d) { return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`; } function fmtClock(ts) { if (!ts) return null; const d = new Date(ts); const h = d.getHours(); const m = pad2(d.getMinutes()); const ampm = h < 12 ? L("time.am") : L("time.pm"); const h12 = ((h + 11) % 12) + 1; return `${ampm} ${h12}:${m}`; } function startOfWeekMonday(date) { const d = new Date(date); const dow = d.getDay(); const offset = dow === 0 ? -6 : 1 - dow; d.setDate(d.getDate() + offset); d.setHours(0, 0, 0, 0); return d; } function addDays(date, n) { const d = new Date(date); d.setDate(d.getDate() + n); return d; } function parseDate(iso) { const [y, m, d] = iso.split("-").map(Number); return new Date(y, m - 1, d); } function normalizedTodoPeriod(t) { const a = t.startDate || null; const b = t.endDate || null; if (!a && !b) return null; const start = a || b; const end = b || a; return start <= end ? { start, end } : { start: end, end: start }; } function eachIsoDate(start, end, fn) { let d = start; for (let i = 0; i < 370 && d <= end; i += 1) { fn(d); d = dateOnly(addDays(parseDate(d), 1)); } } function fmtSecondsHMS(totalSec) { const s = Math.max(0, Math.floor(totalSec || 0)); const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const sec = s % 60; return `${pad2(h)}:${pad2(m)}:${pad2(sec)}`; } function dDayLabel(target, base) { if (!target) return null; const a = new Date(target + "T00:00:00").getTime(); const b = new Date(dateOnly(base) + "T00:00:00").getTime(); const days = Math.round((a - b) / 86400000); if (days === 0) return "D-DAY"; if (days > 0) return `D-${days}`; return `D+${-days}`; } function rangeLabel(weekStart) { const end = addDays(weekStart, 6); const lng = (window.i18n && window.i18n.get && window.i18n.get()) || "ko"; const fmt = (d) => { if (lng === "en") return `${["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][d.getMonth()]} ${d.getDate()}`; return `${d.getMonth() + 1}/${d.getDate()}`; }; return `${fmt(weekStart)} – ${fmt(end)}`; } // ---- 할 일 색상 (할일탭 색상과 연동) ---- // view-todo.jsx 와 동일한 팔레트를 따라간다. 마감일 우선, 핀이면 yellow, 완료면 회색. function todoColor(t) { if (t.done) return "#c9d3e0"; if (t.pinned) return "#fdff85"; // dueDate 가 있으면 mint, 없으면 lavender if (t.dueDate) return "#9ef0c4"; return "#d8cdf5"; } // ---- 기분 이모티콘 (Sprite-0002.png · 6x4 · 16x16 타일) ---- // (col, row) — 0-indexed. 픽셀아트라 image-rendering: pixelated 로 키워서 표시. const SPRITE_URL = "asset/Sprite-0002.png"; const SPRITE_COLS = 6; const SPRITE_ROWS = 4; const TILE = 16; const MOOD_TILES = [ { id: "great", col: 1, row: 0 }, { id: "happy", col: 0, row: 1 }, { id: "love", col: 0, row: 0 }, { id: "calm", col: 5, row: 1 }, { id: "soso", col: 1, row: 1 }, { id: "tired", col: 4, row: 1 }, { id: "sad", col: 2, row: 1 }, { id: "stress", col: 2, row: 0 }, ]; function moodLabel(id) { return L("mood." + id); } function MoodIcon({ mood, size = 28 }) { const m = MOOD_TILES.find(x => x.id === mood); if (!m) return null; const scale = size / TILE; return ( ); } // =========================================================== // 메인 — 슬라이드 컨테이너 // =========================================================== function CalendarView() { useI18n(); // null 이면 주간 뷰, 문자열(YYYY-MM-DD)이면 하루 뷰 const [openDate, setOpenDate] = useState(null); // 슬라이드 트랙용 — 닫혀도 잠시 하루 뷰가 살아있어야 슬라이드 애니가 보임 const [stickyDate, setStickyDate] = useState(null); useEffect(() => { if (openDate) setStickyDate(openDate); else { const id = setTimeout(() => setStickyDate(null), 320); return () => clearTimeout(id); } }, [openDate]); const showDay = openDate != null; const excel = typeof window.isExcelSkin === "function" && window.isExcelSkin(); const sheetCls = typeof window.excelSheetClass === "function" ? window.excelSheetClass("excel-week-sheet") : ""; const panelCls = typeof window.excelPanelClass === "function" ? window.excelPanelClass("excel-week-panel") : ""; return (
setOpenDate(d)} />
{stickyDate && ( setOpenDate(null)} onJump={(d) => setOpenDate(d)} /> )}
); } // =========================================================== // 주간 뷰 — 7칸 격자 + 하단 통계 // =========================================================== function WeekPane({ onPickDay }) { const { state, actions } = diary.useDiary(); const today = new Date(); const todayStr = dateOnly(today); const [weekStart, setWeekStart] = useState(() => startOfWeekMonday(today)); const mondayStr = dateOnly(weekStart); const days = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i)); const dayStrings = days.map(dateOnly); // 그 주의 할 일 묶기 const todos = (state.todos ?? []).filter(t => t.projectId === state.currentProjectId); const dueByDay = {}; const doneByDay = {}; dayStrings.forEach(d => { dueByDay[d] = []; doneByDay[d] = []; }); todos.forEach(t => { dayStrings.forEach(d => { if (!diary.matchesTodoDay(t, d, todayStr)) return; if (t.done) doneByDay[d].push(t); else dueByDay[d].push(t); }); }); // 날짜별 — 현재 프로젝트의 작업시간만 표시. 다른 프로젝트나 미분류는 숨김. const workByDay = {}; const curPid = state.currentProjectId; (state.workSessions ?? []).forEach(w => { if (w.projectId !== curPid) return; if (!dayStrings.includes(w.date)) return; workByDay[w.date] = (workByDay[w.date] || 0) + (w.minutes || 0); }); const retroByDay = {}; (state.retros ?? []).forEach(r => { if (dayStrings.includes(r.date)) retroByDay[r.date] = r; }); const dday = state.dday || {}; const goPrev = () => setWeekStart(s => addDays(s, -7)); const goNext = () => setWeekStart(s => addDays(s, 7)); const goThis = () => setWeekStart(startOfWeekMonday(new Date())); const isThisWeek = mondayStr === dateOnly(startOfWeekMonday(new Date())); // 주간 통계 const weekTotalMin = dayStrings.reduce((sum, d) => sum + (workByDay[d] || 0), 0); const weekDoneCnt = dayStrings.reduce((sum, d) => { const all = [...(dueByDay[d] || []), ...(doneByDay[d] || [])]; return sum + all.filter(t => t.done).length; }, 0); const streak = diary.select.workStreak(state); const excel = typeof window.isExcelSkin === "function" && window.isExcelSkin(); const ribbonCls = typeof window.excelRibbonClass === "function" ? window.excelRibbonClass(excel ? "excel-week-toolbar" : "") : ""; const weekGridCls = excel ? "excel-week-grid" : ""; return (
{/* 타이틀바 */}
{rangeLabel(weekStart)}
{!isThisWeek && ( )}
{/* 2×4 격자 — 7요일 + 노트 한 칸 */}
{[0,1,2,3,4,5,6].map(i => ( todayStr} onClick={() => onPickDay(dayStrings[i])} onToggleTodo={(id) => actions.toggleTodo(id, { completionDay: dayStrings[i] })} colIdx={i % 2} rowIdx={Math.floor(i / 2)} /> ))} {/* 8번째 칸 — 주간 노트 */} actions.setWeekNote(mondayStr, text)} />
{/* 푸터 — 주간 통계 (작업 / 완료 / 연속) */}
); } const DAY_KEYS = [ "planner.mon", "planner.tue", "planner.wed", "planner.thu", "planner.fri", "planner.sat", "planner.sun", ]; // ---- 요일 칸 — 2×4 격자용 ---- function DayCell({ date, labelKey, due, doneFloat, workMin, hasRetro, mood, ddayLabel, ddayName, isToday, isFuture, onClick, onToggleTodo, colIdx, rowIdx }) { const allItems = [...due, ...doneFloat]; const dayName = L(labelKey); const excel = typeof window.isExcelSkin === "function" && window.isExcelSkin(); const cellCls = [ excel ? "excel-week-day" : "", isToday && excel ? "excel-week-today" : "", ].filter(Boolean).join(" "); return (
{/* 헤더 — 요일명 + 날짜 + 오늘/디데이 뱃지 */}
{dayName} {date.getMonth() + 1}/{date.getDate()} {isToday && !excel && ( {L("planner.today")} )} {(ddayLabel || hasRetro) && ( {ddayLabel && ( ★{ddayLabel} )} {hasRetro && ( {typeof window.skinG === "function" ? window.skinG("memo", "📔") : "📔"} {L("planner.diaryShort")} )} )}
{/* 항목 — 체크박스 + 텍스트 (셀 내부 스크롤) */}
e.stopPropagation()} style={{ flex: 1, minHeight: 0, marginTop: 4, overflowY: "auto", overflowX: "hidden", paddingRight: 2, }}> {allItems.length === 0 ? (
·
) : ( allItems.map(t => ( onToggleTodo(t.id)} /> )) )}
{/* 좌하단 — 작업시간 */} {/* 작업시간 푸터 — 현재 프로젝트만 (다른 프로젝트나 미분류는 숨김) */} {!!workMin && (
{typeof window.skinG === "function" ? window.skinG("clock", "🕒") : "🕒"} {workMin >= 60 ? `${Math.floor(workMin/60)}h ${workMin%60 ? (workMin%60)+"m" : ""}` : `${workMin}m`}
)} {/* 우하단 — 기분 */} {mood && (
)}
); } // 요일 칸 안 체크박스 행 (텍스트는 최대 2줄까지 보이고 그 이상은 셀 스크롤로 노출) function TodoMiniLine({ t, onToggle }) { const excel = typeof window.isExcelSkin === "function" && window.isExcelSkin(); return (
{t.title}
); } // 8번째 칸 — 주간 노트 (월요일 키 기준 저장) function WeekNotesCell({ mondayStr, notes, onChange }) { const [local, setLocal] = useState(notes); const lastSentRef = useRef(notes); const LH = 22; const rules = `repeating-linear-gradient(to bottom, transparent 0, transparent ${LH - 1}px, rgba(40,51,63,0.22) ${LH - 1}px, rgba(40,51,63,0.22) ${LH}px)`; // 주가 바뀌면 새 값으로 동기화 useEffect(() => { setLocal(notes); lastSentRef.current = notes; }, [mondayStr, notes]); // 디바운스 저장 useEffect(() => { const id = setTimeout(() => { if (local !== lastSentRef.current) { onChange(local); lastSentRef.current = local; } }, 400); return () => clearTimeout(id); }, [local]); const excel = typeof window.isExcelSkin === "function" && window.isExcelSkin(); return (
e.stopPropagation()} className={excel ? "excel-week-notes" : undefined} style={{ padding: excel ? "4px 6px 6px" : "6px 8px 8px", display: "flex", flexDirection: "column", minHeight: 0, background: excel ? undefined : "rgba(255,255,255,0.16)", position: "relative", }} >
{excel ? "Notes" : "Notes:"}