WickedHost Design System / 컴포넌트

파일 업로드

파일 선택·전송·첨부 상태 관리을 위한 컴포넌트.

WickedHost 공통 확정 기준: vPanel/Pterodactyl 디자인을 Blesta까지 동일 적용. 문서·예제 기준이며 운영 서비스 배포와는 별도입니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.

실행형 예제
파일을 여기에 놓거나 선택하세요예제 제한 2 MiB · 서버로 전송하지 않습니다
    WickedHost 공통 토큰으로 구성한 동작 예제예시 데이터 · API 미연결

    목적과 사용

    파일 선택·전송·첨부 상태 관리에 사용합니다. 드래그만 허용하거나 전송 완료를 업무 저장 완료로 표시하지 않습니다.

    구성과 변형

    선택/드롭 영역, 허용 조건, 파일별 상태, 제거/재시도. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

    동작 규칙

    • UPL-01 MUST: 파일 선택 버튼을 드래그의 대안으로 제공합니다.
    • UPL-02 MUST: 파일별 크기·총 요청 크기·개수·허용 형식을 실제 서버 기준으로 안내합니다.
    • UPL-03 MUST: 선택·전송·검증·저장 완료를 구분합니다.
    • UPL-04 MUST: 실패한 파일과 성공한 파일을 구별하고 재시도 범위를 명시합니다.

    콘텐츠 예시

    좋음: ‘첨부 선택됨 — 티켓을 보내면 업로드됩니다’ / 피함: 선택만 했는데 ‘등록 완료’.

    우리 구현과 연결

    Blesta 티켓은 기존 multipart 폼을 유지합니다. VPS/Panel 업로드 경로를 동일한 API로 바꾸지 않습니다.

    제품별 소유 경로는 WICKEDVPS, Panel, Blesta와 소스 근거를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

    상태와 검증

    0바이트·한글명·초과 크기·총합 초과·중단·중복 파일·실패 후 선택 변경을 확인합니다.

    일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.

    출처와 적용 범위

    원본 확인 범위와 운영 적용 여부를 구분합니다. 실행형 예제의 동작 확인은 모든 운영 화면의 접근성 검증을 의미하지 않습니다.

    Markdown 원본 다운로드