Commit 2fe326b4 authored by Kim, Subin's avatar Kim, Subin
Browse files

ScheduleForm UI 완성

parent 80e70598
import { useState, useEffect } from "react";
import { Redirect } from "react-router-dom";
import BtnGroup from "../Buttons/BtnGroup.js";
import catchErrors from "../../utils/catchErrors.js";
import styles from "./form.module.scss";
const ScheduleForm = () => {
const [schedule, setSchedule] = useState({})
const [schedule, setSchedule] = useState({
title: "",
startDate: "",
endDate: "",
startTime: "",
endTime: "",
allDay: "",
location: "",
memo: ""
})
const [disabled, setDisabled] = useState(true)
const [success, setSuccess] = useState(false)
const [error, setError] = useState("")
useEffect(() => {
}, [])
let isMounted = true;
const checkInfo = { title: schedule.title, startDate: schedule.startDate, endDate: schedule.endDate }
if (schedule.allDay !== "on") {
checkInfo.startTime = schedule.startTime
checkInfo.endTime = schedule.endTime
} else {
delete checkInfo.startTime
delete checkInfo.endTime
}
if (isMounted) {
const isSchedule = Object.values(checkInfo).every((el) => Boolean(el));
isSchedule ? setDisabled(false) : setDisabled(true);
}
return () => {
isMounted = false;
};
}, [schedule])
function handleChange(e) {
const { name, value } = e.target
if (name === "allDay") {
schedule.allDay !== "on" ? setSchedule({ ...schedule, [name]: value }) : setSchedule({ ...schedule, [name]: "off" })
} else if (name === "startDate") {
setSchedule({ ...schedule, [name]: value, endDate: value })
} else if (name === "startTime") {
setSchedule({ ...schedule, [name]: value, endTime: value })
} else setSchedule({ ...schedule, [name]: value })
}
async function handleSubmit(e) {
e.preventDefault()
try {
setError("")
if (schedule.allDay === "on") setSchedule({ ...schedule, startTime: '00:00', endTime: '23:59' })
setSuccess(true)
} catch (error) {
catchErrors(error, setError)
}
}
}
if (success) {
alert('해당 일정이 성공적으로 등록되었습니다.')
return <Redirect to="/home" />
}
return (
<form className="pt-5" onSubmit={handleSubmit}>
<input className={`form-control form-control-lg shadow-none px-1 mb-5 ${styles.textInput}`} type="text" placeholder="제목" aria-label="title" autoFocus />
<input className={`form-control form-control-lg shadow-none px-1 mb-5 ${styles.textInput}`} type="text" name="title" placeholder="제목" aria-label="title" onChange={handleChange} autoFocus />
<div className="d-flex mb-4">
<label className="col col-form-label align-self-center py-0">시작</label>
<div className="col-5">
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="startDate" />
<div className={schedule.allDay === "on" ? "col-7" : "col-5"}>
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="startDate" aria-label="startDate" onChange={handleChange} />
</div>
<div className="col-5">
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="startTime" />
<div className={"col-5 " + (schedule.allDay === "on" ? "d-none" : "d-block")}>
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="startTime" aria-label="startTime" onChange={handleChange} />
</div>
</div>
<div className="d-flex mb-3">
<label className="col col-form-label align-self-center py-0">종료</label>
<div className="col-5">
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="endDate" />
<div className={schedule.allDay === "on" ? "col-7" : "col-5"}>
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="endDate" value={schedule.endDate} aria-label="endDate" onChange={handleChange} />
</div>
<div className="col-5">
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="endTime" />
<div className={"col-5 " + (schedule.allDay === "on" ? "d-none" : "d-block")}>
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="endTime" value={schedule.endTime} aria-label="endTime" onChange={handleChange} />
</div>
</div>
<div className="d-flex justify-content-end form-check mb-4">
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" value="" id="allDay" />
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" id="allDay" name="allDay" onChange={handleChange} />
<label className="form-check-label ms-2" htmlFor="allDay">하루 종일</label>
</div>
<div className="d-flex justify-content-between align-items-center mb-4">
<i className="col bi bi-geo-alt fs-3"></i>
<div className="col-10">
<input className={`form-control shadow-none px-1 ${styles.textInput}`} type="text" placeholder="장소" aria-label="location" />
<input className={`form-control shadow-none px-1 ${styles.textInput}`} type="text" name="location" placeholder="장소" aria-label="location" onChange={handleChange} />
</div>
</div>
<div className="d-flex justify-content-between mb-5">
<i className="col bi bi-journal-text fs-3"></i>
<div className="col-10">
<textarea className={`form-control shadow-none ${styles.textArea}`} rows="5"></textarea>
<textarea className={`form-control shadow-none ${styles.textArea}`} name="memo" rows="5" onChange={handleChange}></textarea>
</div>
</div>
<BtnGroup />
<BtnGroup disabled={disabled} />
</form>
)
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment