관리자 모달 프레임 공통화

pages/admin/media/index.vue

@@ -1663,46 +1663,43 @@ watch(() => mediaPagination.value.page, (page) => {
       </div>
     </div>
 
-    <div
+    <AdminModalFrame
       v-if="isCreateFolderModalOpen"
-      class="admin-media__folder-create-modal fixed inset-0 z-[60] grid place-items-center bg-black/40 px-5 py-8"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="media-folder-modal-title"
-      @click.self="closeCreateFolderModal"
+      labelled-by="media-folder-modal-title"
+      root-class="admin-media__folder-create-modal"
+      panel-class="admin-media__folder-create-panel max-w-sm"
+      @close="closeCreateFolderModal"
     >
-      <section class="admin-media__folder-create-panel w-full max-w-sm rounded border border-line bg-white p-5 shadow-xl">
-        <h3 id="media-folder-modal-title" class="text-lg font-semibold text-ink">
-          새 폴더
-        </h3>
-        <p class="mt-1 text-xs text-muted">
-          {{ activeFolder ? `${activeFolder} 아래에 하위 폴더를 만듭니다.` : '최상위 폴더를 만듭니다.' }}
-        </p>
-        <label class="mt-4 grid gap-1.5 text-sm">
-          <span class="text-xs font-semibold text-muted">폴더 이름</span>
-          <input
-            v-model="createFolderModalName"
-            class="rounded border border-line px-3 py-2 text-sm outline-none focus:border-[#8e9cac]"
-            type="text"
-            placeholder="폴더 이름"
-            @keydown.enter.prevent="submitCreateFolderModal"
-          >
-        </label>
-        <div class="mt-5 flex justify-end gap-2">
-          <button class="rounded border border-line px-3 py-2 text-xs font-semibold text-ink" type="button" @click="closeCreateFolderModal">
-            취소
-          </button>
-          <button
-            class="rounded bg-[#15171a] px-3 py-2 text-xs font-semibold text-white disabled:opacity-50"
-            type="button"
-            :disabled="!createFolderModalName.trim()"
-            @click="submitCreateFolderModal"
-          >
-            만들기
-          </button>
-        </div>
-      </section>
-    </div>
+      <h3 id="media-folder-modal-title" class="text-lg font-semibold text-ink">
+        새 폴더
+      </h3>
+      <p class="mt-1 text-xs text-muted">
+        {{ activeFolder ? `${activeFolder} 아래에 하위 폴더를 만듭니다.` : '최상위 폴더를 만듭니다.' }}
+      </p>
+      <label class="mt-4 grid gap-1.5 text-sm">
+        <span class="text-xs font-semibold text-muted">폴더 이름</span>
+        <input
+          v-model="createFolderModalName"
+          class="rounded border border-line px-3 py-2 text-sm outline-none focus:border-[#8e9cac]"
+          type="text"
+          placeholder="폴더 이름"
+          @keydown.enter.prevent="submitCreateFolderModal"
+        >
+      </label>
+      <div class="mt-5 flex justify-end gap-2">
+        <button class="rounded border border-line px-3 py-2 text-xs font-semibold text-ink" type="button" @click="closeCreateFolderModal">
+          취소
+        </button>
+        <button
+          class="rounded bg-[#15171a] px-3 py-2 text-xs font-semibold text-white disabled:opacity-50"
+          type="button"
+          :disabled="!createFolderModalName.trim()"
+          @click="submitCreateFolderModal"
+        >
+          만들기
+        </button>
+      </div>
+    </AdminModalFrame>
 
     <div
       v-if="selectedMedia"