v0.1.43 - 플래너 라벨과 가이드 동작 정리

src/components/GuideTooltip.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { onBeforeUnmount, ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['dismiss'])
+
+const open = ref(false)
+const rootRef = ref(null)
+
+function close() {
+  open.value = false
+}
+
+function toggle() {
+  if (!props.visible) {
+    return
+  }
+
+  open.value = !open.value
+}
+
+function closeFromOutside(event) {
+  if (!open.value || rootRef.value?.contains(event.target)) {
+    return
+  }
+
+  close()
+}
+
+function dismiss() {
+  emit('dismiss')
+  close()
+}
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('pointerdown', closeFromOutside)
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener('pointerdown', closeFromOutside)
+})
+</script>
+
+<template>
+  <span
+    v-if="visible"
+    ref="rootRef"
+    class="relative inline-flex"
+  >
+    <button
+      type="button"
+      class="flex h-5 w-5 items-center justify-center rounded-full border border-stone-300 bg-white text-[10px] font-bold text-stone-500 transition hover:border-stone-500 hover:text-stone-900 focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2"
+      aria-label="가이드 보기"
+      :aria-expanded="open"
+      @click.stop="toggle"
+    >
+      ?
+    </button>
+
+    <span
+      v-if="open"
+      class="absolute left-0 top-7 z-50 w-64 rounded-2xl border border-stone-200 bg-white p-4 text-left shadow-[0_18px_50px_rgba(28,25,23,0.16)]"
+      @pointerdown.stop
+    >
+      <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
+        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"
+      >
+        더 이상 보지 않기
+      </button>
+    </span>
+  </span>
+</template>