From ed10d9bf2ab1af189cb1ed87e36239a5a10eb4be Mon Sep 17 00:00:00 2001
From: minuk926 <minuk926@gmail.com>
Date: Mon, 9 May 2022 18:41:48 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=8B=AC=EC=82=AC=EC=9E=90=20=EC=8B=AC?=
 =?UTF-8?q?=EC=82=AC=ED=99=94=EB=A9=B4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/judge.js                             |  16 +-
 src/views/biz/judge/ProcessJudge.jsx          | 100 ++++------
 src/views/biz/judge/ProcessParkingJudge.jsx   | 181 +++++++++---------
 src/views/cmm/ImgItem.js                      |  39 ++++
 .../auth-forms/AuthForgotPassword.js          |   2 +-
 .../authentication/auth-forms/AuthRegister.js |   4 +-
 6 files changed, 174 insertions(+), 168 deletions(-)
 create mode 100644 src/views/cmm/ImgItem.js

diff --git a/src/apis/judge.js b/src/apis/judge.js
index 1cc4243..faf64a1 100644
--- a/src/apis/judge.js
+++ b/src/apis/judge.js
@@ -179,14 +179,14 @@ async function judgeImgList(res, scCode, fieldCnt, fieldName, dataGb, methodName
       // eslint-disable-next-line no-await-in-loop
       await judgeImgDownload({ scDatagb: dataGb, scCode, methodName: `${methodName}${idx}` }, alert).then((r) => {
         if (r.size > 0) {
-          arrRtn.push(URL.createObjectURL(r));
+          arrRtn.push({ imgName: res?.data[`${fieldName}${idx}`], url: URL.createObjectURL(r) });
         } else {
-          arrRtn.push('/images/noFile.png');
+          arrRtn.push({ imgName: res?.data[`${fieldName}${idx}`], url: '/images/noFile.png' });
         }
         // else
       }); // .then((r) => {
     } else {
-      arrRtn.push('/images/noImage.png');
+      arrRtn.push({ imgName: '', url: '/images/noImage.png' });
     }
   }
   return arrRtn;
@@ -198,16 +198,16 @@ export async function findImages(row, alert) {
 
   const res = await findJudge(scCode);
   if (res.success) {
-    const [picadImgs, frecadImgs, contadImgs] = await Promise.all([
-      judgeImgList(res, scCode, 5, 'scPicad', dataGb, 'getScPicad', alert),
+    const [frecadImgs, contadImgs, picadImgs] = await Promise.all([
       judgeImgList(res, scCode, 5, 'scFrecad', dataGb, 'getScFrecad', alert),
-      judgeImgList(res, scCode, 9, 'scContad', dataGb, 'getScContad', alert)
+      judgeImgList(res, scCode, 9, 'scContad', dataGb, 'getScContad', alert),
+      judgeImgList(res, scCode, 5, 'scPicad', dataGb, 'getScPicad', alert)
     ]);
 
     return {
-      arrPicadImg: picadImgs,
       arrFrecadImg: frecadImgs,
-      arrContadImg: contadImgs
+      arrContadImg: contadImgs,
+      arrPicadImg: picadImgs
     };
   }
   return res;
diff --git a/src/views/biz/judge/ProcessJudge.jsx b/src/views/biz/judge/ProcessJudge.jsx
index 1849cd8..56ca859 100644
--- a/src/views/biz/judge/ProcessJudge.jsx
+++ b/src/views/biz/judge/ProcessJudge.jsx
@@ -1,43 +1,29 @@
 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 { Button, Divider, FormControl, Grid, ImageList, 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
-  }
-});
+import ImgItem from '../../cmm/ImgItem';
 
 const ProcessJudge = (props) => {
   const { rowDatas, setOpen, showAlert } = props;
   const pageRef = useRef(0);
   const totalPageRef = useRef(0);
   const curDataRef = useRef({});
-  const [picadImgs, setPicadImgs] = useState([]);
   const [frecadImgs, setFrecadImgs] = useState([]);
   const [contadImgs, setContadImgs] = useState([]);
+  const [picadImgs, setPicadImgs] = useState([]);
   const [reason, setReason] = useState();
   const [selectedResult, setSelectedResult] = useState();
+  const [selectedImg, setSelectedImg] = useState({});
 
   const getImgList = (row) => {
     findImages(row, showAlert).then((res) => {
-      const { arrPicadImg, arrFrecadImg, arrContadImg } = res;
-      setPicadImgs(arrPicadImg);
+      const { arrFrecadImg, arrContadImg, arrPicadImg } = res;
       setFrecadImgs(arrFrecadImg);
       setContadImgs(arrContadImg);
+      setPicadImgs(arrPicadImg);
     });
   };
 
@@ -71,11 +57,13 @@ const ProcessJudge = (props) => {
     setOpen(false);
   };
 
-  const printPdf = () => {
-    alert('적용예정');
-    // ReactPDF.render(<BasicDocument />, `${__dirname}/example.pdf`);
-    // ReactPDF.renderToStream(<BasicDocument />);
-    // ReactPDF.PDFViewer(<BasicDocument />);
+  const viewImage = (imgInfo) => () => {
+    if (imgInfo.url === '/images/noFile.png') {
+      showAlert.show(`업로드 파일[${imgInfo.imgName}]을 찾을수 없습니다`);
+    } else {
+      setSelectedImg(imgInfo);
+    }
+    // viewImages(imgName, url);
   };
 
   useEffect(() => {
@@ -91,52 +79,33 @@ const ProcessJudge = (props) => {
     <>
       <Grid container spacing={1}>
         <Grid item xs={6.5}>
-          <Grid container spacing={1}>
-            {picadImgs?.map((img, idx) => (
-              <Grid item xs={3} key={idx}>
-                <CardMedia
-                  component="img"
-                  sx={{
-                    height: 150
-                  }}
-                  src={img}
-                />
-              </Grid>
-            ))}
-          </Grid>
-          <Grid container m={1} />
-          <Grid container spacing={1}>
+          <ImageList cols={4}>
             {frecadImgs?.map((img, idx) => (
-              <Grid item xs={3} key={idx}>
-                <CardMedia
-                  component="img"
-                  sx={{
-                    height: 150
-                  }}
-                  src={img}
-                />
-              </Grid>
+              <ImgItem idx={idx} title={`진술서${idx + 1}`} imgInfo={img} onViewImage={viewImage} />
             ))}
-          </Grid>
-          <Grid container m={1} />
-          <Grid container spacing={1}>
+          </ImageList>
+          <ImageList cols={4}>
             {contadImgs?.map((img, idx) => (
-              <Grid item xs={3} key={idx}>
-                <CardMedia
-                  component="img"
-                  sx={{
-                    height: 150
-                  }}
-                  src={img}
-                />
-              </Grid>
+              <ImgItem idx={idx} title={`첨부파일${idx + 1}`} imgInfo={img} onViewImage={viewImage} />
             ))}
-          </Grid>
+          </ImageList>
+          <ImageList cols={4}>
+            {picadImgs?.map((img, idx) => (
+              <ImgItem idx={idx} title={`단속사진${idx + 1}`} imgInfo={img} onViewImage={viewImage} />
+            ))}
+          </ImageList>
         </Grid>
         <Grid item xs={5.5}>
           <Grid container spacing={1}>
             <Grid item xs={12}>
-              <BasicDocument />
+              {selectedImg && (
+                <img
+                  src={selectedImg.url}
+                  srcSet={`${selectedImg.url}?w=400&h=400&fit=crop&auto=format&dpr=2 2x`}
+                  alt={selectedImg.imgName}
+                  loading="lazy"
+                />
+              )}
             </Grid>
           </Grid>
         </Grid>
@@ -221,11 +190,6 @@ 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}>
             닫기
diff --git a/src/views/biz/judge/ProcessParkingJudge.jsx b/src/views/biz/judge/ProcessParkingJudge.jsx
index bf15f26..0f9487e 100644
--- a/src/views/biz/judge/ProcessParkingJudge.jsx
+++ b/src/views/biz/judge/ProcessParkingJudge.jsx
@@ -1,9 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, CardMedia, Divider, FormControl, Grid, InputLabel, MenuItem, Select, TextField } from '@mui/material';
+import { Button, CardMedia, Divider, FormControl, Grid, ImageList, InputLabel, MenuItem, Select, TextField } from '@mui/material';
 import { findImages, saveJudgeResult } from 'apis/judge';
 import { SkipNext, SkipPrevious, Save } from '@mui/icons-material';
+import ImgItem from '../../cmm/ImgItem';
 
 const ProcessParkingJudge = (props) => {
   const { rowDatas, setOpen, showAlert } = props;
@@ -15,13 +16,14 @@ const ProcessParkingJudge = (props) => {
   const [contadImgs, setContadImgs] = useState([]);
   const [reason, setReason] = useState();
   const [selectedResult, setSelectedResult] = useState();
+  const [selectedImg, setSelectedImg] = useState({});
 
   const getImgList = (row) => {
     findImages(row, showAlert).then((res) => {
-      const { arrPicadImg, arrFrecadImg, arrContadImg } = res;
-      setPicadImgs(arrPicadImg);
+      const { arrFrecadImg, arrContadImg, arrPicadImg } = res;
       setFrecadImgs(arrFrecadImg);
       setContadImgs(arrContadImg);
+      setPicadImgs(arrPicadImg);
     });
   };
 
@@ -55,6 +57,15 @@ const ProcessParkingJudge = (props) => {
     setOpen(false);
   };
 
+  const viewImage = (imgInfo) => () => {
+    if (imgInfo.url === '/images/noFile.png') {
+      showAlert.show(`업로드 파일[${imgInfo.imgName}]을 찾을수 없습니다`);
+    } else {
+      setSelectedImg(imgInfo);
+    }
+    // viewImages(imgName, url);
+  };
+
   useEffect(() => {
     pageRef.current = 0;
     totalPageRef.current = rowDatas.length - 1;
@@ -67,97 +78,89 @@ const ProcessParkingJudge = (props) => {
   return (
     <>
       <Grid container spacing={1}>
-        {picadImgs?.map((img, idx) => (
-          <Grid item xs={3} key={idx}>
-            <CardMedia
-              component="img"
-              sx={{
-                height: 150
-              }}
-              src={img}
-            />
-          </Grid>
-        ))}
-      </Grid>
-      <Grid container m={1} />
-      <Grid container spacing={1}>
-        {frecadImgs?.map((img, idx) => (
-          <Grid item xs={3} key={idx}>
-            <CardMedia
-              component="img"
-              sx={{
-                height: 150
-              }}
-              src={img}
-            />
-          </Grid>
-        ))}
-      </Grid>
-      <Grid container m={1} />
-      <Grid container spacing={1}>
-        {contadImgs?.map((img, idx) => (
-          <Grid item xs={3} key={idx}>
-            <CardMedia
-              component="img"
-              sx={{
-                height: 150
-              }}
-              src={img}
-            />
-          </Grid>
-        ))}
-      </Grid>
-      <Grid container m={1}>
-        <Grid item xs={12}>
-          <Divider />
+        <Grid item xs={6.5}>
+          <ImageList cols={4}>
+            {frecadImgs?.map((img, idx) => (
+              <ImgItem idx={idx} title={`진술서${idx + 1}`} imgInfo={img} onViewImage={viewImage} />
+            ))}
+          </ImageList>
+          <ImageList cols={4}>
+            {contadImgs?.map((img, idx) => (
+              <ImgItem idx={idx} title={`첨부파일${idx + 1}`} imgInfo={img} onViewImage={viewImage} />
+            ))}
+          </ImageList>
+          <ImageList cols={4}>
+            {picadImgs?.map((img, idx) => (
+              <ImgItem idx={idx} title={`단속사진${idx + 1}`} imgInfo={img} onViewImage={viewImage} />
+            ))}
+          </ImageList>
         </Grid>
-      </Grid>
-      <Grid container spacing={1} mt={1}>
-        <Grid item xs={2}>
-          <TextField size="small" required disabled label="접수번호" fullWidth value={rowDatas[pageRef.current].msSeq} />
+        <Grid item xs={5.5}>
+          <Grid container spacing={1}>
+            <Grid item xs={12}>
+              {selectedImg && (
+                <img
+                  src={selectedImg.url}
+                  srcSet={`${selectedImg.url}?w=400&h=400&fit=crop&auto=format&dpr=2 2x`}
+                  alt={selectedImg.imgName}
+                  loading="lazy"
+                />
+              )}
+            </Grid>
+          </Grid>
         </Grid>
-        <Grid item xs={2}>
-          <TextField size="small" required disabled label="위반일자" fullWidth value={rowDatas[pageRef.current].scWdate} />
+        <Grid container m={1}>
+          <Grid item xs={12}>
+            <Divider />
+          </Grid>
         </Grid>
-        <Grid item xs={6}>
-          <TextField size="small" required disabled label="위반장소" fullWidth value={rowDatas[pageRef.current].scPos} />
+        <Grid container spacing={1} mt={1}>
+          <Grid item xs={2}>
+            <TextField size="small" required disabled label="접수번호" fullWidth value={rowDatas[pageRef.current].msSeq} />
+          </Grid>
+          <Grid item xs={2}>
+            <TextField size="small" required disabled label="위반일자" fullWidth value={rowDatas[pageRef.current].scWdate} />
+          </Grid>
+          <Grid item xs={6}>
+            <TextField size="small" required disabled label="위반장소" fullWidth value={rowDatas[pageRef.current].scPos} />
+          </Grid>
+          <Grid item xs={2}>
+            <FormControl fullWidth>
+              <InputLabel disabled required>
+                심의결정
+              </InputLabel>
+              <Select
+                size="small"
+                defaultValue={selectedResult || '1'}
+                value={selectedResult || '1'}
+                onChange={(e) => setSelectedResult(e?.target?.value)}
+              >
+                <MenuItem key="0" value="0">
+                  심의전
+                </MenuItem>
+                <MenuItem key="1" value="1">
+                  수용
+                </MenuItem>
+                <MenuItem key="2" value="2">
+                  미수용
+                </MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
         </Grid>
-        <Grid item xs={2}>
-          <FormControl fullWidth>
-            <InputLabel disabled required>
-              심의결정
-            </InputLabel>
-            <Select
+        <Grid container spacing={1} mt={1}>
+          <Grid item xs={12}>
+            <TextField
               size="small"
-              defaultValue={selectedResult || '1'}
-              value={selectedResult || '1'}
-              onChange={(e) => setSelectedResult(e?.target?.value)}
-            >
-              <MenuItem key="0" value="0">
-                심의전
-              </MenuItem>
-              <MenuItem key="1" value="1">
-                수용
-              </MenuItem>
-              <MenuItem key="2" value="2">
-                미수용
-              </MenuItem>
-            </Select>
-          </FormControl>
-        </Grid>
-      </Grid>
-      <Grid container spacing={1} mt={1}>
-        <Grid item xs={12}>
-          <TextField
-            size="small"
-            multiline
-            rows={2}
-            required
-            label="결정사유"
-            fullWidth
-            value={reason}
-            onChange={(e) => setReason(e.target.value)}
-          />
+              multiline
+              rows={2}
+              required
+              label="결정사유"
+              fullWidth
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+            />
+          </Grid>
         </Grid>
       </Grid>
       <Grid container spacing={1} m={0.5}>
diff --git a/src/views/cmm/ImgItem.js b/src/views/cmm/ImgItem.js
new file mode 100644
index 0000000..9a55f27
--- /dev/null
+++ b/src/views/cmm/ImgItem.js
@@ -0,0 +1,39 @@
+import { IconButton, ImageListItem, ImageListItemBar } from '@mui/material';
+import { Info } from '@mui/icons-material';
+import PropTypes from 'prop-types';
+
+const ImgItem = ({ idx, title, imgInfo, onViewImage }) => (
+  <ImageListItem key={idx}>
+    <img
+      src={imgInfo.url}
+      // srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+      alt={imgInfo.imgName}
+      loading="lazy"
+    />
+    {imgInfo.imgName && (
+      <ImageListItemBar
+        title={title}
+        subtitle={imgInfo.imgName}
+        actionIcon={
+          <IconButton
+            sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
+            aria-label={`info about ${imgInfo.imgName}`}
+            onClick={onViewImage(imgInfo)}
+          >
+            <Info />
+          </IconButton>
+        }
+      />
+    )}
+    {!imgInfo.imgName && <ImageListItemBar title={title} />}
+  </ImageListItem>
+);
+
+ImgItem.propTypes = {
+  idx: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  imgInfo: PropTypes.object.isRequired,
+  onViewImage: PropTypes.func.isRequired
+};
+
+export default ImgItem;
diff --git a/src/views/pages/authentication/auth-forms/AuthForgotPassword.js b/src/views/pages/authentication/auth-forms/AuthForgotPassword.js
index a67c84d..377f763 100755
--- a/src/views/pages/authentication/auth-forms/AuthForgotPassword.js
+++ b/src/views/pages/authentication/auth-forms/AuthForgotPassword.js
@@ -73,7 +73,7 @@ const AuthForgotPassword = ({ ...others }) => {
             <OutlinedInput
               id="outlined-adornment-email-forgot"
               type="email"
-              value={values.email}
+              value={values.email || ''}
               name="email"
               onBlur={handleBlur}
               onChange={handleChange}
diff --git a/src/views/pages/authentication/auth-forms/AuthRegister.js b/src/views/pages/authentication/auth-forms/AuthRegister.js
index 3d0b6ee..da85a4b 100755
--- a/src/views/pages/authentication/auth-forms/AuthRegister.js
+++ b/src/views/pages/authentication/auth-forms/AuthRegister.js
@@ -199,7 +199,7 @@ const FirebaseRegister = ({ ...others }) => {
               <OutlinedInput
                 id="outlined-adornment-email-register"
                 type="email"
-                value={values.email}
+                value={values.email || ''}
                 name="email"
                 onBlur={handleBlur}
                 onChange={handleChange}
@@ -217,7 +217,7 @@ const FirebaseRegister = ({ ...others }) => {
               <OutlinedInput
                 id="outlined-adornment-password-register"
                 type={showPassword ? 'text' : 'password'}
-                value={values.password}
+                value={values.password || ''}
                 name="password"
                 label="Password"
                 onBlur={handleBlur}