100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
Vue
<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,
|
|
},
|
|
dismissible: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
buttonLabel: {
|
|
type: String,
|
|
default: '?',
|
|
},
|
|
})
|
|
|
|
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"
|
|
>
|
|
{{ buttonLabel }}
|
|
</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
|
|
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"
|
|
>
|
|
더 이상 보지 않기
|
|
</button>
|
|
</span>
|
|
</span>
|
|
</template>
|