9.3 리사이즈/웹포맷 최적화 및 용량 제한 o

src/app/components/UploadButton.tsx

@@ -2,7 +2,43 @@
 import { useState } from "react";
 import { useToast } from "@/app/components/ui/ToastProvider";
 
-export function UploadButton({ onUploaded, multiple = false }: { onUploaded: (url: string) => void; multiple?: boolean }) {
+type Props = {
+  onUploaded: (url: string) => void;
+  multiple?: boolean;
+  maxWidth?: number;
+  maxHeight?: number;
+  quality?: number; // 0..1
+};
+
+async function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+async function resizeImageToBlob(dataUrl: string, opts: { maxWidth: number; maxHeight: number; quality: number }): 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));
+  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);
+  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) {
   const { show } = useToast();
   const [loading, setLoading] = useState(false);
   async function onChange(e: React.ChangeEvent<HTMLInputElement>) {
@@ -11,8 +47,11 @@ export function UploadButton({ onUploaded, multiple = false }: { onUploaded: (ur
     try {
       setLoading(true);
       for (const f of files) {
+        // 클라에서 리사이즈 및 webp 변환
+        const dataUrl = await readFileAsDataUrl(f);
+        const blob = await resizeImageToBlob(dataUrl, { maxWidth, maxHeight, quality });
         const fd = new FormData();
-        fd.append("file", f);
+        fd.append("file", new File([blob], `${Date.now()}.webp`, { type: "image/webp" }));
         const r = await fetch("/api/uploads", { method: "POST", body: fd });
         const data = await r.json();
         if (!r.ok) throw new Error(JSON.stringify(data));

todolist.txt

@@ -64,7 +64,7 @@
 [에디터/업로드]
 9.1 에디터(Tiptap/Quill 중 택1) 통합 o
 9.2 이미지/파일 업로드 서버 처리 및 검증 o
-9.3 리사이즈/웹포맷 최적화 및 용량 제한
+9.3 리사이즈/웹포맷 최적화 및 용량 제한 o
 9.4 붙여넣기/드래그 삽입, 캡션/대체텍스트
 9.5 사진 중심 카테고리 프리셋(해상도/비율/워터마크 옵션)