refactor: bottomSheet hooks 리팩토링

[sujin-park]

Description

바텀시트 하위컴포넌트를 동적으로 변경하기 위해서 useBottomSheet 에 함수를 추가하였습니다.

Changes

useBottomSheet 를 사용하는 방법

페이지 1개에 bottomSheet 하위 컴포넌트가 고정일 때

const { isVisibleSheet, calcBottomSheetHeight, toggleSheet } = useBottomSheet();

<>
{isVisibleSheet && (
   <CommonBottomSheetContainer onClose={onCloseBottomSheet} bottomSheetHeight={calcBottomSheetHeight(...)}>
      {bottomSheetRender.children}
   </CommonBottomSheetContainer>
)}
</>

페이지 1개에 bottomSheet children 이 변경될 수 있을 때

const {
  isVisibleSheet,
  toggleSheet,
  calcBottomSheetHeight,
  bottomSheetRender,
  setBottomSheetRender,
} = useBottomSheet();

<>
{isVisibleSheet && (
   <CommonBottomSheetContainer onClose={toggleSheet} bottomSheetHeight={bottomSheetRender.height}>
      {bottomSheetRender.children}
   </CommonBottomSheetContainer>
)}
</>

이점 (이라고 생각하는 부분)

• bottomSheet 의 type 을 상수로 관리하거나 bottomSheet 관련 객체를 선언해둘 필요가 없습니다.
• bottomSheet 는 한 페이지에 한 개만 노출될 수 있고, children 만 변경이 되기 때문에 isVisibleSheet 플래그 하나만을 바라볼 수 있습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
11th-5team-fe	✅ Ready (Inspect)	Visit Preview	Nov 22, 2022 at 2:02PM (UTC)

[sangbooom]

수고하셨습니다~~👍🏻

[sangbooom]

stopPropagation을 넣으신 이유가 어떤 상황을 고려하신건가용?

[sujin-park]

제가 잘못 넣었습니다.. 테스트하다가 넣었네요.. 제거했습니다!! 5d8830f