[Feat] showcase 페이지 category chip 구현

src/page/showcase/component/CategoryChip/CategoryChip.style.ts

@@ -0,0 +1,22 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const buttonStyle = (isClicked: boolean) =>
+  css({
+    padding: '1.3rem  1.6rem',
+
+    backgroundColor: theme.colors.white,
+    borderRadius: '100px',
+    border: `1.2px solid ${isClicked ? theme.colors.blue_900 : theme.colors.gray_400}`,
+
+    ...theme.text.body04,
+    color: `${isClicked ? theme.colors.blue_900 : theme.colors.gray_800}`,
+    fontWeight: 500,
+
+    cursor: 'pointer',
+
+    '&:hover': {
+      backgroundColor: theme.colors.blue_100,
+    },
+  });

src/page/showcase/component/CategoryChip/CategoryChip.tsx

@@ -0,0 +1,30 @@
+import { buttonStyle } from '@/page/showcase/component/CategoryChip/CategoryChip.style';
+
+import { ComponentPropsWithRef, useEffect, useState } from 'react';
+
+interface CategoryChipProps extends Omit<ComponentPropsWithRef<'button'>, 'onClick'> {
+  onClick?: (id: string) => void;
+  clickedChip?: string;
+}
+
+const CategoryChip = ({ children, onClick, clickedChip = '', ...props }: CategoryChipProps) => {
+  const [isClicked, setIsClicked] = useState(false);
+
+  useEffect(() => {
+    clickedChip === children?.toString() ? setIsClicked(true) : setIsClicked(false);
+  }, [clickedChip, children]);
+
+  const handleClick = () => {
+    if (onClick && children) {
+      onClick(children.toString());
+    }
+  };
+
+  return (
+    <button css={buttonStyle(isClicked)} onClick={handleClick} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export default CategoryChip;

src/page/showcase/constant/category.ts

@@ -0,0 +1,11 @@
+export const CATEGORY = [
+  '전체',
+  '문화/예술/공연',
+  '봉사/사회활동',
+  '학술/교양',
+  '창업/취업',
+  '어학',
+  '체육',
+  '친목',
+  '기타',
+];

src/story/page/showcase/CategoryChip.stories.tsx

@@ -0,0 +1,15 @@
+import CategoryChip from '@/page/showcase/component/CategoryChip/CategoryChip';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'page/showcase/CategoryChip',
+  component: CategoryChip,
+
+  args: { children: '어학' },
+  argTypes: {},
+} satisfies Meta<typeof CategoryChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/story/page/showcase/ClubProfileCard.stories.tsx

@@ -2,7 +2,7 @@ import ClubProfileCard from '@/page/showcase/component/ClubProfileCard/ClubProfi
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Page/ClubProfileCard',
+  title: 'page/showcase/ClubProfileCard',
   component: ClubProfileCard,
   parameters: {
     layout: 'centered',