✨ [Feature] chip 컴포넌트 리팩토링 & 모임 chip 구현

src/components/chip/Chip.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Chip from './Chip';
 
 const meta = {
-  title: 'Components/Chip',
+  title: 'Components/Chip/Base',
   component: Chip,
   parameters: {
     layout: 'centered',
@@ -29,7 +29,7 @@ export const RoundedLight: Story = {
 export const SquareOutlined: Story = {
   args: {
     text: '오프라인',
-    variant: 'square-light',
+    variant: 'square-outlined',
   },
 };
 
@@ -54,13 +54,13 @@ export const AllStates: Story = {
       <div className="flex gap-2">
         <Chip text="모집중" variant="rounded-filled" />
         <Chip text="1월 7일" variant="rounded-light" />
-        <Chip text="오프라인" variant="square-light" />
+        <Chip text="오프라인" variant="square-outlined" />
         <Chip text="마감" variant="square-filled" />
       </div>
       <div className="flex gap-2">
         <Chip text="자유책" variant="rounded-filled" isPast={true} />
         <Chip text="1월 7일" variant="rounded-light" isPast={true} />
-        <Chip text="오프라인" variant="square-light" isPast={true} />
+        <Chip text="오프라인" variant="square-outlined" isPast={true} />
         <Chip text="마감" variant="square-filled" isPast={true} />
       </div>
     </div>

src/components/chip/Chip.test.tsx

@@ -2,7 +2,7 @@ import Chip from '@/components/chip/Chip';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 
-describe('TextChip', () => {
+describe('Chip', () => {
   it('텍스트가 올바르게 렌더링되어야 한다', () => {
     render(<Chip text="테스트" />);
     const chip = screen.getByText('테스트');

src/components/chip/Chip.tsx

@@ -1,11 +1,13 @@
 import { twMerge } from 'tailwind-merge';
 
 const CHIP_VARIANTS = {
-  'rounded-filled': 'rounded-full bg-green-light-02 text-green-dark-01',
-  'rounded-light': 'rounded-full bg-green-normal-01 text-gray-white',
-  'square-light':
-    'rounded border border-gray-normal-02 bg-gray-light-01 text-gray-dark-01',
-  'square-filled': 'rounded bg-green-dark-01 text-gray-dark-01',
+  'rounded-filled':
+    'rounded-full bg-green-light-02 text-green-dark-01 font-semibold',
+  'rounded-light':
+    'rounded-full bg-green-normal-01 text-gray-white font-semibold',
+  'square-outlined':
+    'rounded-md border border-green-normal-01 bg-gray-white text-green-normal-01',
+  'square-filled': 'rounded-md bg-green-normal-01 text-gray-white px-2',
 } as const;
 
 type ChipVariant = keyof typeof CHIP_VARIANTS;
@@ -24,7 +26,7 @@ function Chip({
   className,
 }: ChipProps) {
   const baseStyles =
-    'inline-flex items-center justify-center px-2.5 py-1 text-sm font-semibold';
+    'inline-flex items-center justify-center px-2.5 py-1 text-sm font-medium';
 
   const combinedClassName = twMerge(
     baseStyles,

src/components/chip/club-chip/ClubChip.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ClubChip from './ClubChip';
+
+const meta = {
+  title: 'Components/Chip/ClubChip',
+  component: ClubChip,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ClubChip>;
+
+export default meta;
+type Story = StoryObj<typeof ClubChip>;
+
+export const Completed: Story = {
+  args: {
+    variant: 'completed',
+  },
+};
+
+export const Scheduled: Story = {
+  args: {
+    variant: 'scheduled',
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    variant: 'pending',
+  },
+};
+
+export const Confirmed: Story = {
+  args: {
+    variant: 'confirmed',
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <ClubChip variant="completed" />
+      <ClubChip variant="scheduled" />
+      <ClubChip variant="pending" />
+      <ClubChip variant="confirmed" />
+    </div>
+  ),
+};

src/components/chip/club-chip/ClubChip.test.tsx

@@ -0,0 +1,29 @@
+import ClubChip from './ClubChip';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+describe('ClubChip', () => {
+  it('variant에 따라 올바른 텍스트가 렌더링되어야 한다', () => {
+    render(<ClubChip variant="completed" />);
+    expect(screen.getByText('참여완료')).toBeInTheDocument();
+  });
+
+  it('모든 variant가 올바르게 렌더링되어야 한다', () => {
+    const { rerender } = render(<ClubChip variant="completed" />);
+    expect(screen.getByText('참여완료')).toBeInTheDocument();
+
+    rerender(<ClubChip variant="scheduled" />);
+    expect(screen.getByText('참여예정')).toBeInTheDocument();
+
+    rerender(<ClubChip variant="pending" />);
+    expect(screen.getByText('개설대기')).toBeInTheDocument();
+
+    rerender(<ClubChip variant="confirmed" />);
+    expect(screen.getByText('개설확정')).toBeInTheDocument();
+  });
+
+  it('className prop으로 스타일을 오버라이드할 수 있어야 한다', () => {
+    render(<ClubChip variant="completed" className="custom-class" />);
+    expect(screen.getByText('참여완료')).toHaveClass('custom-class');
+  });
+});

src/components/chip/club-chip/ClubChip.tsx

@@ -0,0 +1,54 @@
+import Chip from '../Chip';
+import { twMerge } from 'tailwind-merge';
+
+type ClubChipVariant = 'completed' | 'scheduled' | 'pending' | 'confirmed';
+
+const CLUB_CHIP_TEXT = {
+  completed: '참여완료',
+  scheduled: '참여예정',
+  pending: '개설대기',
+  confirmed: '개설확정',
+} as const;
+
+interface ClubChipProps {
+  variant: ClubChipVariant;
+  className?: string;
+}
+
+function ClubChip({ variant, className }: ClubChipProps) {
+  const getChipVariant = () => {
+    switch (variant) {
+      case 'completed':
+        return 'square-filled';
+      case 'scheduled':
+        return 'square-filled';
+      case 'pending':
+        return 'square-outlined';
+      case 'confirmed':
+        return 'square-filled';
+    }
+  };
+
+  const getCustomClassName = () => {
+    switch (variant) {
+      case 'completed':
+        return 'bg-gray-normal-01 text-gray-dark-02';
+      case 'scheduled':
+        return 'bg-green-normal-01 text-gray-white';
+      case 'pending':
+        return 'border-blue-normal-01 text-blue-normal-01';
+      case 'confirmed':
+        return 'bg-blue-normal-01 text-gray-white';
+    }
+  };
+
+  return (
+    <Chip
+      text={CLUB_CHIP_TEXT[variant]}
+      variant={getChipVariant()}
+      className={twMerge(getCustomClassName(), className)}
+    />
+  );
+}
+
+export default ClubChip;

tailwind.config.ts

@@ -37,6 +37,9 @@ const config: Config = {
           'dark-03': '#004c41',
           darker: '#003b33',
         },
+        blue: {
+          'normal-01': '#007AFF',
+        },
       },
     },
   },