TodoModal.js 1.46 KB
Newer Older
Choi Ga Young's avatar
Choi Ga Young committed
1
2
3
4
5
6
const TodoModal = () => {
  return (
    <>
      <div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content" style={{ backgroundColor: "crimson" }}>
Kim, Subin's avatar
Kim, Subin committed
7
            <div className="modal-header px-2 py-1" >
Choi Ga Young's avatar
Choi Ga Young committed
8
              <h5 className="modal-title text-white" id="staticBackdropLabel">To-do</h5>
Kim, Subin's avatar
Kim, Subin committed
9
              <button type="button" className="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
Choi Ga Young's avatar
Choi Ga Young committed
10
11
12
            </div>
            <div className="modal-body" style={{ backgroundColor: "white" }}>
              <input type="text" name="todoTitle"
Kim, Subin's avatar
Kim, Subin committed
13
                className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0"
Choi Ga Young's avatar
Choi Ga Young committed
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
                placeholder="제목" />
              <label className="form-label m-2">날짜 </label>
              <input type="date" value="2021-10-12" className="ms-4 mt-4" />
            </div>
            <div className="modal-footer p-1" style={{ backgroundColor: "white" }} >
              <button type="button" className="btn btn-secondary btn-sm"
                data-bs-dismiss="modal">취소</button>
              <button type="button" className="btn btn-crimson btn-sm">확인</button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default TodoModal;