feat: #27 useBottomSheet Hook event type 수정

Java-and-Script · Oct 29, 2023 · 80faa86 · 80faa86
1 parent dc4fd68
commit 80faa86
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/components/shared/ModalBottomSheet.tsx b/src/components/shared/ModalBottomSheet.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 
 import { useBottomSheet } from '@hooks/useBottomSheet';
 
-type ModalBottomProps = {
+type ModalBottomSheetProps = {
   children: React.ReactNode;
   setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
 };
@@ -25,7 +25,7 @@ const StyledBottomSheet = styled.div`
   left: 0;
   width: 100%;
   height: 75%;
-  ${({ theme }) => theme.STYLES.FLEX_CENTER}
+  ${({ theme }) => theme.STYLES.FLEX_CENTER};
   flex-direction: column;
   background-color: white;
   border-top-left-radius: 0.75rem;
@@ -65,7 +65,7 @@ const BottomSheet = ({ children }: { children: React.ReactNode }) => (
   <StyledBottomSheet>{children}</StyledBottomSheet>
 );
 
-export const ModalBottomSheet = (props: ModalBottomProps) => {
+export const ModalBottomSheet = (props: ModalBottomSheetProps) => {
   const [isModalVisible, setIsModalVisible] = useState(true);
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -115,22 +115,24 @@ export const ModalBottomSheet = (props: ModalBottomProps) => {
     }
   );
 
+  const BottomSheetContainer = styled.div``;
+
   return (
     <StyledModalBottom>
       {isModalVisible && (
         <>
           <StyledDeemBackground />
-          <div
+          <BottomSheetContainer
             ref={modalRef}
-            onTouchStart={() => handleTouchStart}
-            onTouchMove={() => handleTouchMove}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}
           >
             <BottomSheet {...props}>
               <StyledModalHeader />
               {props.children}
             </BottomSheet>
-          </div>
+          </BottomSheetContainer>
         </>
       )}
     </StyledModalBottom>

diff --git a/src/hooks/useBottomSheet.ts b/src/hooks/useBottomSheet.ts
@@ -6,11 +6,11 @@ export const useBottomSheet = (closeModal: () => void) => {
     move: 0,
   });
 
-  const handleTouchStart = (event: TouchEvent) => {
+  const handleTouchStart = (event: React.TouchEvent) => {
     record.current.first = event.touches[0].screenY;
   };
 
-  const handleTouchMove = useCallback((event: TouchEvent) => {
+  const handleTouchMove = useCallback((event: React.TouchEvent) => {
     if (!record.current.move) {
       record.current.move = event.touches[0].screenY;
     }