diff --git a/package.json b/package.json index 24e9c10..008ea42 100755 --- a/package.json +++ b/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", diff --git a/src/views/biz/judge/BasicDocument.jsx b/src/views/biz/judge/BasicDocument.jsx new file mode 100644 index 0000000..899af86 --- /dev/null +++ b/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 ( + + {/* Start of the document */} + + {/* render a single page */} + + + Hello + + + World + + + + + ); +} +export default BasicDocument; diff --git a/src/views/biz/judge/ProcessJudge.jsx b/src/views/biz/judge/ProcessJudge.jsx index 779f442..1849cd8 100644 --- a/src/views/biz/judge/ProcessJudge.jsx +++ b/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(, `${__dirname}/example.pdf`); + // ReactPDF.renderToStream(); + // ReactPDF.PDFViewer(); + }; + useEffect(() => { pageRef.current = 0; totalPageRef.current = rowDatas.length - 1; @@ -113,7 +136,7 @@ const ProcessJudge = (props) => { -

진행중...

+
@@ -198,6 +221,11 @@ const ProcessJudge = (props) => { 심의처리 + + +