Modal 컴포넌트 (공통)

[Chaemin-L]

PR 제목은 핵심 변경 사항을 요약해주세요.

---

🙋‍ Summary (요약)

• Modal 컴포넌트 구현

🤔 Describe your Change (변경사항)

Modal 컴포넌트 구현

제목만 삽입되는 모달
제목-버튼이 삽입되는 모달
제목-이미지-버튼이 삽입되는 모달

다양한 형태로 모달이 활용되고 있어, Modal 하위의 컴포넌트들을 독립적으로 선언 후
상위 컴포넌트에서 조립하여 활용할 수 있는 방식으로 구현하였습니다.

Modal 컴포넌트에는 Title과 Button 컴포넌트가 존재합니다.
Title에는 모달의 상단에 들어가는 필수 텍스트를 나타내며, 텍스트 내 줄바꿈은 \n로 표시해주시면 됩니다.
Button은 기본 버튼과 동일한 기능을 하는 스타일링된 버튼입니다.
Modal에 onClose 인자로 Modal 우측 상단의 닫힘 버튼에 대한 클릭 이벤트 핸들러를 전달할 수 있습니다.

Usage

const [reportModal, setReportModal] = useState<boolean>(false);
...
        {reportModal && (
          <Modal onClose={() => setReportModal(false)}>
            <Modal.Title text="신청을\n취소하시겠습니까?" />
            <div>여기에는 여러 내용이 들어갈 수 있습니다.</div>
            <Modal.Button>취소하기</Modal.Button>
          </Modal>
        )}

참고

• 현재 브랜치명에 이슈넘버만 사용하다보니, 같은 이슈 내에서 공동 작업을 할 경우에 conflict가 날 수 있습니다.
  저 또한 공통컴포넌트 제작 내용이지만 기존에 홀로 작업하던 브랜치명으로 그대로 PR 올립니다.
  다른 분들도 참고하여 작업 부탁드려요!!

공통 컴포넌트 제작 issue num: # 5 -> A는 앱바 구현, B는 버튼 구현시 같은 브랜치(feature/5)에서 작업하게 됨

🔗 Issue number and link (참고)

• 공통 컴포넌트 개발 #5

[Honghyeonji]

굿굿 조아용