Initial import

src/components/inputs/composite/multiInput/samples/Sample.tsx

@@ -0,0 +1,41 @@
+import { Card, Flex, Typography } from 'antd';
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { MultiInputUI } from '../MultiInputUI';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'multi-input',
+  componentId: 'multi-input',
+  title: 'Multi Input',
+  description: '3자리 / 4자리 / 4자리 입력을 조합하는 기본형 multi input 샘플입니다.',
+  category: 'Inputs',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 30,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState('01012345678');
+
+  return (
+    <Card title="Multi Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        값을 <Text strong>3자리 / 4자리 / 4자리</Text> 입력으로 나누어 조합합니다.
+      </Paragraph>
+
+      <Flex vertical gap="small">
+        <MultiInputUI
+          value={value}
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+        />
+        <Text>확정 값: {value}</Text>
+        <Text type="secondary">각 칸은 정해진 자리수일 때만 확정되고 다음 칸으로 이동합니다.</Text>
+      </Flex>
+    </Card>
+  );
+}