# Dropzone

[react-dropzone](https://react-dropzone.js.org/) 라이브러리 사용

<figure><img src="https://3212561211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FojaIWzOttDuV549cYsPQ%2Fuploads%2FcLfopA72OhF0oVqBpYLl%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-04-02%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.53.57.png?alt=media&#x26;token=a8deee46-9b6c-4b37-af96-23a0e8666e79" alt=""><figcaption></figcaption></figure>

### Props

<table><thead><tr><th width="210">Prop</th><th width="164">Type</th><th width="108">Default</th><th>Description</th></tr></thead><tbody><tr><td>state</td><td>'default' | 'error' | 'active'</td><td>'default'</td><td>상태</td></tr><tr><td>label</td><td>string</td><td>-</td><td>라벨 텍스트</td></tr><tr><td>hasDot</td><td>boolean</td><td>-</td><td>dot 표시 여부</td></tr><tr><td>file</td><td>{<br>  path: string<br>  name: string<br>  size: number<br>}</td><td>-</td><td>*** 초기 파일 설정<br>path: 파일 url 경로<br>name: 파일명 (확장자 포함)<br>size: 파일 사이즈</td></tr><tr><td>name</td><td>string</td><td>-</td><td>dropzone 고유 이름</td></tr><tr><td>onChange</td><td>function</td><td>-</td><td>파일 변경 핸들러</td></tr><tr><td>helperMessage</td><td>string</td><td>-</td><td>보조 메세지</td></tr><tr><td>className</td><td>string</td><td>-</td><td>커스텀 스타일 적용</td></tr></tbody></table>

### Usage

```typescript
<Dropzone
  state={'error'}
  label={'라벨'}
  hasDot
  helperMessage={'보조 메시지 영역'}
  name={'file'}
  onChange={() => {}}  
/>
```
