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

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

MKT-009 · 2026. 02. 02

화면 이름 판매등록 - 직접 업로드 - 보증서 업로드
화면 위치 마켓 > 판매 등록 > 직접업로드 > 작기명 > 이미지 > 보증서
화면 ID MKT-009
작성일 2026. 02. 02
MKT-009 MKT-009
Description
0 화면 접근 조건
  • MKT-008(판매등록 – 직접 업로드 – 작가 · 이미지)에서 [다음] 버튼 클릭 시 진입
  • 로그인 사용자만 접근 가능
  • 직접 업로드 플로우 내 보증서 존재 여부 확인 단계
1 보증서 업로드 화면
  • 역할 정의
    • 본 화면은 보증서의 내용을 분석하거나 자동 입력하기 위한 화면이 아님
    • 작품 판매 가능 여부 판단을 위한 보증서 ‘존재 여부 확인’ 목적의 업로드 단계
    • 보증서 업로드 버튼
    • 안내 문구
      • 보증서는 제3자에게 공개되지 않음
      • 업로드 가능 확장자: pdf, jpeg, png, bmp
      • 보증서가 없으면 업로드 불가
    • 보증서 파일 업로드 전에는 [다음] 버튼 비활성화
    • 파일 업로드 시 보증서 확인 화면(❷)으로 상태 전환
2 보증서 확인 화면
  • 구성
    • 업로드된 보증서 파일명 노출
    • 파일 삭제 버튼
    • 하단 이전 / 다음 버튼
    • 파일 삭제 시 → ❶ 보증서 업로드 초기 상태로 복귀
    • 파일이 업로드된 상태에서만 [다음] 버튼 활성화
  • 중요
    • 본 단계에서는 OCR, 자동 정보 추출, 데이터 입력 기능 없음
    • 업로드된 보증서는 존재 여부 확인용으로만 사용
3 토스트 메시지 정의
  • 지원하지 않는 파일 형식 업로드 시
  • 파일 업로드 실패 시
  • 보증서 미업로드 상태에서 [다음] 버튼 시도 시
 → 관련 토스트 메시지 노출
 (문구는 간편 업로드(MKT-004) 기준과 동일 정책 적용)
4 공통 규칙
  • UI 구성 및 업로드 인터랙션은 간편 업로드 – 보증서 업로드(MKT-004) 화면과 동일
  • 차이점은 다음과 같음:
    • ❌ OCR 분석 없음
    • ❌ 보증서 기반 자동 입력 없음
    • ✅ 보증서 존재 여부 확인만 수행

Design Output

UI 디자인 산출물

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

9:41
마켓 - 판매 등록 취소

보증서

보증서 업로드

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

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

보증서가 없으면 업로드가 불가합니다

이전
다음
9:41
마켓 - 판매 등록 취소

보증서

보증서 파일 제목.pdf
삭제

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

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

보증서가 없으면 업로드가 불가합니다

이전
다음
개발 구현 가이드 — MKT-009 판매등록 - 직접 업로드 - 보증서 업로드

Update History

2026.03.17PM Description 최신 반영 + 디자인 산출물 MKT-004 기준 통일 + 구현 가이드 전면 재작성
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합
2026.03.04초기 디자인 작성
Implementation Specification

1. 화면 구조 개요

  • 2단계 멀티 스텝: Phone 1 보증서 업로드(미첨부) → Phone 2 보증서 확인(첨부 완료)
  • MKT-008(이미지 업로드)에서 [다음] 클릭 시 진입, 로그인 사용자만 접근
  • 직접 업로드 전용 — MKT-004와 달리 OCR 없음, 자동 입력 없음, 보증서 존재 여부만 확인
  • 전체 컨테이너 393×852px, bg: var(--bg) #FAFAF8
  • 보증서가 없으면 직접 업로드 플로우 진행 불가

2. 레이어 구조 + 치수

# 영역 치수 세부 스펙
1Status Bar44px, top fixediOS 시스템 상태바
2헤더height:48px, padding:0 24pxbg:var(--bg). 좌측: chevron SVG 10×18 stroke:var(--charcoal) 1.5px square/miter. 중앙: "마켓 - 판매 등록" var(--sans) 17px/700 ls:-0.02em. 우측: "취소" 13px/500 ls:-0.01em
3콘텐츠flex:1, padding:32px 24px 0섹션 레이블 "보증서" var(--sans) 13px/600 mb:16px. 스텝별 교체(업로드 or 확인)
4하단 버튼position:absolute bottom:34px, padding:0 24pxdisplay:flex gap:12px. 각 flex:1 height:50px var(--sans) 14px/600 ls:-0.01em
5홈 인디케이터120×5px centerbg:var(--charcoal), border-radius:5px

3. 핵심 인터랙션

Phone 1 — 보증서 업로드 (파일 미첨부, 다음 비활성)

  • 업로드 버튼: height:48px bg:var(--charcoal) display:flex center gap:8px mb:16px. 아이콘 SVG 18×18 stroke:#fff 1.5px + "보증서 업로드" 14px/600 #fff
  • 안내 문구 3줄: 12px/400 color:var(--text-muted) line-height:1.6 ls:-0.005em — ①보증서 비공개 ②pdf/jpeg/png/bmp ③보증서 없으면 업로드 불가
  • 클릭 동작: 업로드 버튼 탭 → 네이티브 file picker, accept=".pdf,.jpg,.jpeg,.png,.bmp"
  • 다음 비활성: bg:rgba(26,26,26,0.15) color:rgba(26,26,26,0.35) pointer-events:none

Phone 2 — 보증서 확인 (파일 첨부 완료, 다음 활성)

  • 파일 정보 카드: height:48px bg:rgba(26,26,26,0.04) border:1px solid rgba(26,26,26,0.07) display:flex between padding:0 16px mb:16px 직각(R=0)
  • 파일 아이콘: SVG 16×16 stroke:var(--charcoal) 1.5px square/miter (문서 아이콘)
  • 파일명: "보증서 파일 제목.pdf" var(--sans) 13px color:var(--charcoal) ls:-0.005em
  • "삭제" 텍스트: var(--sans) 12px/500 color:var(--text-muted) ls:-0.005em. 탭 시 파일 제거 → Phone 1로 복귀
  • 안내 문구: Phone 1과 동일 3줄
  • 다음 활성: bg:var(--cta-gradient) color:#fff

4. 상태 변화

  • 이전 버튼: 항상 활성. bg:var(--charcoal) color:#fff
  • 다음 (Phone 1): 파일 미첨부 → bg:rgba(26,26,26,0.15) 비활성. 파일 첨부 완료 → bg:var(--cta-gradient) 활성
  • 다음 (Phone 2): 파일 존재 → 항상 활성 bg:var(--cta-gradient)
  • 삭제 탭: 파일 제거 → Phone 1 상태 복귀 (다음 비활성)

5. 네비게이션 플로우

  • 진입: MKT-008(이미지 업로드)에서 [다음] 클릭
  • 이전: MKT-008로 복귀 (입력 데이터 유지)
  • 다음 (Phone 2): MKT-010(작품정보 입력)으로 이동
  • 취소: MKT-012 취소 확인 모달 → 확인 시 MKT-001 이동 + 데이터 초기화
  • 뒤로가기 (chevron): MKT-008로 이동

6. 에러/예외 처리

  • 미지원 파일 형식: 토스트 에러 (MKT-004 동일 정책)
  • 파일 업로드 실패: 토스트 에러 (MKT-004 동일 정책)
  • 보증서 미업로드 + 다음: 버튼 비활성 상태, 동작 없음
  • MKT-004 대비 차이: ❌ OCR 없음, ❌ 자동 입력 없음, ✅ 존재 여부만 확인

7. 모션 스펙

  • 스텝 전환: crossfade 300ms var(--ease-material)
  • 버튼 활성화: background transition 200ms ease
  • 토스트: translateY(100%→0) 300ms var(--ease-ios-spring), auto-dismiss 2.5s

8. 여백 · 간격 요약

  • 콘텐츠 좌우 패딩: 24px
  • 콘텐츠 상단 패딩: 32px
  • 섹션 레이블 → 업로드 버튼: 16px
  • 업로드 버튼 높이: 48px
  • 파일 정보 카드: height:48px padding:0 16px
  • 이전/다음 버튼: height:50px gap:12px bottom:34px

9. 적용 디자인 토큰

  • 전체 배경: --bg #FAFAF8
  • 헤더 타이틀: --sans 17px/700 --charcoal #1A1A1A
  • 섹션 레이블: --sans 13px/600 --charcoal
  • 업로드 버튼: --charcoal bg 48px, 아이콘+텍스트 #fff
  • 안내 문구: --text-muted #888888, 12px
  • 파일 정보 카드: rgba(26,26,26,0.04) bg, rgba(26,26,26,0.07) border, 직각
  • 파일 아이콘: SVG 16×16 stroke:--charcoal
  • 삭제 텍스트: --text-muted 12px/500
  • 이전 버튼: --charcoal bg 50px
  • 다음 활성: --cta-gradient 50px
  • 다음 비활성: rgba(26,26,26,0.15) bg, rgba(26,26,26,0.35) color
← 이전 화면: MKT-008 다음 화면: MKT-010 →