프로필 썸네일 해제 시 메타 분리 통일·미디어 모달 다운로드(v0.0.92)

Co-authored-by: Cursor <cursoragent@cursor.com>

pages/admin/media/index.vue

@@ -90,6 +90,27 @@ const formatDateTime = (iso) => {
   }
 }
 
+/**
+ * 상세 모달에서 선택된 미디어를 브라우저로 내려받는다.
+ * @returns {void}
+ */
+const downloadSelectedMedia = () => {
+  const item = selectedMedia.value
+
+  if (!item?.url || !import.meta.client) {
+    return
+  }
+
+  const anchor = document.createElement('a')
+  anchor.href = item.url
+  anchor.download = item.name || 'image'
+  anchor.rel = 'noopener noreferrer'
+  anchor.target = '_blank'
+  document.body.appendChild(anchor)
+  anchor.click()
+  document.body.removeChild(anchor)
+}
+
 const { data: mediaFolders, refresh: refreshMediaFolders } = await useFetch('/admin/api/media-folders', {
   default: () => ['미분류']
 })
@@ -635,7 +656,7 @@ const deleteMedia = async (item) => {
           <span>{{ thumbnailMediaItems.length }}</span>
         </button>
         <p class="admin-media__thumb-hint mt-4 text-xs leading-relaxed text-muted">
-          회원 프로필에서 쓰는 이미지는 연결 회원이 있을 때만 삭제·이름 변경이 막힙니다. 프로필에서 바꾸거나 해제된 파일은 이 목록에 남으며, 관리자가 직접 정리할 수 있습니다.
+          회원 프로필에서 쓰는 이미지는 연결 회원이 있을 때만 삭제·이름 변경이 막힙니다. 프로필에서 바꾸거나 해제해도 <strong class="font-semibold text-ink">디스크 파일은 삭제되지 않으며</strong> 이 목록에 남습니다. 목록이 바로 안 바뀌면 페이지를 새로고침하세요. 관리자는 필요 시 삭제·다운로드로 정리할 수 있습니다.
         </p>
       </aside>
 
@@ -775,8 +796,8 @@ const deleteMedia = async (item) => {
         </div>
 
         <aside class="admin-media__detail grid max-h-[86vh] content-start gap-5 overflow-y-auto border-l border-line p-5">
-          <div class="admin-media__detail-header flex items-start justify-between gap-3">
-            <div>
+          <div class="admin-media__detail-header flex flex-wrap items-start justify-between gap-3">
+            <div class="min-w-0 flex-1">
               <p class="admin-media__detail-eyebrow text-xs font-semibold uppercase text-muted">
                 Attachment
               </p>
@@ -784,9 +805,18 @@ const deleteMedia = async (item) => {
                 {{ selectedMedia.name }}
               </h2>
             </div>
-            <button class="admin-media__detail-close rounded border border-line px-3 py-1.5 text-sm font-semibold" type="button" @click="closeMediaDetail">
-              닫기
-            </button>
+            <div class="admin-media__detail-header-actions flex shrink-0 flex-wrap items-center gap-2">
+              <button
+                class="admin-media__download rounded border border-line px-3 py-1.5 text-sm font-semibold text-ink hover:bg-surface"
+                type="button"
+                @click="downloadSelectedMedia"
+              >
+                다운로드
+              </button>
+              <button class="admin-media__detail-close rounded border border-line px-3 py-1.5 text-sm font-semibold" type="button" @click="closeMediaDetail">
+                닫기
+              </button>
+            </div>
           </div>
 
           <dl class="admin-media__info grid gap-3 text-sm">