관리자 멤버 썸네일 업로드 경로 수정
This commit is contained in:
@@ -1,82 +1,10 @@
|
||||
import { mkdir, stat, writeFile } from 'node:fs/promises'
|
||||
import { join } from 'node:path'
|
||||
import { createError, readMultipartFormData } from 'h3'
|
||||
import sharp from 'sharp'
|
||||
import { createError } from 'h3'
|
||||
import { updateMemberProfile, getUserById } from '../../repositories/member-repository'
|
||||
import { requireMemberSession } from '../../utils/member-auth'
|
||||
import { removeManagedAvatarAsset } from '../../utils/member-avatar'
|
||||
import { uploadMemberAvatarImage } from '../../utils/member-avatar-upload'
|
||||
import { MEDIA_THUMBNAIL_ROOT, upsertMediaMetadataCategory } from '../../utils/media-library'
|
||||
|
||||
const allowedImageTypes = new Map([
|
||||
['image/jpeg', '.jpg'],
|
||||
['image/png', '.png'],
|
||||
['image/webp', '.webp'],
|
||||
['image/gif', '.gif']
|
||||
])
|
||||
|
||||
/**
|
||||
* 업로드 경로 조각을 URL 안전 문자열로 정리
|
||||
* @param {string} value - 원본 경로 조각
|
||||
* @returns {string} 정리된 경로 조각
|
||||
*/
|
||||
const sanitizePathPart = (value) => value
|
||||
.replace(/[^a-zA-Z0-9가-힣._-]/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^-|-$/g, '')
|
||||
|
||||
/**
|
||||
* 숫자 설정값을 최소/최대 범위로 보정한다.
|
||||
* @param {number} value - 원본 값
|
||||
* @param {number} minimum - 최소값
|
||||
* @param {number} maximum - 최대값
|
||||
* @returns {number} 보정된 값
|
||||
*/
|
||||
const clampNumber = (value, minimum, maximum) => {
|
||||
if (!Number.isFinite(value)) {
|
||||
return minimum
|
||||
}
|
||||
|
||||
if (value < minimum) {
|
||||
return minimum
|
||||
}
|
||||
|
||||
if (value > maximum) {
|
||||
return maximum
|
||||
}
|
||||
|
||||
return Math.round(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 아바타 저장 디렉터리에서 비어 있는 `.webp` 파일명을 고른다. 동일 stem이 있으면 `-2`, `-3` 넘버링한다.
|
||||
* @param {string} directoryPath - 저장 디렉터리 절대 경로
|
||||
* @param {string} stem - 확장자 제외 파일명
|
||||
* @returns {Promise<{ fileName: string, filePath: string }>} 파일명과 절대 경로
|
||||
*/
|
||||
const pickUniqueWebpFileName = async (directoryPath, stem) => {
|
||||
let suffix = 1
|
||||
|
||||
while (suffix < 10000) {
|
||||
const fileName = suffix === 1 ? `${stem}.webp` : `${stem}-${suffix}.webp`
|
||||
const filePath = join(directoryPath, fileName)
|
||||
|
||||
try {
|
||||
await stat(filePath)
|
||||
suffix += 1
|
||||
} catch {
|
||||
return {
|
||||
fileName,
|
||||
filePath
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
message: '저장할 고유 파일명을 만들 수 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 회원 썸네일 업로드 API
|
||||
* @param {import('h3').H3Event} event - 요청 이벤트
|
||||
@@ -92,80 +20,7 @@ export default defineEventHandler(async (event) => {
|
||||
})
|
||||
}
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const maxFileSize = Number(config.maxFileSize || 10485760)
|
||||
const avatarMinWidth = clampNumber(Number(config.avatarMinWidth || 96), 1, 4096)
|
||||
const avatarMinHeight = clampNumber(Number(config.avatarMinHeight || 96), 1, 4096)
|
||||
const avatarMaxWidth = clampNumber(Number(config.avatarMaxWidth || 512), avatarMinWidth, 4096)
|
||||
const avatarMaxHeight = clampNumber(Number(config.avatarMaxHeight || 512), avatarMinHeight, 4096)
|
||||
const avatarSquareSize = Math.min(avatarMaxWidth, avatarMaxHeight)
|
||||
const avatarWebpQuality = clampNumber(Number(config.avatarWebpQuality || 82), 1, 100)
|
||||
const formData = await readMultipartFormData(event)
|
||||
const file = (formData || []).find((part) => part.name === 'file' && part.filename)
|
||||
|
||||
if (!file) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: '업로드할 이미지가 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
if (!allowedImageTypes.has(file.type)) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: '이미지 파일만 업로드할 수 있습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
if (file.data.length > maxFileSize) {
|
||||
throw createError({
|
||||
statusCode: 413,
|
||||
message: '업로드 가능한 파일 크기를 초과했습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
const year = String(now.getFullYear())
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const uploadBaseUrl = String(config.uploadDir || '/uploads').replace(/\/+$/g, '') || '/uploads'
|
||||
const publicBasePath = uploadBaseUrl.replace(/^\/+/, '')
|
||||
const directoryPath = join(process.cwd(), 'public', publicBasePath, 'members', 'avatars', year, month)
|
||||
|
||||
await mkdir(directoryPath, { recursive: true })
|
||||
|
||||
const originalStem = sanitizePathPart(file.filename.replace(/\.[^.]+$/g, '')) || 'avatar'
|
||||
const { fileName, filePath } = await pickUniqueWebpFileName(directoryPath, originalStem)
|
||||
const avatarUrl = `${uploadBaseUrl}/members/avatars/${year}/${month}/${fileName}`
|
||||
const metadata = await sharp(file.data).metadata()
|
||||
|
||||
if (!metadata.width || !metadata.height) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: '이미지 메타데이터를 읽을 수 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
if (metadata.width < avatarMinWidth || metadata.height < avatarMinHeight) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: `최소 ${avatarMinWidth}x${avatarMinHeight} 이상 이미지만 업로드할 수 있습니다.`
|
||||
})
|
||||
}
|
||||
|
||||
const resizedBuffer = await sharp(file.data)
|
||||
.rotate()
|
||||
.resize({
|
||||
width: avatarSquareSize,
|
||||
height: avatarSquareSize,
|
||||
fit: 'cover',
|
||||
position: 'centre'
|
||||
})
|
||||
.webp({
|
||||
quality: avatarWebpQuality
|
||||
})
|
||||
.toBuffer()
|
||||
|
||||
await writeFile(filePath, resizedBuffer)
|
||||
const { avatarUrl } = await uploadMemberAvatarImage(event)
|
||||
|
||||
await updateMemberProfile({
|
||||
userId: session.userId,
|
||||
@@ -183,4 +38,3 @@ export default defineEventHandler(async (event) => {
|
||||
avatarUrl
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -678,6 +678,25 @@ export const updateMemberByAdmin = async (input) => {
|
||||
return rows?.[0] ? getMemberForAdmin(rows[0].id) : null
|
||||
}
|
||||
|
||||
/**
|
||||
* 관리자 화면에서 회원 썸네일만 수정한다.
|
||||
* @param {{ memberId: string, avatarUrl: string }} input - 수정 값
|
||||
* @returns {Promise<Object | null>} 수정된 회원
|
||||
*/
|
||||
export const updateMemberAvatarByAdmin = async (input) => {
|
||||
const sql = requireSql()
|
||||
const rows = await sql`
|
||||
UPDATE users
|
||||
SET
|
||||
avatar_url = ${input.avatarUrl},
|
||||
updated_at = now()
|
||||
WHERE id = ${input.memberId}
|
||||
RETURNING id
|
||||
`
|
||||
|
||||
return rows?.[0] ? getMemberForAdmin(rows[0].id) : null
|
||||
}
|
||||
|
||||
/**
|
||||
* 이메일 기준 관리자 회원 조회
|
||||
* @param {string} email - 이메일
|
||||
|
||||
19
server/routes/admin/api/member-avatar.post.js
Normal file
19
server/routes/admin/api/member-avatar.post.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import { requireAdminSession } from '../../../utils/admin-auth'
|
||||
import { uploadMemberAvatarImage } from '../../../utils/member-avatar-upload'
|
||||
import { MEDIA_THUMBNAIL_ROOT, upsertMediaMetadataCategory } from '../../../utils/media-library'
|
||||
|
||||
/**
|
||||
* 관리자 새 회원용 썸네일 사전 업로드 API
|
||||
* @param {import('h3').H3Event} event - 요청 이벤트
|
||||
* @returns {Promise<{ avatarUrl: string }>} 업로드 결과
|
||||
*/
|
||||
export default defineEventHandler(async (event) => {
|
||||
requireAdminSession(event)
|
||||
|
||||
const { avatarUrl } = await uploadMemberAvatarImage(event)
|
||||
await upsertMediaMetadataCategory(avatarUrl, MEDIA_THUMBNAIL_ROOT)
|
||||
|
||||
return {
|
||||
avatarUrl
|
||||
}
|
||||
})
|
||||
@@ -2,6 +2,7 @@ import { createError, getRouterParam, readBody } from 'h3'
|
||||
import { z } from 'zod'
|
||||
import { requireAdminSession } from '../../../../utils/admin-auth'
|
||||
import { getMemberForAdmin, isEmailTaken, isUsernameTaken, updateMemberByAdmin } from '../../../../repositories/member-repository'
|
||||
import { removeManagedAvatarAsset } from '../../../../utils/member-avatar'
|
||||
|
||||
const memberInputSchema = z.object({
|
||||
username: z.string().trim().min(1).max(60),
|
||||
@@ -76,5 +77,9 @@ export default defineEventHandler(async (event) => {
|
||||
})
|
||||
}
|
||||
|
||||
if (existing.avatarUrl && existing.avatarUrl !== updated.avatarUrl) {
|
||||
await removeManagedAvatarAsset(existing.avatarUrl)
|
||||
}
|
||||
|
||||
return updated
|
||||
})
|
||||
|
||||
52
server/routes/admin/api/members/[id]/avatar.post.js
Normal file
52
server/routes/admin/api/members/[id]/avatar.post.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import { createError, getRouterParam } from 'h3'
|
||||
import { requireAdminSession } from '../../../../../utils/admin-auth'
|
||||
import { getMemberForAdmin, updateMemberAvatarByAdmin } from '../../../../../repositories/member-repository'
|
||||
import { removeManagedAvatarAsset } from '../../../../../utils/member-avatar'
|
||||
import { uploadMemberAvatarImage } from '../../../../../utils/member-avatar-upload'
|
||||
import { MEDIA_THUMBNAIL_ROOT, upsertMediaMetadataCategory } from '../../../../../utils/media-library'
|
||||
|
||||
/**
|
||||
* 관리자 회원 썸네일 업로드 API
|
||||
* @param {import('h3').H3Event} event - 요청 이벤트
|
||||
* @returns {Promise<Object>} 수정된 회원
|
||||
*/
|
||||
export default defineEventHandler(async (event) => {
|
||||
requireAdminSession(event)
|
||||
const memberId = String(getRouterParam(event, 'id') || '')
|
||||
|
||||
if (!memberId) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: '회원 ID가 필요합니다.'
|
||||
})
|
||||
}
|
||||
|
||||
const member = await getMemberForAdmin(memberId)
|
||||
if (!member) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
message: '회원을 찾을 수 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
const { avatarUrl } = await uploadMemberAvatarImage(event)
|
||||
const updated = await updateMemberAvatarByAdmin({
|
||||
memberId,
|
||||
avatarUrl
|
||||
})
|
||||
|
||||
if (!updated) {
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
message: '회원 썸네일 수정에 실패했습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
await upsertMediaMetadataCategory(avatarUrl, MEDIA_THUMBNAIL_ROOT)
|
||||
|
||||
if (member.avatarUrl && member.avatarUrl !== avatarUrl) {
|
||||
await removeManagedAvatarAsset(member.avatarUrl)
|
||||
}
|
||||
|
||||
return updated
|
||||
})
|
||||
160
server/utils/member-avatar-upload.js
Normal file
160
server/utils/member-avatar-upload.js
Normal file
@@ -0,0 +1,160 @@
|
||||
import { mkdir, stat, writeFile } from 'node:fs/promises'
|
||||
import { join } from 'node:path'
|
||||
import { createError, readMultipartFormData } from 'h3'
|
||||
import sharp from 'sharp'
|
||||
|
||||
const allowedImageTypes = new Map([
|
||||
['image/jpeg', '.jpg'],
|
||||
['image/png', '.png'],
|
||||
['image/webp', '.webp'],
|
||||
['image/gif', '.gif']
|
||||
])
|
||||
|
||||
/**
|
||||
* 업로드 경로 조각을 URL 안전 문자열로 정리한다.
|
||||
* @param {string} value - 원본 경로 조각
|
||||
* @returns {string} 정리된 경로 조각
|
||||
*/
|
||||
const sanitizePathPart = (value) => value
|
||||
.replace(/[^a-zA-Z0-9가-힣._-]/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^-|-$/g, '')
|
||||
|
||||
/**
|
||||
* 숫자 설정값을 최소/최대 범위로 보정한다.
|
||||
* @param {number} value - 원본 값
|
||||
* @param {number} minimum - 최소값
|
||||
* @param {number} maximum - 최대값
|
||||
* @returns {number} 보정된 값
|
||||
*/
|
||||
const clampNumber = (value, minimum, maximum) => {
|
||||
if (!Number.isFinite(value)) {
|
||||
return minimum
|
||||
}
|
||||
|
||||
if (value < minimum) {
|
||||
return minimum
|
||||
}
|
||||
|
||||
if (value > maximum) {
|
||||
return maximum
|
||||
}
|
||||
|
||||
return Math.round(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 아바타 저장 디렉터리에서 비어 있는 `.webp` 파일명을 고른다.
|
||||
* @param {string} directoryPath - 저장 디렉터리 절대 경로
|
||||
* @param {string} stem - 확장자 제외 파일명
|
||||
* @returns {Promise<{ fileName: string, filePath: string }>} 파일명과 절대 경로
|
||||
*/
|
||||
const pickUniqueWebpFileName = async (directoryPath, stem) => {
|
||||
let suffix = 1
|
||||
|
||||
while (suffix < 10000) {
|
||||
const fileName = suffix === 1 ? `${stem}.webp` : `${stem}-${suffix}.webp`
|
||||
const filePath = join(directoryPath, fileName)
|
||||
|
||||
try {
|
||||
await stat(filePath)
|
||||
suffix += 1
|
||||
} catch {
|
||||
return {
|
||||
fileName,
|
||||
filePath
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
message: '저장할 고유 파일명을 만들 수 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 회원 썸네일 파일을 검증하고 회원 전용 경로에 저장한다.
|
||||
* @param {import('h3').H3Event} event - 요청 이벤트
|
||||
* @returns {Promise<{ avatarUrl: string }>} 저장된 썸네일 URL
|
||||
*/
|
||||
export const uploadMemberAvatarImage = async (event) => {
|
||||
const config = useRuntimeConfig()
|
||||
const maxFileSize = Number(config.maxFileSize || 10485760)
|
||||
const avatarMinWidth = clampNumber(Number(config.avatarMinWidth || 96), 1, 4096)
|
||||
const avatarMinHeight = clampNumber(Number(config.avatarMinHeight || 96), 1, 4096)
|
||||
const avatarMaxWidth = clampNumber(Number(config.avatarMaxWidth || 512), avatarMinWidth, 4096)
|
||||
const avatarMaxHeight = clampNumber(Number(config.avatarMaxHeight || 512), avatarMinHeight, 4096)
|
||||
const avatarSquareSize = Math.min(avatarMaxWidth, avatarMaxHeight)
|
||||
const avatarWebpQuality = clampNumber(Number(config.avatarWebpQuality || 82), 1, 100)
|
||||
const formData = await readMultipartFormData(event)
|
||||
const file = (formData || []).find((part) => ['file', 'files'].includes(String(part.name || '')) && part.filename)
|
||||
|
||||
if (!file) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: '업로드할 이미지가 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
if (!allowedImageTypes.has(file.type)) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: '이미지 파일만 업로드할 수 있습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
if (file.data.length > maxFileSize) {
|
||||
throw createError({
|
||||
statusCode: 413,
|
||||
message: '업로드 가능한 파일 크기를 초과했습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
const metadata = await sharp(file.data).metadata()
|
||||
|
||||
if (!metadata.width || !metadata.height) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: '이미지 메타데이터를 읽을 수 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
if (metadata.width < avatarMinWidth || metadata.height < avatarMinHeight) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: `최소 ${avatarMinWidth}x${avatarMinHeight} 이상 이미지만 업로드할 수 있습니다.`
|
||||
})
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
const year = String(now.getFullYear())
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const uploadBaseUrl = String(config.uploadDir || '/uploads').replace(/\/+$/g, '') || '/uploads'
|
||||
const publicBasePath = uploadBaseUrl.replace(/^\/+/, '')
|
||||
const directoryPath = join(process.cwd(), 'public', publicBasePath, 'members', 'avatars', year, month)
|
||||
|
||||
await mkdir(directoryPath, { recursive: true })
|
||||
|
||||
const originalStem = sanitizePathPart(file.filename.replace(/\.[^.]+$/g, '')) || 'avatar'
|
||||
const { fileName, filePath } = await pickUniqueWebpFileName(directoryPath, originalStem)
|
||||
const avatarUrl = `${uploadBaseUrl}/members/avatars/${year}/${month}/${fileName}`
|
||||
const resizedBuffer = await sharp(file.data)
|
||||
.rotate()
|
||||
.resize({
|
||||
width: avatarSquareSize,
|
||||
height: avatarSquareSize,
|
||||
fit: 'cover',
|
||||
position: 'centre'
|
||||
})
|
||||
.webp({
|
||||
quality: avatarWebpQuality
|
||||
})
|
||||
.toBuffer()
|
||||
|
||||
await writeFile(filePath, resizedBuffer)
|
||||
|
||||
return {
|
||||
avatarUrl
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user