v0.0.5

HANDOFF.md

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

TODO.md

@@ -15,15 +15,15 @@
 - [x] `COMMENT`를 자유 입력 가능한 입력 필드로 바꾼다.
 - [x] `TASKS` 각 줄을 텍스트 입력 + 체크박스 토글 가능하게 만든다.
 - [x] `MEMO` 각 줄을 텍스트 입력 가능하게 만든다.
-- [ ] `TIME TABLE`을 마우스 드래그로 칠할 수 있게 만든다.
+- [x] `TIME TABLE`을 마우스 드래그로 칠할 수 있게 만든다.
-- [ ] `TIME TABLE` 드래그가 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 처리한다.
+- [x] `TIME TABLE` 드래그가 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 처리한다.
-- [ ] 선택된 `TIME TABLE` 구간을 기준으로 `TOTAL TIME`을 자동 계산한다.
+- [x] 선택된 `TIME TABLE` 구간을 기준으로 `TOTAL TIME`을 자동 계산한다.
 
 ## 2단계: 달력과 이동 기능
 
-- [ ] 달력에 연/월 이동 기능을 추가한다.
+- [x] 달력에 연/월 이동 기능을 추가한다.
-- [ ] 선택 날짜를 클릭하면 해당 날짜 플래너 데이터로 이동되게 한다.
+- [x] 선택 날짜를 클릭하면 해당 날짜 플래너 데이터로 이동되게 한다.
-- [ ] 입력값이 하나라도 있는 날짜에는 달력 하단에 빨간 점 표시를 추가한다.
+- [x] 입력값이 하나라도 있는 날짜에는 달력 하단에 빨간 점 표시를 추가한다.
 - [ ] `PREV DAY` / `NEXT DAY` 이동 시 현재 편집 중 데이터와 연결되도록 정리한다.
 
 ## 3단계: 목표와 회고 기능

package-lock.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.0.2",
+  "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',
@@ -13,11 +14,28 @@ const hours = [
   '1', '2', '3', '4', '5',
 ]
 
+const timetableCellCount = hours.length * 6
+
+function createEmptyTimetable() {
+  return Array.from({ length: timetableCellCount }, () => false)
+}
+
+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분 단위로 흐름을 끊지 않기.',
-    totalTime: '09H 40M',
     tasks: [
       { id: '01', title: '홈 화면 정보 구조 정리', checked: true },
       { id: '02', title: '플래너 페이지 헤더 상태 연결', checked: true },
@@ -50,11 +68,15 @@ const plannerSeed = {
       '다음날 핵심 3개 자동 복사',
       '미완료 작업만 재정렬',
     ],
+    timetable: createTimetableFromRanges([
+      [6, 13],
+      [24, 32],
+      [42, 47],
+    ]),
   },
   '2026-04-22': {
     dday: 'D-11 LAUNCH',
     comment: '초반 90분은 구현, 후반은 문장과 사용성 정리에 사용.',
-    totalTime: '08H 20M',
     tasks: [
       { id: '01', title: '통계 섹션 수치 실제 계산 연결', checked: true },
       { id: '02', title: '날짜 선택 시 상태 동기화' },
@@ -87,11 +109,14 @@ const plannerSeed = {
       '오늘 미완료 작업 넘기기',
       '이번 주 누적 시간 요약',
     ],
+    timetable: createTimetableFromRanges([
+      [3, 8],
+      [18, 23],
+      [54, 62],
+    ]),
   },
 }
 
-const plannerRecords = reactive(structuredClone(plannerSeed))
-
 const dateFormatter = new Intl.DateTimeFormat('ko-KR', {
   year: 'numeric',
   month: '2-digit',
@@ -110,7 +135,6 @@ function buildFallbackRecord(date) {
   return {
     dday: 'D-00 FOCUS',
     comment: '',
-    totalTime: '00H 00M',
     tasks: Array.from({ length: 15 }, (_, index) => ({
       id: `${index + 1}`.padStart(2, '0'),
       title: '',
@@ -119,9 +143,25 @@ function buildFallbackRecord(date) {
     memo: ['', '', ''],
     prevSummary: ['이전 기록 없음', '새로운 흐름 시작', ''],
     nextFocus: ['다음 집중 블록 준비', '내일의 핵심 3개 정하기', ''],
+    timetable: createEmptyTimetable(),
   }
 }
 
+function normalizeRecord(record) {
+  return {
+    ...record,
+    timetable: Array.isArray(record.timetable) && record.timetable.length === timetableCellCount
+      ? [...record.timetable]
+      : createEmptyTimetable(),
+  }
+}
+
+const plannerRecords = reactive(
+  Object.fromEntries(
+    Object.entries(plannerSeed).map(([key, record]) => [key, normalizeRecord(record)]),
+  ),
+)
+
 function getPlannerRecord(date) {
   const key = toKey(date)
 
@@ -143,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())
@@ -164,13 +206,46 @@ 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))
 
+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 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) {
@@ -188,6 +263,19 @@ function toggleTask(record, index) {
 function updateMemo(record, { index, value }) {
   record.memo[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>
@@ -251,14 +339,16 @@ function updateMemo(record, { index, value }) {
           :date-label="dateFormatter.format(selectedDate)"
           :dday="planner.dday"
           :comment="planner.comment"
-          :total-time="planner.totalTime"
+          :total-time="formatTotalTime(planner)"
           :tasks="planner.tasks"
           :memo="planner.memo"
           :hours="hours"
+          :timetable="planner.timetable"
           @update:comment="updateComment(planner, $event)"
           @update:task-title="updateTaskTitle(planner, $event)"
           @toggle:task="toggleTask(planner, $event)"
           @update:memo="updateMemo(planner, $event)"
+          @update:timetable="updateTimetable(planner, $event)"
         />
 
         <aside class="flex flex-col gap-4">
@@ -290,9 +380,13 @@ function updateMemo(record, { index, value }) {
 
           <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">
@@ -304,7 +398,7 @@ function updateMemo(record, { index, value }) {
                   <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">{{ planner.totalTime }}</p>
+                  <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>
@@ -331,27 +425,31 @@ function updateMemo(record, { index, value }) {
             :date-label="dateFormatter.format(selectedDate)"
             :dday="planner.dday"
             :comment="planner.comment"
-            :total-time="planner.totalTime"
+            :total-time="formatTotalTime(planner)"
             :tasks="planner.tasks"
             :memo="planner.memo"
             :hours="hours"
+            :timetable="planner.timetable"
             @update:comment="updateComment(planner, $event)"
             @update:task-title="updateTaskTitle(planner, $event)"
             @toggle:task="toggleTask(planner, $event)"
             @update:memo="updateMemo(planner, $event)"
+            @update:timetable="updateTimetable(planner, $event)"
           />
           <PlannerPage
             :date-label="dateFormatter.format(secondaryDate)"
             :dday="secondaryPlanner.dday"
             :comment="secondaryPlanner.comment"
-            :total-time="secondaryPlanner.totalTime"
+            :total-time="formatTotalTime(secondaryPlanner)"
             :tasks="secondaryPlanner.tasks"
             :memo="secondaryPlanner.memo"
             :hours="hours"
+            :timetable="secondaryPlanner.timetable"
             @update:comment="updateComment(secondaryPlanner, $event)"
             @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
             @toggle:task="toggleTask(secondaryPlanner, $event)"
             @update:memo="updateMemo(secondaryPlanner, $event)"
+            @update:timetable="updateTimetable(secondaryPlanner, $event)"
           />
         </div>
       </section>

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">
+    <div class="mb-4 flex items-start justify-between gap-4">
-      <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
+      <div>
-      <span class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ monthLabel }}</span>
+        <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

@@ -1,5 +1,7 @@
 <script setup>
-defineProps({
+import { onBeforeUnmount } from 'vue'
+
+const props = defineProps({
   dateLabel: {
     type: String,
     required: true,
@@ -28,6 +30,10 @@ defineProps({
     type: Array,
     required: true,
   },
+  timetable: {
+    type: Array,
+    required: true,
+  },
   brand: {
     type: String,
     default: 'SORI.STUDIO',
@@ -39,7 +45,58 @@ const emit = defineEmits([
   'update:task-title',
   'toggle:task',
   'update:memo',
+  'update:timetable',
 ])
+
+let dragState = null
+
+function buildTimedRange(baseTimetable, startIndex, endIndex, nextValue) {
+  const nextTimetable = [...baseTimetable]
+  const rangeStart = Math.min(startIndex, endIndex)
+  const rangeEnd = Math.max(startIndex, endIndex)
+
+  for (let index = rangeStart; index <= rangeEnd; index += 1) {
+    nextTimetable[index] = nextValue
+  }
+
+  return nextTimetable
+}
+
+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: shouldFill,
+  }
+
+  emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
+}
+
+function moveTimetableDrag(index) {
+  if (!dragState) {
+    return
+  }
+
+  emit(
+    'update:timetable',
+    buildTimedRange(dragState.baseTimetable, dragState.startIndex, index, dragState.nextValue),
+  )
+}
+
+function stopTimetableDrag() {
+  dragState = null
+}
+
+window.addEventListener('pointerup', stopTimetableDrag)
+onBeforeUnmount(() => {
+  window.removeEventListener('pointerup', stopTimetableDrag)
+})
 </script>
 
 <template>
@@ -101,10 +158,12 @@ const emit = defineEmits([
               <div class="flex h-full w-[42px] items-center justify-center p-[10px]">
                 <button
                   type="button"
-                  class="block h-full w-full border border-dashed transition"
+                  class="flex h-full w-full items-center justify-center border border-dashed transition"
-                  :class="task.checked ? 'border-ink bg-stone-100' : 'border-ink/60'"
+                  :class="task.checked ? 'border-ink bg-stone-100 text-ink' : 'border-ink/60 text-transparent'"
                   @click="emit('toggle:task', index)"
-                ></button>
+                >
+                  <span class="text-sm leading-none">✓</span>
+                </button>
               </div>
             </div>
           </div>
@@ -115,7 +174,7 @@ const emit = defineEmits([
           <div class="border-t border-ink">
             <div
               v-for="(memoItem, index) in memo"
-              :key="`${memoItem}-${index}`"
+              :key="`memo-${index}`"
               class="flex h-[38px] items-center border-b"
               :class="index === memo.length - 1 ? 'border-ink' : 'border-line'"
             >
@@ -149,7 +208,11 @@ const emit = defineEmits([
             <div
               v-for="quarter in 6"
               :key="quarter"
-              class="h-full w-[30px] border-r border-dashed border-line last:border-r-0"
+              :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"
+              @contextmenu.prevent
+              @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1, $event)"
+              @pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"
             />
           </div>
         </div>