[DAY29] React Styled-component 뿌시기..(modal창 만들기와 이벤트)

1. event.target 과 event.currentTarget

• 문제
  : 모달창 외부를 눌렀을 때, 모달창이 닫히도록 해야함.... 그런데 모달창 부분을 누르면, 꺼지면 안됨... 어떡하지..?

• 시도
  :전체 페이지 (코드상으로 StMoadal)에 onClick으로 창이 꺼지는 함수를 쥥어줬음.. 근데 그러면..? 모달 창을 눌러도,,, 꺼져버림.... 흠.. 그게 사실이라면.... 좀.... 무섭군요....

• 해결

function Modal2({ modal, setModal }) {
  const closeModal = (e) => {
    setModal(false);
  };

  const handleClickOutside = (event) => {
    if (event.target === event.currentTarget) {
      setModal(false);
    }
  };

  return (
    <>
      <StModal onClick={handleClickOutside}>
        <ModalSection>
          <CloseBtn onClick={closeModal}>X</CloseBtn>
          <p>외부영역 누르면 닫게만드는건 더힘들구나. 진짜 죽을수도있겠다.</p>
        </ModalSection>
        <label></label>
      </StModal>
    </>
  );
}

• 알게된점
  :target은 누른 바로 그 것, currentTarget은 이벤트를 실행하는 바로 그 것
  따라서, 어떤 버튼을 눌렀을 때, 그 버튼이 target이 되고, 그것을 감싸고 있는 div라던지.. 그런 것이 currentTarget이 된다.
  그러니까, 전체 창을 눌렀을 때, target과 currentTarget이 일치하면 === 모달창 밖 부분을 누르니까, target도 currentTarget도 모달창 밖 부분이 됨. 그 때 창이 꺼지도록 한다.
  따라서, 모달창을 누르면 target은 모달창 흰부분, currentTarget은 모달창 바깥부분(모달창포함)이 되므로, 두 개가 일치하지 않아 창이 꺼지지 않을 수 있음 !

2. 모달창 만드는 법

function Modal({ modal, setModal }) {
  const closeModal = (e) => {
    setModal(false);
  };
  return (
    <>
      <StModal>
        <ModalSection>
          <p>모달창 띄우기 어렵구나. 죽을수도있겠다.</p>
          <Button negative onClick={closeModal}>
            닫기
          </Button>
          <Button onClick={closeModal}>확인</Button>
        </ModalSection>
      </StModal>
    </>
  );
}

const StModal = styled.div`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.6);
`;

const ModalSection = styled.div`
  position: relative;
  top: 25%;
  width: 90%;
  max-width: 450px;
  height: 300px;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  /* animation: modal-show 0.3s;
  overflow: hidden; */
`;


export default Modal;

알게된점 .. 부트스트랩의 소중함.. 모달창을...... 만들수가..... 있는.... 거였구나....... 난..... 부트스트랩이 모달창 창시자인줄? ㅋㅋ 하하 ~ 호호 ~ 정말 ... 어려웠지만 뿌듯했다아~