TodoModal.js 3.06 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
2
3
4
import { useState, useEffect, useRef } from "react";
import todoApi from "../../apis/todo.api";
import { useAuth } from "../../utils/context";
import catchErrors from "../../utils/catchErrors";
Choi Ga Young's avatar
Choi Ga Young committed
5
import moment from "moment";
6
7
import styles from "./modal.module.scss";

Kim, Subin's avatar
Kim, Subin committed
8
9
const TodoModal = ({ curDate, selectTodo = "" }) => {
  const { user } = useAuth()
Choi Ga Young's avatar
Choi Ga Young committed
10
11
  const [todo, setTodo] = useState({
    todoTitle: "",
Kim, Subin's avatar
Kim, Subin committed
12
    todoDate: moment(curDate).format("YYYY-MM-DD")
Choi Ga Young's avatar
Choi Ga Young committed
13
  })
Kim, Subin's avatar
Kim, Subin committed
14
15
16
17
18
19
20
21
22
23
24
25
  const [error, setError] = useState("");

  useEffect(() => {
    setTodo({ ...todo, todoDate: curDate })
  }, [curDate])

  useEffect(() => {
    if (selectTodo) {
      console.log("selectTodo 값 변경으로 실행")
      setTodo({ ...todo, ...selectTodo })
    }
  }, [selectTodo])
Choi Ga Young's avatar
Choi Ga Young committed
26
27
28
29
30

  const handleChange = (e) => {
    const { name, value } = e.target
    setTodo({ ...todo, [name]: value })
  }
31

Kim, Subin's avatar
Kim, Subin committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
  async function handleSubmit() {
    try {
      setError("")
      if (selectTodo) {
        await todoApi.edit(todo, user.id)
        alert("해당 할일이 성공적으로 수정되었습니다.")
      } else {
        await todoApi.submit(todo, user.id)
        alert("해당 할일이 성공적으로 등록되었습니다.")
      }
      window.location.reload()
    } catch (error) {
      catchErrors(error, setError)
    }
Choi Ga Young's avatar
Choi Ga Young committed
46
  }
47

Choi Ga Young's avatar
Choi Ga Young committed
48
  return (
Choi Ga Young's avatar
Choi Ga Young committed
49
    <div className="modal fade" id="todomodal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="todoLabel" aria-hidden="true">
Kim, Subin's avatar
Kim, Subin committed
50
      {console.log("Modal date==", curDate, selectTodo)}
Kim, Subin's avatar
Kim, Subin committed
51
52
53
      <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content" style={{ backgroundColor: "crimson" }}>
          <div className="modal-header px-2 py-1" >
Choi Ga Young's avatar
Choi Ga Young committed
54
            <h5 className="modal-title text-white" id="todoLabel">To-do</h5>
Kim, Subin's avatar
Kim, Subin committed
55
56
            <button type="button" className="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
Choi Ga Young's avatar
Choi Ga Young committed
57
          <div className="modal-body bg-white">
Kim, Subin's avatar
Kim, Subin committed
58
59
            <input type="text" name="todoTitle"
              className={`form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0 ${styles.textInput}`}
Kim, Subin's avatar
Kim, Subin committed
60
              placeholder="제목" onChange={handleChange} value={todo.todoTitle} autoComplete="off" />
Choi Ga Young's avatar
Choi Ga Young committed
61
62
            <div className="d-flex justify-content-between mt-4">
              <label className="col-2 col-form-label ms-2">날짜</label>
Kim, Subin's avatar
Kim, Subin committed
63
              <div className="col-8 d-flex align-items-center">
Choi Ga Young's avatar
Choi Ga Young committed
64
65
                <input type="date" className="form-control form-control-sm" name="todoDate" onChange={handleChange} value={todo.todoDate} />
              </div>
Choi Ga Young's avatar
Choi Ga Young committed
66
            </div>
Kim, Subin's avatar
Kim, Subin committed
67
          </div>
Choi Ga Young's avatar
Choi Ga Young committed
68
          <div className="modal-footer bg-white p-1" >
Kim, Subin's avatar
Kim, Subin committed
69
            <button type="button" className="btn btn-secondary btn-sm"
Kim, Subin's avatar
Kim, Subin committed
70
71
              data-bs-dismiss="modal" onClick={() => setTodo({ todoTitle: "", todoDate: "" })}>취소</button>
            <button type="button" className="btn btn-crimson btn-sm" onClick={handleSubmit}>{selectTodo ? "수정" : "확인"}</button>
Choi Ga Young's avatar
Choi Ga Young committed
72
73
74
          </div>
        </div>
      </div>
Kim, Subin's avatar
Kim, Subin committed
75
    </div>
Choi Ga Young's avatar
Choi Ga Young committed
76
77
78
79
  )
}

export default TodoModal;