diff --git a/public/icons/index.ts b/public/icons/index.ts index 588d95ea..9859d93b 100644 --- a/public/icons/index.ts +++ b/public/icons/index.ts @@ -1,3 +1,6 @@ +// 로고 +export { default as LogoWithText } from './logo-with-text.svg'; + // 상단 Nav & Header export { default as IconArrowLeft } from './arrow-left.svg'; export { default as IconClose } from './close.svg'; diff --git a/public/icons/kakao.svg b/public/icons/kakao.svg index daba9795..bfb0b4e5 100644 --- a/public/icons/kakao.svg +++ b/public/icons/kakao.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/logo-with-text.svg b/public/icons/logo-with-text.svg index 3864345a..c79f6689 100644 --- a/public/icons/logo-with-text.svg +++ b/public/icons/logo-with-text.svg @@ -1,4 +1,4 @@ - + diff --git a/src/stories/Base/BottomSheet.stories.tsx b/src/stories/Base/BottomSheet.stories.tsx new file mode 100644 index 00000000..728cd72b --- /dev/null +++ b/src/stories/Base/BottomSheet.stories.tsx @@ -0,0 +1,77 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { IconClose, IconKakao, LogoWithText } from '@public/icons'; +import Button from '@/ui/Base/Button'; +import BottomSheet from '@/ui/Base/BottomSheet'; +import useDisclosure from '@/hooks/useDisclosure'; + +const meta: Meta = { + title: 'Base/BottomSheet', + component: BottomSheet, + tags: ['autodocs'], +}; + +const DefaultBottomSheet = () => { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + +

바텀시트 예시

+ + + ); +}; + +const LoginBottomSheet = () => { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + +
+ +
+
+
+ +
+

+ 로그인이 필요한 서비스에요! +

+

+ 간편하게 카카오로 로그인을 하고, +
+ 다독다독의 다양한 기능을 + 이용해보세요. +

+ +
+ + + ); +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: DefaultBottomSheet, +}; + +export const Login: Story = { + render: LoginBottomSheet, +}; diff --git a/src/ui/Base/BottomSheet.tsx b/src/ui/Base/BottomSheet.tsx new file mode 100644 index 00000000..d3345e0a --- /dev/null +++ b/src/ui/Base/BottomSheet.tsx @@ -0,0 +1,53 @@ +import { Dialog, Transition } from '@headlessui/react'; +import { Fragment, PropsWithChildren } from 'react'; + +interface BottomSheetProps { + isShow?: boolean; + onClose: () => void; +} + +const BottomSheet = ({ + isShow = false, + onClose, + children, +}: PropsWithChildren) => { + return ( + + + +
+ + +
+
+
+ + + {children} + + +
+
+
+
+ + ); +}; + +export default BottomSheet;