WICKEDTeamWicked Design System / 컴포넌트
파일 업로드
파일 선택·전송·첨부 상태 관리을 위한 컴포넌트.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
파일을 여기에 놓거나 선택하세요예제 제한 2 MiB · 서버로 전송하지 않습니다
TeamWicked 웹사이트 토큰으로 구성한 동작 예제예시 데이터 · API 미연결
목적과 사용
파일 선택·전송·첨부 상태 관리에 사용합니다. 드래그만 허용하거나 전송 완료를 업무 저장 완료로 표시하지 않습니다.
구성과 변형
선택/드롭 영역, 허용 조건, 파일별 상태, 제거/재시도. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- UPL-01 MUST: 파일 선택 버튼을 드래그의 대안으로 제공합니다.
- UPL-02 MUST: 파일별 크기·총 요청 크기·개수·허용 형식을 실제 서버 기준으로 안내합니다.
- UPL-03 MUST: 선택·전송·검증·저장 완료를 구분합니다.
- UPL-04 MUST: 실패한 파일과 성공한 파일을 구별하고 재시도 범위를 명시합니다.
콘텐츠 예시
좋음: ‘첨부 선택됨 — 티켓을 보내면 업로드됩니다’ / 피함: 선택만 했는데 ‘등록 완료’.
우리 구현과 연결
TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.
상태와 검증
0바이트·한글명·초과 크기·총합 초과·중단·중복 파일·실패 후 선택 변경을 확인합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.