✨ feat: Modal 컴포넌트 및 스토리북 작성

[bbearcookie]

🧩 이슈 번호

• close Modal 컴포넌트 #28

✅ 작업 사항

• Modal 컴포넌트 작업
• 스토리북에 reset-css 적용
  • 기존에 적용이 안되어있더라구요.. 자칫 스토리 북의 내용과 실제 렌더링의 결과가 다를 수 있어서 설정 해 놓았어요!
• storyName 필드를 name 필드로 변경
• svg 애셋 3가지 추가

👩‍💻 공유 포인트 및 논의 사항

사용법

1. 사용하고자 하는 컴포넌트에서 useModal 훅을 선언해요.
2. Modal 컴포넌트에 훅의 모든 인자를 전달해요.
   • children 으로는 모달 내부에서 그려야 할 컨텐츠를 표현해요.
3. 필요에 따라 훅의 isOpen, open, close 등의 값을 가지고 모달을 조작해요.

const ModalTestPage = () => {
  const modal = useModal();
  const { open, close } = modal;

  return (
    <div>
      <Button onClick={open}>모달 열기</Button>

      <Modal {...modal}>
        <section css={styles.container}>
          <div css={styles.bottomCard} onClick={close}>
            <span>접기</span>
            <CaretDown />
          </div>
        </section>
      </Modal>
    </div>
  );
};

storyName 관련

스토리북을 실행하다가 다음 경고 메시지를 확인했는데요, 찾아보니 deprecated 되었다고 해서 name 변경했어요.

테스트용 페이지 관련

왠지 모달 컴포넌트여서 스토리북 외에도 실제 리액트 앱에서도 테스트해봐야할 것 같아서 /modal-test 라우팅 경로에 임시로 작성해보았는데요.. 이상은 없는 것 같아서 삭제하고 머지하는게 좋으려나요??

실행 결과

[github-actions]

🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-wyewsahbqy.chromatic.com/
🚀 React Preview 보러가기: https://sea-of-my-heart-5nt7cfd2p-dnd-sea-of-my-heart.vercel.app

[easyhyun00]

수고 하였습니다! 👍

useModal 훅을 만들어 모달 상태 관리를 잘 분리했네요! 저도 배워갑니다! 그리고 Framer Motion 사용해서 자연스러운 애니메이션 효과도 줬군요!

모달 닫기

편지랑 접기 사이에 공간을 눌렀을 때도 모달이 닫히면 더 좋을 것 같습니다.

궁금한 점

편지 내용이 마우스로 드래그가 안돼서 봤더니 user-select: none; 이게 있더라구요. 편지 내용은 드래그 할 수 있는 게 더 좋지 않을까요??

[easyhyun00]

storyName 관련

아 감사합니다!

테스트용 페이지 관련

굳이 삭제 안해도 괜찮을 것 같아요!

[bbearcookie]

@easyhyun00

편지랑 접기 사이에 공간을 눌렀을 때도 모달이 닫히면 더 좋을 것 같습니다.

사실 기본 모달 컴포넌트의 background 영역은 클릭하면 닫히도록 적용이 되어있긴 한데.. 모달을 사용하는 측인 스토리북 예시 코드에도 적용을 해 놓을지 고민이 되었어요!!
우선 적용 해 놓았습니다!! 😁

편지 내용이 마우스로 드래그가 안돼서 봤더니 user-select: none; 이게 있더라구요. 편지 내용은 드래그 할 수 있는 게 더 좋지 않을까요??

맞습니다.. 꼼꼼하게 봐주셔서 감사해요!! 😊👍

[easyhyun00]

Approve 합니다!