feat: Sheet -> Drawer로 변경하여 드래그 인터랙션 적용

packages/fds/package.json

@@ -50,7 +50,6 @@
   "dependencies": {
     "@hookform/resolvers": "^5.1.1",
     "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
@@ -68,6 +67,7 @@
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.2.0",
     "tw-animate-css": "^1.2.9",
+    "vaul": "^1.1.2",
     "zod": "^3.25.67"
   }
 }

packages/fds/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@/lib/utils'
+import { Icon } from '@/components'
+
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000] cursor-pointer cursor-pointer',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  overlayBg = 'bg-gs-1/40',
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+  overlayBg?: 'bg-gs-1/40' | 'bg-gs-1/80'
+}) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay className={overlayBg} />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content bg-background fixed z-[1000] flex-column-align min-h-[248px]',
+          'bg-bg-1 rounded-t-lg shadow-7 cursor-pointer',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0',
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-[18px] mb-[14px] cursor-pointer">
+          <Icon name="handle" />
+        </div>
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-align s1 text-[#2a2a2a]', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

packages/fds/src/components/index.ts

@@ -4,7 +4,6 @@ export * from './RadioGroup/RadioGroup'
 export * from './Label/Label'
 export * from './Form/Form'
 export * from './Input/Input'
-export * from './Sheet/Sheet'
 export * from './WheelPicker/WheelPicker'
 export * from './Popover/Popover'
 export * from './DateWheelPicker/DateWheelPicker'
@@ -13,3 +12,4 @@ export * from './Accordian/Accordian'
 export * from './Toaster/Toaster'
 export * from './Tabs/Tabs'
 export * from './Carousel/Carousel'
+export * from './Drawer/Drawer'

packages/fds/src/stories/Drawer.stories.tsx

@@ -0,0 +1,47 @@
+import {
+  DrawerTrigger,
+  Button,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  Drawer,
+} from '@/components'
+import { Meta } from '@storybook/react'
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const Default = () => {
+  return (
+    <div className="flex-column gap-[20px]">
+      <Drawer>
+        <DrawerTrigger>
+          <Button>시트1 열기</Button>
+        </DrawerTrigger>
+        <DrawerContent className="h-[248px]">
+          <DrawerHeader>
+            <DrawerTitle>시트1 제목</DrawerTitle>
+          </DrawerHeader>
+          <div>내용 2</div>
+        </DrawerContent>
+      </Drawer>
+
+      <Drawer>
+        <DrawerTrigger>
+          <Button>시트2 열기</Button>
+        </DrawerTrigger>
+        <DrawerContent overlayBg="bg-gs-1/80" className="h-[281px]">
+          <DrawerHeader>
+            <DrawerTitle>시트2 제목</DrawerTitle>
+          </DrawerHeader>
+          <div>내용 2</div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  )
+}