[React-project Todo-app]일정 수정하기1 일정 자세히보기를 위한 모달창 만들기

일정을 수정하기 위해서 자세히 보기 모달창을 만들었다.

모달창에서 수정버튼을 만들어 일정을 수정하게 하였다.

 

우선 모달창을 만든다.

 

html

App.jsx

// App.jsx

  const [modalTitleInput, setModalTitleInput] = useState(""); // 타이틀 인풋
  const [modalContentInput, setModalContentInput] = useState(""); // 컨탠츠 인풋
  const [modalRead, setModalRead] = useState(false); // 모달을 보여줄지 말지 결정하는 블리언 값
  const [modalId, setModalId] = useState(""); // 모달에 출력되는 리스트의 아이디
  const [modalTitle, setModalTitle] = useState(""); // 모달에 출력될 타이틀 텍스트
  const [modalContent, setModalContent] = useState(""); // 모달에 출력될 컨텐츠 텍스트
  const [modalContentUpd, setModalContentUpd] = useState(false);

  return (
    <div className="App">
      {modalRead === true ? (
        <Modal
          modalContentUpd={modalContentUpd}
          modalTitle={modalTitle}
          modalContent={modalContent}
          modalTitleInputHaedler={modalTitleInputHaedler}
          modlaContentInputHaedler={modlaContentInputHaedler}
          updateBtnEvent={updateBtnEvent}
          updateCommitBtnEvent={updateCommitBtnEvent}
          modalClosetBtnEvent={modalClosetBtnEvent}
        />
      ) : null}
   </div>

 

 

modal.jsx

import React from "react";
import Button from "./Button";

function Modal({modalContentUpd,modalTitle,modalContent,modalTitleInputHaedler,modlaContentInputHaedler,updateBtnEvent,updateCommitBtnEvent,modalClosetBtnEvent}) {
  return (
    <div className="list_content_modal">
      <div className="bg"></div>
      <div className="modal_wrap">
        {modalContentUpd === false ? (
          <div className="modal_text_box">
            <p className="modal_title">{modalTitle}</p>
            <p className="modal_content">{modalContent}</p>
          </div>
        ) : (
          <div className="modal_text_box">
            <input
              className="modal_title"
              placeholder={modalTitle}
              type="text"
              onChange={modalTitleInputHaedler}
            />
            <textarea
              className="modal_content"
              placeholder={modalContent}
              cols="41"
              rows="20"
              onChange={modlaContentInputHaedler}
            ></textarea>
          </div>
        )}

        <div className="modal_btn_box">
          {modalContentUpd === false ? (
            <Button  updateBtnEvent={updateBtnEvent}>
              수정
            </Button>
          ) : (
            <Button updateCommitBtnEvent={updateCommitBtnEvent}>수정완료</Button>
          )}

          <Button modalClosetBtnEvent={modalClosetBtnEvent}>닫기</Button>
        </div>
      </div>
    </div>
  );
}

export default Modal;

 

 

 

css

/* 내용을 보여주는 모달창 */
.list_content_modal{
  width: 100%;
  height: 100vh;
  position: fixed;
}

.list_content_modal > .bg{
  width: 100%;
  height: 100vh;
  position: fixed;
  opacity: 30%;
  background-color: #000;
}

.list_content_modal > .modal_wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  width: 32%;
  height: 80%;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #666;
  background-color: #f5f5dc;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.list_content_modal > .modal_wrap > .modal_text_box{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 80%;
}
.list_content_modal > .modal_wrap > .modal_text_box > .modal_title{
  font-weight: bold;
  font-size: 2rem;
  margin-top: 10%;
  background-color: #f5f5dc;
}
.list_content_modal > .modal_wrap > .modal_text_box > .modal_content{
  font-size: 1.2rem;
  /* padding: 0 10%; */
  margin-top: 5%;
  background-color: #f5f5dc;
}

.list_content_modal > .modal_wrap > .modal_text_box > input{
  border: 0;
  border-bottom: 1px solid #623400;
}
.list_content_modal > .modal_wrap > .modal_text_box > input:focus{
 outline: none;
 border-bottom: 2px solid #623400;
}


.list_content_modal > .modal_wrap > .modal_btn_box{
  height: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  margin: 0 auto;
}
.list_content_modal > .modal_wrap > .modal_btn_box > button{
  padding: 3% 8%;
  font-size: 1.3rem;
  border-radius: 10px;
  cursor: pointer;
  background-color: #f5f5dc;
}

.list_content_modal > .modal_wrap > .modal_btn_box > button:hover{
  background-color: #623400;
  color: #f5f5dc;
}

 

todo리스트와 독립적으로 존재하는 모달 테그를 만들고 모달테그를 position: fixed로 화면에 고정하였다. 

그리고 리스트의 내용을 클릭하면 modalRead을 true로 만들어 모달을 보여주도록 하였다.

삼항연산자를 사용하여 modalRead가 true면 모달을 보여 주고 modalRead false면 null이되도록 하였다.

 

 

리스트를 클릭할 때 리스트의 id를 modalId에 담아 modalId를 기준으로 모달에 리스트의 제목과 내용을 출력하였다.

  /**
   * 리스트컨탠츠를 모달로 보여주는 함수
   */
  const modalListRead = (id) => {
    setModalRead(true);
    let listFil = todoList.filter((item) => {
      return item.id === id;
    });
    setModalId(listFil[0].id);
    setModalTitle(listFil[0].title);
    setModalContent(listFil[0].content);
  };

modalRead를 true로 만들고 filter를 이용하여 매개변수로 받은 id값과 todoList의 id를 비교하여 매개변수 id와 일치하는 리스트의 정보를 setModalId,setModalTitle, setModaContent에 담는다 

 

 

ModalId,ModalTitle, ModaContent는 모달에 보여주는 데이터이다