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

판매등록 - 간편 업로드(보증서 업로드)

MKT-004 · 2026. 03. 04

화면 이름 판매등록 - 간편 업로드(보증서 업로드)

화면 위치 마켓 > 판매 등록 > 간편업로드 > 보증서 업로드

화면 ID MKT-004

작성일 2026. 03. 04

9:41

마켓 - 판매 등록 취소

보증서

보증서 업로드

보증서는 제 3자에게 공개되지 않습니다

pdf / jpeg / png / bmp 파일만 업로드 가능합니다

1-1

1-2

1-3

9:41

마켓 - 판매 등록 취소

보증서

보증서 파일 제목.pdf

삭제

보증서는 제 3자에게 공개되지 않습니다

pdf / jpeg / png / bmp 파일만 업로드 가능합니다

9:41

잠시만 기다려주세요

보증서를 분석해서 입력중이에요

Description

0	화면 접근 조건	MKT-003에서 간편 업로드 선택 시 진입 로그인 사용자만 접근 가능 비로그인 시 로그인 안내 모달(LOG-009) 노출
1-1	헤더	구성 좌측: 뒤로가기 아이콘 중앙: 마켓 - 판매 등록 우측: 취소 텍스트 버튼 동작 뒤로가기 클릭 시 이전 단계로 이동 취소 버튼 클릭 시 MKT-012 확인 모달 노출
1-2	보증서 업로드 버튼 및 안내 문구	구성 보증서 업로드 CTA 버튼 안내 문구: 보증서는 제 3자에게 공개되지 않습니다 업로드 가능 확장자 안내: pdf / jpeg / png / bmp 동작 보증서 업로드 버튼 클릭 시 파일 선택 다이얼로그 노출 업로드 완료 후 파일명 + 확장자 표시 삭제 버튼으로 업로드된 파일 제거 가능
1-3	이전/다음 버튼	이전 버튼 클릭 시 MKT-003으로 이동 다음 버튼 기본 상태: 비활성화 (보증서 미업로드 시) 보증서 업로드 완료 시 활성화 클릭 시 OCR 분석 시작
2	보증서 파일 제목 확인 및 삭제 버튼, 안내문구	업로드된 파일명 + 파일 확장자 표시 삭제 텍스트 버튼 제공 보증서 안내 문구 유지
3	보증서 읽기 로딩화면	구성 OCR 분석 로딩 아이콘 (검색 아이콘) 안내 문구: 잠시만 기다려주세요 부가 문구: 보증서를 분석해서 입력중이에요 동작 OCR 분석 완료 시 자동으로 다음 화면(MKT-005)으로 이동
4	토스트 메시지 정의	지원하지 않는 파일 형식 업로드 시 토스트: "지원하지 않는 파일 형식입니다" 파일 삭제 시 토스트: "파일이 삭제되었습니다" OCR 분석 실패 시 토스트: "보증서 분석에 실패했습니다. 다시 시도해주세요"
5	공통 규칙	본 화면은 간편 업로드 Step 1 (보증서 업로드 단계) 보증서 업로드 플로우 순서: 파일 선택 → 업로드 완료 → 다음 클릭 → OCR 분석 OCR 분석은 다음 버튼 클릭 시 자동 진행

Design Output

UI 디자인 산출물

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

9:41

마켓 - 판매 등록 취소

보증서

보증서 업로드

보증서는 제 3자에게 공개되지 않습니다

pdf / jpeg / png / bmp 파일만 업로드 가능합니다

9:41

마켓 - 판매 등록 취소

보증서

보증서 파일 제목.pdf

삭제

보증서는 제 3자에게 공개되지 않습니다

pdf / jpeg / png / bmp 파일만 업로드 가능합니다

9:41

잠시만 기다려주세요

보증서를 분석해서 입력중이에요

Applied Design Tokens

요소	Token	값
전체 배경	`--bg`	#FAFAF8
헤더	`--sans` · 14px · 600	Pretendard, `--charcoal`
보증서 업로드 버튼	`--charcoal` bg · #fff text	48px height, 직각 (R=0)
안내 문구	`--sans` · 12px · `--text-muted`	#888888
파일명	`--sans` · 13px · `--charcoal`	파일 아이콘 + 파일명 + 확장자
이전 버튼	`--charcoal` bg	48px, 직각, #fff text
다음 버튼	`--charcoal` bg (active/disabled)	활성: `--charcoal` / 비활성: rgba(26,26,26,0.15)
좌우 패딩	24px	전체 콘텐츠 마진

Design Description

Update History

2026.03.04초기 디자인 작성

0	화면 접근 조건	MKT-003에서 간편 업로드 선택 시 진입 로그인 사용자만 접근 가능 비로그인 시 로그인 안내 모달(LOG-009) 노출
1-1	헤더	구성 좌측: 뒤로가기 아이콘 중앙: 마켓 - 판매 등록 우측: 취소 텍스트 버튼 동작 뒤로가기 클릭 시 이전 단계로 이동 취소 버튼 클릭 시 MKT-012 확인 모달 노출
1-2	보증서 업로드 버튼 및 안내 문구	구성 보증서 업로드 CTA 버튼 안내 문구: 보증서는 제 3자에게 공개되지 않습니다 업로드 가능 확장자 안내: pdf / jpeg / png / bmp 동작 보증서 업로드 버튼 클릭 시 파일 선택 다이얼로그 노출 업로드 완료 후 파일명 + 확장자 표시 삭제 버튼으로 업로드된 파일 제거 가능
1-3	이전/다음 버튼	이전 버튼 클릭 시 MKT-003으로 이동 다음 버튼 기본 상태: 비활성화 (보증서 미업로드 시) 보증서 업로드 완료 시 활성화 클릭 시 OCR 분석 시작
2	보증서 파일 제목 확인 및 삭제 버튼, 안내문구	업로드된 파일명 + 파일 확장자 표시 삭제 텍스트 버튼 제공 보증서 안내 문구 유지
3	보증서 읽기 로딩화면	구성 OCR 분석 로딩 아이콘 (검색 아이콘) 안내 문구: 잠시만 기다려주세요 부가 문구: 보증서를 분석해서 입력중이에요 동작 OCR 분석 완료 시 자동으로 다음 화면(MKT-005)으로 이동
4	토스트 메시지 정의	지원하지 않는 파일 형식 업로드 시 토스트: "지원하지 않는 파일 형식입니다" 파일 삭제 시 토스트: "파일이 삭제되었습니다" OCR 분석 실패 시 토스트: "보증서 분석에 실패했습니다. 다시 시도해주세요"
5	공통 규칙	본 화면은 간편 업로드 Step 1 (보증서 업로드 단계) 보증서 업로드 플로우 순서: 파일 선택 → 업로드 완료 → 다음 클릭 → OCR 분석 OCR 분석은 다음 버튼 클릭 시 자동 진행

← 이전 화면: MKT-003 다음 화면: MKT-005 →