344 feature new modal system

[dohyun-ko]

Toss-overlay를 활용하되 간편히 사용할 수 있도록 wrapper를 만들었습니다. 모달은 형태가 다양해질 수 있기에 compound component로 작업했습니다.

Q. 모달에도 바텀시트처럼 slide-up 애니메이션이 들어가야할까요? 영상에는 넣었지만 현재 코드에선 뺐습니다.

Example with Storybook

const Template: StoryFn<typeof Modal> = (args) => {
  const modal = useModal();

  return (
    <Button
      onClick={() =>
        modal.open(
          <Modal {...args}>
            <Modal.Title>Modal Title</Modal.Title>
            <Modal.ButtonContainer>
              <Modal.Button variant={'outlined'}>Cancel</Modal.Button>
              <Modal.Button variant={'contained'} onClick={() => {}}>
                Confirm
              </Modal.Button>
            </Modal.ButtonContainer>
          </Modal>,
        )
      }
    >
      <p>Show modal</p>
    </Button>
  );
};

const SimpleTemplate: StoryFn<typeof Modal> = (args) => (
  <Modal {...args} title={'Modal Title'} text={'Modal Text'}>
    <Modal.ButtonContainer>
      <Modal.Button variant={'contained'} onClick={() => {}}>
        Close
      </Modal.Button>
    </Modal.ButtonContainer>
  </Modal>
);

[github-actions[bot]]

Preview URL: https://ziggle-mnt7mx8ov-2paperstars-projects.vercel.app

[dohyun-ko]

사라질 때도 트랜지션 있으면 좋겠는.. 데 어려우면 말구요

버튼에 onClick이 주어지지 않으면 무조건 닫는 액션이 좀 이상한 것 같아요. 명시적으로 닫는 버튼이라고 알려줄 수 있으면 좋을 것 같아요

반영했습니다! 머지할게요

[github-actions[bot]]

Preview URL: https://ziggle-4gksh42jk-2paperstars-projects.vercel.app