feat(web): pdf 로딩시 progress bar 로딩중 상태 추가 (#211)

DNDACADEMY · Oct 22, 2024 · f1e1d7f · f1e1d7f
1 parent ecd35a3
commit f1e1d7f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git 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
@@ -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}