From 0f375bdd67bc75f0bdddeefe3c7cef443dcba72e Mon Sep 17 00:00:00 2001 From: koreacomp5 Date: Thu, 9 Oct 2025 18:14:22 +0900 Subject: [PATCH] =?UTF-8?q?9.5=20=EC=82=AC=EC=A7=84=20=EC=A4=91=EC=8B=AC?= =?UTF-8?q?=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=ED=94=84=EB=A6=AC?= =?UTF-8?q?=EC=85=8B(=ED=95=B4=EC=83=81=EB=8F=84/=EB=B9=84=EC=9C=A8/?= =?UTF-8?q?=EC=9B=8C=ED=84=B0=EB=A7=88=ED=81=AC=20=EC=98=B5=EC=85=98)=20o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/boards/[id]/page.tsx | 6 +++- src/app/components/UploadButton.tsx | 53 ++++++++++++++++++++++++----- src/app/posts/new/page.tsx | 8 +++-- src/lib/photoPresets.ts | 23 +++++++++++++ todolist.txt | 3 +- 5 files changed, 80 insertions(+), 13 deletions(-) create mode 100644 src/lib/photoPresets.ts diff --git a/src/app/boards/[id]/page.tsx b/src/app/boards/[id]/page.tsx index 1c7aa9f..4e366e3 100644 --- a/src/app/boards/[id]/page.tsx +++ b/src/app/boards/[id]/page.tsx @@ -2,11 +2,15 @@ import { PostList } from "@/app/components/PostList"; export default async function BoardDetail({ params, searchParams }: { params: { id: string }; searchParams?: { sort?: "recent" | "popular" } }) { const sort = searchParams?.sort ?? "recent"; + // 보드 slug 조회 (새 글 페이지 프리셋 전달) + const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL ?? ""}/api/boards`, { cache: "no-store" }); + const { boards } = await res.json(); + const board = (boards || []).find((b: any) => b.id === params.id); return (

게시판

- +
diff --git a/src/app/components/UploadButton.tsx b/src/app/components/UploadButton.tsx index 7b33251..e1bcf90 100644 --- a/src/app/components/UploadButton.tsx +++ b/src/app/components/UploadButton.tsx @@ -8,6 +8,8 @@ type Props = { maxWidth?: number; maxHeight?: number; quality?: number; // 0..1 + aspectRatio?: number; // width/height, e.g., 1 for square, 16/9 for widescreen + watermarkText?: string; // optional watermark text }; async function readFileAsDataUrl(file: File): Promise { @@ -19,26 +21,61 @@ async function readFileAsDataUrl(file: File): Promise { }); } -async function resizeImageToBlob(dataUrl: string, opts: { maxWidth: number; maxHeight: number; quality: number }): Promise { +function drawWatermark(ctx: CanvasRenderingContext2D, text: string, canvas: HTMLCanvasElement) { + const padding = 8; + ctx.save(); + ctx.font = "bold 14px sans-serif"; + const metrics = ctx.measureText(text); + const textW = metrics.width; + const textH = 14; + const x = canvas.width - textW - padding * 2; + const y = canvas.height - textH - padding; + ctx.fillStyle = "rgba(0,0,0,0.35)"; + ctx.fillRect(x - padding, y - padding, textW + padding * 2, textH + padding * 2); + ctx.fillStyle = "#fff"; + ctx.fillText(text, x, y + textH); + ctx.restore(); +} + +async function transformImageToBlob( + dataUrl: string, + opts: { maxWidth: number; maxHeight: number; quality: number; aspectRatio?: number; watermarkText?: string } +): Promise { const img = document.createElement("img"); img.decoding = "async"; img.loading = "eager"; img.src = dataUrl; await new Promise((res, rej) => { img.onload = () => res(null); img.onerror = rej; }); - const { naturalWidth: w, naturalHeight: h } = img; - const scale = Math.min(1, opts.maxWidth / w || 1, opts.maxHeight / h || 1); - const targetW = Math.max(1, Math.round(w * scale)); - const targetH = Math.max(1, Math.round(h * scale)); + let srcW = img.naturalWidth || 1; + let srcH = img.naturalHeight || 1; + let sx = 0, sy = 0, sW = srcW, sH = srcH; + if (opts.aspectRatio && opts.aspectRatio > 0) { + const targetRatio = opts.aspectRatio; + const currentRatio = srcW / srcH; + if (currentRatio > targetRatio) { + // too wide -> crop width + sW = Math.round(srcH * targetRatio); + sx = Math.round((srcW - sW) / 2); + } else if (currentRatio < targetRatio) { + // too tall -> crop height + sH = Math.round(srcW / targetRatio); + sy = Math.round((srcH - sH) / 2); + } + } + const scale = Math.min(1, opts.maxWidth / sW || 1, opts.maxHeight / sH || 1); + const targetW = Math.max(1, Math.round(sW * scale)); + const targetH = Math.max(1, Math.round(sH * scale)); const canvas = document.createElement("canvas"); canvas.width = targetW; canvas.height = targetH; const ctx = canvas.getContext("2d"); if (!ctx) throw new Error("Canvas unsupported"); - ctx.drawImage(img, 0, 0, targetW, targetH); + ctx.drawImage(img, sx, sy, sW, sH, 0, 0, targetW, targetH); + if (opts.watermarkText) drawWatermark(ctx, opts.watermarkText, canvas); return await new Promise((resolve) => canvas.toBlob((b) => resolve(b as Blob), "image/webp", opts.quality)); } -export function UploadButton({ onUploaded, multiple = false, maxWidth = 1600, maxHeight = 1600, quality = 0.9 }: Props) { +export function UploadButton({ onUploaded, multiple = false, maxWidth = 1600, maxHeight = 1600, quality = 0.9, aspectRatio, watermarkText }: Props) { const { show } = useToast(); const [loading, setLoading] = useState(false); async function onChange(e: React.ChangeEvent) { @@ -49,7 +86,7 @@ export function UploadButton({ onUploaded, multiple = false, maxWidth = 1600, ma for (const f of files) { // 클라에서 리사이즈 및 webp 변환 const dataUrl = await readFileAsDataUrl(f); - const blob = await resizeImageToBlob(dataUrl, { maxWidth, maxHeight, quality }); + const blob = await transformImageToBlob(dataUrl, { maxWidth, maxHeight, quality, aspectRatio, watermarkText }); const fd = new FormData(); fd.append("file", new File([blob], `${Date.now()}.webp`, { type: "image/webp" })); const r = await fetch("/api/uploads", { method: "POST", body: fd }); diff --git a/src/app/posts/new/page.tsx b/src/app/posts/new/page.tsx index 91dd04e..89bd7ea 100644 --- a/src/app/posts/new/page.tsx +++ b/src/app/posts/new/page.tsx @@ -5,7 +5,7 @@ import { useToast } from "@/app/components/ui/ToastProvider"; import { UploadButton } from "@/app/components/UploadButton"; import { Editor } from "@/app/components/Editor"; -export default function NewPostPage({ searchParams }: { searchParams?: { boardId?: string } }) { +export default function NewPostPage({ searchParams }: { searchParams?: { boardId?: string; boardSlug?: string } }) { const router = useRouter(); const { show } = useToast(); const [form, setForm] = useState({ boardId: searchParams?.boardId ?? "", title: "", content: "" }); @@ -34,7 +34,11 @@ export default function NewPostPage({ searchParams }: { searchParams?: { boardId setForm({ ...form, boardId: e.target.value })} /> setForm({ ...form, title: e.target.value })} /> setForm({ ...form, content: v })} placeholder="내용을 입력하세요" /> - setForm((f) => ({ ...f, content: `${f.content}\n![image](${url})` }))} /> + setForm((f) => ({ ...f, content: `${f.content}\n![image](${url})` }))} + {...(searchParams?.boardSlug ? require("@/lib/photoPresets").getPhotoPresetBySlug(searchParams.boardSlug) : {})} + /> ); diff --git a/src/lib/photoPresets.ts b/src/lib/photoPresets.ts new file mode 100644 index 0000000..0d1694b --- /dev/null +++ b/src/lib/photoPresets.ts @@ -0,0 +1,23 @@ +export type UploadOptions = { + aspectRatio?: number; + watermarkText?: string; + maxWidth?: number; + maxHeight?: number; + quality?: number; +}; + +const presetsBySlug: Record = { + // 제휴업소 사진형 보드: 정사각형 권장, 워터마크 표시 + "partners-photos": { aspectRatio: 1, watermarkText: "msgapp", maxWidth: 1600, maxHeight: 1600, quality: 0.9 }, + // 방문후기: 4:3 비율 권장, 워터마크 없음 + reviews: { aspectRatio: 4 / 3, maxWidth: 1920, maxHeight: 1920, quality: 0.9 }, +}; + +const defaultPreset: UploadOptions = { maxWidth: 1600, maxHeight: 1600, quality: 0.9 }; + +export function getPhotoPresetBySlug(slug?: string | null): UploadOptions { + if (!slug) return defaultPreset; + return presetsBySlug[slug] ?? defaultPreset; +} + + diff --git a/todolist.txt b/todolist.txt index 05e0a7a..facb764 100644 --- a/todolist.txt +++ b/todolist.txt @@ -66,7 +66,7 @@ 9.2 이미지/파일 업로드 서버 처리 및 검증 o 9.3 리사이즈/웹포맷 최적화 및 용량 제한 o 9.4 붙여넣기/드래그 삽입, 캡션/대체텍스트 o -9.5 사진 중심 카테고리 프리셋(해상도/비율/워터마크 옵션) +9.5 사진 중심 카테고리 프리셋(해상도/비율/워터마크 옵션) o [관리자(Admin)] 10.1 대시보드 핵심 지표 위젯 @@ -88,7 +88,6 @@ 12.3 XSS 콘텐츠 정제 규칙 정의/적용 12.4 비밀번호 정책/자동 로그아웃/감사 로그 설정 12.5 금칙어 정책/DB 운영 절차 수립 -화 [배포/운영] 13.1 환경변수 파일 체계 및 비밀키 전략 13.2 CI 파이프라인 구성(테스트/빌드/린트)