Merge pull request #92 from team-offonoff/feat/better-bottomsheet

feat: better bottomsheet

src/components/Home/TopicCard/TopicCard.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 
-import BottomSheet from '@components/commons/BottomSheet/BottomSheet';
 import Text from '@components/commons/Text/Text';
 import ChoiceSlider from '@components/Home/ChoiceSlider/ChoiceSlider';
 import CommentBox from '@components/Home/CommentBox/CommentBox';
 import Timer from '@components/Home/Timer/Timer';
+import useBottomSheet from '@hooks/useBottomSheet/useBottomSheet';
 import { TopicResponse } from '@interfaces/api/topic';
 
 import { colors } from '@styles/theme';
@@ -23,7 +23,7 @@ import {
 
 const TopicCard = () => {
   const [hasVoted, setHasVoted] = useState(false);
-  const [isCommentOpen, setIsCommentOpen] = useState(false);
+  const { BottomSheet: CommentSheet, toggleSheet } = useBottomSheet({});
 
   const data: TopicResponse = {
     topicId: 1,
@@ -72,7 +72,7 @@ const TopicCard = () => {
 
   const handleOnClickCommentBox = () => {
     if (hasVoted) {
-      setIsCommentOpen(true);
+      toggleSheet();
     }
   };
 
@@ -120,11 +120,9 @@ const TopicCard = () => {
           onClick={handleOnClickCommentBox}
         />
       </TopicCardContainer>
-      {isCommentOpen && (
-        <BottomSheet open={isCommentOpen} setIsOpen={setIsCommentOpen}>
-          <div style={{ height: '100%', backgroundColor: 'white' }}>hi</div>
-        </BottomSheet>
-      )}
+      <CommentSheet>
+        <div style={{ height: '100%', backgroundColor: 'white' }}>hi</div>
+      </CommentSheet>
     </React.Fragment>
   );
 };

src/components/commons/BottomSheet/BottomSheet.tsx

@@ -114,7 +114,7 @@ const Backdrop = styled(motion.div)`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1;
+  z-index: ${(props) => props.theme.zIndex.sheet};
   width: 100%;
   height: 100%;
 

src/hooks/useBottomSheet/useBottomSheet.tsx

@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react';
+
+import BottomSheet from '@components/commons/BottomSheet/BottomSheet';
+
+interface UseBottomSheetProps {
+  snapPoints?: number[];
+  initialSnap?: number;
+}
+
+const useBottomSheet = (props: UseBottomSheetProps) => {
+  const { snapPoints = [0.9, 0.7, 0], initialSnap = 0.7 } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleSheet = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const Sheet = ({ children }: { children: React.ReactNode }) => (
+    <BottomSheet
+      open={isOpen}
+      setIsOpen={setIsOpen}
+      snapPoints={snapPoints}
+      initialSnap={initialSnap}
+    >
+      {children}
+    </BottomSheet>
+  );
+
+  return { BottomSheet: isOpen ? Sheet : () => null, toggleSheet };
+};
+
+export default useBottomSheet;