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

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

MKT-007 · 2026. 03. 04

화면 이름 판매등록 - 그외 정보 입력 및 완료 화면
화면 위치 마켓 > 판매 등록 > 간편업로드 > 보증서 > 그외 정보 > 완료
화면 ID MKT-007
작성일 2026. 03. 04
9:41
마켓 - 판매 등록 취소
선택해주세요
선택해주세요
선택해주세요
금액을 입력해주세요
작품에 대한 설명을 입력해주세요

작품 설명이 자세할수록 많은 관심을 받아요

이전
완료
1-1
1-2
1-3
9:41

작품 등록이 완료됐습니다

확인
2
Description
0 화면 접근 조건
  • MKT-006에서 다음 버튼 클릭 시 진입
  • 로그인 사용자만 접근 가능
1-1 헤더
  • 구성
    • 좌측: 뒤로가기 아이콘
    • 중앙: 마켓 - 판매 등록
    • 우측: 취소 텍스트 버튼
  • 동작
    • 뒤로가기 클릭 시 MKT-006으로 이동
    • 취소 버튼 클릭 시 MKT-012 확인 모달 노출
1-2 기타 정보 입력 영역
  • 입력 필드
    • 프레임(액자) — 드롭다운 선택
    • 작가 서명 — 드롭다운 선택
    • 컨디션(상태) — 드롭다운 선택, info 아이콘 클릭 시 인포메이션 배너 노출
    • 희망 판매 가격 — 숫자 입력
    • 작품 설명 — 텍스트 에어리어, 자유 입력
  • 안내 문구
    • "작품 설명이 자세할수록 많은 관심을 받아요"
  • 동작
    • 드롭다운 클릭 시 선택 옵션 노출
    • 컨디션 info 아이콘 클릭 시 컨디션 설명 배너 노출
1-3 이전/작품 등록 완료 버튼
  • 이전 버튼
    • 클릭 시 MKT-006으로 이동
  • 완료 버튼
    • 필수 항목 검증 후 작품 등록 완성
    • 검증 실패 시 토스트 메시지 노출
    • 등록 완료 시 완료 화면으로 전환
2 완료 화면
  • 구성
    • 체크 아이콘 (직각 프레임)
    • 안내 문구: "작품 등록이 완료됐습니다"
    • 확인 CTA 버튼
  • 동작
    • 확인 버튼 클릭 시 MKT-001 (마켓 홈)으로 이동
3 토스트 메시지 정의
  • 필수 입력 미충족 시
    • 토스트: "필수 항목을 모두 입력해주세요"
  • 등록 실패 시
    • 토스트: "작품 등록에 실패했습니다. 다시 시도해주세요"
4 공통 규칙
  • 본 화면은 간편 업로드 최종 단계 (Step 4)
  • 작품 등록 완료 후 되돌릴 수 없음
  • 등록 후 수정은 별도 수정 플로우를 통해 진행

Design Output

UI 디자인 산출물

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

9:41
마켓 - 판매 등록 취소
선택해주세요
선택해주세요
선택해주세요
금액을 입력해주세요
작품에 대한 설명을 입력해주세요

작품 설명이 자세할수록 많은 관심을 받아요

이전
완료
9:41

작품 등록이 완료됐습니다

확인
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 --sans · 14px · 600 Pretendard, --charcoal
입력 필드 --sans · 14px · border-bottom 1px --charcoal border, 40px height
드롭다운 chevron-down · --charcoal 16px, square/miter stroke
텍스트에어리어 --sans · 13px · border 1px 100px height, rgba(26,26,26,0.07) border
완료 아이콘 체크마크 · --charcoal border 72px square (직각), 2px stroke
완료 문구 --sans · 18px · 700 Pretendard, --charcoal, center
확인 버튼 --charcoal bg · #fff text 50px, 직각, 15px 600
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • MKT-006에서 다음 버튼 클릭 시 진입
  • 로그인 사용자만 접근 가능
1-1 헤더
  • 구성
    • 좌측: 뒤로가기 아이콘
    • 중앙: 마켓 - 판매 등록
    • 우측: 취소 텍스트 버튼
  • 동작
    • 뒤로가기 클릭 시 MKT-006으로 이동
    • 취소 버튼 클릭 시 MKT-012 확인 모달 노출
1-2 기타 정보 입력 영역
  • 입력 필드
    • 프레임(액자) — 드롭다운 선택
    • 작가 서명 — 드롭다운 선택
    • 컨디션(상태) — 드롭다운 선택, info 아이콘 클릭 시 인포메이션 배너 노출
    • 희망 판매 가격 — 숫자 입력
    • 작품 설명 — 텍스트 에어리어, 자유 입력
  • 안내 문구
    • "작품 설명이 자세할수록 많은 관심을 받아요"
  • 동작
    • 드롭다운 클릭 시 선택 옵션 노출
    • 컨디션 info 아이콘 클릭 시 컨디션 설명 배너 노출
1-3 이전/작품 등록 완료 버튼
  • 이전 버튼
    • 클릭 시 MKT-006으로 이동
  • 완료 버튼
    • 필수 항목 검증 후 작품 등록 완성
    • 검증 실패 시 토스트 메시지 노출
    • 등록 완료 시 완료 화면으로 전환
2 완료 화면
  • 구성
    • 체크 아이콘 (직각 프레임)
    • 안내 문구: "작품 등록이 완료됐습니다"
    • 확인 CTA 버튼
  • 동작
    • 확인 버튼 클릭 시 MKT-001 (마켓 홈)으로 이동
3 토스트 메시지 정의
  • 필수 입력 미충족 시
    • 토스트: "필수 항목을 모두 입력해주세요"
  • 등록 실패 시
    • 토스트: "작품 등록에 실패했습니다. 다시 시도해주세요"
4 공통 규칙
  • 본 화면은 간편 업로드 최종 단계 (Step 4)
  • 작품 등록 완료 후 되돌릴 수 없음
  • 등록 후 수정은 별도 수정 플로우를 통해 진행
← 이전 화면: MKT-006 다음 화면: MKT-008 →