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

Update History

1. 화면 구조 개요

• 화면 유형: 전체 화면 단계형 플로우 (393 x 852px), 3개 상태 전환
• 간편 업로드 Step 1 — 보증서 파일 업로드 화면
• State 1: 업로드 전 (CTA 버튼만 노출)
• State 2: 업로드 후 (파일명 + 삭제 버튼 표시, "다음" 활성화)
• State 3: OCR 분석 로딩 (풀스크린 로딩 UI)
• 진입 경로: MKT-003 간편 업로드 선택 → MKT-004
• 다음 화면: OCR 분석 완료 시 자동으로 MKT-005 진입
• 탭바 없음 — 헤더 "취소" 텍스트 버튼으로 등록 취소 (MKT-012 확인 모달)

2. 레이어 구조 + 치수

3. 핵심 인터랙션

• 뒤로가기 chevron: 10x18px SVG, stroke --charcoal #1A1A1A, stroke-width:1.5, linecap:square, linejoin:miter → 이전 단계 이동. 단, MKT-003으로 이동 시 보증서 업로드/OCR 입력 이력이 존재하면 초기화 안내 모달(MKT-012) 선행
• 타이틀: "마켓 - 판매 등록" — --sans Pretendard 17px/700, --charcoal #1A1A1A, ls:-0.02em, 중앙 정렬
• 취소: --sans 13px/500, --charcoal, ls:-0.01em → MKT-012 확인 모달 노출 (확인 시 MKT-001 이동, 취소 시 현재 유지)
• 업로드 CTA 클릭: 네이티브 파일 선택 다이얼로그 호출 (pdf/jpeg/png/bmp)
• 업로드 완료: CTA → 파일 정보 행으로 교체 (파일 아이콘 16px + "보증서 파일 제목.pdf" 13px + "삭제" 12px/500 --text-muted)
• 파일 삭제: "삭제" 텍스트 클릭 → 업로드 초기화, CTA 버튼 복원, "다음" 비활성화
• 다음 클릭 (활성 시): OCR 분석 로딩 화면(State 3) 진입 → 완료 시 MKT-005 자동 이동

4. 상태 변화

• State 1 → State 2 (업로드 전→후):
• - 업로드 CTA(48px --charcoal bg) → 파일 정보 행(48px, bg rgba(26,26,26,0.04), border 1px rgba(26,26,26,0.07))
• - "다음" 비활성(bg rgba(26,26,26,0.15), text rgba(26,26,26,0.35)) → 활성(--cta-gradient bg, #fff text)
• State 2 → State 3 (다음 클릭→OCR 로딩):
• - 전체 화면이 OCR 로딩 UI로 전환
• - 검색 아이콘: 48x48px, stroke --red-brand #961E23, stroke-width:1.5, linecap:square, linejoin:miter
• - 타이틀: "잠시만 기다려주세요" — --sans 16px/700, --charcoal, ls:-0.02em
• - 서브: "보증서를 분석해서 입력중이에요" — --sans 14px/400, --text-muted #888888, ls:-0.005em
• State 3 → MKT-005: OCR 분석 완료 시 자동 전환

5. 네비게이션 플로우

• 진입: MKT-003(업로드 방식 선택) → 간편 업로드 선택 시
• 뒤로가기(chevron): MKT-003으로 복귀
• 취소: MKT-012 확인 모달 노출 → 확인 시 등록 취소
• 이전 버튼: MKT-003으로 이동 (항상 활성)
• 다음 버튼: 보증서 업로드 완료 시만 활성 → OCR 분석 → MKT-005 자동 이동
• 접근 제한: 로그인 사용자만 접근 가능 (비로그인 시 LOG-009 모달)

6. 에러/예외 처리

• 지원 불가 파일 형식: 토스트 "지원하지 않는 파일 형식입니다"
• 파일 업로드 실패: 토스트 "파일 업로드에 실패했어요. 다시 시도해 주세요"
• OCR 분석 실패: 토스트 "보증서를 인식하지 못했어요. 다시 업로드해 주세요" → 업로드 완료 상태(State 2)로 복귀
• 화면 이탈: 뒤로가기/취소 시 업로드된 보증서 파일 및 분석 상태 전부 초기화
• 취소 공통 규칙: 헤더 취소 → MKT-012 모달 → "계속 작성하기" 시 닫기, "작성 취소" 시 MKT-001 이동

7. 모션 스펙

• 업로드 CTA → 파일 정보 행 전환: opacity crossfade, duration 200ms, ease-out
• "다음" 비활성→활성: background-color transition 200ms ease-out
• State 2 → State 3 (OCR 로딩 진입): opacity 0→1, duration 300ms
• OCR 아이콘: 검색 아이콘 pulse 또는 rotate 애니메이션 (분석 중 시각 피드백)
• 토스트: translateY(100%)→0, duration 300ms, ease-out / 2.5초 후 자동 dismiss

8. 여백·간격 요약

• 좌우 콘텐츠 패딩: 24px
• 바디 상단 패딩: 32px (헤더 하단에서)
• "보증서" 라벨 → 업로드 CTA: margin-bottom 16px
• 업로드 CTA/파일 정보 → 안내 문구: margin-bottom 16px
• 안내 문구 줄 간격: line-height 1.6, 문구 간 margin-bottom 4px
• 이전/다음 버튼 gap: 12px
• 이전/다음 → 홈 인디케이터: bottom 34px
• 파일 정보 행 내부 패딩: 0 16px, 아이콘-텍스트 gap 8px
• OCR 로딩 아이콘 → 타이틀: margin-bottom 24px
• OCR 타이틀 → 서브 문구: margin-bottom 8px

9. 적용 디자인 토큰

• 요소: 헤더 배경 → Token: --bg → 값: #FAFAF8
• 요소: 헤더 타이틀 → Token: --sans · 17px · 700 · ls:-0.02em → 값: Pretendard Variable
• 요소: 취소 버튼 → Token: --sans · 13px · 500 · --charcoal → 값: #1A1A1A
• 요소: 섹션 라벨 "보증서" → Token: --sans · 13px · 600 · --charcoal → 값: #1A1A1A
• 요소: 업로드 CTA 배경 → Token: --charcoal → 값: #1A1A1A
• 요소: 업로드 CTA 텍스트 → Token: --sans · 14px · 600 → 값: #FFFFFF
• 요소: 안내 문구 → Token: --sans · 12px · --text-muted → 값: #888888, lh:1.6
• 요소: 파일 정보 행 배경 → 값: rgba(26,26,26,0.04), border 1px rgba(26,26,26,0.07)
• 요소: 파일명 → Token: --sans · 13px · --charcoal → 값: #1A1A1A
• 요소: 삭제 텍스트 → Token: --sans · 12px · 500 · --text-muted → 값: #888888
• 요소: 이전 버튼 → Token: --charcoal · --sans · 14px · 600 → 값: #1A1A1A bg, #FFF text
• 요소: 다음 버튼(활성) → Token: --cta-gradient · --sans · 14px · 600 → 값: linear-gradient bg, #FFF text
• 요소: 다음 버튼(비활성) → 값: bg rgba(26,26,26,0.15), text rgba(26,26,26,0.35)
• 요소: OCR 로딩 아이콘 → Token: --red-brand → 값: #961E23 stroke, 48px
• 요소: OCR 타이틀 → Token: --sans · 16px · 700 · --charcoal → 값: #1A1A1A
• 요소: OCR 서브 문구 → Token: --sans · 14px · --text-muted → 값: #888888