From b0b7b9f6fb781fa8d419d9e2fed6049256248689 Mon Sep 17 00:00:00 2001
From: koreacomp5 <comp5@pluxity.com>
Date: Thu, 9 Oct 2025 17:58:12 +0900
Subject: [PATCH] =?UTF-8?q?9.3=20=EB=A6=AC=EC=82=AC=EC=9D=B4=EC=A6=88/?=
 =?UTF-8?q?=EC=9B=B9=ED=8F=AC=EB=A7=B7=20=EC=B5=9C=EC=A0=81=ED=99=94=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=9A=A9=EB=9F=89=20=EC=A0=9C=ED=95=9C=20o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/UploadButton.tsx | 43 +++++++++++++++++++++++++++--
 todolist.txt                        |  2 +-
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/app/components/UploadButton.tsx b/src/app/components/UploadButton.tsx
index e3b63e4..7b33251 100644
--- a/src/app/components/UploadButton.tsx
+++ b/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));
diff --git a/todolist.txt b/todolist.txt
index 5fcb06e..f0f84e6 100644
--- a/todolist.txt
+++ b/todolist.txt
@@ -64,7 +64,7 @@
 [에디터/업로드]
 9.1 에디터(Tiptap/Quill 중 택1) 통합 o
 9.2 이미지/파일 업로드 서버 처리 및 검증 o
-9.3 리사이즈/웹포맷 최적화 및 용량 제한
+9.3 리사이즈/웹포맷 최적화 및 용량 제한 o
 9.4 붙여넣기/드래그 삽입, 캡션/대체텍스트
 9.5 사진 중심 카테고리 프리셋(해상도/비율/워터마크 옵션)