v0.0.7

src/components/PlannerPage.vue

@@ -2,10 +2,18 @@
 import { onBeforeUnmount } from 'vue'
 
 const props = defineProps({
-  dateLabel: {
+  dateMain: {
     type: String,
     required: true,
   },
+  dateWeekday: {
+    type: String,
+    required: true,
+  },
+  dateWeekdayTone: {
+    type: String,
+    default: 'text-ink',
+  },
   dday: {
     type: String,
     required: true,
@@ -45,12 +53,17 @@ const emit = defineEmits([
   'update:task-label',
   'update:task-title',
   'toggle:task',
+  'update:memo-label',
   'update:memo',
   'update:timetable',
 ])
 
 let dragState = null
 
+function shouldShowTaskPlaceholder(index) {
+  return index === 0 && props.tasks.every((task) => !task.title.trim())
+}
+
 function buildTimedRange(baseTimetable, startIndex, endIndex, nextValue) {
   const nextTimetable = [...baseTimetable]
   const rangeStart = Math.min(startIndex, endIndex)
@@ -108,7 +121,10 @@ onBeforeUnmount(() => {
       <div class="flex gap-4">
         <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">YEAR / MONTH / DAY</span>
-          <p class="pt-6 text-xs tracking-[0.24em] text-ink sm:text-sm">{{ dateLabel }}</p>
+          <p class="pt-6 text-xs tracking-[0.24em] text-ink sm:text-sm">
+            <span>{{ dateMain }}</span>
+            <span class="ml-1" :class="dateWeekdayTone">{{ dateWeekday }}</span>
+          </p>
         </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">D-DAY</span>
@@ -149,7 +165,6 @@ onBeforeUnmount(() => {
                   :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>
@@ -158,7 +173,7 @@ onBeforeUnmount(() => {
                   :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="할 일을 입력해 주세요."
+                  :placeholder="shouldShowTaskPlaceholder(index) ? '할 일을 입력해 주세요.' : ''"
                   @input="emit('update:task-title', { index, value: $event.target.value })"
                 />
               </div>
@@ -185,13 +200,19 @@ onBeforeUnmount(() => {
               class="flex h-[38px] items-center border-b"
               :class="index === memo.length - 1 ? 'border-ink' : 'border-line'"
             >
-              <div class="h-full w-[62px] border-r border-dashed border-ink" />
+              <div class="h-full w-[62px] border-r border-dashed border-ink px-2 py-[7px]">
+                <input
+                  :value="memoItem.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"
+                  @input="emit('update:memo-label', { index, value: $event.target.value })"
+                />
+              </div>
               <div class="flex flex-1 items-center px-3">
                 <input
-                  :value="memoItem"
+                  :value="memoItem.text"
                   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>