[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,17 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+export type Props = ComponentPropsWithoutRef<'div'> & {
+  /**
+   * Indicates whether the BottomSheet is currently open.
+   * @default false
+   */
+  isOpen: boolean;
+  /**
+   * The content to be displayed inside the BottomSheet.
+   */
+  children: ReactNode;
+};
+
+export type DragInfo = {
+  delta: { x: number; y: number };
+};

src/components/common/BottomSheet/BottomSheetHeader.tsx

@@ -0,0 +1,3 @@
+export const BottomSheetHeader = () => {
+  return <div className="w-20 h-1.5 bg-primary mx-auto rounded-full" />;
+};

src/components/common/BottomSheet/index.tsx

@@ -0,0 +1,47 @@
+import { memo } from 'react';
+import { motion, useDragControls } from 'framer-motion';
+
+import { BOTTOM_SHEET_ANIMATION } from '@/constants/motions';
+import { useBottomSheet } from '@/hooks/common/useBottomSheet';
+
+import { Props } from './BottomSheet.types';
+import { BottomSheetHeader } from './BottomSheetHeader';
+
+import { Portal } from '../Portal';
+
+export const BottomSheet = memo(({ children, isOpen }: Props) => {
+  const dragControls = useDragControls();
+
+  const {
+    sheetHeight,
+    isHidden,
+    isInteractionDisabled,
+    handleDrag,
+    handleDragEnd,
+    bottomSheetRef,
+  } = useBottomSheet(isOpen);
+
+  return (
+    <Portal isOpen={!isHidden}>
+      {!isHidden && (
+        <motion.div
+          ref={bottomSheetRef}
+          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}
+        >
+          <BottomSheetHeader />
+          {children}
+        </motion.div>
+      )}
+    </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,81 @@
+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);
+  const bottomSheetRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSheetHeight(INITIAL_HEIGHT);
+      setIsHidden(false);
+      setIsInteractionDisabled(false);
+      dragOffsetRef.current = 0;
+      initialPositionRef.current = INITIAL_HEIGHT;
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: Event) => {
+      if (bottomSheetRef.current && !bottomSheetRef.current.contains(event.target as Node)) {
+        setSheetHeight(INITIAL_HEIGHT);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('touchstart', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [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]);
+
+  return {
+    sheetHeight,
+    isHidden,
+    isInteractionDisabled,
+    handleDrag,
+    handleDragEnd,
+    bottomSheetRef,
+  };
+};