하단 모달 슬라이드 컴포넌트 구현

[imb96]

⚙️ PR 타입

• Feature
• Hotfix

✨ 기능 설명 or 🚨 문제 상황

하단에서 올라오는 모달 구현했습니다.

👨‍💻 구현 내용 or 👍 해결 내용

하단 모달 슬라이드 컴포넌트를 렌더링하면 아래에서 위로 애니메이션과 함께 화면에 출력됩니다.
모달 슬라이드 내부에 원하는 컴포넌트를 child로 렌더링 할 수 있습니다.
모달 밖 영역을 클릭하면 모달이 닫힙니다.
모달을 위에서 아래로 스크롤하면 모달이 닫힙니다. - 이를 위해서 커스텀 훅을 구현했습니다.

모달이 사라질 때 아래로 사라지는 애니메이션은 구현하지 못했습니다.

🎯 PR 포인트

사용 예시

import { ModalBottomSheet } from '@components/shared/ModalBottomSheet';

const Page = () => {
  // 모달 표시할 여부, 모달 표시할 여부 set함수
  const [showModal, setShowModal] = useState(false);
    return (
	<>
	  {showModal && (
		<ModalBottomSheet setShowModal={setShowModal}>
		    <Component /> // Modal 안에 표시할 컴포넌트
		</ModalBottomSheet>
	  )}
	</>
    )
}

📝 참고 사항

수정할 부분 있으면 알려주세요!
모달이 사라질 때 아래로 사라지는 애니메이션 구현 방법 알고 있으시면 알려주세요!

❓ 궁금한 점

#27 close

[1eecan]

🎉 @imb96 님 랜덤 리뷰어로 당첨되셨습니다! 리뷰를 부탁드립니다. 🙏
@1g2g 님 리뷰를 부탁드립니다. 🙏