62 lines
2.4 KiB
Vue
62 lines
2.4 KiB
Vue
<script setup>
|
|
defineProps({
|
|
open: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
defineEmits(['stay', 'leave'])
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<div
|
|
v-if="open"
|
|
class="admin-unsaved-modal fixed inset-0 z-[100] flex items-center justify-center bg-black/40 px-5 py-8"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="admin-unsaved-modal-title"
|
|
>
|
|
<div class="admin-unsaved-modal__content relative w-full max-w-[520px] rounded-xl bg-white text-[#15171a] shadow-2xl">
|
|
<header class="admin-unsaved-modal__header border-b border-[#e3e6e8] px-8 py-6">
|
|
<h1 id="admin-unsaved-modal-title" class="admin-unsaved-modal__title text-xl font-semibold tracking-[-0.01em]">
|
|
이 페이지를 떠날까요?
|
|
</h1>
|
|
</header>
|
|
<button
|
|
class="admin-unsaved-modal__close absolute right-5 top-5 grid size-8 place-items-center rounded-md text-[#4d5663] transition hover:bg-[#eff1f2] hover:text-black"
|
|
type="button"
|
|
title="닫기"
|
|
aria-label="닫기"
|
|
@click="$emit('stay')"
|
|
>
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12.707 12L23.854.854a.5.5 0 00-.707-.707L12 11.293.854.146a.5.5 0 00-.707.707L11.293 12 .146 23.146a.5.5 0 00.708.708L12 12.707l11.146 11.146a.5.5 0 10.708-.706L12.707 12z" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
<div class="admin-unsaved-modal__body space-y-3 px-8 py-7 text-sm leading-6 text-[#4d5663]">
|
|
<p>저장하지 않은 변경사항이 있습니다.</p>
|
|
<p>떠나기 전에 저장해 주세요.</p>
|
|
</div>
|
|
<footer class="admin-unsaved-modal__footer flex justify-end gap-3 border-t border-[#e3e6e8] px-8 py-5">
|
|
<button
|
|
class="admin-unsaved-modal__stay h-10 rounded-md border border-[#d7dce0] bg-white px-4 text-sm font-semibold text-[#394047] transition hover:bg-[#eff1f2]"
|
|
type="button"
|
|
@click="$emit('stay')"
|
|
>
|
|
머무르기
|
|
</button>
|
|
<button
|
|
class="admin-unsaved-modal__leave h-10 rounded-md bg-[#e5484d] px-4 text-sm font-semibold text-white transition hover:bg-[#d21a26]"
|
|
type="button"
|
|
@click="$emit('leave')"
|
|
>
|
|
나가기
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|