fix: image view 적용중

src/apis/judge.js

@@ -169,7 +169,7 @@ export async function findByUserJudges(params) {
 }
 
 // eslint-disable-next-line consistent-return
-async function judgeImgDownload(params, alert) {
+export async function judgeImgDownload(params) {
   // const res = await
   // eslint-disable-next-line no-return-await
   return await axios.get(GET_JUDGE_FILE_DOWNLOAD, {
@@ -178,13 +178,13 @@ async function judgeImgDownload(params, alert) {
   });
 }
 
-async function judgeImgList(res, scCode, fieldCnt, fieldName, dataGb, methodName, alert) {
+async function judgeImgList(res, scCode, fieldCnt, fieldName, dataGb, methodName) {
   const arrRtn = [];
   // eslint-disable-next-line no-restricted-syntax
   for (const idx of _.range(1, fieldCnt, 1)) {
     if (res?.data[`${fieldName}${idx}`]) {
       // eslint-disable-next-line no-await-in-loop
-      await judgeImgDownload({ scDatagb: dataGb, scCode, methodName: `${methodName}${idx}` }, alert).then((r) => {
+      await judgeImgDownload({ scDatagb: dataGb, scCode, methodName: `${methodName}${idx}` }).then((r) => {
         if (r.size > 0) {
           arrRtn.push({ imgName: res?.data[`${fieldName}${idx}`], url: URL.createObjectURL(r) });
         } else {
@@ -199,16 +199,16 @@ async function judgeImgList(res, scCode, fieldCnt, fieldName, dataGb, methodName
   return arrRtn;
 }
 
-export async function findImages(row, alert) {
+export async function findImages(row) {
   const dataGb = row?.msDatagb;
   const scCode = row?.msMaincode;
 
   const res = await findJudge(scCode);
   if (res.success) {
     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, 5, 'scPicad', dataGb, 'getScPicad', alert)
+      judgeImgList(res, scCode, 5, 'scFrecad', dataGb, 'getScFrecad'),
+      judgeImgList(res, scCode, 9, 'scContad', dataGb, 'getScContad'),
+      judgeImgList(res, scCode, 5, 'scPicad', dataGb, 'getScPicad')
     ]);
 
     return {

src/views/biz/admin/judge/JudgeDataDetailForm.jsx

@@ -9,14 +9,19 @@ import { Grid, TextField, MenuItem, Select, FormControl, InputLabel, Divider } f
 import Button from '@mui/material/Button';
 import { Delete, List } from '@mui/icons-material';
 
-import { judgeFileDownload } from 'apis/judge';
+import { judgeFileDownload, judgeImgDownload } from 'apis/judge';
 import ImageFileViewForm from '../../../cmm/file-ctl/ImageFileViewForm';
+import CmmImgViewModal from '../../../cmm/CmmImgViewModal';
 
 const ModifyJudgeDataForm = ({ rowData, contDocs, ingbs, setOpen, handleModalSave, onModify }) => {
   const showAlert = useAlert();
 
   const [selectedContDoc, setSelectedContDoc] = useState(rowData?.scContDoc);
   const [selectedIngb, setSelectedIngb] = useState(rowData?.scIngb);
+  const [childOpen, setChildOpen] = useState(false);
+  const [childTitle, setChildTitle] = useState();
+  const [imgUrl, setImgUrl] = useState();
+  const [imgName, setImgName] = useState();
 
   const onList = () => {
     setOpen(false);
@@ -30,15 +35,18 @@ const ModifyJudgeDataForm = ({ rowData, contDocs, ingbs, setOpen, handleModalSav
     }
   };
 
-  const viewImg = (methodName) => {
-    judgeFileDownload(
-      {
+  const viewImg = async (methodName) => {
+    // judgeFileDownload(
+    const res = await judgeImgDownload({
       scDatagb: rowData.scDatagb,
       scCode: rowData.scCode,
       methodName
-      },
-      showAlert
-    );
+    });
+    console.log(res);
+    setChildTitle('ddd');
+    setChildOpen(true);
+    setImgUrl(res);
+    setImgName('dddd');
   };
 
   return (
@@ -156,7 +164,7 @@ const ModifyJudgeDataForm = ({ rowData, contDocs, ingbs, setOpen, handleModalSav
               required
               label="위반장소"
               fullWidth
-              value={rowData?.scPos}
+              value={rowData?.scPos || ''}
             />
           </Grid>
         </Grid>
@@ -231,6 +239,7 @@ const ModifyJudgeDataForm = ({ rowData, contDocs, ingbs, setOpen, handleModalSav
           </Button>
         </Grid>
       </Grid>
+      <CmmImgViewModal isBackdrop title={childTitle} open={childOpen} setOpen={setChildOpen} imgUrl={imgUrl} imgName={imgName} />
     </>
   );
 };

src/views/biz/judge/ProcessJudge.jsx

@@ -19,7 +19,7 @@ const ProcessJudge = (props) => {
   const [selectedImg, setSelectedImg] = useState({});
 
   const getImgList = (row) => {
-    findImages(row, showAlert).then((res) => {
+    findImages(row).then((res) => {
       const { arrFrecadImg, arrContadImg, arrPicadImg } = res;
       setFrecadImgs(arrFrecadImg);
       setContadImgs(arrContadImg);

src/views/biz/judge/ProcessParkingJudge.jsx

@@ -19,7 +19,7 @@ const ProcessParkingJudge = (props) => {
   const [selectedImg, setSelectedImg] = useState({});
 
   const getImgList = (row) => {
-    findImages(row, showAlert).then((res) => {
+    findImages(row).then((res) => {
       const { arrFrecadImg, arrContadImg, arrPicadImg } = res;
       setFrecadImgs(arrFrecadImg);
       setContadImgs(arrContadImg);

src/views/cmm/CmmImgViewModal.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+
+import Modal from '@mui/material/Modal';
+import { Grid, IconButton } from '@mui/material';
+import CloseOutlined from '@mui/icons-material/CloseOutlined';
+import MainCard from 'ui-component/cards/MainCard';
+
+const style = {
+  position: 'relative',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 1050,
+  minHeight: 500,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 3
+};
+
+const CmmImgViewModal = ({ isBackdrop = false, open, setOpen, title, imgUrl, imgName }) => {
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div className="modalGroup">
+      {/* <Button onClick={handleOpen}>Grid Modal(List)</Button> */}
+      <Modal hideBackdrop={isBackdrop} open={open} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
+        <MainCard
+          sx={style}
+          title={title}
+          content
+          secondary={
+            <IconButton size="small" variant="rounded" onClick={handleClose}>
+              <CloseOutlined fontSize="small" />
+            </IconButton>
+          }
+        >
+          <Grid container spacing={1}>
+            <Grid item xs={12}>
+              <img src={imgUrl} srcSet={`${imgUrl}?w=400&h=400&fit=crop&auto=format&dpr=2 2x`} alt={imgName} loading="lazy" />
+            </Grid>
+          </Grid>
+        </MainCard>
+      </Modal>
+    </div>
+  );
+};
+
+CmmImgViewModal.propTypes = {
+  isBackdrop: PropTypes.bool,
+  open: PropTypes.bool,
+  setOpen: PropTypes.func,
+  title: PropTypes.string,
+  imgUrl: PropTypes.object,
+  imgName: PropTypes.string
+};
+
+export default CmmImgViewModal;