feat: RadioGroup (RadioButton) 컴포넌트 구현

src/components/RadioGroup/RadioGroup.context.ts

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+import {
+  RadioGroupSizeType,
+  RadioGroupOrientationType,
+} from '@/components/RadioGroup/RadioGroup.type';
+
+interface RadioGroupContextProps {
+  orientation?: RadioGroupOrientationType;
+  size?: RadioGroupSizeType;
+  currentRadioValue?: string;
+}
+
+export const RadioGroupContext = createContext<RadioGroupContextProps>({
+  size: undefined,
+  orientation: undefined,
+  currentRadioValue: undefined,
+});

src/components/RadioGroup/RadioGroup.mdx

@@ -0,0 +1,144 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as RadioGroupStories from './RadioGroup.stories';
+
+<Meta of={RadioGroupStories} />
+
+# RadioGroup
+
+RadioGroup은 단일 선택을 나타낼 수 있는 요소인 Radio Button을 그룹화하여 사용할 수 있도록 도와주는 컴포넌트입니다.
+
+<Canvas of={RadioGroupStories.Control} />
+<Controls />
+
+<br />
+<br />
+
+## 개발 시 참고하면 좋을 내용
+
+RadioGroup은 단일 선택을 제공할 때에만 사용합니다.  
+다중 선택을 제공해야한다면 Checkbox 혹은 Switch를 사용합니다.
+
+<br />
+<br />
+
+## 사용법
+
+RadioGroup 컴포넌트는 `useRadioGroup` 훅을 불러와 사용합니다.
+
+1. 안전한 typing을 위해 RadioGroup의 value를 나열한 타입을 정의합니다.
+
+```tsx
+type RadioGroupValues = '한국어' | '영어' | '일본어';
+```
+
+2. `useRadioGroup` 훅을 호출합니다.
+
+```tsx
+import { useRadioGroup } from '@yourssu/design-system-react';
+
+const RadioGroup = useRadioGroup<RadioGroupValues>();
+```
+
+3. 반환된 RadioGroup 컴포넌트를 통해 원하는 콘텐츠를 구성합니다.
+
+```tsx
+<RadioGroup size="medium">
+  <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+  <RadioGroup.Item value="영어">영어</RadioGroup.Item>
+  <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+</RadioGroup>
+```
+
+<Canvas of={RadioGroupStories.Usage} />
+
+4. 필요하다면 `useRadioGroup` 훅에 기본으로 선택될 value를 전달합니다.
+
+```tsx
+const RadioGroup = useRadioGroup<RadioGroupValues>('한국어');
+```
+
+<Canvas of={RadioGroupStories.UsageDefault} />
+
+<br />
+<br />
+
+### RadioGroup: size (필수)
+
+RadioGroup.Item 컴포넌트의 크기를 정합니다.  
+가능한 값은 `small`, `medium`, `large` 입니다.
+
+```tsx
+<RadioGroup size="small">...</RadioGroup>
+<RadioGroup size="medium">...</RadioGroup>
+<RadioGroup size="large">...</RadioGroup>
+```
+
+<Canvas of={RadioGroupStories.Size} />
+
+<br />
+<br />
+
+### RadioGroup: orientation (선택)
+
+RadioGroup.Item 컴포넌트들의 정렬 방향을 정합니다.  
+가능한 값은 `vertical`, `horizontal` 이며, 기본값은 `vertical` 입니다.
+
+```tsx
+<RadioGroup size="medium">...</RadioGroup>
+<RadioGroup size="medium" orientation="vertical">...</RadioGroup>
+<RadioGroup size="medium" orientation="horizontal">...</RadioGroup>
+```
+
+<Canvas of={RadioGroupStories.Orientation} />
+
+<br />
+<br />
+
+## 예시
+
+### RadioGroup.Item: disabled
+
+RadioGroup.Item 컴포넌트를 비활성화 상태로 만듭니다.
+
+```tsx
+<RadioGroup size="medium">
+  <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+  <RadioGroup.Item value="영어" disabled>
+    영어
+  </RadioGroup.Item>
+  <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+</RadioGroup>
+```
+
+<Canvas of={RadioGroupStories.Disabled} />
+
+<br />
+<br />
+
+### 변경 감지 이벤트 할당
+
+RadioGroup 컴포넌트에 `onValueChange` 이벤트를 할당하여 변경 감지 이벤트를 처리할 수 있습니다.
+
+```tsx
+import { RadioGroupValueChangeEvent } from '@yourssu/design-system-react';
+```
+
+```tsx
+const RadioGroup = useRadioGroup<RadioGroupValues>('한국어');
+
+const onValueChange = (e: RadioGroupValueChangeEvent<RadioGroupValues>) => {
+  const { value, event } = e;
+  alert(`선택된 값: ${value}`);
+  console.log(event);
+};
+
+return (
+  <RadioGroup size="medium" onValueChange={onValueChange}>
+    <RadioGroup.Item value="한국어">한국어입니다</RadioGroup.Item>
+    <RadioGroup.Item value="영어">영어입니다</RadioGroup.Item>
+    <RadioGroup.Item value="일본어">일본어입니다</RadioGroup.Item>
+  </RadioGroup>
+);
+```
+
+<Canvas of={RadioGroupStories.Event} />

src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,190 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  RadioGroupItemProps,
+  RadioGroupProps,
+  RadioGroupValueChangeEvent,
+} from '@/components/RadioGroup/RadioGroup.type';
+import { useRadioGroup } from '@/components/RadioGroup/hooks/useRadioGroup';
+
+const meta: Meta<RadioGroupProps<string> & RadioGroupItemProps<string>> = {
+  title: 'Components/RadioGroup',
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    size: 'medium',
+    orientation: 'vertical',
+  },
+  argTypes: {
+    size: {
+      description: 'RadioGroup.Item의 크기를 정합니다.',
+      control: {
+        type: 'radio',
+      },
+      options: ['small', 'medium', 'large'],
+    },
+    onValueChange: {
+      description: '선택된 RadioGroup.Item이 바뀔 때 호출되는 함수입니다.',
+    },
+    orientation: {
+      description: 'RadioGroup.Item이 나열되는 방향을 정합니다.',
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'vertical' },
+      },
+      options: ['vertical', 'horizontal'],
+    },
+  },
+};
+
+export default meta;
+
+const ControlComponent = (args: object) => {
+  const RadioGroup = useRadioGroup<'item-1' | 'item-2' | 'item-3'>('item-1');
+
+  return (
+    <RadioGroup orientation="vertical" size="large" {...args}>
+      <RadioGroup.Item value="item-1">Item1</RadioGroup.Item>
+      <RadioGroup.Item value="item-2">Item2</RadioGroup.Item>
+      <RadioGroup.Item value="item-3">Item3</RadioGroup.Item>
+    </RadioGroup>
+  );
+};
+
+const UsageComponent = () => {
+  const RadioGroup = useRadioGroup<'한국어' | '영어' | '일본어'>();
+
+  return (
+    <RadioGroup size="medium">
+      <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+      <RadioGroup.Item value="영어">영어</RadioGroup.Item>
+      <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+    </RadioGroup>
+  );
+};
+
+const UsageDefaultComponent = () => {
+  const RadioGroup = useRadioGroup<'한국어' | '영어' | '일본어'>('한국어');
+
+  return (
+    <RadioGroup size="medium">
+      <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+      <RadioGroup.Item value="영어">영어</RadioGroup.Item>
+      <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+    </RadioGroup>
+  );
+};
+
+const SizeComponent = () => {
+  const RadioGroup = useRadioGroup<'한국어' | '영어' | '일본어'>();
+
+  return (
+    <div style={{ display: 'flex', gap: 48 }}>
+      <RadioGroup size="small">
+        <div>- small</div>
+        <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+        <RadioGroup.Item value="영어">영어</RadioGroup.Item>
+        <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+      </RadioGroup>
+      <RadioGroup size="medium">
+        <div>- medium</div>
+        <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+        <RadioGroup.Item value="영어">영어</RadioGroup.Item>
+        <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+      </RadioGroup>
+      <RadioGroup size="large">
+        <div>- large</div>
+        <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+        <RadioGroup.Item value="영어">영어</RadioGroup.Item>
+        <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+      </RadioGroup>
+    </div>
+  );
+};
+
+const OrientationComponent = () => {
+  const RadioGroup = useRadioGroup<'한국어' | '영어' | '일본어'>();
+
+  return (
+    <div style={{ display: 'flex', gap: 80 }}>
+      <RadioGroup size="small">
+        <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+        <RadioGroup.Item value="영어">영어</RadioGroup.Item>
+        <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+      </RadioGroup>
+      <RadioGroup size="small" orientation="vertical">
+        <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+        <RadioGroup.Item value="영어">영어</RadioGroup.Item>
+        <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+      </RadioGroup>
+      <RadioGroup size="small" orientation="horizontal">
+        <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+        <RadioGroup.Item value="영어">영어</RadioGroup.Item>
+        <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+      </RadioGroup>
+    </div>
+  );
+};
+
+const EventComponent = () => {
+  const RadioGroup = useRadioGroup<'한국어' | '영어' | '일본어'>('한국어');
+
+  const onValueChange = (e: RadioGroupValueChangeEvent<'한국어' | '영어' | '일본어'>) => {
+    const { value, event } = e;
+    alert(`선택된 값: ${value}`);
+    console.log(event);
+  };
+
+  return (
+    <RadioGroup size="medium" onValueChange={onValueChange}>
+      <RadioGroup.Item value="한국어">한국어입니다</RadioGroup.Item>
+      <RadioGroup.Item value="영어">영어입니다</RadioGroup.Item>
+      <RadioGroup.Item value="일본어">일본어입니다</RadioGroup.Item>
+    </RadioGroup>
+  );
+};
+
+const DisabledComponent = () => {
+  const RadioGroup = useRadioGroup<'한국어' | '영어' | '일본어'>();
+
+  return (
+    <RadioGroup size="medium">
+      <RadioGroup.Item value="한국어">한국어</RadioGroup.Item>
+      <RadioGroup.Item value="영어" disabled>
+        영어
+      </RadioGroup.Item>
+      <RadioGroup.Item value="일본어">일본어</RadioGroup.Item>
+    </RadioGroup>
+  );
+};
+
+export const Control: StoryObj = {
+  render: ControlComponent,
+};
+
+export const Usage: StoryObj = {
+  render: UsageComponent,
+};
+
+export const UsageDefault: StoryObj = {
+  render: UsageDefaultComponent,
+};
+
+export const Size: StoryObj = {
+  render: SizeComponent,
+};
+
+export const Orientation: StoryObj = {
+  render: OrientationComponent,
+};
+
+export const Disabled: StoryObj = {
+  render: DisabledComponent,
+};
+
+export const Event: StoryObj = {
+  render: EventComponent,
+};