7.10 제휴업소 일반(사진) 카테고리 전용 이미지 첨부/미리보기 규칙 o

src/app/components/UploadButton.tsx

@@ -2,20 +2,22 @@
 import { useState } from "react";
 import { useToast } from "@/app/components/ui/ToastProvider";
 
-export function UploadButton({ onUploaded }: { onUploaded: (url: string) => void }) {
+export function UploadButton({ onUploaded, multiple = false }: { onUploaded: (url: string) => void; multiple?: boolean }) {
   const { show } = useToast();
   const [loading, setLoading] = useState(false);
   async function onChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const f = e.target.files?.[0];
-    if (!f) return;
-    const fd = new FormData();
-    fd.append("file", f);
+    const files = Array.from(e.target.files ?? []);
+    if (files.length === 0) return;
     try {
       setLoading(true);
-      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);
+      for (const f of files) {
+        const fd = new FormData();
+        fd.append("file", f);
+        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("업로드 실패");
@@ -26,7 +28,7 @@ export function UploadButton({ onUploaded }: { onUploaded: (url: string) => void
   }
   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" }} />
+    <input type="file" accept="image/*" onChange={onChange} style={{ display: "none" }} multiple={multiple} />
   </label>;
 }