From 28464163ccb72bb794a5ea09cf35a2694e2e05fd Mon Sep 17 00:00:00 2001
From: happyGyu <happyboyto.dev@gmail.com>
Date: Sun, 30 Jun 2024 01:45:47 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8?=
 =?UTF-8?q?=EC=97=90=20=EB=93=9C=EB=9E=98=EA=B7=B8=EB=A1=9C=20=EB=8B=AB?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

드래그 기능 세부 조절은 나중에
---
 src/components/common/BottomSheet.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/common/BottomSheet.tsx b/src/components/common/BottomSheet.tsx
index cd3d916..cc3d2bd 100644
--- a/src/components/common/BottomSheet.tsx
+++ b/src/components/common/BottomSheet.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion, useDragControls } from "framer-motion";
 import { type ReactNode, useEffect } from "react";
 
 type BottomSheetProps = {
@@ -12,6 +12,8 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
   onClose,
   children,
 }) => {
+  const dragControls = useDragControls();
+
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
@@ -38,6 +40,15 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
             exit={{ y: "100%" }}
             transition={{ duration: 0.3, ease: "easeInOut" }}
             onClick={(e) => e.stopPropagation()}
+            drag="y"
+            dragElastic={0}
+            dragConstraints={{ top: 0 }}
+            dragControls={dragControls}
+            onDragEnd={(_, info) => {
+              if (info.offset.y > 10) {
+                onClose();
+              }
+            }}
           >
             {children}
           </motion.div>