npm i jszip

// app/download-zip/downloadBlob.ts
export function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = filename;

  // 일부 환경에서 DOM에 붙어 있어야 안정적으로 동작하는 케이스를 줄이기 위해 append
  document.body.appendChild(a);
  a.click();
  a.remove();

  // 너무 빨리 revoke 하면 다운로드가 끊기는 환경이 있어, 다음 tick에 해제
  setTimeout(() => URL.revokeObjectURL(url), 0);
}

// app/download-zip/DownloadZipClient.tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { downloadBlob } from "./downloadBlob";

const CSV_TEXT =
  "policyID,statecode,county\n" +
  "119736,FL,CLAY COUNTY\n" +
  "448094,FL,CLAY COUNTY\n";

function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality?: number) {
  return new Promise<Blob>((resolve, reject) => {
    canvas.toBlob(
      (blob) => (blob ? resolve(blob) : reject(new Error("canvas.toBlob() failed"))),
      type,
      quality
    );
  });
}

export default function DownloadZipClient() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const [downloading, setDownloading] = useState(false);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    // 데모용 간단한 그림
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = "red";
    ctx.font = "24px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Hello World", canvas.width / 2, canvas.height / 2);
  }, []);

  async function downloadAllAsZip() {
    if (downloading) return;

    const canvas = canvasRef.current;
    if (!canvas) return;

    setDownloading(true);
    try {
      // 필요할 때만 로드(초기 번들 부담을 줄이기 위한 선택)
      const JSZip = (await import("jszip")).default;

      const zip = new JSZip();

      // 1) CSV: 문자열 → Blob
      const csvBlob = new Blob([CSV_TEXT], { type: "text/csv;charset=utf-8" });
      zip.file("test.csv", csvBlob);

      // 2) 이미지: canvas → Blob
      const imageBlob = await canvasToBlob(canvas, "image/jpeg", 0.92);

      const imgFolder = zip.folder("images");
      imgFolder?.file("resized.jpeg", imageBlob);

      // 3) ZIP 생성
      const zipBlob = await zip.generateAsync({ type: "blob" });

      // 4) 다운로드
      downloadBlob(zipBlob, "example.zip");
    } finally {
      setDownloading(false);
    }
  }

  return (
    <div style={{ padding: 16 }}>
      <h1>ZIP 다운로드 데모</h1>

      <canvas
        ref={canvasRef}
        width={600}
        height={240}
        style={{ border: "1px solid #ccc" }}
      />

      <div style={{ marginTop: 12 }}>
        <button onClick={downloadAllAsZip} disabled={downloading}>
          {downloading ? "ZIP 만드는 중..." : "CSV + 이미지 ZIP으로 다운로드"}
        </button>
      </div>
    </div>
  );
}

// app/download-zip/page.tsx
import DownloadZipClient from "./DownloadZipClient";

export default function Page() {
  return <DownloadZipClient />;
}