feat: add Modal storie

app/ui/view/atom/modal/modal.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './modal';
+
+const meta = {
+  title: 'ui/view/atom/Modal',
+  component: Modal,
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+
+interface ModalProps extends React.PropsWithChildren {
+  open: boolean;
+  onOpenChange: () => void;
+  className?: string;
+}
+
+export const Default: StoryObj<typeof meta> = {
+  args: {
+    children: <div className="text-xl">테스트 모달</div>,
+    open: true,
+  },
+  render: (args: ModalProps) => <Modal {...args} />,
+};

app/ui/view/atom/modal/modal.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { DialogProps } from '@radix-ui/react-dialog';
 import { Portal, Overlay, Content, Root } from '@radix-ui/react-dialog';
 
 import { cn } from '@/app/utils/shadcn/utils';
 
 interface ModalProps extends React.PropsWithChildren {
-  dialogOptions?: DialogProps;
+  open: boolean;
+  onOpenChange: () => void;
   className?: string;
 }
 
@@ -15,13 +15,13 @@ const fadeAnimation =
 const noneSlideAnimation =
   'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]';
 
-const Modal = ({ className, children, dialogOptions = {} }: ModalProps) => (
-  <Root {...dialogOptions}>
+const Modal = ({ className, children, open, onOpenChange }: ModalProps) => (
+  <Root open={open} onOpenChange={onOpenChange}>
     <Portal>
       <Overlay className={cn('fixed inset-0 zIndex-3 bg-black/50', fadeAnimation)} />
       <Content
         className={cn(
-          'fixed left-[50%] top-[50%] zIndex-3 max-w-[90%] min-w-[30%] overflow-y-auto translate-x-[-50%] translate-y-[-50%] bg-white p-6 shadow-lg duration-200 rounded-lg max-h-[70vh] lg:max-h-[90vh]',
+          'outline-none fixed left-[50%] top-[50%] zIndex-3 max-w-[90%] min-w-[30%] overflow-y-auto translate-x-[-50%] translate-y-[-50%] bg-white p-6 shadow-lg duration-200 rounded-lg max-h-[70vh] lg:max-h-[90vh]',
           noneSlideAnimation,
           fadeAnimation,
           className,