fix : puppeteer

Author: rlaisqls

.pnp.cjs

@@ -82,7 +82,7 @@ export const Project = ({
               <Link
                 key={index}
                 href={value}
-                className="flex items-center gap-2 bg-gray100 pl-3 pr-3 pt-2 pb-2 rounded-md w-fit max-w-full flex-1"
+                className="flex items-center gap-2 bg-gray100 pl-2 pr-2 pt-0 pb-0 rounded-md w-fit max-w-full flex-1"
               >
                 <LinkSvg />
                 <p className="text-ellipsis overflow-hidden break-all text-[12px]">

.yarn/cache/@babel-code-frame-npm-7.22.13-2782581d20-22e342c807.zip

@@ -27,6 +27,7 @@
     "next": "13.3.0",
     "next-transpile-modules": "^10.0.0",
     "postcss": "8.4.21",
+    "puppeteer": "^21.3.8",
     "qrcode.react": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

.yarn/cache/@babel-helper-validator-identifier-npm-7.22.20-18305bb306-136412784d.zip

@@ -10,4 +10,4 @@ export default function handler(
   res: NextApiResponse<Data>
 ) {
   res.status(200).json({ name: 'John Doe' })
-}
+}

.yarn/cache/@babel-highlight-npm-7.22.20-5de7aba88d-84bd034dca.zip

@@ -0,0 +1,60 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+import puppeteer from 'puppeteer';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+
+    console.log("handler(")
+    console.log(req.query.grade)
+
+    const browser = await puppeteer.launch({
+      headless: "new",
+      args: [
+        '--window-size=1164,829',
+        '--disable-dev-shm-usage',
+        '--no-sandbox',
+        '--disable-setuid-sandbox'
+      ]
+    });
+    
+    const page = await browser.newPage();
+    await page.setViewport({
+      width: 829,
+      height: 1164
+    });
+    console.log("829")
+
+    const timeout = 60 * 1000;
+    const url: string = 'http://localhost:3000/render-pdf/' + req.query.grade
+    const navigationPromise = await page.goto(url, {
+      waitUntil: 'networkidle0',
+      timeout: timeout  // Set the navigation timeout
+    });
+    // Wait for navigation to complete or timeout
+    await Promise.race([navigationPromise, page.waitForTimeout(timeout)]);
+
+    const buffer = await page.pdf({
+      path: 'example.pdf',
+      format: 'A4',
+      printBackground: true,
+      margin: { top: 5, right: 0, bottom: 5, left: 0 },
+      scale: 1.4
+    });
+
+    await browser.close();
+    res.send(buffer);
+  } catch (error) {
+    console.error('An error occurred:', error);
+    res.status(500).send('An error occurred');
+  }
+}
+
+export const config = {
+  api: {
+    responseLimit: false,
+  },
+}

.yarn/cache/@puppeteer-browsers-npm-1.7.1-a197dcc835-fb7cf7773a.zip

@@ -7,72 +7,15 @@ export const convert2PdfAll = async (
   fileName: string
 ) => {
   if (!current) return;
-  const promise = async () => {
-    console.time("make data");
-    const maxPage = 18;
-    const loopNum = Math.ceil(current.scrollHeight / (1164 * maxPage));
-    const canvas = [];
 
-    let offset = 0;
-    for (let i = 0; i < loopNum; i++) {
-      canvas.push(
-        await html2canvas(current, {
-          height:
-            i === loopNum - 1
-              ? current.scrollHeight - (loopNum - 1) * maxPage * 1164
-              : 1164 * maxPage,
-          y: offset,
-          scale: 1,
-          backgroundColor: "#f6f6f6",
-        })
-      );
-      offset += 1164 * maxPage;
-      console.log(offset);
-    }
+  console.log("sdfs")
+  const response = await fetch(`/api/pdf?grade=2`);
+  const blob = await response.blob();
 
-    console.log(canvas);
+  // Create a URL for the blob
+  const pdfUrl = URL.createObjectURL(blob);
+  console.log(pdfUrl)
 
-    const imgData = canvas.map((value) => value.toDataURL("image/png"));
-
-    const imgWidth = 210;
-    const pageHeight = 295;
-
-    const doc = new jsPDF("p", "mm", "a4", true);
-
-    console.timeEnd("make data");
-
-    canvas.map((canvas, index) => {
-      const imgHeight = (canvas.height * imgWidth) / canvas.width;
-      let heightLeft = imgHeight;
-      let position = 0;
-      let asdf = 0;
-
-      while (heightLeft >= 0) {
-        asdf += 1;
-        doc.addImage(
-          imgData[index],
-          "PNG",
-          0,
-          position,
-          imgWidth,
-          imgHeight,
-          undefined,
-          "FAST"
-        );
-        heightLeft -= pageHeight;
-        position = heightLeft - imgHeight;
-        console.log("add page " + asdf);
-        if (heightLeft < 0 && index + 1 === imgData.length) return;
-        doc.addPage();
-      }
-    });
-    doc.save(fileName + ".pdf");
-  };
-  promise()
-    .then(() => {
-      console.log("success");
-    })
-    .catch((e) => {
-      console.log(e);
-    });
+  // Open the PDF in a new tab for preview
+  window.open(pdfUrl, '_blank');
 };

.yarn/cache/@tootallnate-quickjs-emscripten-npm-0.23.0-a889ea7aeb-c350a2947f.zip

@@ -0,0 +1,204 @@
+import { Tag } from "@packages/ui/components/PreviewResume/Tag";
+import { Award } from "@packages/ui/components/PreviewResume/Award";
+import { Certificate } from "@packages/ui/components/PreviewResume/Certificate";
+import { Project } from "@packages/ui/components/PreviewResume/Project";
+import {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { Activity } from "@packages/ui/components/PreviewResume/Activity";
+import QRCode from "qrcode.react";
+import { PreviewType } from "@packages/ui/components/PreviewResume/PreviewType";
+import { studentIndex } from ".";
+
+const subject = {
+  1: "소프트웨어개발과",
+  2: "소프트웨어개발과",
+  3: "임베디드소프트웨어과",
+  4: "정보보안과",
+};
+
+interface indexType {
+  data: PreviewType;
+  setIndex: Dispatch<SetStateAction<{ [k: string]: studentIndex }>>;
+}
+
+const DetailPage = ({ data, setIndex }: indexType) => {
+  const {
+    writer,
+    introduce,
+    skill_list,
+    project_list,
+    award_list,
+    certificate_list,
+    activity_list,
+  } = data;
+
+  const [grade, classNum] = writer.student_number.toString().split("");
+  const [page, setPage] = useState<number>(1);
+  const [trigger, setTrigger] = useState<boolean>(false);
+
+  const activity = useRef<HTMLElement>(null);
+  const one = useRef<HTMLDivElement>(null);
+
+  const heightCheck = () => {
+    if (one.current && one.current?.scrollHeight > 1264) {
+      setPage(2);
+      console.log("page set 2: " + one.current?.scrollHeight);
+    } else {
+      setPage(1);
+    }
+  };
+
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      heightCheck();
+    }, 100);
+  }, [trigger]);
+  useEffect(() => {
+    setTimeout(() => {
+      setTrigger(true);
+    }, 1000);
+  }, []);
+  useEffect(() => {
+    setIndex((i) => {
+      return {
+        ...i,
+        [writer.student_number]: {
+          name: writer.name,
+          major: writer.major,
+          studentNumber: writer.student_number,
+          page: page + project_list.length,
+        },
+      };
+    });
+  }, [page]);
+
+  const ActivityList = (
+    <>
+      {activity_list.length > 0 && (
+        <article className="flex gap-[10px] flex-col" ref={activity}>
+          <h3 className="text-body5">활동</h3>
+          {activity_list.map((data, index) => (
+            <Activity {...data} key={index} />
+          ))}
+        </article>
+      )}
+    </>
+  );
+  return (
+    <>
+    <page>
+      <div className="w-[831px] h-[1171px] bg-gray50 flex justify-center items-center">
+        <div
+          className="h-full w-full flex flex-col gap-[20px] scale-[0.92]"
+          ref={one}
+        >
+          <article>
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-title1 mb-[10px]">{writer.name}</p>
+                <p className="text-title4">{writer.major.name}</p>
+              </div>
+              <div className="flex">
+                <div className="flex flex-col mr-6 text-end gap-[10px] justify-center">
+                  <p className="text-body7 leading-[17px]">
+                    {writer.student_number}
+                  </p>
+                  <p className="text-body7 leading-[17px]">
+                    {grade !== "1" ? subject[classNum as "1"] : "공통과정"}
+                  </p>
+                  <p className="text-body7 leading-[17px]">{writer.email}</p>
+                </div>
+                {writer.url && (
+                  <div>
+                    <QRCode size={80} value={writer.url} />
+                  </div>
+                )}
+              </div>
+            </div>
+          </article>
+
+          <article>
+            <div>
+              <h3 className="text-body3">{introduce.heading}</h3>
+              <pre className="text-body7 whitespace-pre-wrap text-gray400 mt-[20px] leading-[17px]">
+                {introduce.introduce}
+              </pre>
+            </div>
+          </article>
+
+          {!!skill_list.length && (
+            <article className="flex flex-col gap-[10px]">
+              <h3 className="text-body5">기술 스택</h3>
+              <pre className="flex gap-3 flex-wrap">
+                {skill_list.map((skill, index) => (
+                  <Tag key={index} className="bg-gray50" technology={skill} />
+                ))}
+              </pre>
+            </article>
+          )}
+
+          {award_list.length > 0 && (
+            <article className="flex gap-[10px] flex-col">
+              <h3 className="text-body5">수상 경력</h3>
+              {award_list.map((award, index) => (
+                <Award {...award} key={index} />
+              ))}
+            </article>
+          )}
+
+          {certificate_list.length > 0 && (
+            <article className="flex gap-[10px] flex-col">
+              <h3 className="text-body5">자격증</h3>
+              {certificate_list.map((data, index) => (
+                <Certificate {...data} key={index} />
+              ))}
+            </article>
+          )}
+          {page === 1 && ActivityList}
+        </div>
+      </div>
+      </page>
+
+      {page > 1 && (
+        <page>
+        <div className="w-[831px] h-[1171px] flex justify-center items-center">
+          <div className="h-full w-full flex scale-[0.92]">
+            <div className="h-fit w-full flex flex-col gap-[20px]" id="two">
+              {page === 2 && ActivityList}
+            </div>
+          </div>
+        </div>
+        </page>
+      )}
+      <article className="flex flex-col">
+        {project_list.map((data, index) => (
+          <div
+            className="w-[831px] h-[1171px] bg-gray50 flex flex-col justify-center items-center"
+            key={index}
+          >
+            <div className="w-[831px] h-[1171px] flex flex-col gap-[20px] scale-[0.92]">
+              {/* {index === 0 && (
+                <h3 className="text-[22px] font-semibold leading-[26px] w-full">
+                  Project
+                </h3>
+              )} */}
+              <page>
+              <div className={`h-full w-full`}>
+                <Project {...data} />
+              </div>
+              </page>
+            </div>
+          </div>
+        ))}
+      </article>
+    </>
+  );
+};
+
+export default DetailPage;