Commit 80e70598 authored by Kim, Subin's avatar Kim, Subin
Browse files

ScheduleForm UI 완성

parent bf620a10
import { useEffect, useRef } from "react"; import { useState, useEffect } from "react";
import BtnGroup from "../Buttons/BtnGroup.js"; import BtnGroup from "../Buttons/BtnGroup.js";
import catchErrors from "../../utils/catchErrors.js";
import styles from "./form.module.scss"; import styles from "./form.module.scss";
const ScheduleForm = () => { const ScheduleForm = () => {
const [schedule, setSchedule] = useState({})
const [error, setError] = useState("")
useEffect(() => {
}, [])
async function handleSubmit(e) {
e.preventDefault()
try {
setError("")
} catch (error) {
catchErrors(error, setError)
}
}
return ( return (
<form className="pt-5"> <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" placeholder="제목" aria-label="title" autoFocus />
<div className="d-flex mb-4"> <div className="d-flex mb-4">
<label className="col-3 col-form-label">시작</label> <label className="col col-form-label align-self-center py-0">시작</label>
<div className="col-5"> <div className="col-5">
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="startDate" /> <input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="startDate" />
</div> </div>
<div className="col-4"> <div className="col-5">
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="startTime" /> <input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="startTime" />
</div> </div>
</div> </div>
<div className="d-flex mb-3"> <div className="d-flex mb-3">
<label className="col-3 col-form-label">종료</label> <label className="col col-form-label align-self-center py-0">종료</label>
<div className="col-5"> <div className="col-5">
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="endDate" /> <input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="endDate" />
</div> </div>
<div className="col-4"> <div className="col-5">
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="endTime" /> <input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="endTime" />
</div> </div>
</div> </div>
......
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
} }
.dateInput { .dateInput {
font-size: 0.75rem;
&:focus { &:focus {
border-color: crimson; border-color: crimson;
} }
......
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