diff --git a/public/icons/index.ts b/public/icons/index.ts index 9859d93b..3cc064cd 100644 --- a/public/icons/index.ts +++ b/public/icons/index.ts @@ -31,6 +31,7 @@ export { default as IconCheck } from './check.svg'; export { default as IconComments } from './comments.svg'; export { default as IconDelete } from './delete.svg'; export { default as IconMembers } from './members.svg'; +export { default as IconPlus } from './plus.svg'; // 카카오 export { default as IconKakao } from './kakao.svg'; diff --git a/public/icons/plus.svg b/public/icons/plus.svg new file mode 100644 index 00000000..166d844b --- /dev/null +++ b/public/icons/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/search.svg b/public/icons/search.svg index eb0da23b..d5c59bca 100644 --- a/public/icons/search.svg +++ b/public/icons/search.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/stories/Base/FloatingButton.stories.tsx b/src/stories/Base/FloatingButton.stories.tsx new file mode 100644 index 00000000..73cf5c83 --- /dev/null +++ b/src/stories/Base/FloatingButton.stories.tsx @@ -0,0 +1,19 @@ +import { Meta, StoryObj } from '@storybook/react'; +import FloatingButton from '@/ui/Base/FloatingButton'; + +const meta: Meta = { + title: 'Base/FloatingButton', + component: FloatingButton, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + position: 'bottom-right', + }, + render: args => , +}; diff --git a/src/stories/bookgroup/SearchGroup.stories.tsx b/src/stories/bookgroup/SearchGroup.stories.tsx new file mode 100644 index 00000000..1ef6d875 --- /dev/null +++ b/src/stories/bookgroup/SearchGroup.stories.tsx @@ -0,0 +1,26 @@ +import { Meta, StoryObj } from '@storybook/react'; +import SearchGroup from '@/ui/Base/bookgroup/SearchGroup'; + +const meta: Meta = { + title: 'Base/SearchGroup', + component: SearchGroup, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +const alertMessage = () => { + document.getElementById('groupSearching')?.blur(); + alert( + ` + 죄송합니다. + 검색 기능은 현재 준비중에 있습니다. 👀 + ` + ); +}; + +export const Default: Story = { + render: () => , +}; diff --git a/src/ui/Base/FloatingButton.tsx b/src/ui/Base/FloatingButton.tsx new file mode 100644 index 00000000..b09d047c --- /dev/null +++ b/src/ui/Base/FloatingButton.tsx @@ -0,0 +1,40 @@ +import { IconPlus } from '@public/icons'; +import { ComponentPropsWithoutRef } from 'react'; +import { createPortal } from 'react-dom'; + +interface FloatingButtonProps extends ComponentPropsWithoutRef<'button'> { + position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; +} + +const getPositionClasses = (position: string) => { + switch (position) { + case 'top-left': { + return 'top-[6.4rem] left-[1.2rem]'; + } + case 'top-right': { + return 'top-[6.4rem] right-[1.2rem]'; + } + case 'bottom-left': { + return 'bottom-[7.2rem] left-[1.2rem]'; + } + case 'bottom-right': { + return 'bottom-[7.2rem] right-[1.2rem]'; + } + } +}; + +const FloatingButton = ({ position, ...props }: FloatingButtonProps) => { + const positionClasses = getPositionClasses(position); + + return createPortal( + , + document.body + ); +}; + +export default FloatingButton; diff --git a/src/ui/Base/bookgroup/SearchGroup.tsx b/src/ui/Base/bookgroup/SearchGroup.tsx new file mode 100644 index 00000000..5f0db969 --- /dev/null +++ b/src/ui/Base/bookgroup/SearchGroup.tsx @@ -0,0 +1,24 @@ +import { IconSearch } from '@public/icons'; + +interface SearchGroup { + handleClick: () => void; +} + +const SearchGroup = ({ handleClick }: SearchGroup) => { + return ( +
+
+ +
+ +
+ ); +}; + +export default SearchGroup;