v1.4.1: 관리자 미디어 업로드 한도·라이브 에디터 UX 개선

종류별 업로드 크기 한도와 413 안내를 추가하고, 임베드·미디어 라이브 프리뷰·제목 Enter 포커스·스크롤 동작을 보정한다.

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

server/routes/admin/api/uploads.post.js

@@ -1,14 +1,57 @@
 import { mkdir, stat, writeFile } from 'node:fs/promises'
 import { extname, join } from 'node:path'
 import { createError, readMultipartFormData } from 'h3'
+import {
+  buildDefaultUploadSizeLimits,
+  formatUploadSizeLimit,
+  getMaxUploadBytesForKind,
+  getUploadKind,
+  getUploadKindLabel
+} from '../../../../lib/upload-size-limit.js'
 import { requireAdminSession } from '../../../utils/admin-auth'
+import { getRuntimeEnvNumber } from '../../../utils/runtime-env.js'
 import { upsertMediaMetadataCategory } from '../../../utils/media-library'
 
-const allowedImageTypes = new Map([
+const allowedUploadTypes = new Map([
   ['image/jpeg', '.jpg'],
   ['image/png', '.png'],
   ['image/webp', '.webp'],
-  ['image/gif', '.gif']
+  ['image/gif', '.gif'],
+  ['video/mp4', '.mp4'],
+  ['video/webm', '.webm'],
+  ['video/quicktime', '.mov'],
+  ['audio/mpeg', '.mp3'],
+  ['audio/wav', '.wav'],
+  ['audio/ogg', '.ogg'],
+  ['audio/mp4', '.m4a'],
+  ['application/pdf', '.pdf'],
+  ['application/zip', '.zip'],
+  ['text/plain', '.txt'],
+  ['text/csv', '.csv'],
+  ['application/vnd.openxmlformats-officedocument.wordprocessingml.document', '.docx'],
+  ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', '.xlsx'],
+  ['application/vnd.openxmlformats-officedocument.presentationml.presentation', '.pptx']
+])
+const allowedUploadExtensions = new Set([
+  '.jpg',
+  '.jpeg',
+  '.png',
+  '.webp',
+  '.gif',
+  '.mp4',
+  '.webm',
+  '.mov',
+  '.mp3',
+  '.wav',
+  '.ogg',
+  '.m4a',
+  '.pdf',
+  '.zip',
+  '.txt',
+  '.csv',
+  '.docx',
+  '.xlsx',
+  '.pptx'
 ])
 
 /**
@@ -29,13 +72,21 @@ const sanitizePathPart = (value) => value
 const getUploadExtension = (file) => {
   const extension = extname(file.filename || '').toLowerCase()
 
-  if (allowedImageTypes.has(file.type)) {
-    return allowedImageTypes.get(file.type)
+  if (allowedUploadTypes.has(file.type)) {
+    return allowedUploadTypes.get(file.type)
   }
 
   return extension
 }
 
+/**
+ * 업로드 허용 파일인지 확인한다.
+ * @param {Object} file - multipart 파일 파트
+ * @returns {boolean} 허용 여부
+ */
+const isAllowedUploadFile = (file) => allowedUploadTypes.has(file.type)
+  || allowedUploadExtensions.has(extname(file.filename || '').toLowerCase())
+
 /**
  * 디렉터리 안에서 비어 있는 저장 파일명을 고른다. 동일 이름이 있으면 `이름-2`, `이름-3` 식으로 넘버링한다.
  * @param {string} directoryPath - 저장 디렉터리 절대 경로
@@ -68,7 +119,7 @@ const pickUniqueDiskFileName = async (directoryPath, stem, extension) => {
 }
 
 /**
- * 관리자 이미지 업로드 API
+ * 관리자 미디어 업로드 API
  * @param {import('h3').H3Event} event - 요청 이벤트
  * @returns {Promise<{ files: Array<{ url: string, name: string, size: number }> }>} 업로드 결과
  */
@@ -76,14 +127,19 @@ export default defineEventHandler(async (event) => {
   requireAdminSession(event)
 
   const config = useRuntimeConfig()
-  const maxFileSize = Number(config.maxFileSize || 10485760)
+  const uploadSizeLimits = buildDefaultUploadSizeLimits({
+    image: getRuntimeEnvNumber('MAX_FILE_SIZE', 'maxFileSize', 10485760),
+    video: getRuntimeEnvNumber('MAX_VIDEO_FILE_SIZE', 'maxVideoFileSize', 209715200),
+    audio: getRuntimeEnvNumber('MAX_AUDIO_FILE_SIZE', 'maxAudioFileSize', 52428800),
+    document: getRuntimeEnvNumber('MAX_DOCUMENT_FILE_SIZE', 'maxDocumentFileSize', 52428800)
+  })
   const formData = await readMultipartFormData(event)
   const files = (formData || []).filter((part) => part.name === 'files' && part.filename)
 
   if (!files.length) {
     throw createError({
       statusCode: 400,
-      message: '업로드할 이미지가 없습니다.'
+      message: '업로드할 파일이 없습니다.'
     })
   }
 
@@ -99,17 +155,20 @@ export default defineEventHandler(async (event) => {
   const uploadedFiles = []
 
   for (const file of files) {
-    if (!allowedImageTypes.has(file.type)) {
+    if (!isAllowedUploadFile(file)) {
       throw createError({
         statusCode: 400,
-        message: '이미지 파일만 업로드할 수 있습니다.'
+        message: '지원하지 않는 파일 형식입니다.'
       })
     }
 
+    const uploadKind = getUploadKind(file.type, file.filename)
+    const maxFileSize = getMaxUploadBytesForKind(uploadKind, uploadSizeLimits)
+
     if (file.data.length > maxFileSize) {
       throw createError({
         statusCode: 413,
-        message: '업로드 가능한 파일 크기를 초과했습니다.'
+        message: `${getUploadKindLabel(uploadKind)} 업로드 가능 크기를 초과했습니다. (최대 ${formatUploadSizeLimit(maxFileSize)})`
       })
     }
 

server/utils/media-library.js

@@ -5,6 +5,7 @@ import { getSiteSettings, listAdminPosts, listPages } from '../repositories/cont
 import { getPostgresClient } from '../repositories/postgres-client'
 
 const uploadRoot = join(process.cwd(), 'public', 'uploads')
+const mediaFilePattern = /\.(jpe?g|png|webp|gif|mp4|webm|mov|mp3|wav|ogg|m4a|pdf|zip|txt|csv|docx|xlsx|pptx)$/i
 
 /** 회원 프로필 이미지 전용 논리 폴더명(디스크 경로와 별도) */
 export const MEDIA_THUMBNAIL_ROOT = '썸네일'
@@ -377,19 +378,29 @@ const createMediaItem = async (filePath) => {
   const fileStat = await stat(filePath)
   const relativePath = relative(uploadRoot, filePath)
   const url = `/uploads/${relativePath.split('/').join('/')}`
+  const extension = extname(filePath).toLowerCase()
+  const kind = /\.(jpe?g|png|webp|gif)$/i.test(extension)
+    ? 'image'
+    : /\.(mp4|webm|mov)$/i.test(extension)
+      ? 'video'
+      : /\.(mp3|wav|ogg|m4a)$/i.test(extension)
+        ? 'audio'
+        : 'file'
 
   return {
     url,
     name: basename(filePath),
     title: basename(filePath, extname(filePath)),
     size: fileStat.size,
+    extension,
+    kind,
     updatedAt: fileStat.mtime.toISOString(),
     category: getDefaultMediaCategory(relativePath)
   }
 }
 
 /**
- * 업로드 디렉토리의 이미지 파일을 재귀적으로 조회
+ * 업로드 디렉토리의 미디어 파일을 재귀적으로 조회
  * @param {string} directoryPath - 조회할 디렉토리
  * @returns {Promise<Array<Object>>} 미디어 항목 목록
  */
@@ -409,7 +420,7 @@ const readMediaDirectory = async (directoryPath) => {
       return readMediaDirectory(entryPath)
     }
 
-    if (!/\.(jpe?g|png|webp|gif)$/i.test(entry.name)) {
+    if (!mediaFilePattern.test(entry.name)) {
       return []
     }