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

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 handler={alertMessage} />,
+};

src/ui/Base/bookgroup/SearchGroup.tsx

@@ -0,0 +1,24 @@
+import { IconSearch } from '@public/icons';
+
+interface SearchGroup {
+  handler: () => void;
+}
+
+const SearchGroup = ({ handler }: 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={handler}
+      />
+    </div>
+  );
+};
+
+export default SearchGroup;