Ant Design 사용 방법

💡 Ant Design 설치하기

npm i antd

 

💡 css 적용을 위해 공통 컴포넌트에 'antd/dist/antd.css' import 하기

// pages/_app.js
import 'antd/dist/antd.css';

 

💡 Ant Design 사용하기

1️⃣ 필요한 컴포넌트 import 

// components/AppLayout.js
import { Menu } from 'antd';

 

2️⃣ 컴포넌트 사용

// components/AppLayout.js
import React from 'react';
import { Menu } from 'antd';

const AppLayout = () => {
    return (
        <>
            <Menu mode="horizontal">
                <Menu.Item>
                    메뉴1
                </Menu.Item>
                <Menu.Item>
                    메뉴2
                </Menu.Item>
            </Menu>
        </>
    );
};

export default AppLayout;

 

3️⃣ Ant Design Icons 사용하기

// components/LoginForm.js
import React, { useState } from 'react';
import { Drawer, Button, Input } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const LoginForm = () => {
    const [visible, setVisible] = useState(false);

    const showDrawer = () => {
        setVisible(true);
    };

    const onClose = () => {
        setVisible(false);
    };

    return (
        <>
        <Button type="primary" onClick={showDrawer}>
            로그인
        </Button>
        <Drawer
            title="로그인"
            placement="right"
            closable={false}
            onClose={onClose}
            visible={visible}
        >
            <br />
            <Input placeholder="default size" prefix={<UserOutlined />} />
            <br />
            <Input placeholder="default size" prefix={<UserOutlined />} />
        </Drawer>
        </>
    );
};

export default LoginForm;