9.5 사진 중심 카테고리 프리셋(해상도/비율/워터마크 옵션) o

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 (
     <div>
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <h1>게시판</h1>
-        <a href={`/posts/new?boardId=${params.id}`}><button>새 글</button></a>
+        <a href={`/posts/new?boardId=${params.id}${board?.slug ? `&boardSlug=${board.slug}` : ""}`}><button>새 글</button></a>
       </div>
       <PostList boardId={params.id} sort={sort} />
     </div>

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<string> {
@@ -19,26 +21,61 @@ async function readFileAsDataUrl(file: File): Promise<string> {
   });
 }
 
-async function resizeImageToBlob(dataUrl: string, opts: { maxWidth: number; maxHeight: number; quality: number }): Promise<Blob> {
+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<Blob> {
   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<HTMLInputElement>) {
@@ -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 });

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
       <input placeholder="boardId" value={form.boardId} onChange={(e) => setForm({ ...form, boardId: e.target.value })} />
       <input placeholder="제목" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
       <Editor value={form.content} onChange={(v) => setForm({ ...form, content: v })} placeholder="내용을 입력하세요" />
-      <UploadButton multiple onUploaded={(url) => setForm((f) => ({ ...f, content: `${f.content}\n![image](${url})` }))} />
+      <UploadButton
+        multiple
+        onUploaded={(url) => setForm((f) => ({ ...f, content: `${f.content}\n![image](${url})` }))}
+        {...(searchParams?.boardSlug ? require("@/lib/photoPresets").getPhotoPresetBySlug(searchParams.boardSlug) : {})}
+      />
       <button disabled={loading} onClick={submit}>{loading ? "저장 중..." : "등록"}</button>
     </div>
   );

src/lib/photoPresets.ts

@@ -0,0 +1,23 @@
+export type UploadOptions = {
+  aspectRatio?: number;
+  watermarkText?: string;
+  maxWidth?: number;
+  maxHeight?: number;
+  quality?: number;
+};
+
+const presetsBySlug: Record<string, UploadOptions> = {
+  // 제휴업소 사진형 보드: 정사각형 권장, 워터마크 표시
+  "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;
+}
+
+

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 파이프라인 구성(테스트/빌드/린트)