바텀시트 컴포넌트 개발

[klmhyeonwoo]

바텀시트 컴포넌트 개발

---

🏄🏼‍♂️‍ Summary (요약)

• 바텀시트 컴포넌트 개발
• 바텀시트 데스크톱 이벤트 대응
• 바텀시트 모바일 이벤트 대응

🫨 Describe your Change (변경사항)

• src/component/BottomSheet/BottomSheet.tsx
• src/component/BottomSheet/BottomSheetOption.ts
• src/hooks/useBottomSheet.ts
• src/component/BottomSheet/component/BottomSheetHeader.tsx
• src/component/BottomSheet/component/BottomSheetContent.tsx
• src/utils/externalStore/create.ts
• src/utils/externalStore/hook.ts

🧐 Issue number and link (참고)

• 공통 컴포넌트 정의 #11

📚 Reference (참조)

• 참고 사이트
  • https://blog.mathpresso.com/bottom-sheet-for-web-55ed6cc78c00
  • https://ko.react.dev/reference/react/useSyncExternalStore
• 모바일 · 데스크톱 환경에 대한 부분들을 설계하면서 개발을 진행해보았고, 바텀 시트 사용 관련 내용은 아래와 같습니다.
• 상태 관리에 대한 부분은 useSyncExternalStore를 사용하였고, Feature/11/icon component #25 참고하여 바텀시트 관련 아이콘 추가를 진행하였습니다.
• 신규 라이브러리로 동적 모션을 위한 framer-motion 라이브러리가 추가되었습니다.

const { openBottomSheet, bottomSheetState } = useBottomSheet();

/** `openBottomSheet` 메소드를 통해 바텀시트를 오픈할 수 있고, 이에 따른 상태 값은 `bottomSheetState`에서 확인할 수 있어요 */
<Button onClick={openBottomSheet}> 그냥 그저 그런 버튼 </Button>

/** 
* title : 바텀 시트의 제목을 의미해요
* contents : 바텀 시트의 내용을 의미해요 `JSX` 엘리먼트를 넣어 사용자가 구성할 수 있어요
* handler : 바텀 시트 터치 또는 마우스 이벤트를 통해 직접 움직일 수 있어요
*/

<BottomSheet
        title={"헬로우"}
        contents={
            <p> 완전 이거 럭키비키자냐?</p>
        }
        handler={true}
 />

[sean2337]

수고하셨습니다!! 현우 최고!!🙌🙌

[leeminhee119]

크 고생 많으셨습니다 👏🍀

[donghunee]

워.. 고생하셨습니다~!!👍👍👍