Merge branch 'main' into 62-storybook-docs-dark-mode

Author: Sunjae95

bun.lock

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
-    "@eslint/js": "^9.23.0",
+    "@eslint/js": "^9.24.0",
     "@faker-js/faker": "^9.4.0",
     "@pandacss/dev": "^0.53.3",
     "@storybook/addon-a11y": "^8.6.12",
@@ -51,8 +51,8 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.24.0",
     "eslint-plugin-react-hooks": "^5.1.0",

package.json

@@ -0,0 +1,34 @@
+import { test } from "vitest";
+
+test.todo("RadioGroup이 올바르게 자식 요소와 함께 렌더링됨");
+test.todo(
+  "RadioGroup.Item이 RadioGroup.Root 외부에서 사용될 경우 에러가 발생함"
+);
+test.todo("RadioGroup.Root의 name 속성이 올바르게 설정됨");
+
+test.todo("RadioGroup.Item의 value가 올바르게 동작함");
+test.todo("RadioGroup.Item의 disabled 속성이 올바르게 적용됨");
+test.todo("RadioGroup.Item 선택 시 onChange가 호출됨");
+
+test.todo("defaultValue가 제공될 때 해당 값이 선택됨");
+test.todo("defaultValue가 제공되지 않을 때 아무것도 선택되지 않음");
+test.todo("value와 defaultValue가 모두 제공될 때 value가 우선시됨");
+
+test.todo("Root의 disabled가 true일 때 모든 RadioGroup.Item이 비활성화됨");
+test.todo("Item의 disabled가 true일 때 해당 아이템만 비활성화됨");
+
+test.todo("required가 true일 때 필수 입력으로 표시됨");
+
+test.todo("orientation이 'horizontal'일 때 RadioGroup.Item이 가로로 배열됨");
+test.todo("orientation이 'vertical'일 때 RadioGroup.Item이 세로로 배열됨");
+
+test.todo("키보드 방향키로 RadioGroup.Item 간 이동이 가능함");
+test.todo("Tab 키로 RadioGroup에 초점을 맞출 수 있음");
+
+test.todo("폼 제출 시 선택된 RadioGroup 값이 올바르게 전송됨");
+test.todo("폼 리셋 시 RadioGroup이 defaultValue로 초기화됨");
+
+test.todo("RadioGroup.Item이 동적으로 추가/제거될 때 정상 작동함");
+test.todo("RadioGroup.Item 사이에 다른 컴포넌트가 있어도 올바르게 작동함");
+
+test.todo("tone prop에 따라 올바른 색상이 적용됨");

src/components/RadioGroup/RadioGroup.test.tsx

@@ -0,0 +1,98 @@
+import { type ReactNode } from "react";
+import type { Tone } from "../../tokens/colors";
+
+interface RadioGroupProps {
+  /**
+   * RadioGroup의 자식 요소들입니다.
+   * RadioGroup.Item 컴포넌트를 포함해야 합니다.
+   */
+  children: ReactNode;
+
+  /**
+   * 폼 입력 이름: 동일한 그룹의 라디오 버튼들이 공유하는 이름을 지정합니다.
+   */
+  name: string;
+
+  /**
+   * 라디오 그룹의 레이블: 라디오 그룹에 대한 설명을 제공합니다.
+   */
+  label: string;
+
+  /**
+   * 기본 선택값: 컴포넌트 초기 렌더링 시 선택될 값을 지정합니다.
+   * @default undefined
+   */
+  defaultValue?: string;
+
+  /**
+   * 현재 선택된 값: 외부에서 값을 직접 관리할 때 사용합니다.
+   * @default undefined
+   */
+  value?: string;
+
+  /**
+   * 값 변경 핸들러: 사용자가 선택을 변경할 때 호출되는 콜백 함수입니다.
+   * @default undefined
+   */
+  onChange?: (value: string) => void;
+
+  /**
+   * 비활성화 여부: true이면 모든 라디오 버튼이 비활성화되어 상호작용을 차단합니다.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * 필수 여부: true일 경우 사용자가 하나의 옵션을 반드시 선택해야 합니다.
+   * @default undefined
+   */
+  required?: boolean;
+
+  /**
+   * 라디오 그룹의 배치 방향을 결정합니다.
+   * 'horizontal'은 가로 배열, 'vertical'은 세로 배열을 의미합니다.
+   * @default undefined
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /** 색조 */
+  tone?: Tone;
+}
+
+/**
+ * RadioGroup의 루트 컴포넌트입니다.
+ * 라디오 버튼 그룹을 정의하고 상태를.관리합니다.
+ */
+// eslint-disable-next-line no-empty-pattern
+export function RadioGroup({}: RadioGroupProps) {
+  // TODO: 구현
+  return null;
+}
+
+interface RadioProps {
+  /**
+   * 라디오 버튼의 값입니다.
+   */
+  value: string;
+
+  /**
+   * 라디오 버튼의 자식 요소입니다.
+   */
+  children?: ReactNode;
+
+  /**
+   * 비활성화 여부: true이면 이 라디오 버튼이 비활성화됩니다.
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+/**
+ * 라디오 그룹의 개별 항목입니다.
+ * 선택 가능한 단일 라디오 버튼을 나타냅니다.
+ */
+// eslint-disable-next-line no-empty-pattern
+export function Radio({}: RadioProps) {
+  // TODO: 구현
+  return null;
+}