v0.0.3

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.0.2`
+- 현재 기준 버전: `v0.0.3`
 
 ## 기준 디자인
 
@@ -25,7 +25,9 @@
 - Tailwind 설정은 완료되어 있으며, 이 프로젝트의 스타일링 기준으로 유지한다.
 - 현재 선택 날짜는 시스템 날짜 기준으로 시작한다.
 - `COMMENT`, `TASKS`, `MEMO`는 화면에서 바로 편집할 수 있다.
-- TASKS 체크박스는 토글 가능하지만, `TOTAL TIME`과 타임테이블 계산은 아직 미구현이다.
+- TASKS 체크박스는 토글 가능하며, 체크 상태는 바로 시각적으로 반영된다.
+- `TIME TABLE`은 드래그로 10분 블록을 연속 선택할 수 있다.
+- `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다.
 
 ## 확정된 결정사항
 

TODO.md

@@ -15,9 +15,9 @@
 - [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단계: 달력과 이동 기능
 

package-lock.json

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

package.json

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

src/App.vue

@@ -13,11 +13,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 +67,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 +108,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 +134,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 +142,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)
 
@@ -167,6 +206,15 @@ const calendarDays = computed(() => {
 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)
@@ -188,6 +236,10 @@ function toggleTask(record, index) {
 function updateMemo(record, { index, value }) {
   record.memo[index] = value
 }
+
+function updateTimetable(record, nextTimetable) {
+  record.timetable = nextTimetable
+}
 </script>
 
 <template>
@@ -251,14 +303,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">
@@ -304,7 +358,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 +385,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/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,52 @@ 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) {
+  dragState = {
+    startIndex: index,
+    baseTimetable: [...props.timetable],
+    nextValue: !props.timetable[index],
+  }
+
+  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 +152,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 +168,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 +202,10 @@ 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"
+              @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1)"
+              @pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"
             />
           </div>
         </div>