useModal - 여러 개의 Modal중 버튼이 하나인 모달 컴포넌트

모달이 너무 많아서 최대한 효율적으로 사용해보려고 나눠보긴 했는데 여전히 비효율적이고 의존성이 있는것 같다
이미지는 코드를 좀 더 이해하기 쉽게 직접 만들었다

조금 더 고민해 보기로!

여기서 모두 사용되는 isOpen, setIsOpen은. setIsOpen을 호출하면 원래있던 값에서 반대로 바꿔주는 useHook이다
{isOpen && } 의 isOpen에 의존하지 않고 그냥 무조건 isOpen이 ture가 되면 실행된다

제일 기본 모달훅

<Modal isOpen={isOpen}>
      <ModalContainer onPress={() => setIsOpen(false)} justify={justify}>
        {children}
      </ModalContainer>
</Modal>

기본 컨펌 모달
기본 모달 훅을 이용해 컨펌 모달 컴포넌트 구현

const ConformModal = ({
  isOpen,
  setIsOpen,
  btnText,
  children,
  btnOnpress,
}: ConformModal) => {
  return (
<ModalForm isOpen={isOpen} setIsOpen={setIsOpen}>
      <ShareModalContainer>
        {children}
        <ConformBtn onPress={btnOnpress}>
          <WhiteText>{btnText}</WhiteText>
        </ConformBtn>
      </ShareModalContainer>
    </ModalForm>
      );
};

실제 사용시

title 없는 모달

   <ConformModal
        isOpen={isOpenNotJoin}
        setIsOpen={() => setIsOpenNotJoin()}
        btnText="확인"
        btnOnpress={() => setIsOpenNotJoin()}>
       //header area
       <div>
          <Image />
        </div>
        <TextBox>
          <TextFirst>신청 완료</TextFirst>
        </TextBox>
    </ConformModal>

title과 description이 동적인 모달

 <ConformModal
       isOpen={isOpenReport}
       setIsOpen={setIsOpenReport}
       btnText="확인"
       btnOnpress={() => {
         setIsOpenReport();
       }}>
      //header area
       <TopSection>
         <Image />
       </TopSection>
       <TextBox>
         <TextFirst>
           {modalText === 'block' ? '신고 및 차단완료' : '신고완료'}
         </TextFirst>
         <p>
           {modalText === 'block'
             ? '신고가 정상 접수되었습니다. 차단은 마이페이지 > 설정> 차단 가티원 관리에서 언제든지 해제하실 수 있습니다.'
             : '신고가 정상 접수되었습니다. 여러분의 소중한 의견으로 건강한 가티 문화 형성을 위해 노력하겠습니다.'}
         <p>
       </TextBox>
     </ConformModal>