917 lines
32 KiB
Vue
917 lines
32 KiB
Vue
<script setup>
|
|
import { computed, reactive, ref, watch, nextTick } from 'vue'
|
|
import MiniCalendar from './components/MiniCalendar.vue'
|
|
import PlannerPage from './components/PlannerPage.vue'
|
|
import StatsDashboard from './components/StatsDashboard.vue'
|
|
import {
|
|
createInitialPlannerRecords,
|
|
persistPlannerState,
|
|
restorePlannerUiState,
|
|
} from './lib/plannerStorage'
|
|
|
|
const screenMode = ref('planner')
|
|
const viewMode = ref('focus')
|
|
const printLayout = ref('single')
|
|
const selectedDate = ref(new Date())
|
|
const calendarViewDate = ref(new Date(selectedDate.value))
|
|
const statsRangeStart = ref(toKey(new Date(new Date().setDate(new Date().getDate() - 6))))
|
|
const statsRangeEnd = ref(toKey(new Date()))
|
|
|
|
const hours = [
|
|
'6', '7', '8', '9', '10', '11', '12',
|
|
'1', '2', '3', '4', '5',
|
|
'6', '7', '8', '9', '10', '11', '12',
|
|
'1', '2', '3', '4', '5',
|
|
]
|
|
|
|
const timetableCellCount = hours.length * 6
|
|
let printPageStyleElement = null
|
|
|
|
function createEmptyTimetable() {
|
|
return Array.from({ length: timetableCellCount }, () => false)
|
|
}
|
|
|
|
function createTaskLabel(index) {
|
|
return `${index + 1}`.padStart(2, '0')
|
|
}
|
|
|
|
function createTimetableFromRanges(ranges) {
|
|
const timetable = createEmptyTimetable()
|
|
|
|
ranges.forEach(([start, end]) => {
|
|
for (let index = start; index <= end; index += 1) {
|
|
timetable[index] = true
|
|
}
|
|
})
|
|
|
|
return timetable
|
|
}
|
|
|
|
const plannerSeed = {
|
|
'2026-04-21': {
|
|
dday: 'D-12 LAUNCH',
|
|
comment: '집중 작업 3개만 남기고, 10분 단위로 흐름을 끊지 않기.',
|
|
tasks: [
|
|
{ label: '', title: '홈 화면 정보 구조 정리', checked: true },
|
|
{ label: '', title: '플래너 페이지 헤더 상태 연결', checked: true },
|
|
{ label: '', title: '타임테이블 액티브 블록 설계' },
|
|
{ label: '', title: '우측 캘린더 빠른 이동 구현' },
|
|
{ label: '', title: '전날 요약 영역 문구 다듬기' },
|
|
{ label: '', title: '다음날 할 일 자동 제안 시나리오' },
|
|
{ label: '', title: '통계 카드 레이아웃 정리' },
|
|
{ label: '', title: '모바일 스택 레이아웃 점검' },
|
|
{ label: '', title: '체크박스 인터랙션 연결' },
|
|
{ label: '', title: '페이지 넘김 애니메이션 방향 검토' },
|
|
{ label: '', title: 'Tailwind 토큰 정리' },
|
|
{ label: '', title: 'Vue 컴포넌트 분리 기준 정하기' },
|
|
{ label: '', title: '빈 상태 문구 작성' },
|
|
{ label: '', title: '주간 리듬 회고 메모 추가' },
|
|
{ label: '', title: '디자인 QA 체크리스트 정리' },
|
|
],
|
|
memo: [
|
|
{ label: '', text: '오른쪽 패널은 정보 확인과 이동이 한 번에 되도록 유지.' },
|
|
{ label: '', text: '2페이지 보기는 비교용으로 남기고 기본값은 집중 보기로 사용.' },
|
|
{ label: '', text: '작업 흐름이 끊기지 않도록 클릭 포인트를 줄이기.' },
|
|
],
|
|
prevSummary: [
|
|
'어제 완료한 핵심 3개 보기',
|
|
'이전 체크 누적률 78%',
|
|
'막힌 작업 메모 바로 이어보기',
|
|
],
|
|
nextFocus: [
|
|
'내일 첫 집중 블록 예약',
|
|
'다음날 핵심 3개 자동 복사',
|
|
'미완료 작업만 재정렬',
|
|
],
|
|
timetable: createTimetableFromRanges([
|
|
[6, 13],
|
|
[24, 32],
|
|
[42, 47],
|
|
]),
|
|
},
|
|
'2026-04-22': {
|
|
dday: 'D-11 LAUNCH',
|
|
comment: '초반 90분은 구현, 후반은 문장과 사용성 정리에 사용.',
|
|
tasks: [
|
|
{ label: '', title: '통계 섹션 수치 실제 계산 연결', checked: true },
|
|
{ label: '', title: '날짜 선택 시 상태 동기화' },
|
|
{ label: '', title: '다음날 할 일 템플릿 개선' },
|
|
{ label: '', title: '2페이지 보기 비교 카피 작성' },
|
|
{ label: '', title: '주간 흐름 카드 추가' },
|
|
{ label: '', title: '메모 영역 편집 UX 개선' },
|
|
{ label: '', title: '프린트 스타일 초안 점검' },
|
|
{ label: '', title: '색 대비 보정' },
|
|
{ label: '', title: '우측 패널 축약 버전 검토' },
|
|
{ label: '', title: '마감용 체크리스트 분리' },
|
|
{ label: '', title: '키보드 탐색 흐름 다듬기' },
|
|
{ label: '', title: '데이터 구조 문서화' },
|
|
{ label: '', title: '테스트 날짜 더미 세트 늘리기' },
|
|
{ label: '', title: '브랜드 푸터 위치 확정' },
|
|
{ label: '', title: '빈 상태 일러스트 여부 결정' },
|
|
],
|
|
memo: [
|
|
{ label: '', text: '한 화면에 모든 정보를 모으되 시선 이동은 짧게.' },
|
|
{ label: '', text: '캘린더는 검색보다 빠른 이동 장치로 동작해야 함.' },
|
|
{ label: '', text: '실행 화면은 다이어리 같고, 인터랙션은 앱처럼.' },
|
|
],
|
|
prevSummary: [
|
|
'이전날 메모 3줄 이어보기',
|
|
'전날 타임블록 밀도 확인',
|
|
'완료율 기준 다음 일정 추천',
|
|
],
|
|
nextFocus: [
|
|
'다음날 오전 블록 추천',
|
|
'오늘 미완료 작업 넘기기',
|
|
'이번 주 누적 시간 요약',
|
|
],
|
|
timetable: createTimetableFromRanges([
|
|
[3, 8],
|
|
[18, 23],
|
|
[54, 62],
|
|
]),
|
|
},
|
|
}
|
|
|
|
function toKey(date) {
|
|
const year = date.getFullYear()
|
|
const month = `${date.getMonth() + 1}`.padStart(2, '0')
|
|
const day = `${date.getDate()}`.padStart(2, '0')
|
|
return `${year}-${month}-${day}`
|
|
}
|
|
|
|
function toDateValue(value, fallback = new Date()) {
|
|
const nextDate = new Date(value)
|
|
return Number.isNaN(nextDate.getTime()) ? new Date(fallback) : nextDate
|
|
}
|
|
|
|
function startOfDay(date) {
|
|
return new Date(date.getFullYear(), date.getMonth(), date.getDate())
|
|
}
|
|
|
|
function buildFallbackRecord(date) {
|
|
return {
|
|
dday: 'D-00 FOCUS',
|
|
comment: '',
|
|
tasks: Array.from({ length: 15 }, (_, index) => ({
|
|
label: '',
|
|
title: '',
|
|
checked: false,
|
|
})),
|
|
memo: Array.from({ length: 3 }, () => ({
|
|
label: '',
|
|
text: '',
|
|
})),
|
|
prevSummary: ['이전 기록 없음', '새로운 흐름 시작', ''],
|
|
nextFocus: ['다음 집중 블록 준비', '내일의 핵심 3개 정하기', ''],
|
|
timetable: createEmptyTimetable(),
|
|
}
|
|
}
|
|
|
|
function normalizeRecord(record) {
|
|
return {
|
|
...record,
|
|
tasks: record.tasks.map((task, index) => ({
|
|
label: task.label ?? task.id ?? '',
|
|
title: task.title ?? '',
|
|
checked: Boolean(task.checked),
|
|
})),
|
|
memo: record.memo.map((item) => {
|
|
if (typeof item === 'string') {
|
|
return {
|
|
label: '',
|
|
text: item,
|
|
}
|
|
}
|
|
|
|
return {
|
|
label: item.label ?? '',
|
|
text: item.text ?? '',
|
|
}
|
|
}),
|
|
timetable: Array.isArray(record.timetable) && record.timetable.length === timetableCellCount
|
|
? [...record.timetable]
|
|
: createEmptyTimetable(),
|
|
}
|
|
}
|
|
|
|
const plannerRecords = reactive(createInitialPlannerRecords(plannerSeed, normalizeRecord))
|
|
|
|
restorePlannerUiState({
|
|
selectedDate,
|
|
calendarViewDate,
|
|
statsRangeStart,
|
|
statsRangeEnd,
|
|
toDateValue,
|
|
})
|
|
|
|
function getPlannerRecord(date) {
|
|
const key = toKey(date)
|
|
|
|
if (!plannerRecords[key]) {
|
|
plannerRecords[key] = buildFallbackRecord(date)
|
|
}
|
|
|
|
return plannerRecords[key]
|
|
}
|
|
|
|
const planner = computed(() => getPlannerRecord(selectedDate.value))
|
|
|
|
const secondaryDate = computed(() => {
|
|
const next = new Date(selectedDate.value)
|
|
next.setDate(next.getDate() + 1)
|
|
return next
|
|
})
|
|
|
|
const secondaryPlanner = computed(() => getPlannerRecord(secondaryDate.value))
|
|
|
|
function getDateDisplay(date) {
|
|
const main = `${date.getFullYear()}. ${`${date.getMonth() + 1}`.padStart(2, '0')}. ${`${date.getDate()}`.padStart(2, '0')}.`
|
|
const weekdayMap = ['(일)', '(월)', '(화)', '(수)', '(목)', '(금)', '(토)']
|
|
const weekday = weekdayMap[date.getDay()]
|
|
const weekdayTone =
|
|
date.getDay() === 0 ? 'text-red-500' : date.getDay() === 6 ? 'text-blue-500' : 'text-ink'
|
|
|
|
return {
|
|
main,
|
|
weekday,
|
|
weekdayTone,
|
|
}
|
|
}
|
|
|
|
const selectedDateDisplay = computed(() => getDateDisplay(selectedDate.value))
|
|
const secondaryDateDisplay = computed(() => getDateDisplay(secondaryDate.value))
|
|
|
|
const monthLabel = computed(() =>
|
|
`${calendarViewDate.value.getMonth() + 1}`.padStart(2, '0'),
|
|
)
|
|
|
|
const yearLabel = computed(() => `${calendarViewDate.value.getFullYear()}`)
|
|
|
|
const calendarDays = computed(() => {
|
|
const base = calendarViewDate.value
|
|
const first = new Date(base.getFullYear(), base.getMonth(), 1)
|
|
const start = new Date(first)
|
|
start.setDate(first.getDate() - first.getDay())
|
|
|
|
return Array.from({ length: 35 }, (_, index) => {
|
|
const date = new Date(start)
|
|
date.setDate(start.getDate() + index)
|
|
return {
|
|
key: toKey(date),
|
|
label: date.getDate(),
|
|
date,
|
|
isCurrentMonth: date.getMonth() === base.getMonth(),
|
|
}
|
|
})
|
|
})
|
|
|
|
const markedDateKeys = computed(() =>
|
|
Object.entries(plannerRecords)
|
|
.filter(([, record]) => hasPlannerContent(record))
|
|
.map(([key]) => key),
|
|
)
|
|
|
|
const filledTasks = computed(() =>
|
|
planner.value.tasks.filter((task) => task.title.trim()),
|
|
)
|
|
const completedTasks = computed(() =>
|
|
filledTasks.value.filter((task) => task.checked).length,
|
|
)
|
|
const completionRate = computed(() => {
|
|
if (filledTasks.value.length === 0) {
|
|
return 0
|
|
}
|
|
|
|
return Math.round((completedTasks.value / filledTasks.value.length) * 100)
|
|
})
|
|
|
|
function formatTotalTime(record) {
|
|
const activeCellCount = record.timetable.filter(Boolean).length
|
|
const totalMinutes = activeCellCount * 10
|
|
const hoursPart = `${Math.floor(totalMinutes / 60)}`.padStart(2, '0')
|
|
const minutesPart = `${totalMinutes % 60}`.padStart(2, '0')
|
|
|
|
return `${hoursPart}H ${minutesPart}M`
|
|
}
|
|
|
|
function getFocusedMinutes(record) {
|
|
return record.timetable.filter(Boolean).length * 10
|
|
}
|
|
|
|
function getCompletionRate(record) {
|
|
const activeTasks = record.tasks.filter((task) => task.title.trim())
|
|
|
|
if (activeTasks.length === 0) {
|
|
return 0
|
|
}
|
|
|
|
const doneTasks = activeTasks.filter((task) => task.checked).length
|
|
return Math.round((doneTasks / activeTasks.length) * 100)
|
|
}
|
|
|
|
function shiftDate(amount) {
|
|
const next = new Date(selectedDate.value)
|
|
next.setDate(next.getDate() + amount)
|
|
selectedDate.value = next
|
|
calendarViewDate.value = new Date(next)
|
|
}
|
|
|
|
function shiftCalendarMonth(amount) {
|
|
const next = new Date(calendarViewDate.value)
|
|
next.setMonth(next.getMonth() + amount)
|
|
calendarViewDate.value = next
|
|
}
|
|
|
|
function shiftCalendarYear(amount) {
|
|
const next = new Date(calendarViewDate.value)
|
|
next.setFullYear(next.getFullYear() + amount)
|
|
calendarViewDate.value = next
|
|
}
|
|
|
|
function selectDate(date) {
|
|
selectedDate.value = new Date(date)
|
|
calendarViewDate.value = new Date(date)
|
|
}
|
|
|
|
function updateComment(record, value) {
|
|
record.comment = value
|
|
}
|
|
|
|
function updateTaskLabel(record, { index, value }) {
|
|
record.tasks[index].label = value
|
|
}
|
|
|
|
function updateTaskTitle(record, { index, value }) {
|
|
record.tasks[index].title = value
|
|
}
|
|
|
|
function toggleTask(record, index) {
|
|
record.tasks[index].checked = !record.tasks[index].checked
|
|
}
|
|
|
|
function updateMemo(record, { index, value }) {
|
|
record.memo[index].text = value
|
|
}
|
|
|
|
function updateMemoLabel(record, { index, value }) {
|
|
record.memo[index].label = value
|
|
}
|
|
|
|
function updateTimetable(record, nextTimetable) {
|
|
record.timetable = nextTimetable
|
|
}
|
|
|
|
function hasPlannerContent(record) {
|
|
return Boolean(
|
|
record.comment.trim() ||
|
|
record.tasks.some((task) => task.title.trim() || task.checked) ||
|
|
record.memo.some((item) => item.label.trim() || item.text.trim()) ||
|
|
record.timetable.some(Boolean),
|
|
)
|
|
}
|
|
|
|
const plannerEntries = computed(() =>
|
|
Object.entries(plannerRecords)
|
|
.filter(([, record]) => hasPlannerContent(record))
|
|
.sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)),
|
|
)
|
|
|
|
const normalizedStatsRange = computed(() => {
|
|
const todayKey = toKey(new Date())
|
|
const startKey = statsRangeStart.value || todayKey
|
|
const endKey = statsRangeEnd.value || todayKey
|
|
|
|
if (startKey <= endKey) {
|
|
return { startKey, endKey }
|
|
}
|
|
|
|
return { startKey: endKey, endKey: startKey }
|
|
})
|
|
|
|
const rangeEntries = computed(() =>
|
|
plannerEntries.value.filter(([key]) =>
|
|
key >= normalizedStatsRange.value.startKey && key <= normalizedStatsRange.value.endKey,
|
|
),
|
|
)
|
|
|
|
const totalFocusedMinutes = computed(() =>
|
|
rangeEntries.value.reduce((total, [, record]) => total + getFocusedMinutes(record), 0),
|
|
)
|
|
|
|
const totalRecordedTasks = computed(() =>
|
|
rangeEntries.value.reduce(
|
|
(total, [, record]) => total + record.tasks.filter((task) => task.title.trim()).length,
|
|
0,
|
|
),
|
|
)
|
|
|
|
const completedRecordedTasks = computed(() =>
|
|
rangeEntries.value.reduce(
|
|
(total, [, record]) => total + record.tasks.filter((task) => task.title.trim() && task.checked).length,
|
|
0,
|
|
),
|
|
)
|
|
|
|
const aggregateCompletionRate = computed(() => {
|
|
if (totalRecordedTasks.value === 0) {
|
|
return 0
|
|
}
|
|
|
|
return Math.round((completedRecordedTasks.value / totalRecordedTasks.value) * 100)
|
|
})
|
|
|
|
const overviewCards = computed(() => [
|
|
{
|
|
label: 'TOTAL FOCUSED',
|
|
value: formatMinutes(totalFocusedMinutes.value),
|
|
caption: '지금까지 기록된 전체 집중 시간',
|
|
},
|
|
{
|
|
label: 'AVERAGE COMPLETION',
|
|
value: `${aggregateCompletionRate.value}%`,
|
|
caption: '입력된 할 일 기준 전체 평균 완료율',
|
|
},
|
|
{
|
|
label: 'RECORDED DAYS',
|
|
value: `${rangeEntries.value.length}일`,
|
|
caption: '기록이 남아 있는 날짜 수',
|
|
},
|
|
{
|
|
label: 'COMPLETED TASKS',
|
|
value: `${completedRecordedTasks.value}/${totalRecordedTasks.value || 0}`,
|
|
caption: '완료된 할 일과 전체 입력된 할 일 수',
|
|
},
|
|
])
|
|
|
|
function formatMinutes(totalMinutes) {
|
|
const hoursPart = Math.floor(totalMinutes / 60)
|
|
const minutesPart = totalMinutes % 60
|
|
return `${hoursPart}H ${`${minutesPart}`.padStart(2, '0')}M`
|
|
}
|
|
|
|
function createDateLabel(dateKey) {
|
|
const date = toDateValue(dateKey)
|
|
const display = getDateDisplay(date)
|
|
return `${display.main} ${display.weekday}`
|
|
}
|
|
|
|
const weeklyRecords = computed(() => {
|
|
const entries = rangeEntries.value.map(([key, record]) => {
|
|
const date = toDateValue(key)
|
|
const weekdayShort = ['일', '월', '화', '수', '목', '금', '토'][date.getDay()]
|
|
const focusedMinutes = getFocusedMinutes(record)
|
|
|
|
return {
|
|
key,
|
|
weekday: weekdayShort,
|
|
focusedMinutes,
|
|
focusedTime: formatMinutes(focusedMinutes),
|
|
}
|
|
})
|
|
|
|
if (entries.length === 0) {
|
|
return []
|
|
}
|
|
|
|
const maxMinutes = Math.max(...entries.map((entry) => entry.focusedMinutes), 60)
|
|
|
|
return entries.map((entry) => ({
|
|
...entry,
|
|
barHeight: Math.max(12, Math.round((entry.focusedMinutes / maxMinutes) * 100)),
|
|
}))
|
|
})
|
|
|
|
const recentRecords = computed(() =>
|
|
[...rangeEntries.value]
|
|
.sort(([leftKey], [rightKey]) => rightKey.localeCompare(leftKey))
|
|
.slice(0, 5)
|
|
.map(([key, record]) => ({
|
|
key,
|
|
dateLabel: createDateLabel(key),
|
|
comment: record.comment.trim(),
|
|
focusedTime: formatTotalTime(record),
|
|
completionRate: getCompletionRate(record),
|
|
})),
|
|
)
|
|
|
|
const bestDay = computed(() => {
|
|
if (rangeEntries.value.length === 0) {
|
|
return null
|
|
}
|
|
|
|
const [bestKey, bestRecord] = [...rangeEntries.value].reduce((bestEntry, currentEntry) => {
|
|
const [, bestRecordValue] = bestEntry
|
|
const [, currentRecordValue] = currentEntry
|
|
|
|
return getFocusedMinutes(currentRecordValue) > getFocusedMinutes(bestRecordValue) ? currentEntry : bestEntry
|
|
})
|
|
|
|
return {
|
|
dateLabel: createDateLabel(bestKey),
|
|
summary: `${formatTotalTime(bestRecord)} 집중, 완료율 ${getCompletionRate(bestRecord)}%, 코멘트 "${
|
|
bestRecord.comment.trim() || '없음'
|
|
}"`,
|
|
}
|
|
})
|
|
|
|
watch(
|
|
[plannerRecords, selectedDate, calendarViewDate, statsRangeStart, statsRangeEnd],
|
|
() => {
|
|
persistPlannerState({
|
|
plannerRecords,
|
|
selectedDate: selectedDate.value,
|
|
calendarViewDate: calendarViewDate.value,
|
|
statsRangeStart: normalizedStatsRange.value.startKey,
|
|
statsRangeEnd: normalizedStatsRange.value.endKey,
|
|
})
|
|
},
|
|
{ deep: true },
|
|
)
|
|
|
|
function fillTaskLabelsWithNumbers(record) {
|
|
record.tasks.forEach((task, index) => {
|
|
task.label = createTaskLabel(index)
|
|
})
|
|
}
|
|
|
|
function clearTaskLabels(record) {
|
|
record.tasks.forEach((task) => {
|
|
task.label = ''
|
|
})
|
|
}
|
|
|
|
function applyPrintPageStyle(layout) {
|
|
if (typeof document === 'undefined') {
|
|
return
|
|
}
|
|
|
|
const pageRule =
|
|
layout === 'double'
|
|
? '@page { size: A4 landscape; margin: 0; }'
|
|
: '@page { size: A4 portrait; margin: 0; }'
|
|
|
|
if (!printPageStyleElement) {
|
|
printPageStyleElement = document.createElement('style')
|
|
printPageStyleElement.setAttribute('data-print-page-style', 'true')
|
|
document.head.appendChild(printPageStyleElement)
|
|
}
|
|
|
|
printPageStyleElement.textContent = pageRule
|
|
document.body.dataset.printLayout = layout
|
|
}
|
|
|
|
async function printSelectedPlanner(layout = 'single') {
|
|
printLayout.value = layout
|
|
applyPrintPageStyle(layout)
|
|
await nextTick()
|
|
window.print()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main class="min-h-screen px-4 py-6 text-ink sm:px-6 lg:px-10">
|
|
<div class="print-root mx-auto flex max-w-[1680px] flex-col gap-6">
|
|
<header class="print-hidden flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
|
|
<div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
|
<div class="space-y-2">
|
|
<p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
|
|
<h1 class="text-2xl font-semibold tracking-[-0.04em] text-stone-900 sm:text-4xl">
|
|
다이어리처럼 보이되, 앱답게 빠르게 이동하는 플래너
|
|
</h1>
|
|
<p class="max-w-3xl text-sm font-medium leading-6 text-stone-600">
|
|
기본 모드는 Figma의 1페이지 + 보조 정보 패널 구성을 따르고, 비교용으로 2페이지 펼침 보기도 함께 제공합니다.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<div class="inline-flex rounded-full border border-stone-200 bg-stone-100 p-1">
|
|
<button
|
|
type="button"
|
|
class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
|
|
:class="screenMode === 'planner' ? 'bg-white text-ink shadow-sm' : 'text-stone-500'"
|
|
@click="screenMode = 'planner'"
|
|
>
|
|
PLANNER
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
|
|
:class="screenMode === 'stats' ? 'bg-white text-ink shadow-sm' : 'text-stone-500'"
|
|
@click="screenMode = 'stats'"
|
|
>
|
|
STATS
|
|
</button>
|
|
</div>
|
|
<div class="inline-flex rounded-full border border-stone-200 bg-stone-100 p-1">
|
|
<button
|
|
type="button"
|
|
class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
|
|
:class="viewMode === 'focus' ? 'bg-white text-ink shadow-sm' : 'text-stone-500'"
|
|
@click="viewMode = 'focus'"
|
|
>
|
|
1 PAGE + INFO
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
|
|
:class="viewMode === 'spread' ? 'bg-white text-ink shadow-sm' : 'text-stone-500'"
|
|
@click="viewMode = 'spread'"
|
|
>
|
|
2 PAGE SPREAD
|
|
</button>
|
|
</div>
|
|
<div class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="shiftDate(-1)"
|
|
>
|
|
PREV DAY
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="shiftDate(1)"
|
|
>
|
|
NEXT DAY
|
|
</button>
|
|
</div>
|
|
<div
|
|
v-if="screenMode === 'planner'"
|
|
class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="printSelectedPlanner('single')"
|
|
>
|
|
PRINT 1-UP
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="printSelectedPlanner('double')"
|
|
>
|
|
PRINT 2-UP
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section
|
|
v-if="screenMode === 'planner' && viewMode === 'focus'"
|
|
class="print-hidden grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"
|
|
>
|
|
<div class="print-target">
|
|
<PlannerPage
|
|
:date-main="selectedDateDisplay.main"
|
|
:date-weekday="selectedDateDisplay.weekday"
|
|
:date-weekday-tone="selectedDateDisplay.weekdayTone"
|
|
:dday="planner.dday"
|
|
:comment="planner.comment"
|
|
:total-time="formatTotalTime(planner)"
|
|
:tasks="planner.tasks"
|
|
:memo="planner.memo"
|
|
:hours="hours"
|
|
:timetable="planner.timetable"
|
|
@update:comment="updateComment(planner, $event)"
|
|
@update:task-label="updateTaskLabel(planner, $event)"
|
|
@update:task-title="updateTaskTitle(planner, $event)"
|
|
@toggle:task="toggleTask(planner, $event)"
|
|
@update:memo-label="updateMemoLabel(planner, $event)"
|
|
@update:memo="updateMemo(planner, $event)"
|
|
@update:timetable="updateTimetable(planner, $event)"
|
|
/>
|
|
</div>
|
|
|
|
<aside class="print-hidden flex flex-col gap-4">
|
|
<section class="border border-stone-200 bg-white/80 p-5">
|
|
<p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
|
|
<div class="space-y-3">
|
|
<p
|
|
v-for="item in planner.prevSummary"
|
|
:key="item"
|
|
class="border-b border-stone-200 pb-3 text-[11px] font-semibold tracking-[0.08em] text-stone-700 last:border-b-0 last:pb-0"
|
|
>
|
|
{{ item || ' ' }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="border border-stone-200 bg-white/80 p-5">
|
|
<p class="mb-3 text-[11px] font-bold tracking-[0.22em] text-ink">TASK LABELS</p>
|
|
<p class="text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
|
|
왼쪽 라벨은 직접 입력할 수 있고, 필요하면 아래 버튼으로 순번을 한 번에 채울 수 있습니다.
|
|
</p>
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="fillTaskLabelsWithNumbers(planner)"
|
|
>
|
|
번호 채우기
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="clearTaskLabels(planner)"
|
|
>
|
|
라벨 비우기
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="border border-stone-200 bg-white/80 p-5">
|
|
<p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">READ NEXT</p>
|
|
<div class="space-y-3">
|
|
<p
|
|
v-for="item in planner.nextFocus"
|
|
:key="item"
|
|
class="border-b border-stone-200 pb-3 text-[11px] font-semibold tracking-[0.08em] text-stone-700 last:border-b-0 last:pb-0"
|
|
>
|
|
{{ item || ' ' }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<MiniCalendar
|
|
:month-label="monthLabel"
|
|
:year-label="yearLabel"
|
|
:days="calendarDays"
|
|
:selected-key="toKey(selectedDate)"
|
|
:marked-keys="markedDateKeys"
|
|
@shift-month="shiftCalendarMonth"
|
|
@shift-year="shiftCalendarYear"
|
|
@go-today="selectDate(new Date())"
|
|
@select="selectDate"
|
|
/>
|
|
|
|
<section class="grid grid-cols-2 gap-4">
|
|
<article class="border border-stone-200 bg-white/80 p-5">
|
|
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">STATS</p>
|
|
<div class="mt-5 space-y-4">
|
|
<div>
|
|
<p class="text-[28px] font-semibold tracking-[-0.05em] text-stone-900">{{ completionRate }}%</p>
|
|
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">TASK COMPLETION</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[22px] font-semibold tracking-[-0.04em] text-stone-900">{{ formatTotalTime(planner) }}</p>
|
|
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">FOCUSED TIME</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="border border-stone-200 bg-white/80 p-5">
|
|
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">NEXT DAY</p>
|
|
<div class="mt-5 space-y-3">
|
|
<p class="text-lg font-semibold tracking-[-0.04em] text-stone-900">
|
|
<span>{{ secondaryDateDisplay.main }}</span>
|
|
<span class="ml-1" :class="secondaryDateDisplay.weekdayTone">{{ secondaryDateDisplay.weekday }}</span>
|
|
</p>
|
|
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-600">
|
|
내일의 첫 작업은 "{{ secondaryPlanner.tasks[0]?.title || '새 작업 추가' }}" 로 시작합니다.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</aside>
|
|
</section>
|
|
|
|
<section
|
|
v-else-if="screenMode === 'planner'"
|
|
class="print-hidden overflow-x-auto rounded-[32px] border border-white/60 bg-white/40 p-4 sm:p-6"
|
|
>
|
|
<div class="flex min-w-[1260px] gap-6">
|
|
<div class="print-target">
|
|
<PlannerPage
|
|
:date-main="selectedDateDisplay.main"
|
|
:date-weekday="selectedDateDisplay.weekday"
|
|
:date-weekday-tone="selectedDateDisplay.weekdayTone"
|
|
:dday="planner.dday"
|
|
:comment="planner.comment"
|
|
:total-time="formatTotalTime(planner)"
|
|
:tasks="planner.tasks"
|
|
:memo="planner.memo"
|
|
:hours="hours"
|
|
:timetable="planner.timetable"
|
|
@update:comment="updateComment(planner, $event)"
|
|
@update:task-label="updateTaskLabel(planner, $event)"
|
|
@update:task-title="updateTaskTitle(planner, $event)"
|
|
@toggle:task="toggleTask(planner, $event)"
|
|
@update:memo-label="updateMemoLabel(planner, $event)"
|
|
@update:memo="updateMemo(planner, $event)"
|
|
@update:timetable="updateTimetable(planner, $event)"
|
|
/>
|
|
</div>
|
|
<div class="print-hidden">
|
|
<PlannerPage
|
|
:date-main="secondaryDateDisplay.main"
|
|
:date-weekday="secondaryDateDisplay.weekday"
|
|
:date-weekday-tone="secondaryDateDisplay.weekdayTone"
|
|
:dday="secondaryPlanner.dday"
|
|
:comment="secondaryPlanner.comment"
|
|
:total-time="formatTotalTime(secondaryPlanner)"
|
|
:tasks="secondaryPlanner.tasks"
|
|
:memo="secondaryPlanner.memo"
|
|
:hours="hours"
|
|
:timetable="secondaryPlanner.timetable"
|
|
@update:comment="updateComment(secondaryPlanner, $event)"
|
|
@update:task-label="updateTaskLabel(secondaryPlanner, $event)"
|
|
@update:task-title="updateTaskTitle(secondaryPlanner, $event)"
|
|
@toggle:task="toggleTask(secondaryPlanner, $event)"
|
|
@update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
|
|
@update:memo="updateMemo(secondaryPlanner, $event)"
|
|
@update:timetable="updateTimetable(secondaryPlanner, $event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<StatsDashboard
|
|
v-else
|
|
class="print-hidden"
|
|
:overview-cards="overviewCards"
|
|
:weekly-records="weeklyRecords"
|
|
:recent-records="recentRecords"
|
|
:best-day="bestDay"
|
|
:selected-date-label="`${selectedDateDisplay.main} ${selectedDateDisplay.weekday}`"
|
|
:range-start="normalizedStatsRange.startKey"
|
|
:range-end="normalizedStatsRange.endKey"
|
|
@update:range-start="statsRangeStart = $event"
|
|
@update:range-end="statsRangeEnd = $event"
|
|
/>
|
|
|
|
<section class="print-only">
|
|
<div v-if="printLayout === 'single'" class="print-paper print-paper--single">
|
|
<div class="print-sheet-frame">
|
|
<PlannerPage
|
|
:date-main="selectedDateDisplay.main"
|
|
:date-weekday="selectedDateDisplay.weekday"
|
|
:date-weekday-tone="selectedDateDisplay.weekdayTone"
|
|
:dday="planner.dday"
|
|
:comment="planner.comment"
|
|
:total-time="formatTotalTime(planner)"
|
|
:tasks="planner.tasks"
|
|
:memo="planner.memo"
|
|
:hours="hours"
|
|
:timetable="planner.timetable"
|
|
@update:comment="updateComment(planner, $event)"
|
|
@update:task-label="updateTaskLabel(planner, $event)"
|
|
@update:task-title="updateTaskTitle(planner, $event)"
|
|
@toggle:task="toggleTask(planner, $event)"
|
|
@update:memo-label="updateMemoLabel(planner, $event)"
|
|
@update:memo="updateMemo(planner, $event)"
|
|
@update:timetable="updateTimetable(planner, $event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="print-paper print-paper--double">
|
|
<div class="print-sheet-frame">
|
|
<PlannerPage
|
|
:date-main="selectedDateDisplay.main"
|
|
:date-weekday="selectedDateDisplay.weekday"
|
|
:date-weekday-tone="selectedDateDisplay.weekdayTone"
|
|
:dday="planner.dday"
|
|
:comment="planner.comment"
|
|
:total-time="formatTotalTime(planner)"
|
|
:tasks="planner.tasks"
|
|
:memo="planner.memo"
|
|
:hours="hours"
|
|
:timetable="planner.timetable"
|
|
@update:comment="updateComment(planner, $event)"
|
|
@update:task-label="updateTaskLabel(planner, $event)"
|
|
@update:task-title="updateTaskTitle(planner, $event)"
|
|
@toggle:task="toggleTask(planner, $event)"
|
|
@update:memo-label="updateMemoLabel(planner, $event)"
|
|
@update:memo="updateMemo(planner, $event)"
|
|
@update:timetable="updateTimetable(planner, $event)"
|
|
/>
|
|
</div>
|
|
<div class="print-sheet-frame">
|
|
<PlannerPage
|
|
:date-main="secondaryDateDisplay.main"
|
|
:date-weekday="secondaryDateDisplay.weekday"
|
|
:date-weekday-tone="secondaryDateDisplay.weekdayTone"
|
|
:dday="secondaryPlanner.dday"
|
|
:comment="secondaryPlanner.comment"
|
|
:total-time="formatTotalTime(secondaryPlanner)"
|
|
:tasks="secondaryPlanner.tasks"
|
|
:memo="secondaryPlanner.memo"
|
|
:hours="hours"
|
|
:timetable="secondaryPlanner.timetable"
|
|
@update:comment="updateComment(secondaryPlanner, $event)"
|
|
@update:task-label="updateTaskLabel(secondaryPlanner, $event)"
|
|
@update:task-title="updateTaskTitle(secondaryPlanner, $event)"
|
|
@toggle:task="toggleTask(secondaryPlanner, $event)"
|
|
@update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
|
|
@update:memo="updateMemo(secondaryPlanner, $event)"
|
|
@update:timetable="updateTimetable(secondaryPlanner, $event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</template>
|