feat: BottomSheet 컴포넌트 추가

package.json

@@ -17,6 +17,7 @@
 		"axios": "^1.7.2",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.11",
+		"framer-motion": "^11.2.12",
 		"jotai": "^2.8.3",
 		"js-cookie": "^3.0.5",
 		"react": "19.0.0-beta-26f2496093-20240514",

src/components/common/BottomSheet.tsx

@@ -0,0 +1,50 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { type ReactNode, useEffect } from "react";
+
+type BottomSheetProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+};
+
+const BottomSheet: React.FC<BottomSheetProps> = ({
+  isOpen,
+  onClose,
+  children,
+}) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [isOpen]);
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            className="fixed inset-0 bg-gray100 bg-opacity-50 z-40"
+            onClick={onClose}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.5 }}
+            exit={{ opacity: 0 }}
+          />
+          <motion.div
+            className="fixed bottom-0 left-0 right-0 bg-offWhite010 rounded-t-[24px] px-4 z-50"
+            initial={{ y: "100%" }}
+            animate={{ y: 0 }}
+            exit={{ y: "100%" }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {children}
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default BottomSheet;