diff --git a/src/pages/addModal.js b/src/pages/addModal.js new file mode 100644 index 0000000000000000000000000000000000000000..16ddc44c5068d26ce5b0bcf58b43c4e061432936 --- /dev/null +++ b/src/pages/addModal.js @@ -0,0 +1,100 @@ +// ScheduleModal.js +import React, { useState } from 'react'; +import schedule_add from './addModal.module.css'; +const ScheduleAddModal = ({ isOpen, onClose, onSave }) => { + const [formData, setFormData] = useState({ + startDate: '', + endDate: '', + startTime: '', + endTime: '', + repeatPeriod: 7, + title: '', + color: '#FFFFFF', // 기본 값 설정 (흰색) + }); + + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; + + const handleColorChange = (color) => { + setFormData((prevData) => ({ + ...prevData, + color, + })); + }; + + const handleSave = () => { + onSave(formData); + onClose(); + }; + + return ( + + <div className={`${schedule_add.modal} ${isOpen ? schedule_add.open : ''}`}> + <div className={schedule_add.modal_content}> + <label>시작 날짜:</label> + <input + type="date" + name="startDate" + value={formData.startDate} + onChange={handleInputChange} + /> + + <label>종료 날짜:</label> + <input + type="date" + name="endDate" + value={formData.endDate} + onChange={handleInputChange} + /> + <label>시작 시간:</label> + <input + type="time" + name="startTime" + value={formData.startTime} + onChange={handleInputChange} + /> + <label>종료 시간:</label> + <input + type="time" + name="endTime" + value={formData.endTime} + onChange={handleInputChange} + /> + <label>반복 주기 (일):</label> + <input + type="number" + name="repeatPeriod" + value={formData.repeatPeriod} + onChange={handleInputChange} + /> + <label>일정 제목:</label> + <input + type="text" + name="title" + value={formData.title} + onChange={handleInputChange} + /> + <label>색상 선택:</label> + <input + type="color" + name="color" + value={formData.color} + onChange={(e) => handleColorChange(e.target.value)} + /> + + <button className={schedule_add.save} onClick={handleSave}>저장</button> + <button className={schedule_add.cancel} onClick={onClose}>취소</button> + </div> + </div> + ); +}; + + + + +export default ScheduleAddModal;