관리자 모달 프레임 공통화

components/admin/AdminModalFrame.vue

@@ -0,0 +1,44 @@
+<script setup>
+const props = defineProps({
+  /** 모달 제목 요소 ID */
+  labelledBy: {
+    type: String,
+    required: true
+  },
+  /** 오버레이에 추가할 화면별 클래스 */
+  rootClass: {
+    type: String,
+    default: ''
+  },
+  /** 패널에 추가할 화면별 클래스 */
+  panelClass: {
+    type: String,
+    default: ''
+  },
+  /** 오버레이 z-index 클래스 */
+  zClass: {
+    type: String,
+    default: 'z-[60]'
+  }
+})
+
+const emit = defineEmits(['close'])
+</script>
+
+<template>
+  <div
+    class="admin-modal-frame fixed inset-0 grid place-items-center bg-black/40 px-5 py-8"
+    :class="[zClass, rootClass]"
+    role="dialog"
+    aria-modal="true"
+    :aria-labelledby="props.labelledBy"
+    @click.self="emit('close')"
+  >
+    <section
+      class="admin-modal-frame__panel max-h-[90vh] w-full overflow-y-auto rounded border border-line bg-white p-5 shadow-xl"
+      :class="panelClass"
+    >
+      <slot />
+    </section>
+  </div>
+</template>