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

package.json

@@ -34,6 +34,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.26.2",
+    "react-use-measure": "^2.1.1",
     "storybook": "^8.3.5",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.13",

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

@@ -0,0 +1,41 @@
+/* eslint-disable no-restricted-exports */
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BottomSheet } from '.';
+import { Button } from '../Button';
+import { Layout } from '../Layout';
+
+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 [resetTrigger, setResetTrigger] = useState(0);
+
+    const handleClickBottomSheet = () => {
+      setResetTrigger((prev) => prev + 1);
+    };
+
+    return (
+      <Layout>
+        <div>
+          <Button size="medium" onClick={handleClickBottomSheet} variant="primary">
+            Open BottomSheet
+          </Button>
+          <BottomSheet resetTrigger={resetTrigger}>
+            <div className="flex flex-col gap-6 items-center">
+              <div>Contents</div>
+            </div>
+          </BottomSheet>
+        </div>
+      </Layout>
+    );
+  },
+};

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

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+export type Props = ComponentPropsWithoutRef<'div'> & {
+  resetTrigger?: number;
+  children?: ReactNode;
+};
+
+export type DragInfo = {
+  delta: { x: number; y: number };
+};

src/components/common/BottomSheet/index.tsx

@@ -0,0 +1,51 @@
+import { memo } from 'react';
+import { motion, useDragControls, AnimatePresence } from 'framer-motion';
+
+import { useBottomSheet } from '@/hooks/common/useBottomSheet';
+
+import { Props } from './BottomSheet.types';
+
+const Content = ({ children }: React.PropsWithChildren) => (
+  <div className="w-full text-black p-6">{children}</div>
+);
+
+export const BottomSheet = memo(({ resetTrigger = 0, children }: Props) => {
+  const initialHeight = 150;
+  const minVisibleHeight = 60;
+  const dragControls = useDragControls();
+
+  const { sheetHeight, isHidden, isInteractionDisabled, handleDrag, handleDragEnd, resetSheet } =
+    useBottomSheet(initialHeight, minVisibleHeight, resetTrigger);
+
+  return (
+    <>
+      <div
+        className={`absolute top-0 left-0 w-full h-full transition-opacity duration-300 ${
+          sheetHeight > 10 ? 'opacity-70 pointer-events-auto' : 'opacity-0 pointer-events-none'
+        }`}
+        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>
+    </>
+  );
+});

src/hooks/common/useBottomSheet.tsx

@@ -0,0 +1,52 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+import { DragInfo } from '@/components/common/BottomSheet/BottomSheet.types';
+
+export const useBottomSheet = (initialHeight = 150, minVisibleHeight = 60, resetTrigger = 0) => {
+  const [sheetHeight, setSheetHeight] = useState(initialHeight);
+  const [isHidden, setIsHidden] = useState(false);
+  const [isInteractionDisabled, setIsInteractionDisabled] = useState(false);
+  const dragOffsetRef = useRef(0);
+  const initialPositionRef = useRef(initialHeight);
+
+  useEffect(() => {
+    setSheetHeight(initialHeight);
+    setIsHidden(false);
+    setIsInteractionDisabled(false);
+    dragOffsetRef.current = 0;
+    initialPositionRef.current = initialHeight;
+  }, [resetTrigger, initialHeight]);
+
+  const handleDrag = useCallback(
+    (_: MouseEvent | TouchEvent | PointerEvent, info: DragInfo) => {
+      if (isInteractionDisabled) return;
+
+      const dragAmount = -info.delta.y;
+      dragOffsetRef.current += dragAmount;
+
+      const newHeight = Math.max(
+        initialPositionRef.current + dragOffsetRef.current,
+        minVisibleHeight
+      );
+      setSheetHeight(newHeight);
+    },
+    [isInteractionDisabled, minVisibleHeight]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    if (sheetHeight <= minVisibleHeight) {
+      setIsHidden(true);
+      setIsInteractionDisabled(true);
+    }
+  }, [sheetHeight, minVisibleHeight]);
+
+  const resetSheet = useCallback(() => {
+    setSheetHeight(initialHeight);
+    setIsHidden(false);
+    setIsInteractionDisabled(false);
+    dragOffsetRef.current = 0;
+    initialPositionRef.current = initialHeight;
+  }, [initialHeight]);
+
+  return { sheetHeight, isHidden, isInteractionDisabled, handleDrag, handleDragEnd, resetSheet };
+};

yarn.lock

@@ -4584,6 +4584,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debounce@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "debounce@npm:1.2.1"
+  checksum: 10c0/6c9320aa0973fc42050814621a7a8a78146c1975799b5b3cc1becf1f77ba9a5aa583987884230da0842a03f385def452fad5d60db97c3d1c8b824e38a8edf500
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -5933,6 +5940,7 @@ __metadata:
     react-dom: "npm:^18.3.1"
     react-error-boundary: "npm:^4.0.13"
     react-router-dom: "npm:^6.26.2"
+    react-use-measure: "npm:^2.1.1"
     storybook: "npm:^8.3.5"
     storybook-addon-sass-postcss: "npm:^0.3.2"
     tailwind-merge: "npm:^2.5.4"
@@ -9293,6 +9301,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-use-measure@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "react-use-measure@npm:2.1.1"
+  dependencies:
+    debounce: "npm:^1.2.1"
+  peerDependencies:
+    react: ">=16.13"
+    react-dom: ">=16.13"
+  checksum: 10c0/77b035189dbd613f50014ae56cbfc1363a4eba5104f68f3bc09cbdd20719ae7fb42884e53328175c30b238215c5b8064c60098d70b3fa9b8d902db6ffb07c6a3
+  languageName: node
+  linkType: hard
+
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"