ant-design

Ant Design 컨벤션

---

Import 패턴

// ✅ 좋은 예: named import
import { Button, Form, Input, Table, Space } from 'antd';
import type { FormProps, TableProps, ColumnsType } from 'antd';

// ✅ 아이콘 import (별도 패키지)
import { SearchOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';

---

ConfigProvider & theme 커스터마이징

// src/main.tsx 또는 App.tsx
import { ConfigProvider, theme } from 'antd';
import ko_KR from 'antd/locale/ko_KR';

const { defaultAlgorithm, darkAlgorithm } = theme;

function App() {
  return (
    <ConfigProvider
      locale={ko_KR}
      theme={{
        algorithm: defaultAlgorithm, // 또는 darkAlgorithm
        token: {
          colorPrimary: '#1677ff',
          borderRadius: 8,
          fontFamily: '"Pretendard", -apple-system, sans-serif',
          colorBgContainer: '#ffffff',
        },
        components: {
          Button: {
            borderRadius: 6,
          },
          Table: {
            borderRadius: 8,
          },
        },
      }}
    >
      <AppRoutes />
    </ConfigProvider>
  );
}

---

Form 패턴

import { Form, Input, Select, Button } from 'antd';
import type { FormProps } from 'antd';

interface OrderFormValues {
  name: string;
  status: 'pending' | 'active';
  description?: string;
}

function OrderForm() {
  const [form] = Form.useForm<OrderFormValues>();

  const onFinish: FormProps<OrderFormValues>['onFinish'] = (values) => {
    console.log('제출 값:', values);
  };

  const onFinishFailed: FormProps<OrderFormValues>['onFinishFailed'] = (errorInfo) => {
    console.log('실패:', errorInfo);
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      initialValues={{ status: 'pending' }}
    >
      <Form.Item
        label="주문명"
        name="name"
        rules={[{ required: true, message: '주문명을 입력해주세요.' }]}
      >
        <Input placeholder="주문명 입력" />
      </Form.Item>

      <Form.Item
        label="상태"
        name="status"
        rules={[{ required: true }]}
      >
        <Select options={[
          { value: 'pending', label: '대기중' },
          { value: 'active', label: '진행중' },
        ]} />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          저장
        </Button>
      </Form.Item>
    </Form>
  );
}