[react-pdf] 간단하게 readme를 작성합니다.

packages/react-pdf/PDFViewer.md

@@ -0,0 +1,87 @@
+# PDFViewer
+
+## 🚨 Warning
+
+- 스타일이 적용된 PDFViewer를 사용하기 위해서는, `PDFViewer`를 사용하는 파일 최상단에 `import '@naverpay/react-pdf/index.css'` 추가가 필요합니다.
+
+## 기본 사용법
+
+- 단순 PDF Viewer만 필요한 경우 (즉, pdf text에 따른 handler가 필요 없는 경우) 사용됩니다.
+
+### React (CSR / SSR)
+
+```tsx
+import {PDFViewer} from '@naverpay/react-pdf'
+
+function SomeComponent () {
+    return <PDFViewer pdfUrl={"pdfUrl"} onErrorPDFRender={onErrorPDFRender} />
+}
+```
+
+## Advanced Usage
+
+### Click Handler 가 필요한 경우
+
+```tsx
+import {PDFViewer} from '@naverpay/react-pdf'
+
+
+function SomeComponent() {
+    return (
+        <PDFViewer
+            pdfUrl={pdfUrl}
+            onClickWords={[{target: '약관', callback: () => alert('약관을 클릭했습니다.')}]}
+        />
+    )
+}
+```
+
+### 상/하위 컴포넌트 rendering이 필요한 경우
+
+```tsx
+import {PDFViewer} from '@naverpay/react-pdf'
+
+function PDFViewer() {
+    return (
+        <PDFViewer
+            pdfUrl={pdfUrl}
+            onErrorPDFRender={onErrorPDFRender}
+            header={<>상위에 렌더링될 컴포넌트</>}
+            footer={<>하위에 렌더링될 컴포넌트</>}
+        />
+    )
+}
+```
+
+## PDFViewer에 주입되는 Props
+
+| props            | 설명                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 타입                                                      | 기타     |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | -------- |
+| pdfUrl           | 노출하고자 하는 PDF의 링크 / File Path <br /><br /> local, cdn 모두 가능합니다. local 제공시, base path에 유의해주세요.                                                                                                                                                                                                                                                                                                                                                                                                                                          | string                                                    | required |
+|cMapUrl| 사용할 PDF에 지원하지 않는 폰트가 있을 경우에, camp이 업로드된 url 주소를 적어주세요. |string|optional|
+|cMapCompressed|사용할 PDF에 지원하지 않는 폰트가 있을 경우에, 압축 여부를 적어주세요. |boolean|optional|
+|withCredentials|url을 통한 pdf 요청 시, header와 같이 요청할건지에 대한 여부를 설정합니다. |boolean|optional|
+| onClickWords     | 약관이나 어떤 다른 Click 액션에 따른 형상이 필요할때, 주입해주시면 됩니다. <br /> 원하는 단어를 target에, target click 후 취할 액션을 callback을 넣어주세요. <br /><br />`target`은 `string`, `정규 표현식`을 모두 지원합니다. <br /><br />**🚨 주의 🚨**<br /> 해당 props가 존재하면, 자동으로 어절 단위를 끊습니다.<br />@naverpay/react-pdf는 기본적으로 PDF를 효율적으로 렌더링하기 위해, **한문장** 단위로 렌더링하고 있습니다. <br /> react-pdf가 제공하는 기능이 아닌, space를 기준으로 자르게 됩니다. (정확하지 않을 수 있습니다.)  어절 단위로 끊기지 않는 pdf가 존재할 수 있습니다. | `Array<{target: string \| RegExp; callback: () => void}>` | optional |
+| onLoadPDFRender | pdf load 성공 handler                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | () => void                                        | optional |
+| onErrorPDFRender | pdf error handler                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | (e: unknown) => void                                        | optional |
+| header           | PDF 상위에 rendering 될 컴포넌트를 props로 받습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ReactNode                                                 | optional |
+| footer           | PDF 하위에 rendering 될 컴포넌트를 props로 받습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ReactNode                                                 | optional |
+
+## Suggestion
+
+onErrorPDFRender는 pdf viewer에서 오류가 난 경우에 트리거되는 callback 함수입니다.
+
+- PDF 렌더링 에러시, pdf를 브라우저 기본 PDF viewer로 열어주는 handler 입니다.
+
+- 하단의 handler를 사용해보세요.
+
+    ```tsx
+    const handleRenderPDFError = useCallback(
+        (e) => {
+            // 브라우저에서 기본으로 제공하는 pdf viewer를 새창으로 띄우도록 처리
+            window.open(pdfUrl, '_blank')
+            // error logging 
+        },
+        [pdfFilePath],
+    )
+    ```

packages/react-pdf/README.md

@@ -1,6 +1,46 @@
-## @naverpay/react-pdf
+# @naverpay/react-pdf
 
-### pdfjs-dist
+- 리액트 컴포넌트 기반으로 만들어진 pdf 뷰어 입니다. 별다른 설정 없이, IE 11 환경을 지원합니다.
 
-- ie 지원하는 마지막 버전인 `2.1.266` 버전의 [pdf.js](https://github.com/mozilla/pdf.js) 의 빌드 버전입니다.
-- ie를 지원하고, 한글에 최적화된 지원을 위해 해당 패키지 내부에 내장하였습니다.
+- pdfjs-dist 하위 파일은 [mozilla에서 제공하는 PDF parse](https://github.com/mozilla/pdf.js) 를 번들한 결과입니다.
+
+  - ie 지원과 기기 내부 overriding 되어 강제로 변환된 폰트도 지원할 수 있도록 커스텀 되어 있습니다.
+
+## Installation
+
+```sh
+npm install @naverpay/react-pdf
+```
+
+## Description
+
+- [PDFViewer 설명 보기](./PDFViewer.md)
+- [getPdfDocument 설명 보기](./getPdfDocument.md)
+
+## @naverpay/react-pdf 의 장점
+
+### 성능 향상
+
+1. 한글을 고려한 렌더링 방식
+      - [기존 react pdf](https://github.com/wojtekmaj/react-pdf) 는 파싱 및 렌더링이 영어에 초점이 맞춰져 있습니다.
+      - 한글의 경우, 한글자 씩 렌더링되고 있어, rendering 시점에 blocking이 자주 발생되곤 했습니다.
+      - `@naverpay/react-pdf` 에서는 한글에 알맞도록 파싱 로직을 수정했습니다.
+
+2. non-blocking rendering
+     - pdf rendering 시, requestAnimationFrame을 이용해 rendering에 의한 blocking이 발생되지 않도록 처리했습니다.
+
+3. lazy loading
+     - 페이지 수가 많은 pdf를 불러오고 rendering을 하게 되면, 부하가 많이 생기는데, 이를 lazy-loading을 기본적으로 적용하여 최적화했습니다.
+
+### ie 지원
+
+- 별도의 설정 없이, ie 11을 지원합니다.
+
+### SSR 지원 (feat. NextJs)
+
+- 별도의 설정 없이, SSR을 지원하도록 구현했습니다.
+
+### 기타 장점
+
+- pdfjs-dist를 내장하여,ㄴ pdfjs-dist에서 pdf 파싱을 위한 worker setting이 불필요합니다.
+- pdf 내부의 한글 글자 클릭 시, custom 한 action을 사용할 수 있도록 추가했습니다.

packages/react-pdf/getPdfDocument.md

@@ -0,0 +1,25 @@
+# getPdfDocument
+
+## pdf만 단독으로 가지고 오는 유틸
+
+- **client side** 에서만 호출되어야 합니다.
+
+- 업로드된 파일의 url 주소와 로컬 주소 data 중 하나를 넣어주시면 됩니다.
+
+- 가지고 올 수 있는 PDF 정보는 [다음](./src/pdfjs-dist/types/pdfjs.d.ts)과 같습니다.
+
+```tsx
+function PDFTest() {
+    useEffect(() => {
+        async function load() {
+            const pdfInfo = await getPdfDocument({
+                url: 'https://financial.pstatic.net/static/terms-policy/location-based-service_230101.pdf',
+            })
+            console.log(pdfInfo.numPages)
+        }
+        load()
+    }, [])
+
+    return null
+}
+```

packages/react-pdf/src/pdfjs-dist/legacy/build/pdf.js

@@ -11257,7 +11257,6 @@ function () {
       onUnsupportedFeature: this._onUnsupportedFeature.bind(this)
     });
     this._params = params;
-    // @see: https://oss.fin.navercorp.com/common-fe/pie/issues/1372
     this.CMapReaderFactory = new params.CMapReaderFactory({
       baseUrl: params.cMapUrl,
       isCompressed: params.cMapPacked