Selody-project · 97970z · Jul 8, 2023 · Jul 1, 2023
diff --git 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
@@ -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 (
-		<Offcanvas
-			as="form"
-			show={menuOpen}
-			onHide={() => dispatch(handleMenuToggle())}
-			placement="end"
-			className="bg-light text-dark"
-			style={{ width: "37%" }}
+		<Dialog
+			open={personalModal || menuOpen}
+			onClose={handleClose}
+			fullWidth
+			maxWidth="md"
 		>
-			<Offcanvas.Header closeButton className="bg-primary text-white">
-				<Offcanvas.Title>
-					<ModalHeader currentDate={currentDate} />
-				</Offcanvas.Title>
-			</Offcanvas.Header>
-			<Offcanvas.Body className="p-4">
+			<DialogTitle
+				className="bg-primary text-white"
+				style={{
+					display: "flex",
+					flexDirection: "row",
+					justifyContent: "space-between",
+				}}
+			>
+				<ModalHeader currentDate={currentDate} />
+				<IconButton
+					edge="end"
+					color="inherit"
+					onClick={handleClose}
+					aria-label="close"
+				>
+					<CloseIcon />
+				</IconButton>
+			</DialogTitle>
+			<DialogContent className="p-4">
 				<ModalBody
 					formValues={formValues}
 					setFormValues={setFormValues}
@@ -117,8 +134,8 @@ const ModalWindow = () => {
 					checkFieldsFilled={checkFieldsFilled}
 					edit={edit}
 				/>
-			</Offcanvas.Body>
-		</Offcanvas>
+			</DialogContent>
+		</Dialog>
 	);
 };
 

diff --git a/src/components/PersonalTodoList/Modal/ModalBody.jsx b/src/components/PersonalTodoList/Modal/ModalBody.jsx
@@ -123,7 +123,6 @@ const ModalBody = ({ formValues, setFormValues, today }) => {
 					)}
 				</Col>
 			</Row>
-			<hr />
 		</>
 	);
 };

diff --git 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 (
-		<Button
-			variant="primary"
-			onClick={handleSubmit}
-			// disabled={!checkFieldsFilled()}
-			className="mt-3"
-		>
-			{edit ? "수정하기" : "저장하기"}
-		</Button>
+		<div style={{ display: "flex", justifyContent: "flex-end", width: "100%" }}>
+			<Button
+				variant="primary"
+				onClick={handleSubmit}
+				className="mt-3"
+				disabled={!checkFieldsFilled()}
+			>
+				{edit ? "수정하기" : "저장하기"}
+			</Button>
+		</div>
 	);
 };
 export default ModalFooter;
diff --git 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
@@ -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,15 +46,20 @@ const ModalWindow = () => {
 		return true;
 	};
 
+	const handleClose = () => {
+		dispatch(handleMenuToggle());
+		setShareModal(false);
+	};
+
 	const checkFieldsFilled = () =>
 		formValues.title &&
 		formValues.details &&
 		formValues.startDate &&
 		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 (
-		<Offcanvas
-			as="form"
-			show={menuOpen}
-			onHide={() => dispatch(handleMenuToggle())}
-			placement="end"
-			className="bg-light text-dark"
-			style={{ width: "37%" }}
-		>
-			<Offcanvas.Header closeButton className="bg-primary text-white">
-				<Offcanvas.Title>
-					<ModalHeader currentDate={currentDate} />
-				</Offcanvas.Title>
-			</Offcanvas.Header>
-			<Offcanvas.Body className="p-4">
+		<Dialog open={shareModal} onClose={handleClose} fullWidth maxWidth="md">
+			<DialogTitle
+				className="bg-primary text-white"
+				style={{
+					display: "flex",
+					flexDirection: "row",
+					justifyContent: "space-between",
+				}}
+			>
+				<ModalHeader currentDate={currentDate} />
+				<IconButton
+					edge="end"
+					color="inherit"
+					onClick={handleClose}
+					aria-label="close"
+				>
+					<CloseIcon />
+				</IconButton>
+			</DialogTitle>
+			<DialogContent className="p-4">
 				<ModalBody
 					formValues={formValues}
 					setFormValues={setFormValues}
@@ -117,8 +122,8 @@ const ModalWindow = () => {
 					checkFieldsFilled={checkFieldsFilled}
 					edit={edit}
 				/>
-			</Offcanvas.Body>
-		</Offcanvas>
+			</DialogContent>
+		</Dialog>
 	);
 };
 

diff --git 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 }) => {
 					/>
 				</ModalDateColumn>
 			</ModalDateRow>
-			<hr />
-			<Row>
-				<Col>
-					<Form.Group controlId="repeat">
-						<Form.Label>반복 여부</Form.Label>
-						<Form.Select
-							value={formValues.repeat}
-							onChange={(e) =>
-								setFormValues({ ...formValues, repeat: e.target.value })
-							}
-						>
-							<option value="none">반복 안함</option>
-							<option value="DAILY">매일</option>
-							<option value="WEEKLY">매주</option>
-							<option value="MONTHLY">매월</option>
-							<option value="YEARLY">매년</option>
-						</Form.Select>
-					</Form.Group>
-					{formValues.repeat !== "none" && (
-						<div>
-							<Form.Label style={{ marginTop: "1rem" }}>반복 기간</Form.Label>
-							<ModalDateRow>
-								<ModalDateColumn>
-									<ModalInput
-										type="date"
-										min={today}
-										value={formValues.untilDate}
-										onChange={(e) =>
-											setFormValues({
-												...formValues,
-												untilDate: e.target.value,
-											})
-										}
-									/>
-									<ModalInputGap />
-									<ModalInput
-										type="time"
-										value={formValues.untilTime}
-										onChange={(e) =>
-											setFormValues({
-												...formValues,
-												untilTime: e.target.value,
-											})
-										}
-									/>
-								</ModalDateColumn>
-							</ModalDateRow>
-						</div>
-					)}
-				</Col>
-			</Row>
-			<hr />
+			<Form.Label>일정 투표 종료일</Form.Label>
+			<ModalDateColumn>
+				<ModalInput
+					type="date"
+					min={formValues.startDate || today}
+					value={formValues.voteEndDate}
+					onChange={(e) =>
+						setFormValues({ ...formValues, voteEndDate: e.target.value })
+					}
+				/>
+				<ModalInputGap />
+				<ModalInput
+					type="time"
+					value={formValues.voteEndTime}
+					onChange={(e) =>
+						setFormValues({ ...formValues, voteEndTime: e.target.value })
+					}
+				/>
+			</ModalDateColumn>
 		</>
 	);
 };
-Original file line number
+Diff line change
@@ Expand Up @@
     					)}
     				</Col>
     			</Row>
-    			<hr />
     		</>
     	);
     };
@@ Expand Down @@