fix: 날짜 동작오류로 인해 x-date-pickers 적용

package-lock.json

@@ -8,6 +8,7 @@
       "name": "xit-opst-fo",
       "version": "0.0.1",
       "dependencies": {
+        "@date-io/jalaali": "^2.16.1",
         "@emotion/cache": "^11.7.1",
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.6.0",
@@ -25,6 +26,7 @@
         "@mui/system": "^5.4.1",
         "@mui/utils": "^5.4.1",
         "@mui/x-data-grid": "^5.5.0",
+        "@mui/x-date-pickers": "^6.0.3",
         "@react-pdf/renderer": "^2.1.1",
         "@reduxjs/toolkit": "^1.7.2",
         "@tabler/icons": "^1.53.0",
@@ -32,9 +34,9 @@
         "axios": "^0.25.0",
         "axios-mock-adapter": "^1.20.0",
         "chance": "^1.1.8",
-        "core-js": "^3.27.2",
+        "core-js": "^3",
         "csstype": "^3.0.10",
-        "date-fns": "^2.28.0",
+        "date-fns": "^2.29.3",
         "draft-js": "^0.11.7",
         "emoji-picker-react": "^3.5.1",
         "env-cmd": "^10.1.0",
@@ -1834,9 +1836,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.20.13",
+      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1923,6 +1925,123 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "node_modules/@date-io/core": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-DYmSzkr+jToahwWrsiRA2/pzMEtz9Bq1euJwoOuYwuwIYXnZFtHajY2E6a1VNVDc9jP8YUXK1BvnZH9mmT19Zg=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.16.0.tgz",
+      "integrity": "sha512-bfm5FJjucqlrnQcXDVU5RD+nlGmL3iWgkHTq3uAZWVIuBu6dDmGa3m8a6zo2VQQpu8ambq9H22UyUpn7590joA==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/date-fns-jalali": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns-jalali/-/date-fns-jalali-2.16.0.tgz",
+      "integrity": "sha512-MNVvGYwRiBydbvY7gvZM14W2kosIG29G1Ekw5qmYWOXkIIFngh6ZvV7/uVGDCW+gqlIeSz/XitZXA9n8RO0tJw==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "date-fns-jalali": "^2.13.0-0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns-jalali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/dayjs": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.16.0.tgz",
+      "integrity": "sha512-y5qKyX2j/HG3zMvIxTobYZRGnd1FUW2olZLS0vTj7bEkBQkjd2RO7/FEwDY03Z1geVGlXKnzIATEVBVaGzV4Iw==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.8.17"
+      },
+      "peerDependenciesMeta": {
+        "dayjs": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/hijri": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/hijri/-/hijri-2.16.1.tgz",
+      "integrity": "sha512-6BxY0mtnqj5cBiXluRs3uWN0mSJwGw0AB2ZxqtEHvBFoiSYEojW51AETnfPIWpdvDsBn+WAC7QrfBvQZnoyIkQ==",
+      "dependencies": {
+        "@date-io/moment": "^2.16.1"
+      },
+      "peerDependencies": {
+        "moment-hijri": "^2.1.2"
+      },
+      "peerDependenciesMeta": {
+        "moment-hijri": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/jalaali": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/jalaali/-/jalaali-2.16.1.tgz",
+      "integrity": "sha512-GLw87G/WJ1DNrQHW8p/LqkqAqTUSqBSRin0H1pRPwCccB5Fh7GT64sadjzEvjW56lPJ0aq2vp5yI2eIjZajfrw==",
+      "dependencies": {
+        "@date-io/moment": "^2.16.1"
+      },
+      "peerDependencies": {
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0"
+      },
+      "peerDependenciesMeta": {
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/luxon": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.16.1.tgz",
+      "integrity": "sha512-aeYp5K9PSHV28946pC+9UKUi/xMMYoaGelrpDibZSgHu2VWHXrr7zWLEr+pMPThSs5vt8Ei365PO+84pCm37WQ==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "luxon": "^1.21.3 || ^2.x || ^3.x"
+      },
+      "peerDependenciesMeta": {
+        "luxon": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.16.1.tgz",
+      "integrity": "sha512-JkxldQxUqZBfZtsaCcCMkm/dmytdyq5pS1RxshCQ4fHhsvP5A7gSqPD22QbVXMcJydi3d3v1Y8BQdUKEuGACZQ==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      },
+      "peerDependenciesMeta": {
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.10.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
@@ -3430,11 +3549,11 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.11.7",
+      "version": "5.11.13",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.13.tgz",
-      "integrity": "sha512-8uyNDeVHZA804Ego20Erv8TpxlbqTe/EbhTI2H1UYr4/RiIbBprat8W4Qqr2UQIsC/b3DLz+0RQ6R/E5BxEcLA==",
+      "integrity": "sha512-5ltA58MM9euOuUcnvwFJqpLdEugc9XFsRR8Gt4zZNb31XzMfSKJPR4eumulyhsOTK1rWf7K4D63NKFPfX0AxqA==",
       "dependencies": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.21.0",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^16.7.1 || ^17.0.0",
         "prop-types": "^15.8.1",
@@ -3476,6 +3595,78 @@
         "react-dom": "^17.0.2 || ^18.0.0"
       }
     },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.0.3.tgz",
+      "integrity": "sha512-TgKfWf47WiNzSAY3C8R+FQ2grtVveoS3WCtLf6E1I/O2adxruxXA+AFiIRVnfv8QX9QFLNayTKoaVUISg/PcXQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@date-io/core": "^2.16.0",
+        "@date-io/date-fns": "^2.16.0",
+        "@date-io/date-fns-jalali": "^2.16.0",
+        "@date-io/dayjs": "^2.16.0",
+        "@date-io/hijri": "^2.16.1",
+        "@date-io/jalaali": "^2.16.1",
+        "@date-io/luxon": "^2.16.1",
+        "@date-io/moment": "^2.16.1",
+        "@mui/utils": "^5.11.13",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "date-fns": "^2.25.0",
+        "date-fns-jalali": "^2.13.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -29061,9 +29252,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "@babel/runtime": {
-      "version": "7.20.13",
+      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -29129,6 +29320,67 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@date-io/core": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-DYmSzkr+jToahwWrsiRA2/pzMEtz9Bq1euJwoOuYwuwIYXnZFtHajY2E6a1VNVDc9jP8YUXK1BvnZH9mmT19Zg=="
+    },
+    "@date-io/date-fns": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.16.0.tgz",
+      "integrity": "sha512-bfm5FJjucqlrnQcXDVU5RD+nlGmL3iWgkHTq3uAZWVIuBu6dDmGa3m8a6zo2VQQpu8ambq9H22UyUpn7590joA==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/date-fns-jalali": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns-jalali/-/date-fns-jalali-2.16.0.tgz",
+      "integrity": "sha512-MNVvGYwRiBydbvY7gvZM14W2kosIG29G1Ekw5qmYWOXkIIFngh6ZvV7/uVGDCW+gqlIeSz/XitZXA9n8RO0tJw==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/dayjs": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.16.0.tgz",
+      "integrity": "sha512-y5qKyX2j/HG3zMvIxTobYZRGnd1FUW2olZLS0vTj7bEkBQkjd2RO7/FEwDY03Z1geVGlXKnzIATEVBVaGzV4Iw==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/hijri": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/hijri/-/hijri-2.16.1.tgz",
+      "integrity": "sha512-6BxY0mtnqj5cBiXluRs3uWN0mSJwGw0AB2ZxqtEHvBFoiSYEojW51AETnfPIWpdvDsBn+WAC7QrfBvQZnoyIkQ==",
+      "requires": {
+        "@date-io/moment": "^2.16.1"
+      }
+    },
+    "@date-io/jalaali": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/jalaali/-/jalaali-2.16.1.tgz",
+      "integrity": "sha512-GLw87G/WJ1DNrQHW8p/LqkqAqTUSqBSRin0H1pRPwCccB5Fh7GT64sadjzEvjW56lPJ0aq2vp5yI2eIjZajfrw==",
+      "requires": {
+        "@date-io/moment": "^2.16.1"
+      }
+    },
+    "@date-io/luxon": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.16.1.tgz",
+      "integrity": "sha512-aeYp5K9PSHV28946pC+9UKUi/xMMYoaGelrpDibZSgHu2VWHXrr7zWLEr+pMPThSs5vt8Ei365PO+84pCm37WQ==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.16.1.tgz",
+      "integrity": "sha512-JkxldQxUqZBfZtsaCcCMkm/dmytdyq5pS1RxshCQ4fHhsvP5A7gSqPD22QbVXMcJydi3d3v1Y8BQdUKEuGACZQ==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.10.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
@@ -30222,11 +30474,11 @@
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.11.7",
+      "version": "5.11.13",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.13.tgz",
-      "integrity": "sha512-8uyNDeVHZA804Ego20Erv8TpxlbqTe/EbhTI2H1UYr4/RiIbBprat8W4Qqr2UQIsC/b3DLz+0RQ6R/E5BxEcLA==",
+      "integrity": "sha512-5ltA58MM9euOuUcnvwFJqpLdEugc9XFsRR8Gt4zZNb31XzMfSKJPR4eumulyhsOTK1rWf7K4D63NKFPfX0AxqA==",
       "requires": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.21.0",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^16.7.1 || ^17.0.0",
         "prop-types": "^15.8.1",
@@ -30245,6 +30497,27 @@
         "reselect": "^4.1.6"
       }
     },
+    "@mui/x-date-pickers": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.0.3.tgz",
+      "integrity": "sha512-TgKfWf47WiNzSAY3C8R+FQ2grtVveoS3WCtLf6E1I/O2adxruxXA+AFiIRVnfv8QX9QFLNayTKoaVUISg/PcXQ==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@date-io/core": "^2.16.0",
+        "@date-io/date-fns": "^2.16.0",
+        "@date-io/date-fns-jalali": "^2.16.0",
+        "@date-io/dayjs": "^2.16.0",
+        "@date-io/hijri": "^2.16.1",
+        "@date-io/jalaali": "^2.16.1",
+        "@date-io/luxon": "^2.16.1",
+        "@date-io/moment": "^2.16.1",
+        "@mui/utils": "^5.11.13",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      }
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "proxy": "http://localhost:8090",
   "dependencies": {
+    "@date-io/jalaali": "^2.16.1",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
@@ -21,6 +22,7 @@
     "@mui/system": "^5.4.1",
     "@mui/utils": "^5.4.1",
     "@mui/x-data-grid": "^5.5.0",
+    "@mui/x-date-pickers": "^6.0.3",
     "@react-pdf/renderer": "^2.1.1",
     "@reduxjs/toolkit": "^1.7.2",
     "@tabler/icons": "^1.53.0",
@@ -30,7 +32,7 @@
     "chance": "^1.1.8",
     "core-js": "^3",
     "csstype": "^3.0.10",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.29.3",
     "draft-js": "^0.11.7",
     "emoji-picker-react": "^3.5.1",
     "env-cmd": "^10.1.0",

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

@@ -1,14 +1,16 @@
 import { useState } from 'react';
 
 import PropTypes from 'prop-types';
-import NumberFormat from 'react-number-format';
 import { useAlert } from 'react-alert';
 
 import { Grid, TextField } from '@mui/material';
 import Button from '@mui/material/Button';
 
 import { saveAlert } from 'commons/XitCmm';
+import { MuiXDatePicker, MuiXMobileTimePicker } from 'views/cmm/MuiXDatePicker';
+import format from 'date-fns/format';
 
+const toDate = new Date();
 const JudgeDateModifyForm = ({ dateDatas, setDateModify, handleModalSave }) => {
   const alert = useAlert();
 
@@ -16,6 +18,7 @@ const JudgeDateModifyForm = ({ dateDatas, setDateModify, handleModalSave }) => {
   const [msYear, setMsYear] = useState(dateDatas?.msYear);
   const [msChasu, setMsChasu] = useState(dateDatas?.msChasu);
   const [msSdate, setMsSdate] = useState(dateDatas?.msSdate);
+  const [msStartsi, setMsStartsi] = useState(dateDatas?.msStartsi);
   const [msEdate, setMsEdate] = useState(dateDatas?.msEdate);
   const [msCdate, setMsCdate] = useState(dateDatas?.msCdate);
   const [msClosesi, setMsClosesi] = useState(dateDatas?.msClosesi);
@@ -27,6 +30,7 @@ const JudgeDateModifyForm = ({ dateDatas, setDateModify, handleModalSave }) => {
       msYear,
       msChasu,
       msSdate,
+      msStartsi,
       msEdate,
       msCdate,
       msClosesi
@@ -45,6 +49,10 @@ const JudgeDateModifyForm = ({ dateDatas, setDateModify, handleModalSave }) => {
       alert.show('심사 마감일자는 필수입니다.');
       return;
     }
+    if (msStartsi.length < 2) {
+      alert.show('심사 시작시간은 필수입니다.');
+      return;
+    }
     if (msClosesi.length < 2) {
       alert.show('심사 마감시간은 필수입니다.');
       return;
@@ -82,54 +90,24 @@ const JudgeDateModifyForm = ({ dateDatas, setDateModify, handleModalSave }) => {
         </Grid>
         <Grid container spacing={0.5} mb={1.5}>
           <Grid item xs={6}>
-            <NumberFormat
+            <MuiXDatePicker label="심사 시작일자" date={msSdate} setDate={setMsSdate} />
-              size="small"
+          </Grid>
-              customInput={TextField}
+          <Grid item xs={6}>
-              required
+            <MuiXMobileTimePicker label="심사 시작시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msStartsi}:00`} setDate={setMsStartsi} />
-              label="심사 시작일자"
+          </Grid>
-              format="####-##-##"
-              fullWidth
-              value={msSdate}
-              onChange={(e) => setMsSdate(e?.target?.value)}
-            />
         </Grid>
+        <Grid container spacing={0.5} mb={1.5}>
           <Grid item xs={6}>
-            <NumberFormat
+            <MuiXDatePicker label="심사 종료일자" date={msEdate} setDate={setMsEdate} />
-              size="small"
-              customInput={TextField}
-              required
-              label="심사 종료일자"
-              format="####-##-##"
-              fullWidth
-              value={msEdate}
-              onChange={(e) => setMsEdate(e?.target?.value)}
-            />
           </Grid>
+          <Grid item xs={6} />
         </Grid>
         <Grid container spacing={0.5} mb={1.5}>
           <Grid item xs={6}>
-            <NumberFormat
+            <MuiXDatePicker label="심사 마감일자" date={msCdate} setDate={setMsCdate} />
-              size="small"
-              customInput={TextField}
-              required
-              label="심사 마감일자"
-              format="####-##-##"
-              fullWidth
-              value={msCdate}
-              onChange={(e) => setMsCdate(e?.target?.value)}
-            />
           </Grid>
           <Grid item xs={6}>
-            <NumberFormat
+            <MuiXMobileTimePicker label="심사 마감시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msClosesi}:00`} setDate={setMsClosesi} />
-              size="small"
-              customInput={TextField}
-              required
-              label="심사 마감시간"
-              format="##"
-              fullWidth
-              value={msClosesi}
-              onChange={(e) => setMsClosesi(e?.target?.value)}
-            />
           </Grid>
         </Grid>
       </Grid>

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

@@ -22,9 +22,23 @@ import { findJudgeTargets, saveJudgeTargets } from 'apis/judge';
 import PropTypes from 'prop-types';
 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 JudgeRegistReview = ({ scDatagb, menuName }) => {
   const showAlert = useAlert();
   const [scTransfer, setScTransfer] = useState('1');
@@ -231,9 +245,10 @@ const JudgeRegistReview = ({ scDatagb, menuName }) => {
         handleSelection={handleSelection}
         selectionModel={selectionModel}
       />
-      <CmmModal isBackdrop title={title} open={open} setOpen={setOpen}>
+      {/* <CmmModal isBackdrop title={title} open={open} setOpen={setOpen}> */}
+      <CmmModalStyle isBackdrop title={title} open={open} setOpen={setOpen} style={style}>
         <JudgeTargetSaveForm isDisabled={selectionModel.length === 0} handleModalSave={submitJudgeTargets} />
-      </CmmModal>
+      </CmmModalStyle>
     </MainCard>
   );
 };

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

@@ -73,6 +73,7 @@ const JudgeReview = ({ msDatagb, menuName }) => {
     msYear: '',
     msChas: '',
     msSdate: '',
+    msStartsi: '',
     msEdate: '',
     msCdate: '',
     msClosesi: ''
@@ -244,6 +245,7 @@ const JudgeReview = ({ msDatagb, menuName }) => {
         msYear: selectedYear,
         msChasu: e.row.msChasu,
         msSdate: e.row.msSdate,
+        msStartsi: e.row.msStartsi,
         msEdate: e.row.msEdate,
         msCdate: e.row.msCdate,
         msClosesi: e.row.msClosesi

src/views/biz/admin/judge/JudgeTargetSaveForm.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, Divider } 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 JudgeTargetSaveForm = ({ 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,75 +40,36 @@ const JudgeTargetSaveForm = ({ 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 defaultValue={msuTeam} onChange={(e) => setMsuTeam(e.target.value)}>
@@ -127,7 +84,7 @@ const JudgeTargetSaveForm = ({ handleModalSave }) => {
             </Select>
           </FormControl>
         </Grid>
-        <Grid item xs={12} sm={2}>
+        <Grid item xs={12} sm={6}>
           <NumberFormat
             customInput={TextField}
             required
@@ -140,38 +97,21 @@ const JudgeTargetSaveForm = ({ 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
-              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={4}>
+        <Grid item xs={12} sm={6}>
-          <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
+          <MuiXMobileTimePicker label="심사 시작시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msStartsi}:00`} setDate={setMsStartsi} />
-            <TimePicker
+        </Grid>
-              size="small"
+        <Grid item xs={12} sm={6}>
-              views={['hours']}
+          <MuiXDatePicker label="심사 종료일자" date={msEdate} setDate={setMsEdate} />
-              // renderInput={(props) => <TextField fullWidth {...props} />}
+        </Grid>
-              renderInput={(props) => <NumberFormat customInput={TextField} fullWidth {...props} format="##" />}
+        <Grid item xs={12} sm={6} />
-              label="심의마감시간"
+        <Grid item xs={12} sm={6}>
-              value={msClosesi}
+          <MuiXDatePicker label="심사 마감일자" date={msCdate} setDate={setMsCdate} />
-              inputFormat="HH"
+        </Grid>
-              mask="__"
+        <Grid item xs={12} sm={6}>
-              onChange={(newValue) => {
+          <MuiXMobileTimePicker label="심사 마감시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msClosesi}:00`} setDate={setMsClosesi} />
-                console.log(newValue);
-                setMsClosesi(newValue);
-              }}
-            />
-          </LocalizationProvider>
         </Grid>
       </Grid>
       <Grid container spacing={1} item xs={12} mt={1}>

src/views/cmm/MuiXDatePicker.jsx

@@ -0,0 +1,63 @@
+import format from 'date-fns/format';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider, DateTimePicker, DatePicker, MobileTimePicker } from '@mui/x-date-pickers';
+import PropTypes from 'prop-types';
+
+const MuiXDateTimePicker = ({ label, date, setDate }) => (
+  <LocalizationProvider dateAdapter={AdapterDateFns}>
+    <DateTimePicker
+      label={label}
+      value={new Date(date)}
+      format="yyyy-MM-dd HH:mm:ss"
+      mask="____-__-__ __:__:__"
+      onChange={(newValue) => {
+        setDate(format(newValue, 'yyyy-MM-dd HH:mm:ss'));
+      }}
+    />
+  </LocalizationProvider>
+);
+
+MuiXDateTimePicker.propTypes = {
+  label: PropTypes.string,
+  date: PropTypes.string,
+  setDate: PropTypes.func
+};
+
+const MuiXDatePicker = ({ label, date, setDate }) => (
+  <LocalizationProvider dateAdapter={AdapterDateFns}>
+    <DatePicker
+      label={label}
+      value={new Date(date)}
+      format="yyyy-MM-dd"
+      mask="____-__-__"
+      onChange={(newValue) => {
+        setDate(format(newValue, 'yyyy-MM-dd'));
+      }}
+    />
+  </LocalizationProvider>
+);
+MuiXDatePicker.propTypes = {
+  label: PropTypes.string,
+  date: PropTypes.string,
+  setDate: PropTypes.func
+};
+
+const MuiXMobileTimePicker = ({ label, date, setDate }) => (
+  <LocalizationProvider dateAdapter={AdapterDateFns}>
+    <MobileTimePicker
+      label={label}
+      value={new Date(date)}
+      views={['hours']}
+      onChange={(newValue) => {
+        setDate(format(newValue, 'HH'));
+      }}
+    />
+  </LocalizationProvider>
+);
+MuiXMobileTimePicker.propTypes = {
+  label: PropTypes.string,
+  date: PropTypes.string,
+  setDate: PropTypes.func
+};
+
+export { MuiXDateTimePicker, MuiXDatePicker, MuiXMobileTimePicker };