[FLOW-15] feat: 모달 컴포넌트 추가

[dbswl701]

💡 PR 제목

#32 feat: modal 컴포넌트를 추가하였습니다.

✅ 요구사항

• 4종류의 모달을 compound pattern을 이용하여 구현하였습니다.

⭐ 시연

✅ 리뷰어가 알아야할 사항

compound pattern으로 구현하였습니다. 사용 예시는 아래 코드를 참고해주시기 바랍니다.

<Modal.Root>
  <Modal.Trigger>
    <button>모달 토글</button>
  </Modal.Trigger>
  <Modal.Portal>
    <Modal.Overlay />
    <Modal.Content>
      <Modal.Header>
        <Modal.Title profile='123' isCloseBtn>
          Title
        </Modal.Title>
        <Modal.Warning>
          This form will be submitted to App. Do not share passwords or
          sensitive information
        </Modal.Warning>
      </Modal.Header>
      <Modal.Body>
        <Modal.Label>Description</Modal.Label>
        <Modal.LongText />
      </Modal.Body>
      <Modal.Footer onSubmit={() => console.log} />
    </Modal.Content>
  </Modal.Portal>
</Modal.Root>

<Modal.Root>
  <Modal.Trigger>
    <button>모달 토글</button>
  </Modal.Trigger>
  <Modal.Portal>
    <Modal.Overlay />
    <Modal.Content>
      <Modal.Header>
        <Modal.Title>Title</Modal.Title>
        <Modal.Description>Description</Modal.Description>
      </Modal.Header>
      <Modal.Body>
        <Modal.Profile
          profile='123'
          name='Muatex'
          date='Today at 09:41'
          message='Message'
        />
        <Modal.ProTip>Descrption</Modal.ProTip>
      </Modal.Body>
      <Modal.Footer onSubmit={() => console.log('submit')} />
    </Modal.Content>
  </Modal.Portal>
</Modal.Root>

<Modal.Root>
  <Modal.Trigger>
    <button>모달 토글</button>
  </Modal.Trigger>
  <Modal.Portal>
    <Modal.Overlay />
    <Modal.Content>
      <Modal.Header>
        <Modal.Title>Title</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Modal.Label>ENTER DISCORD AUTH CODE</Modal.Label>
        <Modal.ShortText />
      </Modal.Body>
      <Modal.Footer onSubmit={() => console.log('submit')} />
    </Modal.Content>
  </Modal.Portal>
</Modal.Root>

<Modal.Root>
  <Modal.Trigger>
    <button>모달 토글</button>
  </Modal.Trigger>
  <Modal.Portal>
    <Modal.Overlay />
    <Modal.Content>
      <Modal.Header>
        <Modal.Title>Title</Modal.Title>
        <Modal.Description>Description</Modal.Description>
      </Modal.Header>
      <Modal.Footer onSubmit={() => console.log('submit')} />
    </Modal.Content>
  </Modal.Portal>
</Modal.Root>

✅ 체크리스트

• 자신의 코드에 대한 리뷰를 진행했습니다
• 실행 후 심각한 버그나 경고문이 없음을 확인했습니다
• 이해하기 어려운 부분에 적절한 주석을 첨부했습니다
• 요구사항 변경, 레이아웃 변경 등 변경사항을 문서에 반영했습니다