v0.0.2

2026-04-21 12:45:08 +09:00
parent 6ae64d2a13
commit e63dc3efed
12 changed files with 267 additions and 325 deletions
--- a/src/App.vue
+++ b/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>
--- a/src/components/MiniCalendar.vue
+++ b/src/components/MiniCalendar.vue
@@ -1,20 +1,20 @@
-<script setup lang="ts">
-type DayCell = {
-  key: string
-  label: number
-  date: Date
-  isCurrentMonth: boolean
-}
+<script setup>
+defineProps({
+  monthLabel: {
+    type: String,
+    required: true,
+  },
+  days: {
+    type: Array,
+    required: true,
+  },
+  selectedKey: {
+    type: String,
+    required: true,
+  },
+})

-defineProps<{
-  monthLabel: string
-  days: DayCell[]
-  selectedKey: string
-}>()
-
-const emit = defineEmits<{
-  select: [date: Date]
-}>()
+const emit = defineEmits(['select'])
 </script>

 <template>
--- a/src/components/PlannerPage.vue
+++ b/src/components/PlannerPage.vue
@@ -1,22 +1,45 @@
-<script setup lang="ts">
-type PlannerTask = {
-  id: string
-  title: string
-  checked?: boolean
-}
+<script setup>
+defineProps({
+  dateLabel: {
+    type: String,
+    required: true,
+  },
+  dday: {
+    type: String,
+    required: true,
+  },
+  comment: {
+    type: String,
+    required: true,
+  },
+  totalTime: {
+    type: String,
+    required: true,
+  },
+  tasks: {
+    type: Array,
+    required: true,
+  },
+  memo: {
+    type: Array,
+    required: true,
+  },
+  hours: {
+    type: Array,
+    required: true,
+  },
+  brand: {
+    type: String,
+    default: 'SORI.STUDIO',
+  },
+})

-type PlannerProps = {
-  dateLabel: string
-  dday: string
-  comment: string
-  totalTime: string
-  tasks: PlannerTask[]
-  memo: string[]
-  hours: string[]
-  brand?: string
-}
-
-defineProps<PlannerProps>()
+const emit = defineEmits([
+  'update:comment',
+  'update:task-title',
+  'toggle:task',
+  'update:memo',
+])
 </script>

 <template>
@@ -37,9 +60,13 @@ defineProps<PlannerProps>()
      <div class="flex gap-4 border-b border-ink pb-[18px]">
        <div class="relative h-[90px] w-[394px] flex-1 border-t border-ink px-[10px] pt-[10px]">
          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">COMMENT</span>
-          <p class="pt-6 text-[11px] font-semibold normal-case tracking-[0.08em] text-stone-700 sm:text-xs">
-            {{ comment }}
-          </p>
+          <textarea
+            :value="comment"
+            rows="3"
+            class="mt-4 h-[56px] w-full resize-none bg-transparent pt-2 text-[11px] font-semibold normal-case tracking-[0.08em] text-stone-700 outline-none placeholder:text-stone-400 sm:text-xs"
+            placeholder="오늘의 코멘트를 적어 주세요."
+            @input="emit('update:comment', $event.target.value)"
+          />
        </div>
        <div class="relative h-[90px] w-[210px] border-t border-ink px-[10px] pt-[10px]">
          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">TOTAL TIME</span>
@@ -63,15 +90,21 @@ defineProps<PlannerProps>()
                {{ task.id }}
              </div>
              <div class="flex min-w-0 flex-1 items-center px-3">
-                <span class="truncate text-[11px] font-semibold normal-case tracking-[0.06em] text-stone-800">
-                  {{ task.title }}
-                </span>
+                <input
+                  :value="task.title"
+                  type="text"
+                  class="w-full truncate bg-transparent text-[11px] font-semibold normal-case tracking-[0.06em] text-stone-800 outline-none placeholder:text-stone-400"
+                  placeholder="할 일을 입력해 주세요."
+                  @input="emit('update:task-title', { index, value: $event.target.value })"
+                />
              </div>
              <div class="flex h-full w-[42px] items-center justify-center p-[10px]">
-                <span
-                  class="block h-full w-full border border-dashed"
+                <button
+                  type="button"
+                  class="block h-full w-full border border-dashed transition"
                  :class="task.checked ? 'border-ink bg-stone-100' : 'border-ink/60'"
-                />
+                  @click="emit('toggle:task', index)"
+                ></button>
              </div>
            </div>
          </div>
@@ -87,8 +120,14 @@ defineProps<PlannerProps>()
              :class="index === memo.length - 1 ? 'border-ink' : 'border-line'"
            >
              <div class="h-full w-[62px] border-r border-dashed border-ink" />
-              <div class="flex-1 px-3 text-[11px] font-semibold normal-case tracking-[0.06em] text-stone-700">
-                {{ memoItem }}
+              <div class="flex flex-1 items-center px-3">
+                <input
+                  :value="memoItem"
+                  type="text"
+                  class="w-full bg-transparent text-[11px] font-semibold normal-case tracking-[0.06em] text-stone-700 outline-none placeholder:text-stone-400"
+                  placeholder="메모를 입력해 주세요."
+                  @input="emit('update:memo', { index, value: $event.target.value })"
+                />
              </div>
            </div>
          </div>
@@ -118,7 +157,7 @@ defineProps<PlannerProps>()
    </div>

    <div class="flex justify-end">
-      <p class="text-[10px] tracking-[0.18em] text-ink">{{ brand ?? 'SORI.STUDIO' }}</p>
+      <p class="text-[10px] tracking-[0.18em] text-ink">{{ brand }}</p>
    </div>
  </article>
 </template>
--- a/src/main.js
+++ b/src/main.js