feat(web): migrate BottomSheet (#55)

apps/web/package.json

@@ -15,17 +15,19 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-query-devtools": "^5.80.7",
     "date-fns": "^4.1.0",
     "next": "^15.3.0",
     "next-auth": "5.0.0-beta.28",
+    "overlay-kit": "^1.8.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "vaul": "^1.1.2",
     "zod": "^3.25.67"
   },
   "devDependencies": {

apps/web/src/shared/components/BottomSheet/BottomSheet.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { OverlayProvider, overlay } from "overlay-kit";
+import { BottomSheet } from "./BottomSheet";
+
+/**
+ * **vaul docs**
+ * https://vaul.emilkowal.ski/api
+ */
+const meta: Meta<typeof BottomSheet> = {
+  title: "V2/Components/BottomSheet",
+  component: BottomSheet,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    locked: {
+      control: "boolean",
+      description: "외부 요소와의 상호작용을 설정합니다.",
+    },
+    radius: {
+      control: "select",
+      options: ["none", "small", "medium", "large"],
+    },
+    theme: {
+      control: "select",
+      options: ["light", "dark"],
+    },
+  },
+  decorators: [
+    Story => (
+      <OverlayProvider>
+        <Story />
+      </OverlayProvider>
+    ),
+  ],
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const BottomSheetNoScroll = () => {
+  return (
+    <div style={{ height: 240, padding: 24, display: "flex", alignItems: "center", justifyContent: "center" }}>
+      BottomSheet
+    </div>
+  );
+};
+
+const BottomSheetScroll = () => {
+  return (
+    <div style={{ height: 2000, padding: 24, display: "flex", alignItems: "center", justifyContent: "center" }}>
+      BottomSheet
+    </div>
+  );
+};
+
+export const BottomSheets: Story = {
+  args: {
+    showHandle: true,
+    radius: "medium",
+  },
+  render: args => {
+    const openNoScrollBottomSheet = () => {
+      overlay.open(({ isOpen, close }) => (
+        <BottomSheet
+          {...args}
+          open={isOpen}
+          onClose={() => {
+            close();
+          }}
+          content={<BottomSheetNoScroll />}
+        />
+      ));
+    };
+
+    const openScrollBottomSheet = () => {
+      overlay.open(({ isOpen, close }) => (
+        <BottomSheet
+          {...args}
+          open={isOpen}
+          onClose={() => {
+            close();
+          }}
+          content={<BottomSheetScroll />}
+        />
+      ));
+    };
+
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          alignItems: "center",
+        }}
+      >
+        <button type="button" onClick={openNoScrollBottomSheet}>
+          Open(No Scroll)
+        </button>
+        <button type="button" onClick={openScrollBottomSheet}>
+          Open(Scroll)
+        </button>
+      </div>
+    );
+  },
+};

apps/web/src/shared/components/BottomSheet/BottomSheet.style.ts

@@ -0,0 +1,71 @@
+import { css, cva } from "../../../../styled-system/css";
+
+/* Color tokens */
+const SEED_PALETTE_COLOR_BASE_100 = "#ffffff";
+const SEED_PALETTE_COLOR_BASE_800 = "#494f54";
+
+/* Radius tokens */
+const SEED_SPACING_100 = "0px";
+const SEED_SPACING_300 = "8px";
+const SEED_SPACING_600 = "20px";
+const SEED_SPACING_900 = "32px";
+
+export const overlay = css({
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+});
+
+export const drawerContent = cva({
+  base: {
+    position: "fixed",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: "fit-content",
+    backgroundColor: "#fff",
+    outline: "none",
+    maxHeight: "calc(100dvh - 32px)",
+    borderBottomLeftRadius: "0 !important",
+    borderBottomRightRadius: "0 !important",
+    overflowY: "hidden",
+  },
+  variants: {
+    radius: {
+      none: {
+        borderTop: SEED_SPACING_100,
+      },
+      small: {
+        borderRadius: SEED_SPACING_300,
+      },
+      medium: {
+        borderRadius: SEED_SPACING_600,
+      },
+      large: {
+        borderRadius: SEED_SPACING_900,
+      },
+    },
+    theme: {
+      light: {
+        backgroundColor: SEED_PALETTE_COLOR_BASE_100,
+      },
+      dark: {
+        backgroundColor: SEED_PALETTE_COLOR_BASE_800,
+      },
+    },
+  },
+});
+
+export const drawerContentInner = css({
+  maxHeight: "calc(100dvh - 68px)",
+  overflowY: "auto",
+  WebkitOverflowScrolling: "touch",
+});
+
+export const drawerHandle = css({
+  height: "36px",
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});

apps/web/src/shared/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { SwitchCase } from "@/shared/utils/SwitchCase";
+import { Drawer } from "vaul";
+import * as styles from "./BottomSheet.style";
+import type { BottomSheetProps } from "./BottomSheet.type";
+
+export const BottomSheet = ({
+  open,
+  onClose,
+  locked = true,
+  showHandle = true,
+  handleOnly = false,
+  radius,
+  theme = "light",
+  zIndex = 1,
+  className,
+  content,
+}: BottomSheetProps) => {
+  return (
+    <Drawer.Root open={open} onClose={onClose} modal={locked} handleOnly={handleOnly}>
+      <Drawer.Portal>
+        <Drawer.Overlay className={styles.overlay} data-frieeren-component="BottomSheetOverlay" style={{ zIndex }} />
+        <Drawer.Content
+          className={`${styles.drawerContent({ radius, theme })} ${className || ""}`}
+          data-frieeren-component="BottomSheet"
+          style={{ zIndex }}
+        >
+          <SwitchCase
+            value={String(showHandle)}
+            caseBy={{
+              true: (
+                <div className={styles.drawerHandle}>
+                  <Drawer.Handle style={{ width: 36 }} />
+                </div>
+              ),
+            }}
+          />
+          <div className={styles.drawerContentInner}>{content}</div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+};

apps/web/src/shared/components/BottomSheet/BottomSheet.type.ts

@@ -0,0 +1,38 @@
+export const BottomSheetRadius = {
+  NONE: "none",
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+} as const;
+
+export const BottomSheetTheme = {
+  light: "light",
+  dark: "dark",
+} as const;
+
+type ValueOf<T> = T[keyof T];
+
+export type BottomSheetRadius = ValueOf<typeof BottomSheetRadius>;
+export type BottomSheetTheme = ValueOf<typeof BottomSheetTheme>;
+export interface BottomSheetProps {
+  /** 바텀시트의 열림/닫힘 상태를 제어합니다. */
+  open?: boolean;
+  /** 바텀시트가 닫힐 때 호출되는 콜백 함수입니다. */
+  onClose?: () => void;
+  /** 바텀시트의 모달리티를 제어합니다. true일 경우 외부 요소와의 상호작용을 비활성화하고 스크린 리더에는 바텀시트 콘텐츠만 보입니다. */
+  locked?: boolean;
+  /** 바텀시트 상단의 드래그 핸들을 표시할지 여부를 결정합니다. */
+  showHandle?: boolean;
+  /** true일 경우 핸들을 통해서만 드래그가 가능합니다. */
+  handleOnly?: boolean;
+  /** 바텀시트의 z-index 값을 설정합니다. */
+  zIndex?: number;
+  /** 바텀시트의 모서리 둥글기 정도를 설정합니다. */
+  radius?: BottomSheetRadius;
+  /** 바텀시트의 테마를 설정합니다. */
+  theme?: BottomSheetTheme;
+  /** 추가 CSS 클래스명을 적용합니다. */
+  className?: string;
+  /** 바텀시트 내부에 표시할 콘텐츠입니다. */
+  content?: React.ReactNode;
+}

apps/web/src/shared/components/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { BottomSheet } from "./BottomSheet";
+export type { BottomSheetProps } from "./BottomSheet.type";