♻️ refactor: BottomSheet 컴포넌트 코드 최소화 리팩토링

[mihyunLee]

• 🔀 PR 제목의 형식을 잘 작성했나요? e.g. ✨feat: PR 등록
• 🧹 불필요한 코드는 제거했나요?
• 💭 이슈는 등록했나요?
• 🏷️ 라벨은 등록했나요?

⚡ PR 한 줄 요약

BottomSheet 컴포넌트 코드를 최소화 하기 위한 리팩토링을 진행했다.

🔍 상세 작업 내용

• props에 전달한 click 함수로 modal handler와 dim으로도 모달을 닫을 수 있게 했다.
• BottomSheet가 가지고 있는 animation에 대한 상태값을 제거했다.
• props에 따른 animation 동작 코드 중복 줄였다.
• BottomSheet의 height를 auto로 두어 BottomSheet의 Slide 애니메이션의 높이와 BottomSheet의 height를 조절하기 위한 LEN props를 삭제했다.
• BottomSheet의 Handler의 위치를 콘텐츠로 받아올 children의 하단으로 마크업 위치를 옮겼다. (접근성 측면)
• BottomSheet의 ListModal과 BasicMdoal에 렌더링 될 props와 onClick을 전달하기 위해 BottomSheet와 분리했다.
• ListModal, BasicModal 디자인을 피그마와 맞췄다.
• BasicModal의 경우 최대 높이를 지정하고, 지정한 높이를 넘어가면 스크롤이 되게 스타일을 수정하였다.
• BottomSheet 뒤에 스크롤 기능을 막았다.

💬 참고 사항

• page 컴포넌트에서 BottomSheet 사용 방법

1. BottomSheet 안에 LIstModal을 렌더링할 경우

export default function HomePage() {
  const [isShow, setIsShow] = useState(false);

  const handleClickModalOpen = () => {
    setIsShow(true);
  };

  const handleClickModalClose = () => {
    setIsShow(false);
  };

  return (
    <BasicLayout>
      <Button onClick={handleClickModalOpen}>모달 열기</Button>
      <BottomSheet isShow={isShow} onClick={handleClickModalClose}>
        <ListModal type='myComment' />
      </BottomSheet>
    </BasicLayout>
  );
}

2. BottomSheet 안에 BasicMdoal을 렌더링할 경우

export default function HomePage() {
  const [isShow, setIsShow] = useState(false);

  const handleClickModalOpen = () => {
    setIsShow((prev) => !prev);
  };

  return (
    <BasicLayout>
      <Button onClick={handleClickModalOpen}>모달 열기</Button>
      <BottomSheet isShow={isShow} onClick={handleClickModalOpen}>
        <BasicModal>
           /* -- 여기에 렌더링할 컴포넌트 추가 작성 */
        <BasicModal>
      </BottomSheet>
    </BasicLayout>
  );
}

💡 관련 이슈

• Close ♻️ refactor: BottomSheet 컴포넌트 코드 최소화 리팩토링 #55

[ony540]

확인했습니다 승인합니다~!