v0.0.2

src/App.vue

@@ -1,28 +1,10 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
+<script setup>
+import { computed, reactive, ref } from 'vue'
 import MiniCalendar from './components/MiniCalendar.vue'
 import PlannerPage from './components/PlannerPage.vue'
 
-type PlannerTask = {
-  id: string
-  title: string
-  checked?: boolean
-}
-
-type PlannerRecord = {
-  dday: string
-  comment: string
-  totalTime: string
-  tasks: PlannerTask[]
-  memo: string[]
-  prevSummary: string[]
-  nextFocus: string[]
-}
-
-type ViewMode = 'focus' | 'spread'
-
-const viewMode = ref<ViewMode>('focus')
-const selectedDate = ref(new Date(2026, 3, 21))
+const viewMode = ref('focus')
+const selectedDate = ref(new Date())
 
 const hours = [
   '6', '7', '8', '9', '10', '11', '12',
@@ -31,7 +13,7 @@ const hours = [
   '1', '2', '3', '4', '5',
 ]
 
-const plannerSeed: Record<string, PlannerRecord> = {
+const plannerSeed = {
   '2026-04-21': {
     dday: 'D-12 LAUNCH',
     comment: '집중 작업 3개만 남기고, 10분 단위로 흐름을 끊지 않기.',
@@ -108,6 +90,8 @@ const plannerSeed: Record<string, PlannerRecord> = {
   },
 }
 
+const plannerRecords = reactive(structuredClone(plannerSeed))
+
 const dateFormatter = new Intl.DateTimeFormat('ko-KR', {
   year: 'numeric',
   month: '2-digit',
@@ -115,29 +99,40 @@ const dateFormatter = new Intl.DateTimeFormat('ko-KR', {
   weekday: 'short',
 })
 
-function toKey(date: Date) {
+function toKey(date) {
   const year = date.getFullYear()
   const month = `${date.getMonth() + 1}`.padStart(2, '0')
   const day = `${date.getDate()}`.padStart(2, '0')
   return `${year}-${month}-${day}`
 }
 
-function buildFallbackRecord(date: Date): PlannerRecord {
+function buildFallbackRecord(date) {
   return {
     dday: 'D-00 FOCUS',
-    comment: `${date.getMonth() + 1}월 ${date.getDate()}일 플래너를 위한 빈 페이지입니다.`,
+    comment: '',
     totalTime: '00H 00M',
     tasks: Array.from({ length: 15 }, (_, index) => ({
       id: `${index + 1}`.padStart(2, '0'),
-      title: index < 3 ? '새 작업을 추가해 주세요.' : '',
+      title: '',
+      checked: false,
     })),
-    memo: ['메모를 남겨 두세요.', '중요한 문장을 짧게 적어 보세요.', '내일로 넘길 내용을 적어 두세요.'],
+    memo: ['', '', ''],
     prevSummary: ['이전 기록 없음', '새로운 흐름 시작', ''],
     nextFocus: ['다음 집중 블록 준비', '내일의 핵심 3개 정하기', ''],
   }
 }
 
-const planner = computed(() => plannerSeed[toKey(selectedDate.value)] ?? buildFallbackRecord(selectedDate.value))
+function getPlannerRecord(date) {
+  const key = toKey(date)
+
+  if (!plannerRecords[key]) {
+    plannerRecords[key] = buildFallbackRecord(date)
+  }
+
+  return plannerRecords[key]
+}
+
+const planner = computed(() => getPlannerRecord(selectedDate.value))
 
 const secondaryDate = computed(() => {
   const next = new Date(selectedDate.value)
@@ -145,7 +140,7 @@ const secondaryDate = computed(() => {
   return next
 })
 
-const secondaryPlanner = computed(() => plannerSeed[toKey(secondaryDate.value)] ?? buildFallbackRecord(secondaryDate.value))
+const secondaryPlanner = computed(() => getPlannerRecord(secondaryDate.value))
 
 const monthLabel = computed(() =>
   `${selectedDate.value.getFullYear()}.${`${selectedDate.value.getMonth() + 1}`.padStart(2, '0')}`,
@@ -172,11 +167,27 @@ 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 shiftDate(amount: number) {
+function shiftDate(amount) {
   const next = new Date(selectedDate.value)
   next.setDate(next.getDate() + amount)
   selectedDate.value = next
 }
+
+function updateComment(record, value) {
+  record.comment = value
+}
+
+function updateTaskTitle(record, { index, value }) {
+  record.tasks[index].title = value
+}
+
+function toggleTask(record, index) {
+  record.tasks[index].checked = !record.tasks[index].checked
+}
+
+function updateMemo(record, { index, value }) {
+  record.memo[index] = value
+}
 </script>
 
 <template>
@@ -244,6 +255,10 @@ function shiftDate(amount: number) {
           :tasks="planner.tasks"
           :memo="planner.memo"
           :hours="hours"
+          @update:comment="updateComment(planner, $event)"
+          @update:task-title="updateTaskTitle(planner, $event)"
+          @toggle:task="toggleTask(planner, $event)"
+          @update:memo="updateMemo(planner, $event)"
         />
 
         <aside class="flex flex-col gap-4">
@@ -320,6 +335,10 @@ function shiftDate(amount: number) {
             :tasks="planner.tasks"
             :memo="planner.memo"
             :hours="hours"
+            @update:comment="updateComment(planner, $event)"
+            @update:task-title="updateTaskTitle(planner, $event)"
+            @toggle:task="toggleTask(planner, $event)"
+            @update:memo="updateMemo(planner, $event)"
           />
           <PlannerPage
             :date-label="dateFormatter.format(secondaryDate)"
@@ -329,6 +348,10 @@ function shiftDate(amount: number) {
             :tasks="secondaryPlanner.tasks"
             :memo="secondaryPlanner.memo"
             :hours="hours"
+            @update:comment="updateComment(secondaryPlanner, $event)"
+            @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
+            @toggle:task="toggleTask(secondaryPlanner, $event)"
+            @update:memo="updateMemo(secondaryPlanner, $event)"
           />
         </div>
       </section>