diff --git a/package-lock.json b/package-lock.json
index 4467080..4318faf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13170,6 +13170,11 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "make-cancellable-promise": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.3.1.tgz",
+      "integrity": "sha512-DWOzWdO3xhY5ESjVR+wVFy03rpt0ZccS4bunccNwngoX6rllKlMZm6S9ZnJ5nMuDDweqDMjtaO0g6tZeh+cCUA=="
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -13186,6 +13191,11 @@
         }
       }
     },
+    "make-event-props": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.6.1.tgz",
+      "integrity": "sha512-JhvWq/iz1BvlmnPvLJjXv+xnMPJZuychrDC68V+yCGQJn5chcA8rLGKo5EP1XwIKVrigSXKLmbeXAGkf36wdCQ=="
+    },
     "makeerror": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
@@ -13399,11 +13409,24 @@
         }
       }
     },
+    "merge-class-names": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
+      "integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
     },
+    "merge-refs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.2.1.tgz",
+      "integrity": "sha512-pRPz39HQz2xzHdXAGvtJ9S8aEpNgpUjzb5yPC3ytozodmsHg+9nqgRs7/YOmn9fM/TLzntAC8AdGTidKxOq9TQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -14590,6 +14613,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "pdfjs-dist": {
+      "version": "2.6.347",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz",
+      "integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ=="
+    },
     "perfect-scrollbar": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.1.tgz",
@@ -21410,6 +21438,21 @@
         "prop-types": "^15.6.1"
       }
     },
+    "react-pdf": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.3.2.tgz",
+      "integrity": "sha512-gT2xeUAUJem5UWNZYIQSPJAlPDbc3mIIhEgGK8P/qo1B68WIE4R4v3tNFYM9e5nqlKnGZG4Cd68SetlmnPejwA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "file-loader": "^6.0.0",
+        "make-cancellable-promise": "^1.0.0",
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "merge-refs": "^1.0.0",
+        "pdfjs-dist": "2.6.347",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-perfect-scrollbar": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.5.tgz",
diff --git a/package.json b/package.json
index 90a64ac..15e4b83 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
     "react-leaflet": "3.1.0",
     "react-mapbox-gl": "^5.1.1",
     "react-paginate": "7.0.0",
+    "react-pdf": "5.3.2",
     "react-perfect-scrollbar": "1.5.5",
     "react-player": "2.6.2",
     "react-rating": "2.0.5",
diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 0df9be8..164852f 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -1011,4 +1011,9 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .report-link{margin-bottom:1rem}
 .report-link a{font-size:1rem;display:inline-flex;justify-content: center;align-items: center;}
 .report-link a svg{margin-left:4px;width:18px;}
-.report-link a + a{margin-left:1rem}
\ No newline at end of file
+.report-link a + a{margin-left:1rem}
+/* .react-pdf__Page__canvas {
+    margin: 0 auto;
+    width: 100% !important;
+    height: 100% !important;
+} */
\ No newline at end of file
diff --git a/src/modules/laanc/sagas/laancSagas.ts b/src/modules/laanc/sagas/laancSagas.ts
index 7bbeec8..5b85457 100644
--- a/src/modules/laanc/sagas/laancSagas.ts
+++ b/src/modules/laanc/sagas/laancSagas.ts
@@ -51,7 +51,7 @@ function* postCreatesata(
     const res = yield call(Apis.laancApi.postCreate, detail);
 
     // const { data } = res;
-
+    localStorage.setItem('pdfUrl', res.data.pdfUrl);
     // yield put(
     //   MessageActions.IS_MESSAGE({
     //     messageCode: SAVE_MESSAGE.code,
diff --git a/src/views/laanc/LaacnStep3.js b/src/views/laanc/LaacnStep3.js
index aef4e17..6414e74 100644
--- a/src/views/laanc/LaacnStep3.js
+++ b/src/views/laanc/LaacnStep3.js
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { Document, Page, pdfjs } from 'react-pdf';
 import moment from 'moment';
+
 import {
   Row,
   Col,
@@ -19,6 +21,9 @@ import { useHistory } from 'react-router-dom';
 import FlightArea from './FlightArea';
 import LaancPdf from './LaancPdf';
 import { AlertCircle, CheckCircle, Download } from 'react-feather';
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
 export default function LaacnStep3({
   handlerStep,
   disabledAnimation,
@@ -44,12 +49,32 @@ export default function LaacnStep3({
   };
   const [centeredModal2, setCenteredModal2] = useState(false);
   const [formModal, setFormModal] = useState(false);
+  const [numPages, setNumPages] = useState(null); // total
+  const [pageNum, setPageNum] = useState(1);
   const { user } = useSelector(state => state.authState);
 
   const handlerClose = () => {
     setFormModal(!formModal);
   };
 
+  const handlerPdfDownload = e => {
+    const url = localStorage.getItem('pdfUrl');
+
+    if (url !== 'undefined') {
+      console.log('@?@?@?@?');
+      let alink = document.createElement('a');
+      alink.href = `http://211.253.11.189:8080${localStorage.getItem(
+        'pdfUrl'
+      )}`;
+      alink.download = 'SamplePDF.pdf';
+      alink.click();
+    }
+  };
+
+  const onDocumentLoadSuccess = ({ numPages: nextNumPages }) => {
+    setNumPages(nextNumPages);
+  };
+
   return (
     <>
       <ModalHeader>
@@ -213,24 +238,22 @@ export default function LaacnStep3({
             <div className='ti'>승인 공문</div>
             <Row>
               <Col md='6'>
-                {/* <button color='primary' size='lg' onClick={handlerPdfDownload}>
+                <Button color='primary' size='lg' onClick={handlerPdfDownload}>
                   공문 다운로드
-                </button> */}
-                <a
-                  href={
-                    'http://211.253.11.189:8080/api/comn/file/download?fileSno=118'
-                  }
-                  download
-                >
-                  공문 다운로드
-                </a>
+                </Button>
               </Col>
               <Col md='6'>
                 <Button
                   color='primary'
                   size='lg'
                   outline
-                  onClick={() => setFormModal(true)}
+                  onClick={() => {
+                    const url = localStorage.getItem('pdfUrl');
+
+                    if (url !== 'undefined') {
+                      setFormModal(true);
+                    }
+                  }}
                 >
                   공문 미리보기
                 </Button>
@@ -293,9 +316,42 @@ export default function LaacnStep3({
         toggle={handlerClose}
         className='modal-dialog-centered'
       >
-        <ModalHeader toggle={handlerClose}>pdf 미리보기</ModalHeader>
+        <ModalHeader toggle={handlerClose}>공문 미리보기</ModalHeader>
         <ModalBody>
-          <LaancPdf />
+          {/* <LaancPdf /> */}
+
+          <Document
+            file={`http://211.253.11.189:8080${localStorage.getItem('pdfUrl')}`}
+            onLoadSuccess={onDocumentLoadSuccess}
+          >
+            {/* {Array.from(new Array(numPages), (el, index) => (
+              <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+            ))} */}
+            <Page pageNumber={pageNum} />
+          </Document>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-around',
+              alignItems: 'center'
+            }}
+          >
+            <Button
+              onClick={() => (pageNum > 1 ? setPageNum(pageNum - 1) : null)}
+            >
+              &lt;
+            </Button>
+            <span>
+              {pageNum} / {numPages}
+            </span>
+            <Button
+              onClick={() =>
+                pageNum < numPages ? setPageNum(pageNum + 1) : null
+              }
+            >
+              &gt;
+            </Button>
+          </div>
         </ModalBody>
         <ModalFooter>
           <Button color='primary' onClick={handlerClose}>