[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 resetTrigger={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,10 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+export type Props = ComponentPropsWithoutRef<'div'> & {
+  resetTrigger?: boolean;
+  children?: ReactNode;
+};
+
+export type DragInfo = {
+  delta: { x: number; y: number };
+};

src/components/common/BottomSheet/index.tsx

@@ -0,0 +1,72 @@
+import { memo, useState } from 'react';
+import { motion, useDragControls, AnimatePresence } from 'framer-motion';
+
+import { useBottomSheet } from '@/hooks/common/useBottomSheet';
+
+import { Props } from './BottomSheet.types';
+
+import { Button } from '../Button';
+import { Portal } from '../Portal';
+
+const Content = ({ children }: React.PropsWithChildren) => (
+  <div className="w-full text-black p-6">{children}</div>
+);
+
+export const BottomSheet = memo(({ children, resetTrigger = false }: Props) => {
+  const dragControls = useDragControls();
+
+  const { sheetHeight, isHidden, isInteractionDisabled, handleDrag, handleDragEnd, resetSheet } =
+    useBottomSheet(resetTrigger);
+
+  return (
+    <Portal isOpen={!isHidden}>
+      <div
+        className={`absolute top-0 left-0 w-full h-full transition-opacity duration-300 ${
+          isHidden ? 'opacity-0 pointer-events-none' : 'opacity-70 pointer-events-auto'
+        }`}
+        onClick={resetSheet}
+      />
+
+      <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"
+            style={{ height: sheetHeight }}
+            drag="y"
+            dragControls={dragControls}
+            dragElastic={0}
+            dragConstraints={{ top: 0, bottom: 0 }}
+            onDrag={handleDrag}
+            onDragEnd={handleDragEnd}
+            animate={{ height: sheetHeight, opacity: isHidden ? 0 : 1 }}
+            transition={{ type: 'spring', stiffness: 170, damping: 30, duration: 0.3 }}
+            onPointerDown={(e) => !isInteractionDisabled && dragControls.start(e)}
+            exit={{ height: 0, opacity: 0 }}
+          >
+            <div className="w-20 h-1.5 bg-primary mx-auto rounded-full" />
+            <Content>{children}</Content>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Portal>
+  );
+});
+
+export const BottomSheetDemo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClickBottomSheet = () => setIsOpen(!isOpen);
+
+  return (
+    <>
+      <Button variant="primary" size="medium" onClick={handleClickBottomSheet}>
+        Open BottomSheet
+      </Button>
+      <BottomSheet resetTrigger={isOpen}>
+        <div className="flex flex-col gap-6 items-center">
+          <div>BottomSheet Content</div>
+        </div>
+      </BottomSheet>
+    </>
+  );
+};

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/hooks/common/useBottomSheet.tsx

@@ -0,0 +1,88 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { animate } from 'framer-motion';
+
+import { DragInfo } from '@/components/common/BottomSheet/BottomSheet.types';
+import { INITIAL_HEIGHT, MIN_VISIBLE_HEIGHT, MAX_HEIGHT } from '@/constants/bottomSheetOptions';
+
+export const useBottomSheet = (resetTrigger: 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 dragStartTimeRef = useRef<number | null>(null);
+  const lastDragPositionRef = useRef(0);
+  const lastVelocityRef = useRef(0);
+
+  useEffect(() => {
+    if (resetTrigger) {
+      setSheetHeight(INITIAL_HEIGHT);
+      setIsHidden(false);
+      setIsInteractionDisabled(false);
+      dragOffsetRef.current = 0;
+      initialPositionRef.current = INITIAL_HEIGHT;
+      dragStartTimeRef.current = null;
+    }
+  }, [resetTrigger]);
+
+  const handleDrag = useCallback(
+    (_: MouseEvent | TouchEvent | PointerEvent, info: DragInfo) => {
+      if (isInteractionDisabled) return;
+
+      if (!dragStartTimeRef.current) {
+        dragStartTimeRef.current = Date.now();
+        lastDragPositionRef.current = info.delta.y;
+      }
+
+      requestAnimationFrame(() => {
+        const dragAmount = -info.delta.y;
+        dragOffsetRef.current += dragAmount;
+
+        const velocity =
+          (lastDragPositionRef.current - info.delta.y) /
+          (Date.now() - (dragStartTimeRef.current || Date.now()));
+        lastVelocityRef.current = velocity;
+
+        const newHeight = Math.min(
+          Math.max(initialPositionRef.current + dragOffsetRef.current, MIN_VISIBLE_HEIGHT),
+          MAX_HEIGHT
+        );
+        setSheetHeight(newHeight);
+      });
+    },
+    [isInteractionDisabled]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    const velocity = lastVelocityRef.current;
+    const projectedHeight = sheetHeight + velocity * 100;
+
+    const snapPoints = [MIN_VISIBLE_HEIGHT, INITIAL_HEIGHT, MAX_HEIGHT];
+    const nearestSnapPoint = snapPoints.reduce((prev, curr) =>
+      Math.abs(curr - projectedHeight) < Math.abs(prev - projectedHeight) ? curr : prev
+    );
+
+    animate(sheetHeight, nearestSnapPoint, {
+      duration: 0.3,
+      ease: 'easeOut',
+      onUpdate: (value) => setSheetHeight(value),
+      onComplete: () => {
+        if (nearestSnapPoint === MIN_VISIBLE_HEIGHT) {
+          setIsHidden(true);
+          setIsInteractionDisabled(true);
+        }
+      },
+    });
+  }, [sheetHeight]);
+
+  const resetSheet = useCallback(() => {
+    setSheetHeight(INITIAL_HEIGHT);
+    setIsHidden(false);
+    setIsInteractionDisabled(false);
+    dragOffsetRef.current = 0;
+    initialPositionRef.current = INITIAL_HEIGHT;
+    dragStartTimeRef.current = null;
+  }, []);
+
+  return { sheetHeight, isHidden, isInteractionDisabled, handleDrag, handleDragEnd, resetSheet };
+};