feat: 심의등록 저장 반영

src/apis/CmmService.js

@@ -1,9 +1,9 @@
-import { CMM_CODE_LIST_URL } from 'commons/ApiUrl';
+import { GET_CMM_CODE_LIST } from 'commons/ApiUrl';
 import axios from 'utils/axios';
 
 class CmmService {
   // eslint-disable-next-line no-return-await
-  getComboCodeList = async (params) => await axios.get(CMM_CODE_LIST_URL, { params });
+  getComboCodeList = async (params) => await axios.get(GET_CMM_CODE_LIST, { params });
 
   // getComboCodeList(params) {
   // return reqApi.get(CMM_CODE_LIST_URL, { params });

src/apis/OpstBizService.js

@@ -1,9 +1,10 @@
 import {
-  BOARD_LIST_URL,
+  GET_BOARD_LIST,
-  PUBLIC_BOARD_LIST_URL,
+  GET_PUBLIC_BOARD_LIST,
-  PARKING_SIMSA_DETAILS_LIST_URL,
+  GET_PARKING_SIMSA_DETAILS_LIST,
-  PARKING_SIMSA_LIST_URL,
+  GET_PARKING_SIMSA_LIST,
-  PARKING_SIMSA_TARGET_LIST_URL
+  GET_PARKING_SIMSA_TARGET_LIST,
+  SAVE_PARKING_SIMSA_TARGET
 } from 'commons/ApiUrl';
 import axios from 'utils/axios';
 
@@ -15,7 +16,7 @@ class OpstBizService {
 
   // eslint-disable-next-line no-return-await
   getPublicBoardList = async (params) => {
-    const res = await axios.get(PUBLIC_BOARD_LIST_URL, { params });
+    const res = await axios.get(GET_PUBLIC_BOARD_LIST, { params });
     if (res.success) {
       res.data = res.data.map((d, idx) => ({ ...d, rowId: this.setRowId(params, idx) }));
       return res;
@@ -25,7 +26,7 @@ class OpstBizService {
 
   // eslint-disable-next-line no-return-await
   getBoardList = async (params) => {
-    const res = await axios.get(BOARD_LIST_URL, { params });
+    const res = await axios.get(GET_BOARD_LIST, { params });
     if (res.success) {
       res.data = res.data.map((d, idx) => ({ ...d, rowId: this.setRowId(params, idx) }));
       return res;
@@ -42,7 +43,7 @@ class OpstBizService {
 
   // eslint-disable-next-line no-return-await
   getSimsa680GroupList = async (params) => {
-    const res = await axios.get(PARKING_SIMSA_LIST_URL, { params });
+    const res = await axios.get(GET_PARKING_SIMSA_LIST, { params });
     if (res.success) {
       res.data = res.data.map((d, idx) => ({ ...d, rowId: this.setRowId(params, idx) }));
       return res;
@@ -51,7 +52,7 @@ class OpstBizService {
   };
 
   getSimsa680DetailList = async (params) => {
-    const res = await axios.get(PARKING_SIMSA_DETAILS_LIST_URL, { params });
+    const res = await axios.get(GET_PARKING_SIMSA_DETAILS_LIST, { params });
     if (res.success) {
       res.data = res.data.map((d, idx) => ({ ...d, rowId: this.setRowId(params, idx) }));
       return res;
@@ -60,12 +61,23 @@ class OpstBizService {
   };
 
   getSimsaTargetList = async (params) => {
-    const res = await axios.get(PARKING_SIMSA_TARGET_LIST_URL, { params });
+    const res = await axios.get(GET_PARKING_SIMSA_TARGET_LIST, { params });
     if (res.success) {
       res.data = res.data.map((d, idx) => ({ ...d, rowId: this.setRowId(params, idx) }));
       return res;
     }
     return res;
   };
+
+  saveSimsaTargetList = async (params) => {
+    const res = await axios.post(SAVE_PARKING_SIMSA_TARGET, params);
+    if (res.success) {
+      res.data = res.data.map((d, idx) => ({ ...d, rowId: this.setRowId(params, idx) }));
+      return res;
+    }
+    return res;
+  };
+
+  SAVE_PARKING_SIMSA_TARGET;
 }
 export default new OpstBizService();

src/commons/ApiUrl.js

@@ -1,15 +1,16 @@
 // const URL = process.env.NODE_ENV !== 'development' ? process.env.REACT_APP_API_URL : ''
 // console.log(process.env.NODE_ENV)
 export const LOGIN_URL = '/api/v1/ctgy/account/login';
-export const CMM_CODE_LIST_URL = '/api/v1/biz/cmm/combo';
+export const GET_CMM_CODE_LIST = '/api/v1/biz/cmm/combo';
 
 // 공지사항
-export const PUBLIC_BOARD_LIST_URL = '/api/v1/ctgy/pboard';
+export const GET_PUBLIC_BOARD_LIST = '/api/v1/ctgy/pboard';
 
 // 게시판
-export const BOARD_LIST_URL = '/api/v1/ctgy/board';
+export const GET_BOARD_LIST = '/api/v1/ctgy/board';
 
 // 주정차 의견 진술
-export const PARKING_SIMSA_LIST_URL = '/api/v1/ctgy/parking';
+export const GET_PARKING_SIMSA_LIST = '/api/v1/ctgy/parking';
-export const PARKING_SIMSA_DETAILS_LIST_URL = '/api/v1/ctgy/parking/details';
+export const GET_PARKING_SIMSA_DETAILS_LIST = '/api/v1/ctgy/parking/details';
-export const PARKING_SIMSA_TARGET_LIST_URL = '/api/v1/ctgy/parking/target';
+export const GET_PARKING_SIMSA_TARGET_LIST = '/api/v1/ctgy/parking/target';
+export const SAVE_PARKING_SIMSA_TARGET = '/api/v1/ctgy/parking/target';

src/commons/constants.js

@@ -1,3 +1,3 @@
 export const ACCESS_TOKEN_NAME = 'accessToken';
-export const REFRESH_TOKEN_NAME = 'accessToken';
+export const REFRESH_TOKEN_NAME = 'refreshToken';
 export const AUTH_HEADER_NAME = 'Authorization';

src/menu-items/other.js

@@ -19,7 +19,7 @@ const other = {
   children: [
     {
       id: 'modalForm',
-      title: <FormattedMessage id="Modal Sample" />,
+      title: <FormattedMessage id="modalForm" />,
       type: 'item',
       url: '/modalForm',
       icon: icons.IconHelp

src/utils/axios.js

@@ -8,11 +8,11 @@ import Swal from 'sweetalert2';
 const axiosService = axios.create({
   baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '',
   withCredentials: process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain
-  timeout: Number(process.env.REACT_APP_SERVER_TIMEOUT)
+  timeout: Number(process.env.REACT_APP_SERVER_TIMEOUT),
-  // headers: {
+  headers: {
-  //   'Content-Type': 'application/json'
+    'Content-Type': 'application/json'
     //   //		AUTH_HEADER_NAME: accessToken
-  // }
+  }
   // params: {key: key}
 });
 

src/utils/locales/en.json

@@ -15,6 +15,7 @@
   "dashboard": "Dashboard",
   "default": "Default",
   "analytics": "Analytics",
+  "modalForm": "Modal Form",
 
   "widget": "Widget",
   "statistics": "Statistics",

src/utils/locales/ko.json

@@ -15,6 +15,7 @@
   "dashboard": "Dashboard",
   "default": "Default",
   "analytics": "Analytics",
+  "modalForm": "Modal Form",
 
   "widget": "Widget",
   "statistics": "Statistics",

src/views/biz/board/Board.jsx

@@ -23,7 +23,7 @@ import { IconSearch } from '@tabler/icons';
 import MainCard from 'ui-component/cards/MainCard';
 
 // project imports
-import MuiGridPagination from 'views/form/MuiGridPagination';
+import MuiDataGrid from 'views/form/MuiDataGrid';
 import opstBizService from 'apis/OpstBizService';
 
 const Board = () => {
@@ -126,7 +126,7 @@ const Board = () => {
       <Grid item xs={12}>
         <Divider />
       </Grid>
-      <MuiGridPagination columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
+      <MuiDataGrid columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
     </MainCard>
   );
 };

src/views/biz/board/PublicBoard.jsx

@@ -10,7 +10,7 @@ import { IconFile, IconFileCheck, IconFileText } from '@tabler/icons';
 import MainCard from 'ui-component/cards/MainCard';
 
 // project imports
-import MuiGridPagination from 'views/form/MuiGridPagination';
+import MuiDataGrid from 'views/form/MuiDataGrid';
 import InputLabel from 'ui-component/extended/Form/InputLabel';
 import opstBizService from '../../../apis/OpstBizService';
 import * as React from 'react';
@@ -71,7 +71,7 @@ const PublicBoard = () => {
         <Divider />
       </Grid>
 
-      <MuiGridPagination columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
+      <MuiDataGrid columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
     </MainCard>
   );
 };

src/views/biz/parking/Regist.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import _ from 'lodash';
+import dateformat from 'date-fns/format';
 
 // material-ui
 import {
@@ -11,11 +11,13 @@ import {
   FormLabel,
   Grid,
   InputAdornment,
+  InputLabel,
   MenuItem,
   OutlinedInput,
   Radio,
   RadioGroup,
-  Select
+  Select,
+  TextField
 } from '@mui/material';
 import MuiTooltip from '@mui/material/Tooltip';
 
@@ -27,7 +29,7 @@ import PersonAddTwoToneIcon from '@mui/icons-material/PersonAddTwoTone';
 import MainCard from 'ui-component/cards/MainCard';
 
 // project imports
-import MuiGridPagination from 'views/form/MuiGridPagination';
+import MuiDataGrid from 'views/form/MuiDataGrid';
 import { useTheme } from '@mui/material/styles';
 import opstBizService from '../../../apis/OpstBizService';
 
@@ -35,6 +37,8 @@ import xitCmm from '../../../commons/XitCmm';
 import CmmModal from '../../form/Modal/CmmModal';
 import * as React from 'react';
 import SaveParkingSimsaForm from './SaveParkingSimsaForm';
+import NumberFormat from 'react-number-format';
+import { MuiDatePicker } from '../../form/MuiDatePicker';
 
 const ParkingRegister = () => {
   const theme = useTheme();
@@ -81,13 +85,31 @@ const ParkingRegister = () => {
     if (selection.length === 0) {
       xitCmm.alertParam(`처리할 데이타가 없습니다`);
     } else {
-      const selectRows = selection.map((d) => rowsStatus.rows[d - 1].rcSeq);
-
       setOpen(true);
       // alert(`저장할 데이타 => ${selectRows}`);
     }
   };
 
+  const submitParkingSimsa = (params) => {
+    const rcCodes = [];
+    selection.map((d) => rcCodes.push(rowsStatus.rows[d - 1].rcCode));
+
+    const param = {
+      ...params,
+      rcCodes // selection.map((d) => rowsStatus.rows[d - 1].rcCode)
+    };
+    alert(JSON.stringify(param));
+    setOpen(false);
+
+    opstBizService.saveSimsaTargetList(param).then((response) => {
+      console.log(response);
+      // if (response && response.data) {
+      //   setTotalCount(response.count);
+      //   setRowsState((prevState) => ({ ...prevState, rows: response.data }));
+      // }
+    });
+  };
+
   const handleSearch = (event) => {
     if (rcSeq1 && rcSeq2) {
       search();
@@ -111,7 +133,7 @@ const ParkingRegister = () => {
         <Grid item xs={12}>
           <Grid container spacing={1}>
             <Grid item>
-              <FormControl component="fieldset">
+              <FormControl>
                 <FormLabel component="legend" required>
                   자료등록여부
                 </FormLabel>
@@ -128,26 +150,33 @@ const ParkingRegister = () => {
               </FormControl>
             </Grid>
             <Grid item>
-              <OutlinedInput
+              <NumberFormat
+                customInput={TextField}
+                size="small"
                 required
+                id="rcSeq1"
+                name="rcSeq1"
                 value={rcSeq1}
-                onChange={(e) => setRcSeq1(e.target.value)}
+                onChange={(e) => setRcSeq1(e.target.value.replace(/-/g, ''))}
-                placeholder="접수번호(10자리)-strat"
+                placeholder="yyyy-MM-9999"
                 onKeyDown={handleOnKeyDown}
-                size="small"
+                label="접수번호(시작)"
-                autoFocus
+                format="####-######"
-                inputProps={{ maxLength: 10 }}
               />
               &nbsp;-&nbsp;
-              <OutlinedInput
+              <NumberFormat
+                customInput={TextField}
+                size="small"
+                required
+                id="rcSeq2"
+                name="rcSeq2"
                 value={rcSeq2}
-                onChange={(e) => setRcSeq2(e.target.value)}
+                onChange={(e) => setRcSeq2(e.target.value.replace(/-/g, ''))}
-                placeholder="접수번호(10자리)-end"
+                placeholder="yyyy-MM-9999"
                 onKeyDown={handleOnKeyDown}
-                size="small"
+                label="접수번호(종료)"
-                inputProps={{ required: true, maxLength: 10 }}
+                format="####-######"
               />
-              {/* <TextField fullWidth label="Last Name" defaultValue="Schorl" /> */}
             </Grid>
             <Grid item>
               <Button variant="contained" color="primary" size="small" startIcon={<IconSearch />} onClick={handleSearch}>
@@ -168,7 +197,7 @@ const ParkingRegister = () => {
       <Grid item xs={12}>
         <Divider />
       </Grid>
-      <MuiGridPagination
+      <MuiDataGrid
         isCheckbox
         isHidePagination
         columns={columns}
@@ -178,7 +207,7 @@ const ParkingRegister = () => {
         handleSelection={handleSelection}
       />
       <CmmModal isBackdrop title="심의등록" open={open} setOpen={setOpen} callback={() => alert('~~~~')}>
-        <SaveParkingSimsaForm />
+        <SaveParkingSimsaForm handleModalSave={submitParkingSimsa} setOpen={setOpen} />
       </CmmModal>
     </MainCard>
   );

src/views/biz/parking/Review.jsx

@@ -17,11 +17,11 @@ import { IconSearch } from '@tabler/icons';
 import MainCard from 'ui-component/cards/MainCard';
 
 // project imports
-import MuiGridPagination from 'views/form/MuiGridPagination';
+import MuiDataGrid from 'views/form/MuiDataGrid';
 import opstBizService from 'apis/OpstBizService';
 import { useTheme } from '@mui/material/styles';
 import xitCmm from 'commons/XitCmm';
-import { PARKING_SIMSA_DETAILS_LIST_URL } from '../../../commons/ApiUrl';
+import { GET_PARKING_SIMSA_DETAILS_LIST } from '../../../commons/ApiUrl';
 import ModalDetails from './ModalDetails';
 import MainRoutes from '../../../routes/MainRoutes';
 import { useNavigate } from 'react-router-dom';
@@ -181,7 +181,13 @@ const ParkingReview = () => {
           <Grid container spacing={1}>
             <Grid item xs={2}>
               <MuiTooltip title="의견진술 심의 년도">
-                <Select id="reviewYear" name="reviewYear" defaultValue={year} onChange={(e) => setSelectedYear(e.target.value)}>
+                <Select
+                  size="small"
+                  id="reviewYear"
+                  name="reviewYear"
+                  defaultValue={year}
+                  onChange={(e) => setSelectedYear(e.target.value)}
+                >
                   {years.map((year, idx) => (
                     <MenuItem key={idx} value={year}>
                       {year}
@@ -223,7 +229,7 @@ const ParkingReview = () => {
       <Grid item xs={12}>
         <Divider />
       </Grid>
-      <MuiGridPagination columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
+      <MuiDataGrid columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
     </MainCard>
   );
 };

src/views/biz/parking/SaveParkingSimsaForm.jsx

@@ -1,60 +1,159 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
-import { Checkbox, FormControlLabel, Grid, Typography, TextField } from '@mui/material';
+
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import NumberFormat from 'react-number-format';
+import format from 'date-fns/format';
+import koLocale from 'date-fns/locale/ko';
+
+import { Checkbox, FormControlLabel, Grid, Typography, TextField, MenuItem, Select, FormControl, InputLabel } from '@mui/material';
+import DateAdapter from '@mui/lab/AdapterDateFns';
+// import DateAdapter from '@mui/lab/AdapterDayjs';
+// import DateAdapter from '@mui/lab/AdapterLuxon';
+// import DateAdapter from '@mui/lab/AdapterMoment';
 import LocalizationProvider from '@mui/lab/LocalizationProvider';
-import { DatePicker, TimePicker } from '@mui/lab';
+import { DesktopDatePicker, DatePicker, TimePicker, DateRangePicker } from '@mui/lab';
+import Button from '@mui/material/Button';
+import { MuiDatePicker, MuiTimePicker } from '../../form/MuiDatePicker';
+
+const teams = [
+  { code: '001', value: '1팀' },
+  { code: '002', value: '2팀' },
+  { code: '003', value: '3팀' },
+  { code: '004', value: '4팀' }
+];
+
+const SaveParkingSimsaForm = ({ handleModalSave }) => {
+  const [msuTeam, setMsuTeam] = useState(teams[0].code);
+  const [msSdate, setMsSdate] = useState(new Date());
+  const [msStartsi, setMsStartsi] = useState('09');
+  const [msEdate, setMsEdate] = useState(new Date());
+  const [msChasu, setMsChasu] = useState();
+  const [msCdate, setMsCdate] = useState(new Date());
+  const [msClosesi, setMsClosesi] = useState('09');
+
+  const onSave = () => {
+    handleModalSave({
+      msuTeam,
+      msSdate,
+      msStartsi,
+      msEdate,
+      msChasu: 99,
+      msCdate,
+      msClosesi
+    });
+  };
 
-const SaveParkingSimsaForm = () => {
-  const [sDate, setSdate] = useState(new Date());
-  const [sTime, setStime] = useState(new Date());
   return (
     <>
-      <Grid container spacing={3}>
+      <Grid container spacing={2}>
-        <Grid item xs={12} sm={6}>
+        <Grid item xs={12} sm={4}>
-          <TextField required id="msuTeam" name="msuTeam" label="팀" fullWidth autoComplete="given-name" />
+          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <TextField required id="msChasu" name="msChasu" label="차수" fullWidth autoComplete="family-name" />
-        </Grid>
-        <Grid item xs={12}>
-          <TextField required id="msSdate" name="msSdate" label="심사시작일" fullWidth autoComplete="shipping address-line1" />
-          <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DatePicker
-              renderInput={(props) => <TextField fullWidth {...props} helperText="" />}
+              // size="small"
+              renderInput={(props) => <TextField fullWidth {...props} />}
               label="심의시작일"
-              value={sDate}
+              value={msSdate}
               inputFormat="yyyy-MM-dd"
               mask="____-__-__"
               onChange={(newValue) => {
-                setSdate(newValue);
+                setMsSdate(format(newValue, 'yyyy-MM-dd'));
               }}
             />
           </LocalizationProvider>
+          {/* <MuiDatePicker label="심의시작일" date={msSdate} setDate={setMsSdate()} /> */}
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} sm={4}>
-          <TextField required id="msStartsi" name="msStartsi" label="심사시작시간" fullWidth autoComplete="shipping address-line2" />
+          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
-          <LocalizationProvider dateAdapter={AdapterDateFns}>
             <TimePicker
-              renderInput={(props) => <TextField fullWidth {...props} helperText="" />}
+              size="small"
-              label="심사시작시간"
+              views={['hours']}
-              value={sTime}
+              renderInput={(props) => <TextField fullWidth {...props} />}
+              label="심의시작시간"
+              value={msStartsi}
               inputFormat="HH"
               mask="__"
               onChange={(newValue) => {
-                setStime(newValue);
+                setMsStartsi(format(newValue, 'HH'));
+              }}
+            />
+          </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={6}>
+        <Grid item xs={12} sm={2}>
-          <TextField required id="msEdate" name="msEdate" label="심사종료일" fullWidth autoComplete="shipping address-level2" />
+          <FormControl fullWidth>
+            <InputLabel required>팀</InputLabel>
+            <Select size="small" name="reviewYear" defaultValue={msuTeam} onChange={(e) => setMsuTeam(e.target.value)}>
+              {teams.map((team, idx) => (
+                <MenuItem key={team.code} value={team.code}>
+                  {team.value}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={12} sm={2}>
+          <NumberFormat
+            customInput={TextField}
+            size="small"
+            required
+            id="msChasu"
+            name="msChasu"
+            label="차수"
+            format="######"
+            fullWidth
+            value={msChasu}
+            // onChange={setMsChasu}
+          />
+        </Grid>
+        <Grid item xs={12} sm={4}>
+          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
+            <DatePicker
+              size="small"
+              renderInput={(props) => <TextField fullWidth {...props} />}
+              label="심의마감일"
+              value={msCdate}
+              inputFormat="yyyy-MM-dd"
+              mask="____-__-__"
+              onChange={(newValue) => {
+                setMsCdate(format(newValue, 'yyyy-MM-dd'));
+              }}
+            />
+          </LocalizationProvider>
         </Grid>
-        <Grid item xs={12} sm={6}>
+        <Grid item xs={12} sm={4}>
-          <TextField id="msCdate" name="msCdate" label="심사마감일" fullWidth />
+          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
+            <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(format(newValue, 'HH'));
+              }}
+            />
+          </LocalizationProvider>
         </Grid>
-        <Grid item xs={12} sm={6}>
-          <TextField required id="msClosesi" name="msClosesi" label="심사마감시간" fullWidth autoComplete="shipping postal-code" />
       </Grid>
+      <Grid item sx={{ marginTop: 3 }}>
+        <Button onClick={onSave}>저장</Button>
       </Grid>
     </>
   );

src/views/form/Modal/CmmModal.jsx

@@ -5,7 +5,11 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Modal from '@mui/material/Modal';
-import { Divider, Grid } from '@mui/material';
+import { Divider, Grid, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import MainCard from 'ui-component/cards/MainCard';
+import { styled } from '@mui/material/styles';
+import { useRef } from 'react';
 
 const style = {
   position: 'absolute',
@@ -19,7 +23,9 @@ const style = {
   p: 4
 };
 
-export default function CmmModal({ isBackdrop = false, open, setOpen, title, children, callback = () => {} }) {
+const CmmModal = ({ isBackdrop = false, open, setOpen, title, children, callback = () => {} }) => {
+  const rootRef = useRef(null);
+
   const handleClose = () => {
     if (callback) callback();
     setOpen(false);
@@ -28,26 +34,23 @@ export default function CmmModal({ isBackdrop = false, open, setOpen, title, chi
   return (
     <div>
       {/* <Button onClick={handleOpen}>Grid Modal(List)</Button> */}
-      <Modal
+      <Modal hideBackdrop={isBackdrop} open={open} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
-        hideBackdrop={isBackdrop}
+        <MainCard
-        open={open}
+          sx={style}
-        onClose={handleClose}
+          title={title}
-        aria-labelledby="modal-modal-title"
+          content={false}
-        aria-describedby="modal-modal-description"
+          secondary={
+            <IconButton size="small" onClick={handleClose}>
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          }
         >
-        <Box sx={style}>
-          <Typography id="modal-modal-title" variant="h2" component="h2" sx={{ marginBottom: 3 }}>
-            {title}
-          </Typography>
           {children}
-          <Grid item sx={{ marginTop: 3 }}>
+        </MainCard>
-            <Button onClick={handleClose}>Close Modal</Button>
-          </Grid>
-        </Box>
       </Modal>
     </div>
   );
-}
+};
 
 CmmModal.propTypes = {
   isBackdrop: PropTypes.bool,
@@ -57,3 +60,5 @@ CmmModal.propTypes = {
   setOpen: PropTypes.func,
   callback: PropTypes.func
 };
+
+export default CmmModal;

src/views/form/Modal/index.js

@@ -11,7 +11,7 @@ import CmmModal from './CmmModal';
 
 const Modal = () => (
   <MainCard title="Modal Sample" secondary={<SecondaryAction link="https://next.material-ui.com/components/modal/" />}>
-    {/* <ServerModal /> */}
+    <ServerModal />
     {/* <SimpleModal /> */}
     <BasicModal />
     <NestedModal />

src/views/form/MuiDataGrid.jsx

@@ -8,7 +8,7 @@ import { useTheme } from '@mui/material/styles';
 import dataGridKoKR from './defaultDataGridLocale';
 
 // project imports
-const MuiGridPagination = ({
+const MuiDataGrid = ({
   isCheckbox = false,
   isHidePagination = false,
   columns,
@@ -66,7 +66,7 @@ const MuiGridPagination = ({
   );
 };
 
-MuiGridPagination.propTypes = {
+MuiDataGrid.propTypes = {
   isCheckbox: PropTypes.bool,
   isHidePagination: PropTypes.bool,
   columns: PropTypes.array,
@@ -77,4 +77,4 @@ MuiGridPagination.propTypes = {
   handleSelection: PropTypes.func
 };
 
-export default MuiGridPagination;
+export default MuiDataGrid;

src/views/form/MuiDatePicker.jsx

@@ -0,0 +1,65 @@
+// import React from 'react';
+
+import format from 'date-fns/format';
+import koLocale from 'date-fns/locale/ko';
+
+import TextField from '@mui/material/TextField';
+import DateAdapter from '@mui/lab/AdapterDateFns';
+// import DateAdapter from '@mui/lab/AdapterDayjs';
+// import DateAdapter from '@mui/lab/AdapterLuxon';
+// import DateAdapter from '@mui/lab/AdapterMoment';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import { DatePicker, TimePicker, DateTimePicker } from '@mui/lab';
+import NumberFormat from 'react-number-format';
+
+const MuiDateTimePicker = ({ label, date, setDate }) => (
+  // <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
+  <DateTimePicker
+    // size="small"
+    renderInput={(props) => <TextField fullWidth {...props} />}
+    label={label}
+    value={date}
+    inputFormat="yyyy-MM-dd HH:mm:ss"
+    mask="____-__-__ __:__:__"
+    onChange={(newValue) => {
+      setDate(newValue);
+    }}
+  />
+  // </LocalizationProvider>
+);
+
+const MuiDatePicker = ({ label, date, setDate }) => (
+  <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
+    <DatePicker
+      // size="small"
+      renderInput={(props) => <TextField fullWidth {...props} />}
+      label={label}
+      value={date}
+      inputFormat="yyyy-MM-dd"
+      mask="____-__-__"
+      onChange={(newValue) => {
+        setDate(newValue);
+      }}
+    />
+  </LocalizationProvider>
+);
+
+const MuiTimePicker = ({ label, date, setDate }) => (
+  <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
+    <TimePicker
+      size="small"
+      views={['hours']}
+      renderInput={(props) => <TextField fullWidth {...props} />}
+      // renderInput={(props) => <NumberFormat customInput={TextField} fullWidth {...props} format="##" />}
+      label={label}
+      value={date}
+      inputFormat="HH"
+      mask="__"
+      onChange={(newValue) => {
+        setDate(newValue);
+      }}
+    />
+  </LocalizationProvider>
+);
+
+export { MuiDateTimePicker, MuiDatePicker, MuiTimePicker };