feat: bottom sheet 컴포넌트 구현

[im-na0]

설명

close #39 floating ui를 이용해 bottom sheet 컴포넌트를 구현합니다.

변경 내역

• @floating-ui/react 패키지 추가
• bottom-sheet 컴포넌트 구현
  • compound pattern로 구현
• global reset css button margin 속성 수정

논의할 점

사용법

function DefaultBottomSheet() {
    const [open, setOpen] = useState(false) // controlled 방식
    return (
      <>
        <button onClick={() => setOpen(true)}>바텀시트 열기</button>
        <BottomSheet open={open} onOpenChange={setOpen}>
          <BottomSheetContent>
            <BottomSheetHeader>
              <BottomSheetTitle>바텀시트 제목</BottomSheetTitle>
              <BottomSheetClose />
            </BottomSheetHeader>
            <BottomSheetBody>
              <BottomSheetDescription>바텀시트 내용
              </BottomSheetDescription>
            </BottomSheetBody>
          </BottomSheetContent>
        </BottomSheet>
      </>
    )
  }

https://floating-ui.com/docs/dialog 를 참고해서 만들었습니다

스크린샷

https://github.com/dev-wiki-kr/dev-wiki/assets/139189221/8b345a64-c79f-4fba-8767-20d36f54911a

[hwangstar156]

머지할게요~