WIZ Design System

쓰는 곳#

CSV·XLSX·문서 묶음처럼 파일을 선택한 뒤 서버 검증, 중복 확인, 권한 확인, 부분 반영이 필요한 업무 흐름에 씁니다. 핵심은 파일 선택 UI를 업로드 완료 화면처럼 키우지 않고, 선택 이후의 판단과 복구를 별도 리뷰 표면에 남기는 것입니다.

Import stage

파일을 고르는 표면은 짧게 유지하고, 실제 판단은 검증 결과 표면에서 상태·원인·복구 액션과 함께 남깁니다.

CSV·XLSX · 최대 4개 · 20MB

파일을 끌어다 놓거나 클릭해 선택

드롭존은 데스크톱에서만 넓게 쓰고, 모바일은 파일 선택 버튼으로 터치 면적을 확보합니다.

검증 중마지막 검사 11:24

파일3

가능1

검토1

차단1

72%

진행률은 실제 검증 단계만 표시합니다. 수치를 모르면 퍼센트 대신 상태 라벨을 둡니다.

Validation review

가능 1검토 1차단 1

파일 가져오기 검증 결과
파일	상태	검증 내용	조치
customer-master.csv1.8MB · 1,240행	검토	전화번호 형식 12건 확인 필요	수정 후 반영
contracts-q2.xlsx3.2MB · 418행	차단	필수 열 supplier_id 누락	업로드 차단
price-update.csv740KB · 86행	가능	문제 없음	반영 가능

Recovery rule

전체 실패로 몰지 않고 차단 파일, 검토 파일, 반영 가능 파일을 나눠 다음 행동을 선택하게 합니다.

일부 파일은 아직 반영할 수 없습니다

차단 1건은 필수 열을 보완해야 하고, 검토 1건은 형식 보정 후 반영할 수 있습니다.

File Import / Upload Review — 선택·검증·부분 실패·복구

파일 가져오기는 선택 → 검증 → 리뷰 → 반영/복구 네 단계로 나눕니다. 업로드 중이라는 한 단어로 뭉개면 사용자는 어떤 파일이 가능한지, 무엇을 고쳐야 하는지, 이미 반영된 것은 무엇인지 판단할 수 없습니다.

선택: FileUpload가 파일 선택·드롭·제약 위반 인라인 오류를 담당합니다. 데스크톱은 드롭존을 쓸 수 있지만 모바일은 큰 드롭존보다 버튼형 선택을 우선합니다.
검증: 파일 형식, 필수 열, 중복, 권한, 행 수를 검사합니다. 진행률을 알 수 있을 때만 Progress를 쓰고, 모르면 상태 라벨을 둡니다.
리뷰: 검증 결과는 Table responsive="cards"로 보여 줍니다. 모바일에서는 행이 카드형 검토 목록으로 전환되어 페이지 전체 가로 스크롤을 만들지 않습니다.
복구: 차단·검토·가능 항목을 분리합니다. 실패와 재검증 CTA는 Toast가 아니라 화면 안에 남기고, 이미 반영된 완료만 Toast로 보조합니다.

선택과 리뷰 분리: 파일 선택 표면과 검증 리뷰 표면을 같은 카드 안에 섞지 않습니다. 선택은 위쪽, 결과와 조치는 아래쪽에 배치합니다.
같은 행 높이: 선택 표면과 검증 요약을 나란히 놓으면 높이를 맞춥니다. 한쪽만 짧게 떠 있거나, 다른 성질의 카드를 같은 그리드에 끼워 넣지 않습니다.
상태 요약: 가능·검토·차단 수는 숫자만 앞세우지 않고 상태 태그와 함께 둡니다. 사용자가 먼저 상태를 읽고 다음에 개수를 확인하게 합니다.
부분 반영: 전체 실패와 부분 실패를 구분합니다. 가능한 항목을 먼저 반영할 수 있으면 CTA도 분리합니다.

큰 드롭존 금지: 모바일에서는 파일 드롭 기대가 낮으므로 큰 점선 박스를 유지하지 않습니다. 버튼형 파일 선택과 간결한 보조 문구만 남깁니다.
외곽 프레임 절제: 데스크톱 패널을 그대로 가져오지 않습니다. 섹션 흐름과 얇은 구분선만 남기고, 중첩 카드·중첩 테두리는 제거합니다.
표는 카드형 리뷰: 검증 결과 표는 행 단위 카드로 바뀝니다. 파일명·상태·문제·조치를 한 화면에서 순차적으로 읽게 하고, 페이지 전체 가로 스크롤은 금지합니다.
복구 CTA: 실패 재검증과 가능 항목 반영은 모바일에서 같은 폭의 버튼으로 세로 배치합니다. 취소·보조 액션도 터치 면적을 줄이지 않습니다.

FileUpload: 선택·드롭·붙여넣기·폴더 선택과 제약 위반을 담당합니다. FormField가 넘긴 id, aria-describedby, aria-invalid, aria-required는 실제 조작 버튼/드롭존에 연결되어야 합니다.
Progress: 검증 진행률이 실제로 계산될 때만 씁니다. 행 수 파싱, 중복 검사, 서버 검증처럼 단계별 완료 수가 있을 때 적합합니다.
Table responsive=cards: 데스크톱은 테이블로 비교하고 모바일은 카드형 결과 목록으로 전환합니다. 행의 식별 컬럼은 primaryColumn으로 승격합니다.
Alert + Button: 부분 실패와 복구 액션은 결과 영역 안에 남깁니다. 실패 원인·재시도·부분 반영은 Toast-only로 처리하지 않습니다.