From 0bc06b710ab5ca4fa2aa12a92c15f135db8d405f Mon Sep 17 00:00:00 2001 From: zenn Date: Tue, 21 Apr 2026 13:40:06 +0900 Subject: [PATCH] v0.0.5 --- HANDOFF.md | 4 ++- TODO.md | 6 ++-- package-lock.json | 4 +-- package.json | 2 +- src/App.vue | 46 ++++++++++++++++++++++-- src/components/MiniCalendar.vue | 63 ++++++++++++++++++++++++++++++--- 6 files changed, 110 insertions(+), 15 deletions(-) diff --git a/HANDOFF.md b/HANDOFF.md index 432dfec..e0f5eaa 100644 --- a/HANDOFF.md +++ b/HANDOFF.md @@ -4,7 +4,7 @@ - 프로젝트명: 10 Minute Planner 웹 UI - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript -- 현재 기준 버전: `v0.0.4` +- 현재 기준 버전: `v0.0.5` ## 기준 디자인 @@ -29,6 +29,8 @@ - `TIME TABLE`은 드래그로 10분 블록을 연속 선택할 수 있다. - `TIME TABLE`은 우클릭 드래그 시 선택된 블록을 지우는 방식으로도 편집할 수 있다. - `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다. +- 달력은 연/월 이동이 가능하며, 현재 보이는 월과 선택된 날짜 상태를 분리해서 관리한다. +- 입력 내용이 있는 날짜는 달력 하단에 빨간 점으로 표시된다. ## 확정된 결정사항 diff --git a/TODO.md b/TODO.md index 17c101e..2b45e42 100644 --- a/TODO.md +++ b/TODO.md @@ -21,9 +21,9 @@ ## 2단계: 달력과 이동 기능 -- [ ] 달력에 연/월 이동 기능을 추가한다. -- [ ] 선택 날짜를 클릭하면 해당 날짜 플래너 데이터로 이동되게 한다. -- [ ] 입력값이 하나라도 있는 날짜에는 달력 하단에 빨간 점 표시를 추가한다. +- [x] 달력에 연/월 이동 기능을 추가한다. +- [x] 선택 날짜를 클릭하면 해당 날짜 플래너 데이터로 이동되게 한다. +- [x] 입력값이 하나라도 있는 날짜에는 달력 하단에 빨간 점 표시를 추가한다. - [ ] `PREV DAY` / `NEXT DAY` 이동 시 현재 편집 중 데이터와 연결되도록 정리한다. ## 3단계: 목표와 회고 기능 diff --git a/package-lock.json b/package-lock.json index 015461e..b0706a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ten-minute-planner", - "version": "0.0.4", + "version": "0.0.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ten-minute-planner", - "version": "0.0.4", + "version": "0.0.5", "dependencies": { "vue": "^3.5.13" }, diff --git a/package.json b/package.json index e29a92c..4dde499 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ten-minute-planner", "private": true, - "version": "0.0.4", + "version": "0.0.5", "type": "module", "scripts": { "dev": "vite", diff --git a/src/App.vue b/src/App.vue index 77d088d..695a20c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,6 +5,7 @@ import PlannerPage from './components/PlannerPage.vue' const viewMode = ref('focus') const selectedDate = ref(new Date()) +const calendarViewDate = ref(new Date(selectedDate.value)) const hours = [ '6', '7', '8', '9', '10', '11', '12', @@ -182,11 +183,13 @@ const secondaryDate = computed(() => { const secondaryPlanner = computed(() => getPlannerRecord(secondaryDate.value)) const monthLabel = computed(() => - `${selectedDate.value.getFullYear()}.${`${selectedDate.value.getMonth() + 1}`.padStart(2, '0')}`, + `${calendarViewDate.value.getMonth() + 1}`.padStart(2, '0'), ) +const yearLabel = computed(() => `${calendarViewDate.value.getFullYear()}`) + const calendarDays = computed(() => { - const base = selectedDate.value + const base = calendarViewDate.value const first = new Date(base.getFullYear(), base.getMonth(), 1) const start = new Date(first) start.setDate(first.getDate() - first.getDay()) @@ -203,6 +206,12 @@ const calendarDays = computed(() => { }) }) +const markedDateKeys = computed(() => + Object.entries(plannerRecords) + .filter(([, record]) => hasPlannerContent(record)) + .map(([key]) => key), +) + const completedTasks = computed(() => planner.value.tasks.filter((task) => task.checked).length) const completionRate = computed(() => Math.round((completedTasks.value / planner.value.tasks.length) * 100)) @@ -219,6 +228,24 @@ 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) { @@ -240,6 +267,15 @@ function updateMemo(record, { index, 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.trim()) || + record.timetable.some(Boolean), + ) +}