Merge branch 'main' into refact/textarea

apps/docs/src/stories/Tab.stories.tsx

@@ -1,19 +1,20 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Tab } from "@sopt-makers/ui";
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tab } from '@sopt-makers/ui';
 
 const meta = {
-  title: "Components/Tab",
+  title: 'Components/Tab',
   component: Tab,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   args: {
     tabItems: ['Tab1', 'Tab2', 'Tab3'],
     selectedInitial: 'Tab1',
+    translator: { Tab1: '탭1', Tab2: '탭2', Tab3: '탭3' },
   },
   argTypes: {
     style: { control: 'radio', options: ['primary', 'secondary'] },
     size: { control: 'radio', options: ['sm', 'md', 'lg'] },
     selectedInitial: { control: 'select', options: ['Tab1', 'Tab2', 'Tab3'] },
-  }
+  },
 } as Meta<typeof Tab>;
 
 export default meta;

packages/ui/Tab/test/Tab.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Tab from '../Tab';
+
+describe('Tab 컴포넌트는', () => {
+  const mockOnChange = vi.fn();
+  const tabItems = ['Tab1', 'Tab2', 'Tab3'];
+
+  function renderTab() {
+    render(<Tab onChange={mockOnChange} size='md' style='primary' tabItems={tabItems} />);
+  }
+
+  it('정상적으로 렌더링이 됩니다.', () => {
+    renderTab();
+
+    tabItems.forEach((item) => {
+      expect(screen.getByText(item)).toBeInTheDocument();
+    });
+  });
+
+  it('탭을 클릭하면 onChange 핸들러가 호출됩니다.', () => {
+    renderTab();
+
+    fireEvent.click(screen.getByText('Tab2'));
+
+    expect(mockOnChange).toHaveBeenCalledWith('Tab2');
+  });
+});