[Feat/server] 모달 컴포넌트 공통화

[jihyun-j]

#️⃣연관된 이슈

📝작업 내용

1. 모달 컴포넌트가 프로젝트 안에서 자주 쓰일것 같아서 공통화 했습니다.
2. 커스텀 훅을 사용해서 모달 열기/닫기와 상태를 확인할 수 있습니다.

// 현재 제가 만들어 놓은 Modal component 입니다

const ModalComponent = ({ children, isOpen }: ModalComponentProps) => {
  return (
    <Modal
      open={isOpen}
      aria-labelledby="parent-modal-title"
      aria-describedby="parent-modal-description">
      <Box sx={modalStyle}>{children}</Box> // children을 props로 받아서 사용
    </Modal>
  );
};

다른 컴포넌트에서 모달을 사용하고 싶다면 아래와 같이 사용하시면 됩니다.

const { isOpen, openModal, closeModal } = useModal(); // 모달을 열고 닫을 수 있는 커스텀 훅입니다. 

 <ModalComponent isOpen={isOpen}>
       // 이 부분이 children인데 다양하게 넣어서 사용하시면 됩니다. 
       // 저는 사용자 프로필 컴포넌트를 사용했는데 모달을 닫기 위해서는 closeModal를 반드시 props로 내려 주셔야합니다. 
       <Profile closeModal={closeModal} /> 
 </ModalComponent>

###스크린샷 (선택)

💬리뷰 요구사항(선택)

제가 모달 컴포넌트 공통화 시킨다고 예원님 코드를 수정 했습니다. 혹시 충돌 해결 하시다가 문제생기시면 알려주세용~!

[yudonggeun]

이 파일 삭제하고 .gitignore에 등록해주실 수 있을까요?

[jihyun-j]

파일 삭제하고 .gitignore에도 추가했습니다~!

[yewon830]

타입스크립트 처음 써봐서 잘 모르는데 types에 style관련 코드도 같이 작성하는 이유가 궁금합니다

[jihyun-j]

아마 제가 스타일 폴더 만들어서 스타일 파일 분리해 놓는 것을 깜빡한것같습니다. 🤦‍♀️
스타일 폴더 만들어서 넣어 놓겠습니다~!