zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

페이지 커버 썸네일 최적화

Browse Source
This commit is contained in:
zenn
2026-07-02 10:09:39 +09:00
parent b26ae271d2
commit 3a4e39332a
20 changed files with 463 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
server/repositories/content-repository.js
View File

@@ -35,8 +35,10 @@ import {
} from '../../lib/upload-size-limit.js'
import { normalizeSocialLinks } from '../../lib/social-links.js'
import {
createPageCoverThumbnailForImageUrl,
createPostBodyThumbnailsForContent,
createPostThumbnailForImageUrl,
getExistingPageCoverThumbnailUrl,
getExistingPostThumbnailUrl
} from '../utils/post-thumbnail-image.js'
import { getPostgresClient } from './postgres-client'
@@ -94,6 +96,7 @@ const mapPageRow = (row) => ({
renderMode: row.render_mode || 'markdown',
status: row.status || 'published',
featuredImage: row.featured_image,
listingImageThumbnail: getExistingPageCoverThumbnailUrl(row.featured_image),
isListed: Boolean(row.is_listed),
isFeatured: Boolean(row.is_featured),
listingSection: row.listing_section || '',
@@ -1121,6 +1124,8 @@ export const createAdminPage = async (input) => {
RETURNING *
`
await createPageCoverThumbnailForImageUrl(input.featuredImage)
return mapPageRow(rows[0])
}
@@ -1157,6 +1162,10 @@ export const updateAdminPage = async (id, input) => {
RETURNING *
`
if (rows[0]) {
await createPageCoverThumbnailForImageUrl(input.featuredImage)
}
return rows[0] ? mapPageRow(rows[0]) : null
}

13
server/routes/admin/api/media/thumbnail.post.js
View File

@@ -1,12 +1,13 @@
import { createError, readBody } from 'h3'
import { requireAdminSession } from '../../../../utils/admin-auth'
import {
createPageCoverThumbnailForImageUrl,
createPostBodyThumbnailForImageUrl,
createPostThumbnailForImageUrl
} from '../../../../utils/post-thumbnail-image.js'
/**
* 게시물 이미지 파생 파일 재생성 API
* 이미지 파생 파일 재생성 API
* @param {import('h3').H3Event} event - 요청 이벤트
* @returns {Promise<{ thumbnailUrl: string }>} 생성된 썸네일 URL
*/
@@ -14,17 +15,21 @@ export default defineEventHandler(async (event) => {
requireAdminSession(event)
const body = await readBody(event)
const kind = body?.kind === 'body' ? 'body' : 'card'
const kind = ['body', 'pageCover'].includes(body?.kind) ? body.kind : 'card'
const thumbnailUrl = kind === 'body'
? await createPostBodyThumbnailForImageUrl(body?.url)
: await createPostThumbnailForImageUrl(body?.url)
: kind === 'pageCover'
? await createPageCoverThumbnailForImageUrl(body?.url)
: await createPostThumbnailForImageUrl(body?.url)
if (!thumbnailUrl) {
throw createError({
statusCode: 400,
message: kind === 'body'
? '본문 표시용 이미지를 만들 수 있는 게시물 이미지가 아닙니다.'
: '카드 썸네일을 만들 수 있는 게시물 대표 이미지가 아닙니다.'
: kind === 'pageCover'
? '페이지 커버 썸네일을 만들 수 있는 이미지가 아닙니다.'
: '카드 썸네일을 만들 수 있는 게시물 대표 이미지가 아닙니다.'
})
}

2
server/routes/uploads/[...path].get.js
View File

@@ -20,7 +20,7 @@ const contentTypes = new Map([
['.svg', 'image/svg+xml'],
['.ico', 'image/x-icon']
])
const regeneratableUploadPattern = /^\/uploads\/posts\/\d{4}\/\d{2}\/thumbs\/[^/?#]+-(?:card|body|body-720|lightbox)\.webp$/i
const regeneratableUploadPattern = /^\/uploads\/posts\/\d{4}\/\d{2}\/thumbs\/[^/?#]+-(?:card|page-cover|body|body-720|lightbox)\.webp$/i
/**
* 업로드 파일 캐시 정책을 반환한다.

93
server/utils/media-library.js
View File

@@ -4,10 +4,12 @@ import { createError } from 'h3'
import { getSiteSettings, listAdminPosts, listAdminTags, listPages } from '../repositories/content-repository'
import { getPostgresClient } from '../repositories/postgres-client'
import {
getPageCoverThumbnailUrl,
getPostBodyPreviewThumbnailUrl,
getPostBodyThumbnailUrl,
getPostLightboxThumbnailUrl,
getPostThumbnailUrl,
isPageCoverThumbnailUrl,
isPostBodyThumbnailUrl,
isPostCardThumbnailUrl,
isPostThumbnailSource
@@ -584,6 +586,17 @@ const buildPostThumbnailOwnerMap = (items) => buildPostDerivativeOwnerMap(
isPostCardThumbnailUrl
)
/**
* 페이지 커버 썸네일 URL별 원본 URL 맵을 만든다.
* @param {Array<Object>} items - 미디어 항목 목록
* @returns {Map<string, string>} 페이지 커버 썸네일 URL별 원본 URL
*/
const buildPageCoverThumbnailOwnerMap = (items) => buildPostDerivativeOwnerMap(
items,
getPageCoverThumbnailUrl,
isPageCoverThumbnailUrl
)
/**
* 본문 표시용 이미지 URL별 원본 URL 맵을 만든다.
* @param {Array<Object>} items - 미디어 항목 목록
@@ -641,6 +654,32 @@ const getPostThumbnailMediaUsage = (url, ownerByThumbnailUrl, posts, pages, site
}))
}
/**
* 페이지 커버 썸네일의 간접 사용처를 조회한다.
* @param {string} url - 페이지 커버 썸네일 URL
* @param {Map<string, string>} ownerByThumbnailUrl - 썸네일 URL별 원본 URL
* @param {Array<Object>} posts - 게시물 목록
* @param {Array<Object>} pages - 페이지 목록
* @param {Object} siteSettings - 사이트 설정
* @returns {Array<Object>} 간접 사용처 목록
*/
const getPageCoverThumbnailMediaUsage = (url, ownerByThumbnailUrl, posts, pages, siteSettings) => {
const originalUrl = ownerByThumbnailUrl.get(url)
if (!originalUrl) {
return []
}
return getDirectMediaUsage(originalUrl, posts, pages, siteSettings)
.filter((usage) => usage.type === 'page' && usage.location === 'featuredImage')
.map((usage) => ({
...usage,
location: 'pageCoverThumbnail',
label: '페이지 커버 썸네일',
sourceUrl: originalUrl
}))
}
/**
* 게시물 본문 표시용 이미지의 간접 사용처를 조회한다.
* @param {string} url - 본문 표시용 이미지 URL
@@ -675,7 +714,7 @@ const getPostBodyThumbnailMediaUsage = (url, ownerByThumbnailUrl, posts, pages,
* @returns {Object|null} 카드 썸네일 상태
*/
const getPostThumbnailStatus = (item, itemUrlSet, directUsage) => {
if (isPostCardThumbnailUrl(item.url) || isPostBodyThumbnailUrl(item.url) || !isPostThumbnailSource('', item.name)) {
if (isPostCardThumbnailUrl(item.url) || isPageCoverThumbnailUrl(item.url) || isPostBodyThumbnailUrl(item.url) || !isPostThumbnailSource('', item.name)) {
return null
}
@@ -686,16 +725,47 @@ const getPostThumbnailStatus = (item, itemUrlSet, directUsage) => {
}
const hasThumbnail = itemUrlSet.has(thumbnailUrl)
const isFeaturedImage = directUsage.some((usage) => usage.location === 'featuredImage')
const isFeaturedImage = directUsage.some((usage) => usage.type === 'post' && usage.location === 'featuredImage')
return {
role: 'original',
variant: 'postCard',
thumbnailUrl,
hasThumbnail,
isFallbackActive: isFeaturedImage && !hasThumbnail
}
}
/**
* 페이지 커버 원본 이미지의 썸네일 상태를 조회한다.
* @param {Object} item - 미디어 항목
* @param {Set<string>} itemUrlSet - 전체 미디어 URL 집합
* @param {Array<Object>} directUsage - 원본 URL 직접 사용처
* @returns {Object|null} 페이지 커버 썸네일 상태
*/
const getPageCoverThumbnailStatus = (item, itemUrlSet, directUsage) => {
if (isPostCardThumbnailUrl(item.url) || isPageCoverThumbnailUrl(item.url) || isPostBodyThumbnailUrl(item.url) || !isPostThumbnailSource('', item.name)) {
return null
}
const thumbnailUrl = getPageCoverThumbnailUrl(item.url)
if (!thumbnailUrl) {
return null
}
const hasThumbnail = itemUrlSet.has(thumbnailUrl)
const isPageCoverImage = directUsage.some((usage) => usage.type === 'page' && usage.location === 'featuredImage')
return {
role: 'original',
variant: 'pageCover',
thumbnailUrl,
hasThumbnail,
isFallbackActive: isPageCoverImage && !hasThumbnail
}
}
/**
* 게시물 업로드 이미지의 본문 표시용 이미지 상태를 조회한다.
* @param {Object} item - 미디어 항목
@@ -704,7 +774,7 @@ const getPostThumbnailStatus = (item, itemUrlSet, directUsage) => {
* @returns {Object|null} 본문 표시용 이미지 상태
*/
const getPostBodyThumbnailStatus = (item, itemUrlSet, directUsage) => {
if (isPostCardThumbnailUrl(item.url) || isPostBodyThumbnailUrl(item.url) || !isPostThumbnailSource('', item.name)) {
if (isPostCardThumbnailUrl(item.url) || isPageCoverThumbnailUrl(item.url) || isPostBodyThumbnailUrl(item.url) || !isPostThumbnailSource('', item.name)) {
return null
}
@@ -809,6 +879,7 @@ export const listMediaItems = async () => {
const avatarOwnerByUrl = await getAvatarOwnersByUrls(items.map((item) => item.url))
const itemUrlSet = new Set(items.map((item) => item.url))
const thumbnailOwnerByUrl = buildPostThumbnailOwnerMap(items)
const pageCoverThumbnailOwnerByUrl = buildPageCoverThumbnailOwnerMap(items)
const bodyThumbnailOwnerByUrl = buildPostBodyThumbnailOwnerMap(items)
const itemsWithUsage = items.map((item) => {
const rawCategory = metadataMap[item.url]?.category ?? item.category
@@ -816,8 +887,10 @@ export const listMediaItems = async () => {
const avatarOwner = avatarOwnerByUrl.get(item.url) || null
const directUsage = getDirectMediaUsage(item.url, posts, pages, siteSettings, tags)
const thumbnailUsage = getPostThumbnailMediaUsage(item.url, thumbnailOwnerByUrl, posts, pages, siteSettings)
const pageCoverThumbnailUsage = getPageCoverThumbnailMediaUsage(item.url, pageCoverThumbnailOwnerByUrl, posts, pages, siteSettings)
const bodyThumbnailUsage = getPostBodyThumbnailMediaUsage(item.url, bodyThumbnailOwnerByUrl, posts, pages, siteSettings)
const originalUrl = thumbnailOwnerByUrl.get(item.url) || ''
const pageCoverOriginalUrl = pageCoverThumbnailOwnerByUrl.get(item.url) || ''
const bodyOriginalUrl = bodyThumbnailOwnerByUrl.get(item.url) || ''
return {
@@ -826,6 +899,7 @@ export const listMediaItems = async () => {
usage: [
...directUsage,
...thumbnailUsage,
...pageCoverThumbnailUsage,
...bodyThumbnailUsage
],
thumbnailStatus: originalUrl
@@ -833,7 +907,12 @@ export const listMediaItems = async () => {
role: 'card',
originalUrl
}
: getPostThumbnailStatus(item, itemUrlSet, directUsage),
: pageCoverOriginalUrl
? {
role: 'pageCover',
originalUrl: pageCoverOriginalUrl
}
: getPostThumbnailStatus(item, itemUrlSet, directUsage) || getPageCoverThumbnailStatus(item, itemUrlSet, directUsage),
bodyThumbnailStatus: bodyOriginalUrl
? {
role: 'body',
@@ -966,6 +1045,7 @@ export const deleteMediaItem = async (url) => {
const usage = [
...getDirectMediaUsage(url, posts, pages, siteSettings, tags),
...getPostThumbnailMediaUsage(url, buildPostThumbnailOwnerMap(items), posts, pages, siteSettings),
...getPageCoverThumbnailMediaUsage(url, buildPageCoverThumbnailOwnerMap(items), posts, pages, siteSettings),
...getPostBodyThumbnailMediaUsage(url, buildPostBodyThumbnailOwnerMap(items), posts, pages, siteSettings)
]
@@ -994,10 +1074,10 @@ export const deleteMediaItem = async (url) => {
* @returns {Promise<Object>} 변경된 미디어 항목
*/
export const renameMediaItem = async (url, name) => {
if (isPostCardThumbnailUrl(url) || isPostBodyThumbnailUrl(url)) {
if (isPostCardThumbnailUrl(url) || isPageCoverThumbnailUrl(url) || isPostBodyThumbnailUrl(url)) {
throw createError({
statusCode: 409,
message: '게시물 자동 생성 이미지는 원본 이미지와의 연결을 유지하기 위해 파일명을 변경할 수 없습니다.'
message: '자동 생성 이미지는 원본 이미지와의 연결을 유지하기 위해 파일명을 변경할 수 없습니다.'
})
}
@@ -1011,6 +1091,7 @@ export const renameMediaItem = async (url, name) => {
const usage = [
...getDirectMediaUsage(url, posts, pages, siteSettings, tags),
...getPostThumbnailMediaUsage(url, buildPostThumbnailOwnerMap(items), posts, pages, siteSettings),
...getPageCoverThumbnailMediaUsage(url, buildPageCoverThumbnailOwnerMap(items), posts, pages, siteSettings),
...getPostBodyThumbnailMediaUsage(url, buildPostBodyThumbnailOwnerMap(items), posts, pages, siteSettings)
]

74
server/utils/post-thumbnail-image.js
View File

@@ -3,17 +3,21 @@ import { mkdir, stat } from 'node:fs/promises'
import { dirname, extname, join, posix } from 'node:path'
import sharp from 'sharp'
import {
getPageCoverThumbnailUrl,
getPostBodyPreviewThumbnailUrl,
getPostBodyThumbnailUrl,
getPostLightboxThumbnailUrl,
isPageCoverThumbnailUrl,
isPostBodyThumbnailUrl,
isPostCardThumbnailUrl
} from '../../lib/post-card-thumbnail-url.js'
export {
getPageCoverThumbnailUrl,
getPostBodyPreviewThumbnailUrl,
getPostBodyThumbnailUrl,
getPostLightboxThumbnailUrl,
isPageCoverThumbnailUrl,
isPostBodyThumbnailUrl,
isPostCardThumbnailUrl
}
@@ -25,6 +29,9 @@ export const POST_BODY_IMAGE_WIDTH = 1600
export const POST_BODY_PREVIEW_IMAGE_WIDTH = 720
export const POST_LIGHTBOX_IMAGE_WIDTH = 2560
export const POST_BODY_IMAGE_QUALITY = 84
export const PAGE_COVER_THUMBNAIL_WIDTH = 450
export const PAGE_COVER_THUMBNAIL_HEIGHT = 600
export const PAGE_COVER_THUMBNAIL_QUALITY = 84
const postUploadUrlPattern = /^\/uploads\/posts\/\d{4}\/\d{2}\/[^/?#]+$/i
const postUploadImageUrlPattern = /\/uploads\/posts\/\d{4}\/\d{2}\/[^/\s"'()<>\]]+\.(?:jpe?g|png|webp)/gi
@@ -154,6 +161,21 @@ export const getPostLightboxThumbnailDiskPath = (imageUrl) => {
return join(process.cwd(), 'public', decodeUrlPathPart(thumbnailUrl.replace(/^\/+/, '')))
}
/**
* 페이지 커버 썸네일 URL의 디스크 경로를 조회한다.
* @param {string|null|undefined} imageUrl - 원본 이미지 URL
* @returns {string} 페이지 커버 썸네일 디스크 경로
*/
export const getPageCoverThumbnailDiskPath = (imageUrl) => {
const thumbnailUrl = getPageCoverThumbnailUrl(imageUrl)
if (!thumbnailUrl) {
return ''
}
return join(process.cwd(), 'public', decodeUrlPathPart(thumbnailUrl.replace(/^\/+/, '')))
}
/**
* 게시물 원본 이미지 URL의 디스크 경로를 조회한다.
* @param {string|null|undefined} imageUrl - 원본 이미지 URL
@@ -245,6 +267,21 @@ export const getExistingPostLightboxThumbnailUrl = (imageUrl) => {
return existsSync(getPostLightboxThumbnailDiskPath(imageUrl)) ? thumbnailUrl : ''
}
/**
* 이미 생성된 페이지 커버 썸네일 URL을 조회한다.
* @param {string|null|undefined} imageUrl - 원본 이미지 URL
* @returns {string} 존재하는 페이지 커버 썸네일 URL
*/
export const getExistingPageCoverThumbnailUrl = (imageUrl) => {
const thumbnailUrl = getPageCoverThumbnailUrl(imageUrl)
if (!thumbnailUrl) {
return ''
}
return existsSync(getPageCoverThumbnailDiskPath(imageUrl)) ? thumbnailUrl : ''
}
/**
* 게시물 대표 이미지의 카드 썸네일을 생성하거나 다시 생성한다.
* @param {string|null|undefined} imageUrl - 원본 이미지 URL
@@ -282,6 +319,43 @@ export const createPostThumbnailForImageUrl = async (imageUrl) => {
return thumbnailUrl
}
/**
* 페이지 홈 진열장용 3:4 커버 썸네일을 생성하거나 다시 생성한다.
* @param {string|null|undefined} imageUrl - 원본 이미지 URL
* @returns {Promise<string>} 생성된 페이지 커버 썸네일 URL
*/
export const createPageCoverThumbnailForImageUrl = async (imageUrl) => {
const sourcePath = getPostImageDiskPath(imageUrl)
const thumbnailUrl = getPageCoverThumbnailUrl(imageUrl)
const thumbnailPath = getPageCoverThumbnailDiskPath(imageUrl)
if (!sourcePath || !thumbnailUrl || !thumbnailPath) {
return ''
}
try {
await stat(sourcePath)
} catch {
return ''
}
await mkdir(dirname(thumbnailPath), { recursive: true })
await sharp(sourcePath)
.rotate()
.resize({
width: PAGE_COVER_THUMBNAIL_WIDTH,
height: PAGE_COVER_THUMBNAIL_HEIGHT,
fit: 'cover',
position: 'centre',
withoutEnlargement: true
})
.webp({ quality: PAGE_COVER_THUMBNAIL_QUALITY })
.toFile(thumbnailPath)
return thumbnailUrl
}
/**
* 게시물 본문 이미지의 표시용 WebP 이미지를 생성하거나 다시 생성한다.
* @param {string|null|undefined} imageUrl - 원본 이미지 URL