Merge pull request #26 from yeon-dong/button/#23

components button md 파일 번역

components/button/index.ko-KR.md

@@ -1,7 +1,7 @@
 ---
 category: Components
 title: Button
-description: To trigger an operation.
+description: 아래 코드로 버튼을 사용해보세요.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -11,30 +11,29 @@ group:
   order: 1
 ---
 
-## When To Use
+## 아래와 같을 때 사용합니다
 
-A button means an operation (or a series of operations). Clicking a button will trigger its corresponding business logic.
+버튼은 작업(또는 일련의 작업들)을 의미합니다. 버튼을 클릭하면 해당 비지니스 로직이 실행됩니다.
 
-In Ant Design we provide 5 types of button.
+Ant Design에서는 5가지 유형의 버튼을 제공합니다.
 
-- Primary button: used for the main action, there can be at most one primary button in a section.
-- Default button: used for a series of actions without priority.
-- Dashed button: commonly used for adding more actions.
-- Text button: used for the most secondary action.
-- Link button: used for external links.
+- 주 버튼(Primary button): 주요 작업에 사용되며, 한 섹션에 주 버튼은 최대 하나만 있을 수 있습니다.
+- 기본 버튼(Default button): 우선순위가 없는 일련의 작업에 사용됩니다.
+- 대시 버튼(Dashed button): 추가 작업을 위해 일반적으로 사용됩니다.
+- 텍스트 버튼(Text button): 가장 부차적인 작업에 사용됩니다.
+- 링크 버튼(Link button): 외부 링크에 사용됩니다.
 
-And 4 other properties additionally.
+추가적으로 4가지 속성이 더 있습니다:
 
-- `danger`: used for actions of risk, like deletion or authorization.
-- `ghost`: used in situations with complex background, home pages usually.
-- `disabled`: used when actions are not available.
-- `loading`: adds a loading spinner in button, avoids multiple submits too.
+- `danger`: 삭제나 권한 부여와 같은 위험한 작업에 사용됩니다.
+- `ghost`: 복잡한 배경에서 사용되며, 주로 홈 화면에서 사용됩니다.
+- `disabled`: 액션을 허락되지 않을 때 사용됩니다.
+- `loading`: 버튼에 로딩 스피너를 추가하여 여러 번 제출하는 것을 방지합니다.
 
-## Examples
+## 예시
 
 <!-- prettier-ignore -->
-<code src="./demo/basic.tsx">Syntactic sugar</code>
-<code src="./demo/color-variant.tsx" version="5.21.0">Color & Variant</code>
+<code src="./demo/basic.tsx">Type</code>
 <code src="./demo/icon.tsx">Icon</code>
 <code src="./demo/icon-position.tsx" version="5.17.0">Icon Position</code>
 <code src="./demo/debug-icon.tsx" debug>Debug Icon</code>
@@ -62,54 +61,52 @@ Different button styles can be generated by setting Button properties. The recom
 | autoInsertSpace | We add a space between two Chinese characters by default, which can be removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |
 | block | Option to fit button width to its parent width | boolean | false |  |
 | classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
-| color | Set button color | `default` \| `primary` \| `danger` | - | 5.21.0 |
-| danger | Syntactic sugar. Set the danger status of button. will follow `color` if provided | boolean | false |  |
+| danger | Set the danger status of button | boolean | false |  |
 | disabled | Disabled state of button | boolean | false |  |
 | ghost | Make background transparent and invert text and border colors | boolean | false |  |
 | href | Redirect url of link button | string | - |  |
-| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` |  |
+| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/ko/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | Set the icon component of button | ReactNode | - |  |
 | iconPosition | Set the icon position of button | `start` \| `end` | `start` | 5.17.0 |
 | loading | Set the loading status of button | boolean \| { delay: number } | false |  |
 | shape | Can be set button shape | `default` \| `circle` \| `round` | `default` |  |
 | size | Set the size of button | `large` \| `middle` \| `small` | `middle` |  |
 | styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
-| type | Syntactic sugar. Set button type. Will follow `variant` & `color` if provided | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
+| type | Set button type | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
 | onClick | Set the handler to handle `click` event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |  |
-| variant | Set button variant | `outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link` | - | 5.21.0 |
 
 It accepts all props which native buttons support.
 
-## Semantic DOM
+## 시맨틱(의미 있는) DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
 
-## Design Token
+## 디자인 토큰
 
 <ComponentTokenTable component="Button"></ComponentTokenTable>
 
-## FAQ
+## 자주 물어보는 질문
 
-### How to choose type and color & variant?
+### 유형과 색상 및 변형을 어떻게 선택하나요?
 
-Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first.
+유형(type)은 본질적으로 색상(color)과 변형(variant)에 대한 추가(syntactic sugar)된 문법입니다. 내부적으로 유형에 대해 색상과 변형 간의 매핑 관계를 설정합니다. 두 가지가 동시에 존재하는 경우, 색상과 변형이 우선적으로 사용됩니다.
 
 ```jsx
 <Button type="primary">click</Button>
 ```
 
-Equivalent
+아래와도 똑같습니다.
 
 ```jsx
 <Button color="primary" variant="solid">
   click
 </Button>
 ```
 
-### How to close the click wave effect?
+### 어떻게 클릭 파동 효과를 끌 수 있나요?
 
-If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvider](/components/config-provider#api) as `true`.
+이 기능이 필요하지 않다면, [ConfigProvider](/components/config-provider#api)에서 `wave`의 `disabled`을 `true`로 설정할 수 있습니다.
 
 ```jsx
 <ConfigProvider wave={{ disabled: true }}>