v0.0.2

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>

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>