[FEAT] BottomSheet 컴포넌트, 스토리북

src/components/common/BottomSheet/BottomSheet.stories.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable no-restricted-exports */
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BottomSheet } from '.';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'components/common/BottomSheet',
+  component: BottomSheet,
+  tags: ['autodocs'],
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+type Story = StoryObj<typeof BottomSheet>;
+
+export const Basic: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleClickBottomSheet = () => setIsOpen(!isOpen);
+
+    return (
+      <>
+        <Button variant="primary" size="medium" onClick={handleClickBottomSheet}>
+          Open BottomSheet
+        </Button>
+        {isOpen && (
+          <BottomSheet isOpen={isOpen}>
+            <div className="flex flex-col gap-6 items-center">
+              <div>Contents ...</div>
+            </div>
+          </BottomSheet>
+        )}
+      </>
+    );
+  },
+};

src/components/common/BottomSheet/BottomSheet.types.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+export type Props = ComponentPropsWithoutRef<'div'> & {
+  /**
+   * Indicates whether the BottomSheet is currently open.
+   * @default false
+   */
+  isOpen: boolean;
+  /**
+   * Callback function that is called when the BottomSheet should close.
+   */
+  onClose?: VoidFunction;
+  /**
+   * The content to be displayed inside the BottomSheet.
+   */
+  children: ReactNode;
+};
+
+export type DragInfo = {
+  delta: { x: number; y: number };
+};

src/components/common/BottomSheet/index.tsx

@@ -0,0 +1,50 @@
+import { memo } from 'react';
+import { motion, useDragControls, AnimatePresence } from 'framer-motion';
+
+import { BOTTOM_SHEET_ANIMATION } from '@/constants/motions';
+import { useBottomSheet } from '@/hooks/common/useBottomSheet';
+
+import { Props } from './BottomSheet.types';
+
+import { Portal } from '../Portal';
+
+const Content = ({ children }: React.PropsWithChildren) => <div>{children}</div>;
+
+export const BottomSheet = memo(({ children, isOpen }: Props) => {
+  const dragControls = useDragControls();
+
+  const { sheetHeight, isHidden, isInteractionDisabled, handleDrag, handleDragEnd, handleClose } =
+    useBottomSheet(isOpen);
+
+  return (
+    <Portal isOpen={!isHidden}>
+      <div
+        className={`absolute top-0 left-0 w-full h-full transition-opacity duration-300 ${
+          isHidden ? 'pointer-events-none' : 'pointer-events-auto'
+        }`}
+        onClick={handleClose}
+      />
+
+      <AnimatePresence>
+        {!isHidden && (
+          <motion.div
+            className="absolute bottom-0 left-0 w-full bg-white shadow-[0px_-4px_10px_0px_rgba(0,0,0,0.1)] rounded-t-3xl p-4 overflow-hidden z-[1000] h-${sheetHeight}"
+            drag="y"
+            dragControls={dragControls}
+            dragElastic={0}
+            dragConstraints={{ top: 0, bottom: 0 }}
+            onDrag={handleDrag}
+            onDragEnd={handleDragEnd}
+            animate={BOTTOM_SHEET_ANIMATION.animate(sheetHeight, isHidden)}
+            transition={BOTTOM_SHEET_ANIMATION.transition}
+            onPointerDown={(e) => !isInteractionDisabled && dragControls.start(e)}
+            exit={BOTTOM_SHEET_ANIMATION.exit}
+          >
+            <div className="w-20 h-1.5 bg-primary mx-auto rounded-full" />
+            <Content>{children}</Content>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Portal>
+  );
+});

src/constants/bottomSheetOptions.ts

@@ -0,0 +1,3 @@
+export const INITIAL_HEIGHT = 150;
+export const MIN_VISIBLE_HEIGHT = 60;
+export const MAX_HEIGHT = window.innerHeight * 0.9;

src/constants/motions.ts

@@ -31,3 +31,20 @@ export const SLIDER_ANIMATION = {
     },
   },
 };
+
+export const BOTTOM_SHEET_ANIMATION = {
+  animate: (sheetHeight: number, isHidden: boolean) => ({
+    height: sheetHeight,
+    opacity: isHidden ? 0 : 1,
+  }),
+  exit: {
+    height: 0,
+    opacity: 0,
+  },
+  transition: {
+    type: 'spring',
+    stiffness: 170,
+    damping: 30,
+    duration: 0.3,
+  },
+};

src/hooks/common/useBottomSheet.tsx

@@ -0,0 +1,76 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+import { DragInfo } from '@/components/common/BottomSheet/BottomSheet.types';
+import { INITIAL_HEIGHT, MIN_VISIBLE_HEIGHT, MAX_HEIGHT } from '@/constants/bottomSheetOptions';
+
+export const useBottomSheet = (isOpen: boolean) => {
+  const [sheetHeight, setSheetHeight] = useState(INITIAL_HEIGHT);
+  const [isHidden, setIsHidden] = useState(false);
+  const [isInteractionDisabled, setIsInteractionDisabled] = useState(false);
+  const dragOffsetRef = useRef(0);
+  const initialPositionRef = useRef(INITIAL_HEIGHT);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSheetHeight(INITIAL_HEIGHT);
+      setIsHidden(false);
+      setIsInteractionDisabled(false);
+      dragOffsetRef.current = 0;
+      initialPositionRef.current = INITIAL_HEIGHT;
+    }
+  }, [isOpen]);
+
+  const handleDrag = useCallback(
+    (_: MouseEvent | TouchEvent | PointerEvent, info: DragInfo) => {
+      if (isInteractionDisabled) return;
+
+      requestAnimationFrame(() => {
+        const dragAmount = -info.delta.y;
+        dragOffsetRef.current += dragAmount * 5;
+
+        const newHeight = Math.min(
+          Math.max(initialPositionRef.current + dragOffsetRef.current, MIN_VISIBLE_HEIGHT),
+          MAX_HEIGHT
+        );
+        setSheetHeight(newHeight);
+      });
+    },
+    [isInteractionDisabled, setSheetHeight]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    if (sheetHeight <= MIN_VISIBLE_HEIGHT) {
+      setIsHidden(true);
+      setIsInteractionDisabled(true);
+      return;
+    }
+
+    if (sheetHeight > MAX_HEIGHT) {
+      setSheetHeight(MAX_HEIGHT);
+      return;
+    }
+  }, [sheetHeight]);
+
+  const resetSheet = useCallback(() => {
+    setSheetHeight(INITIAL_HEIGHT);
+    setIsHidden(false);
+    setIsInteractionDisabled(false);
+    dragOffsetRef.current = 0;
+    initialPositionRef.current = INITIAL_HEIGHT;
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (!isInteractionDisabled) {
+      resetSheet();
+    }
+  }, [isInteractionDisabled, resetSheet]);
+
+  return {
+    sheetHeight,
+    isHidden,
+    isInteractionDisabled,
+    handleDrag,
+    handleDragEnd,
+    handleClose,
+  };
+};