v0.0.6

src/components/PlannerPage.vue

@@ -42,6 +42,7 @@ const props = defineProps({
 
 const emit = defineEmits([
   'update:comment',
+  'update:task-label',
   'update:task-title',
   'toggle:task',
   'update:memo',
@@ -143,8 +144,14 @@ onBeforeUnmount(() => {
               class="flex h-[38px] items-center border-b"
               :class="index % 5 === 4 || index === tasks.length - 1 ? 'border-ink' : 'border-line'"
             >
-              <div class="h-full w-[62px] border-r border-dashed border-ink px-2 py-2 text-[9px] text-stone-500">
-                {{ task.id }}
+              <div class="h-full w-[62px] border-r border-dashed border-ink px-2 py-[7px]">
+                <input
+                  :value="task.label"
+                  type="text"
+                  class="w-full bg-transparent text-center text-[9px] font-semibold tracking-[0.08em] text-stone-500 outline-none placeholder:text-stone-300"
+                  :placeholder="`${index + 1}`.padStart(2, '0')"
+                  @input="emit('update:task-label', { index, value: $event.target.value })"
+                />
               </div>
               <div class="flex min-w-0 flex-1 items-center px-3">
                 <input