v0.1.55 - 타임테이블 복사 메뉴와 사용 안내 추가

src/components/PlannerPage.vue

@@ -55,6 +55,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  timetableActionLabel: {
+    type: String,
+    default: '복사',
+  },
 })
 
 const emit = defineEmits([
@@ -66,6 +70,8 @@ const emit = defineEmits([
   'update:memo-label',
   'update:memo',
   'update:timetable',
+  'timetable-action',
+  'timetable-contextmenu',
 ])
 
 let dragState = null
@@ -408,7 +414,26 @@ onBeforeUnmount(() => {
       </div>
 
       <section class="planner-sheet__timetable w-full shrink-0 lg:w-[210px]">
-        <div class="flex items-center gap-2 text-muted">
+        <div v-if="!props.readonly" class="flex items-center gap-2 text-muted">
+          <button
+            type="button"
+            class="group flex flex-1 items-center gap-2 rounded-full px-1 py-1 text-left transition hover:bg-stone-100/80"
+            @click="emit('timetable-action')"
+            @contextmenu.prevent="emit('timetable-contextmenu', $event)"
+          >
+            <span class="shrink-0 transition-colors group-hover:text-ink">TIME TABLE</span>
+            <span class="h-px flex-1 bg-ink"></span>
+            <span class="rounded-full border border-stone-200 bg-white px-3 py-1 text-[9px] font-bold tracking-[0.14em] text-stone-500 transition-colors group-hover:border-stone-400 group-hover:text-stone-900">
+              {{ timetableActionLabel }}
+            </span>
+          </button>
+          <GuideTooltip
+            title="Time Table"
+            description="왼쪽 클릭으로 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 메뉴에서 현재 날짜에 붙여넣을 수 있습니다."
+            :dismissible="false"
+          />
+        </div>
+        <div v-else class="flex items-center gap-2 text-muted">
           <span class="shrink-0">TIME TABLE</span>
           <span class="h-px flex-1 bg-ink"></span>
         </div>