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

src/components/GuideTooltip.vue

@@ -14,6 +14,14 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  dismissible: {
+    type: Boolean,
+    default: true,
+  },
+  buttonLabel: {
+    type: String,
+    default: '?',
+  },
 })
 
 const emit = defineEmits(['dismiss'])
@@ -68,7 +76,7 @@ onBeforeUnmount(() => {
       :aria-expanded="open"
       @click.stop="toggle"
     >
-      ?
+      {{ buttonLabel }}
     </button>
 
     <span
@@ -79,6 +87,7 @@ onBeforeUnmount(() => {
       <span class="block text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">{{ title }}</span>
       <span class="mt-2 block text-[11px] font-semibold leading-5 tracking-[0.04em] text-stone-700">{{ description }}</span>
       <button
+        v-if="dismissible"
         type="button"
         class="mt-3 rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
         @click="dismiss"

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

src/components/StatsDashboard.vue

@@ -1,4 +1,6 @@
 <script setup>
+import GuideTooltip from './GuideTooltip.vue'
+
 defineProps({
   overviewCards: {
     type: Array,
@@ -140,10 +142,14 @@ const emit = defineEmits(['update:range-start', 'update:range-end', 'quick-range
 
       <div class="grid gap-6">
         <article class="rounded-[28px] border border-stone-200 bg-white/86 p-6">
-          <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">BEST DAY</p>
-          <p class="mt-2 text-[11px] font-semibold leading-5 text-stone-500">
-            선택 기간 안에서 집중 시간이 가장 긴 날짜입니다.
-          </p>
+          <div class="flex items-center gap-2">
+            <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">BEST DAY</p>
+            <GuideTooltip
+              title="Best Day"
+              description="선택 범위 안에서 FOCUSED TIME이 가장 큰 날짜를 보여줍니다."
+              :dismissible="false"
+            />
+          </div>
           <div v-if="bestDay" class="mt-4">
             <h2 class="text-2xl font-semibold tracking-[-0.05em] text-stone-900">
               {{ bestDay.dateLabel }}
@@ -158,10 +164,14 @@ const emit = defineEmits(['update:range-start', 'update:range-end', 'quick-range
         </article>
 
         <article class="rounded-[28px] border border-stone-200 bg-white/86 p-6">
-          <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">RECENT RECORDS</p>
-          <p class="mt-2 text-[11px] font-semibold leading-5 text-stone-500">
-            선택 기간 안의 최근 기록을 날짜 내림차순으로 최대 5개 표시합니다.
-          </p>
+          <div class="flex items-center gap-2">
+            <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">RECENT RECORDS</p>
+            <GuideTooltip
+              title="Recent Records"
+              description="선택 범위 안의 기록을 날짜 내림차순으로 최대 5개까지 보여줍니다."
+              :dismissible="false"
+            />
+          </div>
           <div class="mt-4 space-y-4">
             <div
               v-for="record in recentRecords"