BottomSheet Drag Close Handler 적용 가이드

1const [isDragging, setIsDragging] = useState(false)23const startYRef = useRef(0)4const deltaYRef = useRef(0)5const isClosingRef = useRef(false)

1const handleDragStart = (clientY: number) => {2  if (isClosingRef.current) return3  setIsDragging(true)4  startYRef.current = clientY5  deltaYRef.current = 06}

1const handleDragMove = (clientY: number, el: HTMLElement) => {2  if (!isDragging || isClosingRef.current) return34  const delta = clientY - startYRef.current5  deltaYRef.current = Math.max(0, delta)67  el.style.transitionDuration = '0ms'8  el.style.transform = `translate3d(0, ${deltaYRef.current}px, 0)`9}

1const handleDragEnd = (el: HTMLElement, onClose?: () => void) => {2  const shouldClose = deltaYRef.current >= 2034  if (shouldClose && onClose) {5    isClosingRef.current = true6    el.style.transitionDuration = '300ms'7    el.style.transform = 'translate3d(0, 100%, 0)'8    window.setTimeout(() => onClose(), 300)9  } else {10    el.removeAttribute('style')11  }1213  setIsDragging(false)14  startYRef.current = 015  deltaYRef.current = 016}

1<StyledBottomSheet2  onMouseMove={handleMouseMove}3  onMouseUp={handleMouseUp}4  onMouseOut={handleMouseOut}5  onTouchMove={handleTouchMove}6  onTouchEnd={handleTouchEnd}7  onTouchCancel={handleTouchCancel}8>9  <DragBar onMouseDown={handleMouseDown} onTouchStart={handleTouchStart}>10    <DragHandle />11  </DragBar>12  {children}13</StyledBottomSheet>

1Drag start2  -> track delta3  -> if delta >= threshold: slide-down animation -> onClose4  -> else: restore to origin