사용자 화면 · 마켓 / 판매등록

판매등록 - 직접 업로드 - 보증서 업로드

MKT-009 · 2026. 03. 04

화면 이름 판매등록 - 직접 업로드 - 보증서 업로드

화면 위치 마켓 > 판매 등록 > 직접업로드 > 작기명 > 이미지 > 보증서

화면 ID MKT-009

작성일 2026. 03. 04

9:41

마켓 - 판매 등록

취소

보증서

보증서 업로드

JPG, PNG, PDF 형식 지원

9:41

마켓 - 판매 등록

취소

보증서

보증서 파일 제목

파일 확장자 명

삭제

JPG, PNG, PDF 형식 지원

Description

0	화면 접근 조건	MKT-008에서 다음 클릭 시 진입 로그인 사용자만 접근 가능 보증서 존재 여부에 따라 업로드 단계 분기 보증서 없음 → 업로드 화면 (Phone 1) 보증서 있음 → 확인 화면 (Phone 2)
1	보증서 업로드 화면	구성 업로드 버튼 (드래그 앤 드롭 / 클릭) 안내 문구: 지원 형식 (JPG, PNG, PDF) 동작 업로드 영역 클릭 시 파일 선택 다이얼로그 확장자 제한: JPG, PNG, PDF만 허용 보증서가 없으면 다음 단계 진행 불가 이전/다음 버튼으로 단계 이동
2	보증서 확인 화면	구성 업로드된 파일명 노출 (파일 제목 + 확장자) 파일 삭제 버튼 (우측 "삭제" 텍스트) 동작 삭제 클릭 시 파일 제거 → Phone 1 상태로 복귀 이전/다음 버튼으로 단계 이동
3	토스트 메시지 정의	파일 업로드 실패 "파일 업로드에 실패했습니다. 다시 시도해주세요." 미지원 형식 "지원하지 않는 파일 형식입니다. (JPG, PNG, PDF만 가능)"
4	공통 규칙	UI 구성 및 업로드 인터랙션은 간편 업로드 - 보증서 업로드(MKT-004) 화면과 동일 직접 업로드 차이점: OCR 분석 없음 보증서 기반 폼 자동 입력 없음 보증서 존재 여부만 확인 수행

Design Output

UI 디자인 산출물

위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.

9:41

마켓 - 판매 등록

취소

보증서

보증서 업로드

JPG, PNG, PDF 형식 지원

9:41

마켓 - 판매 등록

취소

보증서

보증서 파일 제목

파일 확장자 명

삭제

JPG, PNG, PDF 형식 지원

Applied Design Tokens

요소	Token	값
전체 배경	`--bg`	#FAFAF8
헤더	`--sans` · 14px · 600	Pretendard, `--charcoal`, square/miter 아이콘
업로드 영역	160px height · border 1px	직각, rgba(26,26,26,0.1) border
파일 정보 카드	`--charcoal` 2% bg	직각, border: 1px solid rgba(26,26,26,0.07)
파일 확장자	`--mono` · 12px	TASA Orbiter, `--text-muted`
삭제 텍스트	`--red-brand` · 13px · 500	#961E23
이전/다음 버튼	`--charcoal` bg · 50px	직각, 15px, 600 weight
좌우 패딩	24px	전체 콘텐츠 마진

Design Description

Update History

2026.03.04초기 디자인 작성

0	화면 접근 조건	MKT-008에서 다음 클릭 시 진입 로그인 사용자만 접근 가능 보증서 존재 여부에 따라 업로드 단계 분기 보증서 없음 → 업로드 화면 (Phone 1) 보증서 있음 → 확인 화면 (Phone 2)
1	보증서 업로드 화면	구성 업로드 버튼 (드래그 앤 드롭 / 클릭) 안내 문구: 지원 형식 (JPG, PNG, PDF) 동작 업로드 영역 클릭 시 파일 선택 다이얼로그 확장자 제한: JPG, PNG, PDF만 허용 보증서가 없으면 다음 단계 진행 불가 이전/다음 버튼으로 단계 이동
2	보증서 확인 화면	구성 업로드된 파일명 노출 (파일 제목 + 확장자) 파일 삭제 버튼 (우측 "삭제" 텍스트) 동작 삭제 클릭 시 파일 제거 → Phone 1 상태로 복귀 이전/다음 버튼으로 단계 이동
3	토스트 메시지 정의	파일 업로드 실패 "파일 업로드에 실패했습니다. 다시 시도해주세요." 미지원 형식 "지원하지 않는 파일 형식입니다. (JPG, PNG, PDF만 가능)"
4	공통 규칙	UI 구성 및 업로드 인터랙션은 간편 업로드 - 보증서 업로드(MKT-004) 화면과 동일 직접 업로드 차이점: OCR 분석 없음 보증서 기반 폼 자동 입력 없음 보증서 존재 여부만 확인 수행