Merge pull request #37 from YAPP-Github/feat/#36

[FEAT] 공통 buttom sheet 컴포넌트 구현

Author: jaeml06

src/shared/ui/bottom-sheet/BottomSheet.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+
+import BottomSheet from './BottomSheet';
+
+const meta: Meta<typeof BottomSheet> = {
+  title: 'Shared/UI/BottomSheet',
+  component: BottomSheet,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof BottomSheet>;
+
+const BottomSheetWithHooks = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className='flex h-screen w-full items-center justify-center bg-gray-100 p-4'>
+      <button
+        className='rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700'
+        onClick={() => setIsOpen(true)}
+      >
+        Open BottomSheet
+      </button>
+      {isOpen && (
+        <BottomSheet onClose={() => setIsOpen(false)}>
+          <div className='px-5'>
+            <h2 className='text-title-2 text-text-primary mb-2'>
+              Bottom Sheet Title
+            </h2>
+            <p className='text-body-2 text-text-secondary'>
+              Here is some content inside the bottom sheet. You can put anything
+              here.
+            </p>
+            <div className='mt-4 flex flex-col gap-2'>
+              <button className='bg-primary-default w-full rounded py-3 font-medium text-white'>
+                Confirm
+              </button>
+              <button
+                className='text-text-secondary w-full rounded bg-gray-100 py-3 font-medium'
+                onClick={() => setIsOpen(false)}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </BottomSheet>
+      )}
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <BottomSheetWithHooks />,
+};

src/shared/ui/bottom-sheet/BottomSheet.tsx

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+
+import Icon from '../icon/Icon';
+
+interface BottomSheetProps extends PropsWithChildren {
+  onClose: () => void;
+}
+
+export default function BottomSheet({ onClose, children }: BottomSheetProps) {
+  return (
+    <div className='bg-gray-0 flex w-full flex-col rounded-t-xl pb-5 shadow-lg'>
+      <div className='flex w-full justify-end pt-4 pr-5'>
+        <button
+          type='button'
+          onClick={onClose}
+          className='text-text-primary flex h-6 w-6 items-center justify-center active:scale-95'
+          aria-label='닫기'
+        >
+          <Icon name='ic_menu_close' size={24} />
+        </button>
+      </div>
+      {children}
+    </div>
+  );
+}

src/shared/ui/bottom-sheet/index.ts

@@ -0,0 +1 @@
+export { default as BottomSheet } from './BottomSheet';