msgapp/src/app/components/UploadButton.tsx

"use client";
import { useState } from "react";
import { useToast } from "@/app/components/ui/ToastProvider";

type Props = {
  onUploaded: (url: string) => void;
  multiple?: boolean;
  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> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result));
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

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; });
  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, 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, aspectRatio, watermarkText }: Props) {
  const { show } = useToast();
  const [loading, setLoading] = useState(false);
  async function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    const files = Array.from(e.target.files ?? []);
    if (files.length === 0) return;
    try {
      setLoading(true);
      for (const f of files) {
        // 클라에서 리사이즈 및 webp 변환
        const dataUrl = await readFileAsDataUrl(f);
        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 });
        const data = await r.json();
        if (!r.ok) throw new Error(JSON.stringify(data));
        onUploaded(data.url);
      }
      show("업로드 완료");
    } catch (e) {
      show("업로드 실패");
    } finally {
      setLoading(false);
      e.currentTarget.value = "";
    }
  }
  return <label style={{ display: "inline-block" }}>
    <span style={{ padding: "6px 10px", border: "1px solid #ddd", borderRadius: 6, cursor: "pointer" }}>{loading ? "업로드 중..." : "이미지 업로드"}</span>
    <input type="file" accept="image/*" onChange={onChange} style={{ display: "none" }} multiple={multiple} />
  </label>;
}