diff --git a/src/components/PersonalTodoList/CalendarContainer.jsx b/src/components/PersonalTodoList/CalendarContainer.jsx index 653b867ae..e8a76252a 100644 --- a/src/components/PersonalTodoList/CalendarContainer.jsx +++ b/src/components/PersonalTodoList/CalendarContainer.jsx @@ -36,7 +36,7 @@ const CalendarContainer = () => { ]; const { schedule, recSchedules } = useSelector((state) => state.schedule); const [events, setEvents] = useState([]); - const [currentWeekStart, setCurrentWeekStart] = useState(new Date()); + const [currentWeekStart] = useState(new Date()); const [currentMonth, setCurrentMonth] = useState(new Date().getMonth() + 1); const [currentYear, setCurrentYear] = useState(new Date().getFullYear()); const calendarRef = useRef(null); diff --git a/src/components/PersonalTodoList/Modal/Modal.jsx b/src/components/PersonalTodoList/Modal/Modal.jsx index 73de408c9..631061a95 100644 --- a/src/components/PersonalTodoList/Modal/Modal.jsx +++ b/src/components/PersonalTodoList/Modal/Modal.jsx @@ -1,18 +1,18 @@ import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { Dialog, DialogTitle, DialogContent, IconButton } from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; import { toast } from "react-toastify"; -import Offcanvas from "react-bootstrap/Offcanvas"; import { handleMenuToggle } from "../../../features/user/user-slice.js"; -import { saveSchedule } from "@/features/schedule/schedule-slice.js"; -import ModalHeader from "./ModalHeader"; -import ModalBody from "./ModalBody"; -import ModalFooter from "./ModalFooter"; +import ModalHeader from "./ModalHeader.jsx"; +import ModalBody from "./ModalBody.jsx"; +import ModalFooter from "./ModalFooter.jsx"; import { createSchedule, updateSchedule, } from "@/features/schedule/schedule-service.js"; -const ModalWindow = () => { +const ModalWindow = ({ personalModal, setPersonalModal }) => { const { edit } = useSelector((state) => state.user); const { id } = useSelector((state) => state.schedule); const [formValues, setFormValues] = useState({ @@ -50,15 +50,20 @@ const ModalWindow = () => { return true; }; + const handleClose = () => { + dispatch(handleMenuToggle()); + if (window.location.pathname === "/share") { + setPersonalModal(false); + } + }; + const checkFieldsFilled = () => formValues.title && formValues.details && formValues.startDate && formValues.startTime && formValues.endDate && - formValues.endTime && - formValues.untilDate && - formValues.untilTime; + formValues.endTime; const handleSubmit = () => { // 시간 유효성 검사 @@ -90,23 +95,35 @@ const ModalWindow = () => { // 메뉴 닫기 dispatch(handleMenuToggle()); + setPersonalModal(false); }; return ( - dispatch(handleMenuToggle())} - placement="end" - className="bg-light text-dark" - style={{ width: "37%" }} + - - - - - - + + + + + + + { checkFieldsFilled={checkFieldsFilled} edit={edit} /> - - + + ); }; diff --git a/src/components/PersonalTodoList/Modal/ModalBody.jsx b/src/components/PersonalTodoList/Modal/ModalBody.jsx index d34d1ecd6..0c1435ab8 100644 --- a/src/components/PersonalTodoList/Modal/ModalBody.jsx +++ b/src/components/PersonalTodoList/Modal/ModalBody.jsx @@ -123,7 +123,6 @@ const ModalBody = ({ formValues, setFormValues, today }) => { )} -
); }; diff --git a/src/components/PersonalTodoList/Modal/ModalFooter.jsx b/src/components/PersonalTodoList/Modal/ModalFooter.jsx index f0bf89425..5f3fee53f 100644 --- a/src/components/PersonalTodoList/Modal/ModalFooter.jsx +++ b/src/components/PersonalTodoList/Modal/ModalFooter.jsx @@ -5,14 +5,16 @@ import { useSelector } from "react-redux"; const ModalFooter = ({ handleSubmit, checkFieldsFilled }) => { const { edit } = useSelector((state) => state.user); return ( - +
+ +
); }; export default ModalFooter; diff --git a/src/components/PersonalTodoList/PersonalTodoList.jsx b/src/components/PersonalTodoList/PersonalTodoList.jsx index 445eb00ad..040a35cfe 100644 --- a/src/components/PersonalTodoList/PersonalTodoList.jsx +++ b/src/components/PersonalTodoList/PersonalTodoList.jsx @@ -19,7 +19,7 @@ import { getSchedule } from "@/features/schedule/schedule-service.js"; const PersonalTodoList = () => { const [selectedTab, setSelectedTab] = useState(false); - const { menuOpen, edit } = useSelector((state) => state.user); + const { menuOpen } = useSelector((state) => state.user); const { month, year, totalSchedule } = useSelector((state) => state.schedule); const dispatch = useDispatch(); diff --git a/src/components/SharePage/Modal/Modal.jsx b/src/components/SharePage/Modal/Modal.jsx index 73de408c9..5ec9ceb21 100644 --- a/src/components/SharePage/Modal/Modal.jsx +++ b/src/components/SharePage/Modal/Modal.jsx @@ -1,9 +1,9 @@ import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { Dialog, DialogTitle, DialogContent, IconButton } from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; import { toast } from "react-toastify"; -import Offcanvas from "react-bootstrap/Offcanvas"; import { handleMenuToggle } from "../../../features/user/user-slice.js"; -import { saveSchedule } from "@/features/schedule/schedule-slice.js"; import ModalHeader from "./ModalHeader"; import ModalBody from "./ModalBody"; import ModalFooter from "./ModalFooter"; @@ -12,7 +12,8 @@ import { updateSchedule, } from "@/features/schedule/schedule-service.js"; -const ModalWindow = () => { +const ModalWindow = ({ shareModal, setShareModal }) => { + const dispatch = useDispatch(); const { edit } = useSelector((state) => state.user); const { id } = useSelector((state) => state.schedule); const [formValues, setFormValues] = useState({ @@ -22,10 +23,8 @@ const ModalWindow = () => { startTime: "", endDate: "", endTime: "", - untilDate: "", - untilTime: "", - repeat: "none", - notification: "none", + voteEndDate: "", + voteEndTime: "", }); const today = new Date().toISOString().slice(0, 10); @@ -35,9 +34,6 @@ const ModalWindow = () => { 7, )}월 ${currentDate.slice(8, 10)}일`; - const menuOpen = useSelector((state) => state.user.menuOpen); - const dispatch = useDispatch(); - const isTimeValid = () => { if (formValues.startDate === formValues.endDate) { if (formValues.endTime < formValues.startTime) { @@ -50,6 +46,11 @@ const ModalWindow = () => { return true; }; + const handleClose = () => { + dispatch(handleMenuToggle()); + setShareModal(false); + }; + const checkFieldsFilled = () => formValues.title && formValues.details && @@ -57,8 +58,8 @@ const ModalWindow = () => { formValues.startTime && formValues.endDate && formValues.endTime && - formValues.untilDate && - formValues.untilTime; + formValues.voteEndDate && + formValues.voteEndTime; const handleSubmit = () => { // 시간 유효성 검사 @@ -82,31 +83,35 @@ const ModalWindow = () => { startTime: "", endDate: "", endTime: "", - untilDate: "", - untilTime: "", - repeat: "none", - notification: "none", + voteEndDate: "", + voteEndTime: "", }); // 메뉴 닫기 - dispatch(handleMenuToggle()); + setShareModal(false); }; return ( - dispatch(handleMenuToggle())} - placement="end" - className="bg-light text-dark" - style={{ width: "37%" }} - > - - - - - - + + + + + + + + { checkFieldsFilled={checkFieldsFilled} edit={edit} /> - - + + ); }; diff --git a/src/components/SharePage/Modal/ModalBody.jsx b/src/components/SharePage/Modal/ModalBody.jsx index d34d1ecd6..cde12e20b 100644 --- a/src/components/SharePage/Modal/ModalBody.jsx +++ b/src/components/SharePage/Modal/ModalBody.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Form, Row, Col } from "react-bootstrap"; +import { Form } from "react-bootstrap"; import { ModalTitle, ModalInput, @@ -72,58 +72,25 @@ const ModalBody = ({ formValues, setFormValues, today }) => { /> -
- - - - 반복 여부 - - setFormValues({ ...formValues, repeat: e.target.value }) - } - > - - - - - - - - {formValues.repeat !== "none" && ( -
- 반복 기간 - - - - setFormValues({ - ...formValues, - untilDate: e.target.value, - }) - } - /> - - - setFormValues({ - ...formValues, - untilTime: e.target.value, - }) - } - /> - - -
- )} - - -
+ 일정 투표 종료일 + + + setFormValues({ ...formValues, voteEndDate: e.target.value }) + } + /> + + + setFormValues({ ...formValues, voteEndTime: e.target.value }) + } + /> + ); }; diff --git a/src/components/SharePage/Modal/ModalFooter.jsx b/src/components/SharePage/Modal/ModalFooter.jsx index f0bf89425..5f3fee53f 100644 --- a/src/components/SharePage/Modal/ModalFooter.jsx +++ b/src/components/SharePage/Modal/ModalFooter.jsx @@ -5,14 +5,16 @@ import { useSelector } from "react-redux"; const ModalFooter = ({ handleSubmit, checkFieldsFilled }) => { const { edit } = useSelector((state) => state.user); return ( - +
+ +
); }; export default ModalFooter; diff --git a/src/components/SharePage/ShareTodoList.jsx b/src/components/SharePage/ShareTodoList.jsx index a186cfed9..f722f7105 100644 --- a/src/components/SharePage/ShareTodoList.jsx +++ b/src/components/SharePage/ShareTodoList.jsx @@ -1,7 +1,8 @@ import React, { useState, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { handleMenuToggle, setEdit } from "../../features/user/user-slice.js"; -import ModalWindow from "./Modal/Modal.jsx"; +import PersonalModal from "../PersonalTodoList/Modal/Modal.jsx"; +import ShareModal from "./Modal/Modal.jsx"; import { TodoContainer, TodoHeader, @@ -18,13 +19,21 @@ import { getSchedule } from "@/features/schedule/schedule-service.js"; const ShareTodoList = () => { const [selectedTab, setSelectedTab] = useState(true); - const { menuOpen } = useSelector((state) => state.user); + const [personalModal, setPersonalModal] = useState(false); + const [shareModal, setShareModal] = useState(false); const { month, year, totalSchedule } = useSelector((state) => state.schedule); const dispatch = useDispatch(); - const handleMenuOpen = () => { + const handlePersonalModalOpen = () => { dispatch(setEdit(false)); dispatch(handleMenuToggle()); + setPersonalModal(true); + }; + + const handleShareModalOpen = () => { + dispatch(setEdit(false)); + dispatch(handleMenuToggle()); + setShareModal(true); }; useEffect(() => { @@ -56,7 +65,7 @@ const ShareTodoList = () => { <> 일정 후보{" "} - + Add-icon 일정 후보 추가 @@ -70,7 +79,7 @@ const ShareTodoList = () => { <> 오늘의 할 일 - + Add-icon 일정 추가 @@ -90,7 +99,15 @@ const ShareTodoList = () => { )} - {menuOpen && } + {personalModal && ( + + )} + {shareModal && ( + + )} ); }; diff --git a/src/features/user/user-slice.js b/src/features/user/user-slice.js index d76dc1146..0c0710692 100644 --- a/src/features/user/user-slice.js +++ b/src/features/user/user-slice.js @@ -17,6 +17,8 @@ const initialState = { isLoading: false, userLoading: true, menuOpen: false, + personalModal: false, + shareModal: false, token: null, edit: false, };