save state to localstorage

src/website/components/download-form.tsx

@@ -4,8 +4,14 @@ import { downloadVocaQuiz } from "../pdf.ts";
 export default function DownloadForm() {
   const [levels, setLevels] = React.useState<number[]>([6, 7]);
   const [day, setDay] = React.useState<number>(1);
+  const [formEnable, setFormEnable] = React.useState<boolean>(true);
+
   const handleSubmit: React.FormEventHandler = React.useCallback((ev) => {
-    downloadVocaQuiz(levels.sort(), day);
+    localStorage.setItem("voca-setting", JSON.stringify({ levels, day }));
+    setFormEnable(false);
+    downloadVocaQuiz(levels.sort(), day).then(() => {
+      setFormEnable(true);
+    });
     ev.preventDefault();
   }, [levels, day]);
 
@@ -25,10 +31,16 @@ export default function DownloadForm() {
     }
   };
 
+  React.useEffect(() => {
+    const setting = JSON.parse(localStorage.getItem("voca-setting") ?? "{}");
+    setting.level && setLevels(setting.levels);
+    setting.day && setDay(setting.day);
+  }, []);
+
   return (
     <>
       <form onSubmit={handleSubmit}>
-        <fieldset>
+        <fieldset disabled={!formEnable}>
           <legend>시험 난이도</legend>
           <div>
             <input
@@ -84,14 +96,19 @@ export default function DownloadForm() {
 
         <div>
           <label htmlFor="day">범위</label>
-          <select id="day" value={day} onChange={handleDayChange}>
+          <select
+            id="day"
+            value={day}
+            onChange={handleDayChange}
+            disabled={!formEnable}
+          >
             {[...Array(30)].map((_, i) => <option value={i + 1}>{i + 1}
             </option>)}
           </select>
         </div>
 
         <div>
-          <button type="submit">PDF 다운</button>
+          <button type="submit" disabled={!formEnable}>PDF 다운</button>
         </div>
       </form>
     </>

src/website/pdf.ts

@@ -11,15 +11,18 @@ import {
 import { JSONType, Voca } from "../types.ts";
 
 function downloadBuffer(buffer: Uint8Array, fileName: string) {
-  const a: HTMLAnchorElement = document.createElement("a");
+  return new Promise<void>((resolve) => {
-  const blob = new Blob([buffer], { type: "application/octet-stream" });
+    const a: HTMLAnchorElement = document.createElement("a");
+    const blob = new Blob([buffer], { type: "application/octet-stream" });
 
-  a.href = URL.createObjectURL(blob);
+    a.href = URL.createObjectURL(blob);
-  a.download = fileName;
+    a.download = fileName;
-  document.body.appendChild(a);
+    document.body.appendChild(a);
-  a.style.display = "none";
+    a.style.display = "none";
-  a.click();
+    a.click();
-  a.remove();
+    a.remove();
+    resolve();
+  });
 }
 
 export async function makePdf(voca_list: Voca[]) {
@@ -174,5 +177,8 @@ export async function downloadVocaQuiz(levels: number[], day: number) {
     levels.includes(chunk.level) && chunk.day === day
   ).flatMap((chunk) => chunk.voca_list);
   const bufferPdf = await makePdf(shuffle(voca_list));
-  downloadBuffer(bufferPdf, `voca-${day}-${levels.join(",")}.pdf`);
+  await downloadBuffer(
+    bufferPdf,
+    `voca-day${day}-level(${levels.join(",")}).pdf`,
+  );
 }