From e03363a5758816fd867c34393ac7e95551c08425 Mon Sep 17 00:00:00 2001
From: oneweek-lee <oneweek.lee@navercorp.com>
Date: Tue, 23 Apr 2024 20:13:52 +0900
Subject: [PATCH] =?UTF-8?q?[#10]=20canvas,=20svg=20=EC=98=88=EC=8B=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-pdf/storybook/canvas.stories.tsx    |  2 +-
 packages/react-pdf/storybook/svg.stories.tsx  | 57 +++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-pdf/storybook/svg.stories.tsx

diff --git a/packages/react-pdf/storybook/canvas.stories.tsx b/packages/react-pdf/storybook/canvas.stories.tsx
index 68034f8..9bd01f6 100644
--- a/packages/react-pdf/storybook/canvas.stories.tsx
+++ b/packages/react-pdf/storybook/canvas.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
 export default meta
 
 const PDF_URL =
-    'https://s3.ap-northeast-2.amazonaws.com/shinhwa-good-info/idbins/%EB%AC%B4%EB%B0%B0%EB%8B%B9%ED%94%84%EB%A1%9C%EB%AF%B8%EB%9D%BC%EC%9D%B4%ED%94%84%EC%B0%B8%EC%A2%8B%EC%9D%80%EC%9A%B4%EC%A0%84%EC%9E%90%EC%83%81%ED%95%B4%EB%B3%B4%ED%97%982210___2022-10-01___%EC%95%BD%EA%B4%80.pdf'
+    'https://fs.pstatic.net/contents/resource/loan/personal-compare/required/0/1668583261818/gi_creditLoanNF_02.pdf'
 
 export function 기본_Canvas() {
     const [pdfInfo, setPdfInfo] = useState<PDFDocumentProxy | undefined>()
diff --git a/packages/react-pdf/storybook/svg.stories.tsx b/packages/react-pdf/storybook/svg.stories.tsx
new file mode 100644
index 0000000..57ac846
--- /dev/null
+++ b/packages/react-pdf/storybook/svg.stories.tsx
@@ -0,0 +1,57 @@
+import React, {useEffect, useState} from 'react'
+
+import {getPdfDocument} from '../dist/cjs'
+import * as pdfjs from '../dist/cjs/pdf'
+
+import type {PDFDocumentProxy} from '../src/pdfjs-dist/types/pdfjs'
+
+const meta = {
+    title: 'React PDF',
+    component: 기본_SVG,
+}
+export default meta
+
+const PDF_URL =
+    'https://fs.pstatic.net/contents/resource/loan/personal-compare/required/0/1668583261818/gi_creditLoanNF_02.pdf'
+
+export function 기본_SVG() {
+    const [pdfInfo, setPdfInfo] = useState<PDFDocumentProxy | undefined>()
+
+    useEffect(() => {
+        ;(async () => {
+            const pdf = await getPdfDocument({file: PDF_URL})
+            setPdfInfo(pdf)
+        })()
+    }, [])
+
+    if (!pdfInfo) {
+        return null
+    }
+
+    return (
+        <>
+            {Array.from({length: pdfInfo.numPages}).map((_, index) => {
+                return (
+                    <div
+                        key={index}
+                        ref={async (node) => {
+                            if (!node) {
+                                return
+                            }
+                            const page = await pdfInfo.getPage(index + 1)
+                            const viewport = page.getViewport({scale: 1, rotation: 0})
+                            const operatorList = await page.getOperatorList()
+
+                            node.setAttribute('width', `${viewport.width}px`)
+                            node.setAttribute('height', `${viewport.height}px`)
+
+                            const svgGfx = new pdfjs.SVGGraphics(page.commonObjs, page.objs)
+                            const svg = await svgGfx.getSVG(operatorList, viewport)
+                            node.appendChild(svg)
+                        }}
+                    />
+                )
+            })}
+        </>
+    )
+}