# Ant Design

> Ant Design 컴포넌트 라이브러리 사용 규칙. import 패턴, ConfigProvider, theme 커스터마이징, Form/Table 패턴.

- **Type:** Skill
- **Install:** `agentstack add skill-ggombee-code-forge-ant-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ggombee](https://agentstack.voostack.com/s/ggombee)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ggombee](https://github.com/ggombee)
- **Source:** https://github.com/ggombee/code-forge/tree/main/modules/design-systems/ant-design

## Install

```sh
agentstack add skill-ggombee-code-forge-ant-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Ant Design 컨벤션

---

## Import 패턴

```typescript
// ✅ 좋은 예: 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 커스터마이징

```typescript
// 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 패턴

```typescript
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 패턴

```typescript
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

```typescript
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

```typescript
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 훅

```typescript
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](https://github.com/ggombee)
- **Source:** [ggombee/code-forge](https://github.com/ggombee/code-forge)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ggombee-code-forge-ant-design
- Seller: https://agentstack.voostack.com/s/ggombee
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.