From f1e1d7f3b091c525762769baa8ef6bd9069e1202 Mon Sep 17 00:00:00 2001
From: Harang <dbd02169@naver.com>
Date: Tue, 22 Oct 2024 22:12:18 +0900
Subject: [PATCH] =?UTF-8?q?feat(web):=20pdf=20=EB=A1=9C=EB=94=A9=EC=8B=9C?=
 =?UTF-8?q?=20progress=20bar=20=EB=A1=9C=EB=94=A9=EC=A4=91=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EC=B6=94=EA=B0=80=20(#211)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../molecules/PDFViewer/index.module.scss     | 14 ++++++++++++++
 .../components/molecules/PDFViewer/index.tsx  | 19 +++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/molecules/PDFViewer/index.module.scss b/apps/web/src/components/molecules/PDFViewer/index.module.scss
index 4f3cf90..40a2272 100644
--- a/apps/web/src/components/molecules/PDFViewer/index.module.scss
+++ b/apps/web/src/components/molecules/PDFViewer/index.module.scss
@@ -6,6 +6,7 @@
   border-radius: 4px;
   border: 1px solid color('gray09');
   overflow: hidden;
+  position: relative;
 
   .pdfButtonWrapper {
     display: flex;
@@ -61,3 +62,16 @@
     min-height: 200px;
   }
 }
+
+.progressBar {
+  width: 100%;
+  height: 6px;
+  background-color: color('gray03');
+  overflow: hidden;
+
+  .progress {
+    height: 100%;
+    background-color: color('primary');
+    transition: width 0.3s ease;
+  }
+}
diff --git a/apps/web/src/components/molecules/PDFViewer/index.tsx b/apps/web/src/components/molecules/PDFViewer/index.tsx
index e84919d..9975f1d 100644
--- a/apps/web/src/components/molecules/PDFViewer/index.tsx
+++ b/apps/web/src/components/molecules/PDFViewer/index.tsx
@@ -45,17 +45,32 @@ function PDFViewer({ url }: Props) {
     setNumPages(data.numPages);
   };
 
+  const [loadingProgress, setLoadingProgress] = useState<number>(0);
+
+  const onDocumentLoadProgress: DocumentProps['onLoadProgress'] = ({ loaded, total }) => {
+    const progress = (loaded / total) * 100;
+    setLoadingProgress(progress);
+  };
+
   const onPrev = () => setPageNumber(pageNumber - 1);
   const onNext = () => setPageNumber(pageNumber + 1);
 
   return (
     <div ref={containerRef} className={styles.pdfViewerWrapper}>
+      {loadingProgress > 0 && loadingProgress < 100 && (
+        <div className={styles.progressBar}>
+          <div
+            className={styles.progress}
+            style={{ width: `${loadingProgress}%` }}
+          />
+        </div>
+      )}
       {width && (
         <Document
           file={url}
           onLoadSuccess={onDocumentLoadSuccess}
-          // TODO: 로딩 임시 처리
-          loading={<div className={styles.loading}>loading pdf..</div>}
+          onLoadProgress={onDocumentLoadProgress}
+          loading={<div className={styles.loading}>loading document..</div>}
         >
           <Page
             pageNumber={pageNumber}