feat : PDF 적용

package.json

@@ -20,6 +20,7 @@
     "@mui/system": "^5.4.1",
     "@mui/utils": "^5.4.1",
     "@mui/x-data-grid": "^5.5.0",
+    "@react-pdf/renderer": "^2.1.1",
     "@reduxjs/toolkit": "^1.7.2",
     "@tabler/icons": "^1.53.0",
     "apexcharts": "^3.33.1",
@@ -62,6 +63,7 @@
     "react-number-format": "^4.9.1",
     "react-organizational-chart": "^2.1.1",
     "react-otp-input-rc-17": "^2.4.1-minor",
+    "react-pdf": "^5.7.2",
     "react-perfect-scrollbar": "^1.5.8",
     "react-quill": "^2.0.0-beta.4",
     "react-redux": "^7.2.6",

src/views/biz/judge/BasicDocument.jsx

@@ -0,0 +1,55 @@
+import { Document, Page, Text, View, StyleSheet, PDFViewer } from '@react-pdf/renderer';
+// Create styles
+const styles = StyleSheet.create({
+  page: {
+    flexDirection: 'row',
+    backgroundColor: '#d11fb6',
+    color: 'white'
+  },
+  section: {
+    margin: 10,
+    padding: 10,
+    flexGrow: 1
+  },
+  viewer: {
+    // width: window.innerWidth / 2, // the pdf viewer will take up all of the width and height
+    // height: window.innerHeight / 2
+    width: '95%', // the pdf viewer will take up all of the width and height
+    height: 650
+  }
+});
+
+/*
+const styles = StyleSheet.create({
+  page: {
+    flexDirection: 'row',
+    backgroundColor: '#E4E4E4'
+  },
+  section: {
+    margin: 10,
+    padding: 10,
+    flexGrow: 1
+  }
+});
+*/
+
+// Create Document Component
+function BasicDocument() {
+  return (
+    <PDFViewer style={styles.viewer}>
+      {/* Start of the document */}
+      <Document>
+        {/* render a single page */}
+        <Page size="A4" style={styles.page}>
+          <View style={styles.section}>
+            <Text>Hello</Text>
+          </View>
+          <View style={styles.section}>
+            <Text>World</Text>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+}
+export default BasicDocument;

src/views/biz/judge/ProcessJudge.jsx

@@ -1,9 +1,25 @@
 import { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import ReactPDF, { PDFViewer, Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
+
 import { Button, CardMedia, Divider, FormControl, Grid, InputLabel, MenuItem, Select, TextField } from '@mui/material';
 import { findImages, saveJudgeResult } from 'apis/judge';
 import { SkipNext, SkipPrevious, Save } from '@mui/icons-material';
+import BasicDocument from './BasicDocument';
+
+// Create styles
+const styles = StyleSheet.create({
+  page: {
+    flexDirection: 'row',
+    backgroundColor: '#E4E4E4'
+  },
+  section: {
+    margin: 10,
+    padding: 10,
+    flexGrow: 1
+  }
+});
 
 const ProcessJudge = (props) => {
   const { rowDatas, setOpen, showAlert } = props;
@@ -55,6 +71,13 @@ const ProcessJudge = (props) => {
     setOpen(false);
   };
 
+  const printPdf = () => {
+    alert('적용예정');
+    // ReactPDF.render(<BasicDocument />, `${__dirname}/example.pdf`);
+    // ReactPDF.renderToStream(<BasicDocument />);
+    // ReactPDF.PDFViewer(<BasicDocument />);
+  };
+
   useEffect(() => {
     pageRef.current = 0;
     totalPageRef.current = rowDatas.length - 1;
@@ -113,7 +136,7 @@ const ProcessJudge = (props) => {
         <Grid item xs={5.5}>
           <Grid container spacing={1}>
             <Grid item xs={12}>
-              <h1>진행중...</h1>
+              <BasicDocument />
             </Grid>
           </Grid>
         </Grid>
@@ -198,6 +221,11 @@ const ProcessJudge = (props) => {
             심의처리
           </Button>
         </Grid>
+        <Grid item>
+          <Button variant="contained" color="primary" size="small" onClick={printPdf}>
+            PDF
+          </Button>
+        </Grid>
         <Grid item>
           <Button variant="contained" color="primary" size="small" onClick={handleClose}>
             닫기