1
$ npm install antd

1
// Webpack CSS import
2
// import 'onsenui/css/onsenui.css';
3
// import 'onsenui/css/onsen-css-components.css';
4
// import OnesenUIExample from './components/OnsenUI/OnesenUIExample';
5
import '~antd/dist/antd.css' // 추가-----------------
6
import AntDesignExample from './components/AntDesign/AntDesignExample'
7

8
export default function App() {
9
  return (
10
    <>
11
      <AntDesignExample />
12
      {/* <OnesenUIExample /> */}
13
    </>
14
  )
15
}

1
//  src\components\AntDesign\AntDesignExample.jsx
2
import React from 'react'
3
import GetStart from './GetStart'
4

5
export default function AntDesignExample() {
6
  return (
7
    <div>
8
      <GetStart />
9
    </div>
10
  )
11
}

1
import { useState } from 'react'
2
import { DatePicker, message, Alert } from 'antd'
3

4
export default function GetStart() {
5
  const [date, setDate] = useState(null)
6
  const handleChange = value => {
7
    message.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`)
8
    setDate(value)
9
  }
10
  return (
11
    <div style={{ width: 400, margin: '100px auto' }}>
12
      <DatePicker onChange={handleChange} />
13
      <div style={{ marginTop: 16 }}>
14
        <Alert message="Selected Date" description={date ? date.format('YYYY-MM-DD') : 'None'} />
15
      </div>
16
    </div>
17
  )
18
}

1
$ npm install --save @ant-design/icons

1
import { SearchOutlined } from '@ant-design/icons'
2
import { Button, Tooltip, Space } from 'antd'
3

4
export default function IconExample() {
5
  return (
6
    <Space direction="vertical">
7
      <Space wrap>
8
        <Tooltip title="search">
9
          <Button type="primary" shape="circle" icon={<SearchOutlined />} />
10
        </Tooltip>
11
        <Button type="primary" shape="circle">
12
          A
13
        </Button>
14
        <Button type="primary" icon={<SearchOutlined />}>
15
          Search
16
        </Button>
17
        <Tooltip title="search">
18
          <Button shape="circle" icon={<SearchOutlined />} />
19
        </Tooltip>
20
        <Button icon={<SearchOutlined />}>Search</Button>
21
      </Space>
22
      <Space wrap>
23
        <Tooltip title="search">
24
          <Button shape="circle" icon={<SearchOutlined />} />
25
        </Tooltip>
26
        <Button icon={<SearchOutlined />}>Search</Button>
27
        <Tooltip title="search">
28
          <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
29
        </Tooltip>
30
        <Button type="dashed" icon={<SearchOutlined />}>
31
          Search
32
        </Button>
33
        <Button icon={<SearchOutlined />} href="https://www.google.com" />
34
      </Space>
35
    </Space>
36
  )
37
}