fix: 주정차 위반 심의등록 날짜 기능 추가 및 심의 처리 시 로딩바 표시되도록 적용

package-lock.json

@@ -79,6 +79,7 @@
         "react-router-dom": "^6.2.1",
         "react-scripts": "^4.0.3",
         "react-slick": "^0.28.1",
+        "react-spinners": "^0.13.8",
         "react-syntax-highlighter": "^15.4.5",
         "react-timer-hook": "^3.0.5",
         "react-to-print": "^2.14.4",
@@ -21456,6 +21457,15 @@
         "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -44239,6 +44249,12 @@
         "resize-observer-polyfill": "^1.5.0"
       }
     },
+    "react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "requires": {}
+    },
     "react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",

package.json

@@ -75,6 +75,7 @@
     "react-router-dom": "^6.2.1",
     "react-scripts": "^4.0.3",
     "react-slick": "^0.28.1",
+    "react-spinners": "^0.13.8",
     "react-syntax-highlighter": "^15.4.5",
     "react-timer-hook": "^3.0.5",
     "react-to-print": "^2.14.4",

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

@@ -9,6 +9,7 @@ import Button from '@mui/material/Button';
 import combo from 'commons/combo_data';
 import { useState } from 'react';
 import { saveJudgeStds } from 'apis/judge';
+import Loading from 'views/cmm/Loding';
 
 const style = {
   position: 'relative',
@@ -25,12 +26,14 @@ const style = {
 
 const CmmModal = ({ isBackdrop = false, open, setOpen, title, judgeData = () => {}, dataGb, showAlert, callback }) => {
   const [judgeStd, setJudgeStd] = useState('1');
+  const [loading, setLoading] = useState(false);
   const handleClose = () => {
     setOpen(false);
   };
 
   const handleJudge = () => {
     if (window.confirm(`${judgeStd}명[부과] 기준으로 ${judgeData.length}건 심사 처리 하시겠습니까?`)) {
+      setLoading(true);
       const param = {
         dataGb,
         judgeStdCnt: judgeStd,
@@ -38,6 +41,7 @@ const CmmModal = ({ isBackdrop = false, open, setOpen, title, judgeData = () =>
       };
 
       saveJudgeStds(param).then((res) => {
+        setLoading(false);
         if (res?.success) {
           showAlert.show(`${judgeData.length}건 처리되었습니다`);
           setOpen(false);
@@ -87,6 +91,7 @@ const CmmModal = ({ isBackdrop = false, open, setOpen, title, judgeData = () =>
               </Button>
             </Grid>
           </Grid>
+          {loading && <Loading />}
         </MainCard>
       </Modal>
     </div>

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

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import NumberFormat from 'react-number-format';
 import format from 'date-fns/format';
 
-import { Grid, TextField, MenuItem, Select, FormControl, InputLabel, Divider } from '@mui/material';
+import { Grid, TextField, MenuItem, Select, FormControl, InputLabel } from '@mui/material';
 import Button from '@mui/material/Button';
 import PropTypes from 'prop-types';
 import { IconFileExport } from '@tabler/icons';
@@ -93,7 +93,7 @@ const JudgeTargetSaveForm = ({ handleModalSave }) => {
             label="심의차수"
             format="######"
             fullWidth
-            value={msChasu || ''}
+            value={msChasu}
             onValueChange={(values) => setMsChasu(values.value)}
           />
         </Grid>
@@ -114,11 +114,6 @@ const JudgeTargetSaveForm = ({ handleModalSave }) => {
           <MuiXMobileTimePicker label="심사 마감시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msClosesi}:00`} setDate={setMsClosesi} />
         </Grid>
       </Grid>
-      <Grid container spacing={1} item xs={12} mt={1}>
-        <Grid item xs={12}>
-          <Divider />
-        </Grid>
-      </Grid>
       <Grid item container spacing={0.5} xs={12} mt={1}>
         <Grid item style={{ marginLeft: 'auto' }}>
           <Button variant="contained" color="primary" size="small" startIcon={<IconFileExport />} onClick={onSave}>

src/views/biz/admin/parking/ParkingRegister.jsx

@@ -14,16 +14,29 @@ import MainCard from 'ui-component/cards/MainCard';
 import MuiDataGrid from 'views/cmm/mui-grid/MuiDataGrid';
 
 import xitCmm, { ErrorToast, saveAlert } from 'commons/XitCmm';
-import CmmModal from 'views/cmm/CmmModal';
 import SaveParkingTargetForm from './SaveParkingTargetForm';
 import NumberFormat from 'react-number-format';
 import ExcelDownloadGrid from 'views/cmm/file-ctl/ExcelDownloadGrid';
 import { findParkingJudgeTargets, saveParkingJudgeTargets } from 'apis/parking';
 import getYear from 'date-fns/getYear';
 import { useAlert } from 'react-alert';
+import CmmModalStyle from 'views/cmm/CmmModalStyle';
 
 const year = getYear(new Date()).toString();
 
+const style = {
+  position: 'relative',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 500,
+  minHeight: 300,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 3
+};
+
 const ParkingRegister = () => {
   const showAlert = useAlert();
   const [rcIrTransfer, setRcIrTransfer] = useState('1');
@@ -227,9 +240,9 @@ const ParkingRegister = () => {
         handleSelection={handleSelection}
         selectionModel={selectionModel}
       />
-      <CmmModal isBackdrop title="심의등록" open={open} setOpen={setOpen}>
+      <CmmModalStyle isBackdrop title="심의등록" open={open} setOpen={setOpen} style={style}>
         <SaveParkingTargetForm isDisabled={selectionModel.length === 0} handleModalSave={submitParkingTargets} />
-      </CmmModal>
+      </CmmModalStyle>
     </MainCard>
   );
 };

src/views/biz/admin/parking/SaveParkingTargetForm.jsx

@@ -2,31 +2,27 @@ import { useState } from 'react';
 
 import NumberFormat from 'react-number-format';
 import format from 'date-fns/format';
-import getHours from 'date-fns/getHours';
-import koLocale from 'date-fns/locale/ko';
 
 import { Grid, TextField, MenuItem, Select, FormControl, InputLabel } from '@mui/material';
-import DateAdapter from '@mui/lab/AdapterDateFns';
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
-import { DatePicker, TimePicker } from '@mui/lab';
 import Button from '@mui/material/Button';
 import PropTypes from 'prop-types';
 import { IconFileExport } from '@tabler/icons';
 
 import combo from 'commons/combo_data';
 import { useAlert } from 'react-alert';
+import { MuiXDatePicker, MuiXMobileTimePicker } from 'views/cmm/MuiXDatePicker';
 
 const toDate = new Date();
 
 const SaveParkingTargetForm = ({ handleModalSave }) => {
   const showAlert = useAlert();
   const [msuTeam, setMsuTeam] = useState(' ');
+  const [msChasu, setMsChasu] = useState();
   const [msSdate, setMsSdate] = useState(format(toDate, 'yyyy-MM-dd'));
-  const [msStartsi, setMsStartsi] = useState(`${format(toDate, 'yyyy-MM-dd')} 09:00`);
+  const [msStartsi, setMsStartsi] = useState('00');
   const [msEdate, setMsEdate] = useState(format(toDate, 'yyyy-MM-dd'));
-  const [msChasu, setMsChasu] = useState();
   const [msCdate, setMsCdate] = useState(format(toDate, 'yyyy-MM-dd'));
-  const [msClosesi, setMsClosesi] = useState(`${format(toDate, 'yyyy-MM-dd')} 18:00`);
+  const [msClosesi, setMsClosesi] = useState('23');
 
   const onSave = () => {
     if (!msuTeam || msuTeam.length < 3) {
@@ -44,78 +40,39 @@ const SaveParkingTargetForm = ({ handleModalSave }) => {
       return;
     }
 
-    if (msEdate.toString() > msCdate.toString()) {
+    if (msEdate.replace(/-/g, '') > msCdate.replace(/-/g, '')) {
-      showAlert.show('심의종료일과 심의마감일을 확인해 주세요');
+      showAlert.show('심사 종료일자가 심사 마감일자보다 클 수 없습니다.');
+      return;
+    }
+
+    if (msStartsi.length < 2) {
+      showAlert.show('심사 시작시간은 필수입니다.');
+      return;
+    }
+
+    if (msClosesi.length < 2) {
+      showAlert.show('심사 마감시간은 필수입니다.');
       return;
     }
 
     handleModalSave({
       msuTeam,
+      msChasu,
       msSdate,
-      msStartsi: getHours(new Date(msStartsi)),
+      msStartsi,
       msEdate,
-      msChasu,
       msCdate,
-      msClosesi: getHours(new Date(msClosesi))
+      msClosesi
     });
   };
 
   return (
     <>
       <Grid container spacing={2} mt={1.5}>
-        <Grid item xs={12} sm={4}>
+        <Grid item xs={12} sm={6}>
-          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
-            <DatePicker
-              // size="small"
-              renderInput={(props) => <TextField fullWidth {...props} />}
-              label="심의시작일"
-              value={msSdate}
-              inputFormat="yyyy-MM-dd"
-              mask="____-__-__"
-              onChange={(newValue) => {
-                setMsSdate(format(newValue, 'yyyy-MM-dd'));
-              }}
-            />
-          </LocalizationProvider>
-          {/* <MuiDatePicker label="심의시작일" date={msSdate} setDate={setMsSdate()} /> */}
-        </Grid>
-        <Grid item xs={12} sm={4}>
-          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
-            <TimePicker
-              size="small"
-              views={['hours']}
-              renderInput={(props) => <TextField fullWidth {...props} />}
-              label="심의시작시간"
-              value={msStartsi}
-              inputFormat="HH"
-              mask="__"
-              onChange={(newValue) => {
-                // setMsStartsi(format(newValue, 'HH'));
-                setMsStartsi(newValue);
-              }}
-            />
-          </LocalizationProvider>
-          {/* <MuiTimePicker label="심의시작시간" date={msStartsi} setDate={setMsStartsi()} /> */}
-        </Grid>
-        <Grid item xs={12} sm={4}>
-          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
-            <DatePicker
-              size="small"
-              renderInput={(props) => <TextField fullWidth {...props} />}
-              label="심의종료일"
-              value={msEdate}
-              inputFormat="yyyy-MM-dd"
-              mask="____-__-__"
-              onChange={(newValue) => {
-                setMsEdate(format(newValue, 'yyyy-MM-dd'));
-              }}
-            />
-          </LocalizationProvider>
-        </Grid>
-        <Grid item xs={12} sm={2}>
           <FormControl fullWidth>
             <InputLabel required>심의팀</InputLabel>
-            <Select name="reviewYear" defaultValue={msuTeam} onChange={(e) => setMsuTeam(e.target.value)}>
+            <Select defaultValue={msuTeam} onChange={(e) => setMsuTeam(e.target.value)}>
               <MenuItem key={0} value=" ">
                 팀선택
               </MenuItem>
@@ -127,7 +84,7 @@ const SaveParkingTargetForm = ({ handleModalSave }) => {
             </Select>
           </FormControl>
         </Grid>
-        <Grid item xs={12} sm={2}>
+        <Grid item xs={12} sm={6}>
           <NumberFormat
             customInput={TextField}
             required
@@ -140,45 +97,21 @@ const SaveParkingTargetForm = ({ handleModalSave }) => {
             onValueChange={(values) => setMsChasu(values.value)}
           />
         </Grid>
-        <Grid item xs={12} sm={4}>
+        <Grid item xs={12} sm={6}>
-          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
+          <MuiXDatePicker label="심사 시작일자" date={msSdate} setDate={setMsSdate} />
-            <DatePicker
+        </Grid>
-              size="small"
+        <Grid item xs={12} sm={6}>
-              renderInput={(props) => <TextField fullWidth {...props} />}
+          <MuiXMobileTimePicker label="심사 시작시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msStartsi}:00`} setDate={setMsStartsi} />
-              label="심의마감일"
+        </Grid>
-              value={msCdate}
+        <Grid item xs={12} sm={6}>
-              inputFormat="yyyy-MM-dd"
+          <MuiXDatePicker label="심사 종료일자" date={msEdate} setDate={setMsEdate} />
-              mask="____-__-__"
+        </Grid>
-              onChange={(newValue) => {
+        <Grid item xs={12} sm={6} />
-                setMsCdate(format(newValue, 'yyyy-MM-dd'));
+        <Grid item xs={12} sm={6}>
-              }}
+          <MuiXDatePicker label="심사 마감일자" date={msCdate} setDate={setMsCdate} />
-            />
-          </LocalizationProvider>
-
-          {/* <TextField */}
-          {/*  type="date" */}
-          {/*  value={msCdate} */}
-          {/*  defaultValue={msCdate} */}
-          {/*  InputLabelProps={{ shrink: true }} */}
-          {/*  onChange={(e) => setMsCdate(format(e.target.value), 'yyyy-MM-dd')} */}
-          {/* /> */}
         </Grid>
-        <Grid item xs={12} sm={4}>
+        <Grid item xs={12} sm={6}>
-          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
+          <MuiXMobileTimePicker label="심사 마감시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msClosesi}:00`} setDate={setMsClosesi} />
-            <TimePicker
-              size="small"
-              views={['hours']}
-              // renderInput={(props) => <TextField fullWidth {...props} />}
-              renderInput={(props) => <NumberFormat customInput={TextField} fullWidth {...props} format="##" />}
-              label="심의마감시간"
-              value={msClosesi}
-              inputFormat="HH"
-              mask="__"
-              onChange={(newValue) => {
-                setMsClosesi(newValue);
-              }}
-            />
-          </LocalizationProvider>
         </Grid>
       </Grid>
       <Grid item container spacing={0.5} xs={12} mt={1}>

src/views/cmm/Loding.jsx

@@ -0,0 +1,31 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ClockLoader } from 'react-spinners';
+
+const style = {
+  borderRadius: '5%',
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  backgroundColor: 'white',
+  width: 150,
+  height: 100,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '#36d7b7'
+};
+
+function Loading() {
+  return (
+    <div>
+      <div style={style}>
+        <ClockLoader color="#36d7b7" />
+        <font> Process Loding... </font>
+      </div>
+    </div>
+  );
+}
+
+export default Loading;