[#404][독서모임] 모임 검색 컴포넌트 (#419)

* feat: FloatingButton base 컴포넌트 생성

* fix: FloatingButton 위치 설정

* fix: FloatingButton 위치 설정 변경

* fix: type 설정 변경

* feat: 모임 검색창 컴포넌트 생성

* fix: FloatingButton 컴포넌트 위치 설정 네미이 변경 및 이벤트 핸들러 네이밍 변경

* fix: storybook Error 수정

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';

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<typeof FloatingButton> = {
+  title: 'Base/FloatingButton',
+  component: FloatingButton,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FloatingButton>;
+
+export const Default: Story = {
+  args: {
+    position: 'bottom-right',
+  },
+  render: args => <FloatingButton {...args} />,
+};

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<typeof SearchGroup> = {
+  title: 'Base/SearchGroup',
+  component: SearchGroup,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SearchGroup>;
+
+const alertMessage = () => {
+  document.getElementById('groupSearching')?.blur();
+  alert(
+    `
+  죄송합니다. 
+  검색 기능은 현재 준비중에 있습니다. 👀
+  `
+  );
+};
+
+export const Default: Story = {
+  render: () => <SearchGroup handleClick={alertMessage} />,
+};

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(
+    <button
+      className={`absolute flex h-[5.1rem] w-[5.1rem] items-center justify-center rounded-full bg-main-900 ${positionClasses}`}
+      {...props}
+    >
+      <IconPlus />
+    </button>,
+    document.body
+  );
+};
+
+export default FloatingButton;

src/ui/Base/bookgroup/SearchGroup.tsx

@@ -0,0 +1,24 @@
+import { IconSearch } from '@public/icons';
+
+interface SearchGroup {
+  handleClick: () => void;
+}
+
+const SearchGroup = ({ handleClick }: SearchGroup) => {
+  return (
+    <div className="flex">
+      <div className="rounded-bl-[0.4rem] rounded-tl-[0.4rem] border-[0.1rem] border-r-[0rem] border-solid border-black-100 bg-[#fffff] pl-[1rem] pt-[0.8rem]">
+        <IconSearch fill="#AFAFAF" />
+      </div>
+      <input
+        id="groupSearching"
+        className="placeholder:text-Placeholder h-[3.7rem] w-full rounded-br-[0.4rem] rounded-tr-[0.4rem] border-[0.1rem] border-l-[0rem] border-black-100 pl-[2rem] text-[1.4rem] leading-[1.6rem] focus:outline-0"
+        placeholder="모임을 검색해보세요"
+        type="text"
+        onClick={handleClick}
+      />
+    </div>
+  );
+};
+
+export default SearchGroup;