v0.0.5

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.0.3`
+- 현재 기준 버전: `v0.0.5`
 
 ## 기준 디자인
 
@@ -27,7 +27,10 @@
 - `COMMENT`, `TASKS`, `MEMO`는 화면에서 바로 편집할 수 있다.
 - TASKS 체크박스는 토글 가능하며, 체크 상태는 바로 시각적으로 반영된다.
 - `TIME TABLE`은 드래그로 10분 블록을 연속 선택할 수 있다.
+- `TIME TABLE`은 우클릭 드래그 시 선택된 블록을 지우는 방식으로도 편집할 수 있다.
 - `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다.
+- 달력은 연/월 이동이 가능하며, 현재 보이는 월과 선택된 날짜 상태를 분리해서 관리한다.
+- 입력 내용이 있는 날짜는 달력 하단에 빨간 점으로 표시된다.
 
 ## 확정된 결정사항
 
@@ -40,6 +43,7 @@
 - `COMMENT`, `TASKS`, `MEMO`는 모두 입력 가능한 필드가 되어야 한다.
 - `TOTAL TIME`은 타임테이블 선택 상태를 기반으로 자동 계산되어야 한다.
 - 타임테이블은 마우스 드래그로 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 해석해야 한다.
+- 타임테이블 편집은 좌클릭 드래그로 칠하기, 우클릭 드래그로 지우기 방식이 더 자연스럽다.
 - 달력에는 연/월 이동 기능이 필요하다.
 - 내용이 저장된 날짜에는 달력에 빨간 점 표시가 필요하다.
 

TODO.md

@@ -21,9 +21,9 @@
 
 ## 2단계: 달력과 이동 기능
 
-- [ ] 달력에 연/월 이동 기능을 추가한다.
-- [ ] 선택 날짜를 클릭하면 해당 날짜 플래너 데이터로 이동되게 한다.
-- [ ] 입력값이 하나라도 있는 날짜에는 달력 하단에 빨간 점 표시를 추가한다.
+- [x] 달력에 연/월 이동 기능을 추가한다.
+- [x] 선택 날짜를 클릭하면 해당 날짜 플래너 데이터로 이동되게 한다.
+- [x] 입력값이 하나라도 있는 날짜에는 달력 하단에 빨간 점 표시를 추가한다.
 - [ ] `PREV DAY` / `NEXT DAY` 이동 시 현재 편집 중 데이터와 연결되도록 정리한다.
 
 ## 3단계: 목표와 회고 기능

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ten-minute-planner",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ten-minute-planner",
-      "version": "0.0.3",
+      "version": "0.0.5",
       "dependencies": {
         "vue": "^3.5.13"
       },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

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),
+  )
+}
 </script>
 
 <template>
@@ -344,9 +380,13 @@ function updateTimetable(record, nextTimetable) {
 
           <MiniCalendar
             :month-label="monthLabel"
+            :year-label="yearLabel"
             :days="calendarDays"
             :selected-key="toKey(selectedDate)"
-            @select="selectedDate = $event"
+            :marked-keys="markedDateKeys"
+            @shift-month="shiftCalendarMonth"
+            @shift-year="shiftCalendarYear"
+            @select="selectDate"
           />
 
           <section class="grid grid-cols-2 gap-4">

src/components/MiniCalendar.vue

@@ -4,6 +4,10 @@ defineProps({
     type: String,
     required: true,
   },
+  yearLabel: {
+    type: String,
+    required: true,
+  },
   days: {
     type: Array,
     required: true,
@@ -12,16 +16,59 @@ defineProps({
     type: String,
     required: true,
   },
+  markedKeys: {
+    type: Array,
+    required: true,
+  },
 })
 
-const emit = defineEmits(['select'])
+const emit = defineEmits(['select', 'shift-month', 'shift-year'])
 </script>
 
 <template>
   <section class="border border-stone-200 bg-white/80 p-5">
-    <div class="mb-4 flex items-center justify-between">
-      <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
-      <span class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ monthLabel }}</span>
+    <div class="mb-4 flex items-start justify-between gap-4">
+      <div>
+        <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
+        <div class="mt-2 space-y-1">
+          <p class="text-base font-semibold tracking-[-0.04em] text-stone-900">{{ monthLabel }}</p>
+          <p class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ yearLabel }}</p>
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            @click="emit('shift-year', -1)"
+          >
+            -1Y
+          </button>
+          <button
+            type="button"
+            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            @click="emit('shift-year', 1)"
+          >
+            +1Y
+          </button>
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            @click="emit('shift-month', -1)"
+          >
+            PREV
+          </button>
+          <button
+            type="button"
+            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            @click="emit('shift-month', 1)"
+          >
+            NEXT
+          </button>
+        </div>
+      </div>
     </div>
     <div class="mb-3 grid grid-cols-7 gap-2 text-center text-[10px] font-bold tracking-[0.12em] text-stone-400">
       <span v-for="weekday in ['S', 'M', 'T', 'W', 'T', 'F', 'S']" :key="weekday">{{ weekday }}</span>
@@ -40,7 +87,13 @@ const emit = defineEmits(['select'])
         ]"
         @click="emit('select', day.date)"
       >
-        {{ day.label }}
+        <span class="relative flex h-full w-full items-center justify-center">
+          <span>{{ day.label }}</span>
+          <span
+            v-if="markedKeys.includes(day.key)"
+            class="absolute bottom-[3px] h-[5px] w-[5px] rounded-full bg-red-500"
+          />
+        </span>
       </button>
     </div>
   </section>

src/components/PlannerPage.vue

@@ -62,11 +62,17 @@ function buildTimedRange(baseTimetable, startIndex, endIndex, nextValue) {
   return nextTimetable
 }
 
-function startTimetableDrag(index) {
+function startTimetableDrag(index, event) {
+  if (event.button !== 0 && event.button !== 2) {
+    return
+  }
+
+  const shouldFill = event.button === 2 ? false : !props.timetable[index]
+
   dragState = {
     startIndex: index,
     baseTimetable: [...props.timetable],
-    nextValue: !props.timetable[index],
+    nextValue: shouldFill,
   }
 
   emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
@@ -204,7 +210,8 @@ onBeforeUnmount(() => {
               :key="quarter"
               :class="props.timetable[index * 6 + quarter - 1] ? 'bg-stone-800/90' : 'bg-transparent'"
               class="h-full w-[30px] cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
-              @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1)"
+              @contextmenu.prevent
+              @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1, $event)"
               @pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"
             />
           </div>