v0.0.3

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>