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

판매등록 - 그외 정보 입력 및 완료 화면

MKT-007 · 2026. 02. 02

화면 이름 판매등록 - 그외 정보 입력 및 완료 화면
화면 위치 마켓 > 판매 등록 > 간편업로드 > 보증서 > 그외 정보 > 완료
화면 ID MKT-007
작성일 2026. 02. 02
MKT-007 MKT-007
Description
0 화면 접근 조건
  • 본 화면은 MKT-006 (이미지 업로드 및 확인) 단계에서 [다음] 버튼을 클릭한 경우에만 접근 가능
  • 로그인 사용자만 접근 가능
  • 간편 업로드 플로우 내 최종 입력 단계 화면
1-1 헤더
  • 구성
    • 좌측: 뒤로가기 버튼
    • 중앙: 화면 타이틀 판매 등록
    • 우측: 취소 텍스트 버튼
    • 뒤로가기 버튼 클릭 시
      • 직전 단계인 MKT-006 (이미지 업로드 및 확인) 화면으로 이동
      • 별도 안내 모달 없이 즉시 이동
      • 판매 등록 플로우 중단 안내 모달 노출 (MKT-012)
      • 확인 시 판매 등록 종료 및 MKT-001 (마켓 메인) 화면으로 이동
      • 취소 시 현재 화면 유지
1-2 기타 정보 입력 영역
  • 구성
    • 작품 등록을 위한 추가 정보 입력 영역으로, 아래 항목 포함
      • 프레임(액자) 여부
      • 작가 서명 여부
      • 컨디션(상태) ⓘ 인포메이션 버튼 포함
        • A/B/C/D 상태로 구분
      • 작품 설명
    • 모든 입력 필드는 기본 활성화 상태
    • 드롭다운 항목은 탭 시 선택 리스트 노출
    • 작품 설명은 자유 입력 텍스트 영역
    • 컨디션(상태) 항목 우측에 인포메이션 버튼 노출
    • 희망 판매 가격 항목 우측에 인포메이션 버튼 노출
  • 동작
    • 각 인포메이션 버튼 클릭 시
      • 해당 항목에 대한 설명 토스트 메시지 노출
      • 토스트 메시지는 토스트 메시지 외 영역을 누르면 사라짐
      • 토스트 문구는 추후 확정된 문구 기준으로 적용 예정
    • 작품 설명 입력 영역 하단에 안내 문구 노출
      • 작품 설명이 자세할수록 많은 관심을 받아요
1-3 이전/ 작품 등록 완료 버튼
  • 구성
    • 좌측: 이전 버튼
    • 우측: 완료 버튼
    • 이전 버튼 클릭 시
      • MKT-006 (이미지 업로드 및 확인) 화면으로 이동
      • 입력된 기타 정보는 유지됨
      • 필수 입력 항목 검증 후 작품 등록 요청
      • 검증 실패 시 토스트 메시지 노출
      • 검증 성공 시 완료 화면(영역 2) 노출
2 완료 화면
  • 구성
    • 체크 아이콘
    • 안내 문구
      • 작품 등록이 완료되었습니다
      • 담당자 승인까지 영업일 기준 2~3일 소요됩니다
    • 확인 버튼 클릭 시
      • 판매 등록 플로우 종료
      • MKT-001 (마켓 메인 화면)으로 이동
3 토스트 메시지 정의
  • 필수 입력 항목 미입력 상태에서 완료 버튼 클릭 시
    • 토스트 메시지 노출
    • 문구 예시: 필수 정보를 모두 입력해주세요
4 공통 규칙
  • 본 화면은 간편 업로드 판매 등록 플로우의 최종 입력 단계
  • 작품 등록 완료 이후에는 이전 입력 단계로 복귀할 수 없음
  • 판매 등록 완료 시 해당 작품은 마켓/프라이빗 세일 정책에 따라 노출됨

Design Output

UI 디자인 산출물

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

삭제
9:41

작품 등록이 완료되었습니다

담당자 승인까지 영업일 기준 2~3일 소요됩니다

확인
개발 구현 가이드 — MKT-007 판매등록 - 완료 화면

Update History

2026.03.17구현 가이드 전면 재작성 — 기타정보입력(1-1~1-3) 삭제, 완료 화면 전용으로 축소, 체크 아이콘 라인 방식 변경, 서브 문구 추가
2026.03.16구현 가이드 8섹션 표준 포맷 재작성 (치수·토큰값·모션·여백 보강)
2026.03.11구현 가이드 추가, 완료화면 확인CTA 그라디언트 적용
2026.03.04초기 디자인 작성
Implementation Specification

1. 화면 구조 개요

  • 화면 유형: 전체 화면 (393 x 852px), 작품 등록 완료 확인 화면
  • 간편 업로드 최종 단계 — 등록 완료 후 이전 입력 단계로 복귀 불가
  • 진입 조건: MKT-006 이미지 업로드 → 기타 정보 입력 → 완료 버튼 클릭 → 검증 성공 시 본 화면 표시
  • 로그인 사용자만 접근 가능
  • 삭제된 영역: 기타 정보 입력 폼(1-1 헤더, 1-2 정보입력, 1-3 이전/완료 버튼) — 본 화면에서 제외됨
  • 구성: 체크 아이콘 + 메인 안내 문구 + 서브 안내 문구 + 하단 확인 CTA

2. 레이어 구조 + 치수

  • 상태바: top:0, height 44px, iOS 시스템 영역
  • 콘텐츠 영역: height: calc(100% - 48px), flex column, align-items:center, justify-content:center, padding: 0 40px, background: --bg #FAFAF8
  • 체크 아이콘: SVG 48x48px viewBox, 가는 선 체크만 (배경 박스 없음), polyline points="12 25 20 33 36 15", stroke: --charcoal #1A1A1A, stroke-width:2, linecap:square, linejoin:miter, margin-bottom:32px
  • 메인 문구: "작품 등록이 완료되었습니다" — --sans Pretendard 20px/700, color: --charcoal #1A1A1A, letter-spacing:var(--ls-tight), line-height:1.4, text-align:center, margin-bottom:12px
  • 서브 문구: "담당자 승인까지 영업일 기준 2~3일 소요됩니다" — --sans 14px/400, color: --text-muted #888888, letter-spacing:var(--ls-normal), line-height:1.6, text-align:center, margin-bottom:56px
  • 확인 CTA: position:absolute, bottom:34px, left:0, right:0, padding:0 24px, height:50px, background: --cta-gradient, color:var(--white), --sans 15px/600, letter-spacing:var(--ls-normal), R=0, flex center
  • 홈 인디케이터: bottom:0, height 34px, iOS 기본

3. 핵심 인터랙션

  • 확인 버튼 클릭: 판매 등록 플로우 종료 → MKT-001 (마켓 메인 화면)으로 이동
  • 하드웨어 뒤로가기: MKT-001 강제 이동 (이전 입력 단계로 복귀 불가)

4. 네비게이션 플로우

  • 진입: MKT-006 → 기타 정보 입력 완료 → 검증 성공 후 본 화면 표시
  • 확인 버튼: MKT-001 (마켓 메인)으로 이동
  • 뒤로가기: 비활성화 — MKT-001 강제 이동
  • 접근 제한: 로그인 사용자만, MKT-006에서 순차 진입만 가능

5. 모션 스펙

  • 화면 진입: opacity crossfade, duration 400ms, ease-out
  • 체크 아이콘 등장: scale(0.8→1) + opacity(0→1), duration 300ms, ease-out, delay 200ms
  • 메인 문구 등장: opacity(0→1) + translateY(8px→0), duration 300ms, ease-out, delay 400ms
  • 서브 문구 등장: opacity(0→1), duration 300ms, ease-out, delay 500ms
  • 확인 CTA 등장: opacity(0→1), duration 300ms, ease-out, delay 600ms

6. 여백·간격 요약

  • 콘텐츠 좌우 패딩: 40px
  • 체크 아이콘 → 메인 문구: margin-bottom 32px
  • 메인 문구 → 서브 문구: margin-bottom 12px
  • 서브 문구 → CTA: margin-bottom 56px (시각적 간격, CTA는 absolute 배치)
  • 확인 CTA 좌우 패딩: 24px (position:absolute; left:0; right:0; padding:0 24px)
  • 확인 CTA → 하단: bottom 34px

7. 적용 디자인 토큰

  • [색상]
  • --bg #FAFAF8 — 화면 배경
  • --charcoal #1A1A1A — 체크 아이콘 stroke, 메인 문구 색상
  • --text-muted #888888 — 서브 문구 색상
  • --cta-gradient — 확인 CTA 버튼 배경 (레드 그라디언트)
  • [타이포그래피]
  • --sans Pretendard Variable — 전체 텍스트
  • 메인 문구: 20px / 700 / ls:-0.02em / lh:1.4
  • 서브 문구: 14px / 400 / ls:-0.01em / lh:1.6
  • CTA 버튼: 15px / 600 / ls:-0.01em
  • [아이콘]
  • 체크 SVG: 48x48 viewBox, stroke-width:2, linecap:square, linejoin:miter
← 이전 화면: MKT-006 다음 화면: MKT-008 →