Components

Drop Zone

파일을 끌어다 놓는 영역입니다. hover·드래그 시 파랑으로 반응합니다.

파일을 끌어다 놓거나 클릭하여 선택
코드 보기
.drop{ border:1.5px dashed var(--border); border-radius:10px; }
.drop:hover,.drop.hot{ border-color:var(--primary); background:var(--primary-muted); }

Variants

이름설명미리보기
기본점선 1.5px, 문구 한 줄
파일 놓기

Guidelines

✓ Do
  • 문구는 한 줄만 — "파일을 끌어다 놓거나 클릭하여 선택"
  • 드래그 오버 시 즉시 파랑 반응
✕ Don't
  • 아이콘·설명·용량 안내를 안에 쌓지 않는다
  • 실선 테두리를 쓰지 않는다

Specification

속성토큰/값비고
테두리1.5px dashed var(--border)
radius10px
hovervar(--primary) + var(--primary-muted)