style: 날짜 선택 mui 추가

package.json

@@ -10,10 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@date-io/dayjs": "^3.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.16.0",
+    "@mui/x-date-pickers": "^7.9.0",
     "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.2",

src/components/ListPage/Information/InformationContainer.jsx

@@ -3,7 +3,12 @@ import TodayListContainer from './TodayList/TodayListContainer'
 import UserInfoContainer from './UserCard/UserInfoContainer'
 import Calendar from './atom/Calendar'
 
-const InformationContainer = ({ scheduleData, onChangeData, resetData }) => {
+const InformationContainer = ({
+  scheduleData,
+  onChangeData,
+  resetData,
+  onChangeDate
+}) => {
   const path = window.location.pathname
 
   return (
@@ -15,6 +20,7 @@ const InformationContainer = ({ scheduleData, onChangeData, resetData }) => {
         <ScheduleCreateContainer
           scheduleData={scheduleData}
           onChangeData={onChangeData}
+          onChangeDate={onChangeDate}
           resetData={resetData}
         />
       )}

src/components/ListPage/Information/Schedule/ScheduleCreateContainer.jsx

@@ -1,7 +1,13 @@
+import DatePickerCalendar from './atom/DatePickerCalendar'
 import ScheduleBtn from './atom/ScheduleBtn'
 import SelectTimeContainer from './SelectTimeContainer'
 
-const ScheduleCreateContainer = ({ scheduleData, onChangeData, resetData }) => {
+const ScheduleCreateContainer = ({
+  scheduleData,
+  onChangeData,
+  resetData,
+  onChangeDate
+}) => {
   return (
     <div className="w-[280px] h-[373px] border-[2px] border-primary-75 rounded-md flex flex-col items-center bg-white">
       <input
@@ -23,6 +29,11 @@ const ScheduleCreateContainer = ({ scheduleData, onChangeData, resetData }) => {
         scheduleData={scheduleData}
         onChangeData={onChangeData}
       />
+      <DatePickerCalendar
+        value={scheduleData.days}
+        onChange={onChangeDate}
+      />
+
       <div className="flex gap-3">
         <ScheduleBtn
           bgColor="bg-primary-200"

src/components/ListPage/Information/Schedule/atom/DatePickerCalendar.jsx

@@ -0,0 +1,22 @@
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { DatePicker } from '@mui/x-date-pickers/DatePicker'
+import dayjs from 'dayjs'
+
+const DatePickerCalendar = ({ value, onChange }) => {
+  const handleDateChange = date => {
+    onChange(date ? dayjs(date).format('YYYY-MM-DD') : '')
+  }
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        label="날짜를 선택해 주세요."
+        value={value ? dayjs(value) : null}
+        onChange={handleDateChange}
+      />
+    </LocalizationProvider>
+  )
+}
+
+export default DatePickerCalendar

src/pages/PersonalPage.jsx

@@ -8,14 +8,16 @@ const PersonalPage = () => {
     title: '',
     content: '',
     startTime: null,
-    endTime: null
+    endTime: null,
+    days: null
   })
   const resetData = () => {
     setScheduleData({
       title: '',
       content: '',
       startTime: null,
-      endTime: null
+      endTime: null,
+      days: null
     })
   }
 
@@ -27,7 +29,13 @@ const PersonalPage = () => {
         name === 'startTime' || name === 'endTime' ? parseInt(value, 10) : value
     }))
   }
-
+  const onChangeDate = date => {
+    setScheduleData(prevState => ({
+      ...prevState,
+      days: date
+    }))
+  }
+  console.log(scheduleData)
   return (
     <div className="flex items-center justify-center w-screen h-screen bg-[#F6F6F6]">
       <div className="flex gap-2.5">
@@ -36,6 +44,7 @@ const PersonalPage = () => {
         <InformationContainer
           scheduleData={scheduleData}
           onChangeData={onChangeData}
+          onChangeDate={onChangeDate}
           resetData={resetData}
         />
       </div>