v0.1.52 - 이월 배지와 통계 설명 팝업 정리

src/components/PlannerPage.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { onBeforeUnmount, ref } from 'vue'
+import GuideTooltip from './GuideTooltip.vue'
 
 const props = defineProps({
   dateMain: {
@@ -62,7 +63,6 @@ const emit = defineEmits([
   'update:task-title',
   'toggle:task',
   'clear:tasks',
-  'inspect:carryover',
   'update:memo-label',
   'update:memo',
   'update:timetable',
@@ -349,14 +349,13 @@ onBeforeUnmount(() => {
                   @focus="clearTaskSelectionOnFocus"
                   @input="emit('update:task-title', { index, value: $event.target.value })"
                 />
-                <button
+                <GuideTooltip
                   v-if="task.carryoverFrom"
-                  type="button"
-                  class="shrink-0 rounded-full border border-stone-300 px-2 py-1 text-[8px] font-bold tracking-[0.12em] text-stone-500 transition hover:border-stone-500 hover:text-stone-900"
-                  @click="emit('inspect:carryover', task)"
-                >
-                  이월
-                </button>
+                  :title="'이월된 할 일'"
+                  :description="`이 항목은 ${task.carryoverFrom}부터 이월된 할 일입니다.`"
+                  :dismissible="false"
+                  button-label="이월"
+                />
               </div>
               <div class="flex h-full w-[36px] shrink-0 items-center justify-center p-[8px] sm:w-[42px] sm:p-[10px]">
                 <button