DropZone
원본: projects/skill-lens/design/components/DropZone/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
파일 업로드: 대기, 업로드 완료
파일을 올리는 영역입니다. 올린 뒤에는 파일 행으로 바뀝니다.
쓰는 곳
명단 올리기.
구성(화면이 넘겨줄 것)
허용 형식과 최대 용량 문구, 올리기 처리, 파일 이름과 크기.
규칙
- 점선
border-strong, 바탕skill-blue-tint, 가운데 "파일 선택". - 양식 받기 링크는 영역 안에 둡니다.
- 끌어 놓는 중에는 실선 보라 테두리.
- 오류는 파일 행 아래
danger단어와 아이콘.
접근성
- 형식과 용량 안내는 항상 보입니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Input" height=330 subtitle="파일 업로드: 대기, 업로드 완료" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.cap{font:500 12px/16px var(--font-sans);color:var(--ink-muted)}.card{padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}</style>
<div class="sl stack">
<div style="max-width:360px" class="stack">
<div class="sl-drop"><span class="sl-drop__icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg></span><div class="sl-drop__title">파일을 끌어다 놓거나 <b>파일 선택</b></div><div class="sl-drop__hint">XLSX, CSV, PDF, DOCX, 최대 50MB</div></div>
<div class="sl-file"><span class="sl-done" aria-label="완료"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><div style="flex:1"><div class="sl-file__name">직무기술서_2024.xlsx</div><div class="sl-file__size">12.4MB</div></div></div>
</div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.