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 (
    
      
    
  );
}

---

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();

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

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

  return (
    
      
        
      

      
        
      

      
        
          저장
        
      
    
  );
}

---

Table 패턴

import { Table, Space, Button, Tag } from 'antd';
import type { TableProps, ColumnsType } from 'antd';

interface Order {
  id: string;
  name: string;
  status: 'pending' | 'active' | 'done';
  createdAt: string;
}

const columns: ColumnsType = [
  {
    title: '주문 ID',
    dataIndex: 'id',
    key: 'id',
    width: 100,
  },
  {
    title: '주문명',
    dataIndex: 'name',
    key: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
  },
  {
    title: '상태',
    dataIndex: 'status',
    key: 'status',
    render: (status: Order['status']) => {
      const colorMap = { pending: 'gold', active: 'blue', done: 'green' };
      const labelMap = { pending: '대기중', active: '진행중', done: '완료' };
      return {labelMap[status]};
    },
    filters: [
      { text: '대기중', value: 'pending' },
      { text: '진행중', value: 'active' },
    ],
    onFilter: (value, record) => record.status === value,
  },
  {
    title: '액션',
    key: 'action',
    render: (_, record) => (
      
         handleEdit(record)}>수정
         handleDelete(record.id)}>삭제
      
    ),
  },
];

function OrderTable() {
  const { data, isLoading } = useOrderQuery();

  const tableProps: TableProps = {
    columns,
    dataSource: data?.orders,
    rowKey: 'id',
    loading: isLoading,
    pagination: {
      pageSize: 20,
      showSizeChanger: true,
      showTotal: (total) => `전체 ${total}건`,
    },
    scroll: { x: 800 },
  };

  return ;
}

---

주요 컴포넌트 패턴

Modal

import { Modal, Button } from 'antd';
import { useState } from 'react';

function OrderModal() {
  const [open, setOpen] = useState(false);

  return (
    <>
       setOpen(true)}>주문 추가
       setOpen(false)}
        onCancel={() => setOpen(false)}
        footer={[
           setOpen(false)}>취소,
          저장,
        ]}
      >
        
      
    
  );
}

Notification & Message

import { App } from 'antd';

// ✅ App 컴포넌트 내부에서 훅 사용 (v5+)
function OrderActions() {
  const { message, notification } = App.useApp();

  const handleSave = async () => {
    try {
      await saveOrder();
      message.success('저장되었습니다.');
    } catch {
      notification.error({
        message: '저장 실패',
        description: '다시 시도해주세요.',
      });
    }
  };

  return 저장;
}

// src/main.tsx - App 컴포넌트로 래핑 필수
function Root() {
  return (
    
      
        
      
    
  );
}

---

useToken 훅

import { theme } from 'antd';

function StyledComponent() {
  const { token } = theme.useToken();

  return (
    
      내용
    
  );
}

---

체크리스트

• [ ] ConfigProvider로 locale 및 theme 설정?
• [ ] App 컴포넌트로 래핑해 message/notification 훅 사용?
• [ ] Form에 Form.useForm() 사용?
• [ ] Table의 rowKey 지정?
• [ ] ColumnsType으로 타입 안전성 확보?
• [ ] 아이콘은 @ant-design/icons에서 import?

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ggombee
• Source: ggombee/code-forge
• License: MIT

Install and usage instructions live in the source repository linked above.