Modal 창

이번 프로젝트를 진행하면서 모달창을 두 번 만들었는데 이번에 만들었던 코드를 올려봅니다.

function LeftKeywordButton({ filterList }) {
  const [modalVisible, setModalVisible] = useState(false);

  const openModal = () => {
    setModalVisible(!modalVisible);
  };

  return (
    <ButtonBox>
      <HeaderButton onClick={openModal}>
        <TextArrowBox>
          <HeaderButtonText>재능유형</HeaderButtonText>
          <MdKeyboardArrowDown className="arrow" />
        </TextArrowBox>
      </HeaderButton>
      {modalVisible && (
        <CheckboxWrap
          visible={modalVisible}
          closable={true}
          maskClosable={true}
          onClick={openModal}
          filterList={filterList}
        />
      )}
    </ButtonBox>
  );
}

  const modalClose = () => {
    setIsModalOpen(!isModalOpen);
  };
  const token = localStorage.getItem('token') || '';

  useEffect(() => {
    setIsModalOpen(false);
  }, [token]);

  const onLogout = () => {
    localStorage.removeItem('token');
    alert('로그아웃이 되었습니다.');
  };

Login.js

const { Kakao } = window;

function Login({ modalClose }) {
  const kakaoLoginClickHandler = () => {
    if (!Kakao.isInitialized()) {
      Kakao.init(process.env.REACT_APP_API_KEY);
    }

    Kakao.Auth.loginForm({
      success: function (authObj) {
        fetch(`${API_CONFIG.SIGNIN}`, {
          method: 'POST',
          headers: {
            Authorization: authObj.access_token,
          },
        })
          .then(res => res.json())
          .then(res => {
            if (!localStorage.token) {
              localStorage.setItem('token', res.token);
              if (res.token) {
                alert('airpnp 에 오신걸 환영합니다.');
                modalClose();
              }
            } else {
              alert('이미 로그인 되어 있습니다.');
              modalClose();
            }
          });
      },
      fail: function (err) {
        alert(JSON.stringify(err));
      },
    });
  };

  return (
    <LoginSection>
      <WrapPane onClick={modalClose} />
      <ModalContainer>
        <WrapModal>
          <CloseIcon
            src="/images/Login/x-mark.png"
            alt="closeButton"
            onClick={modalClose}
          />
        </WrapModal>
        <LoginHeader>
          <WrapHeaderText>
            <HeaderText>로그인 또는 회원 가입</HeaderText>
          </WrapHeaderText>
        </LoginHeader>
        <WrapContentBox>
          <LoginPane>
            <WrapWelcomeText>
              <PnpLogo src="/images/Login/airpnp-Logo.png" alt="airpnpLogo" />
              <WelcomeText>에 오신 것을 환영합니다.</WelcomeText>
            </WrapWelcomeText>
            <WrapSocialButton>
              <LoginButton>
                <div onClick={kakaoLoginClickHandler}>
                  <SocialButton>
                    <RiKakaoTalkFill className="kakaoLogo" />
                    <KakaoLogin>카카오톡으로 로그인하기</KakaoLogin>
                  </SocialButton>
                </div>
              </LoginButton>
            </WrapSocialButton>
          </LoginPane>
        </WrapContentBox>
      </ModalContainer>
    </LoginSection>
  );
}

useState의 기본값 설정과 함수를 잘 만들어야한다는 걸 알게 되었습니다.