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

판매등록 - 직접 업로드 - 작가 - 이미지

MKT-008 · 2026. 03. 04

화면 이름 판매등록 - 직접 업로드 - 작기 - 이미지

화면 위치 마켓 > 판매 등록 > 직접업로드 > 작기명 > 이미지

화면 ID MKT-008

작성일 2026. 03. 04

9:41

마켓 - 판매 등록

취소

작가 이름

작가 이름을 입력해주세요

1-1

1-2

1-3

9:41

마켓 - 판매 등록

취소

작품 사진 - 최대 5장

작품 사진 업로드

JPG, PNG, HEIC 형식 / 장당 10MB 이하

9:41

마켓 - 판매 등록

취소

작품 사진 - 최대 5장

대표

대표 사진을 선택해주세요

Description

0	화면 접근 조건	MKT-003에서 직접 업로드 선택 시 진입 로그인 사용자만 접근 가능 직접 업로드 플로우 3단계 (작가 이름 → 이미지 → 보증서)
1-1	헤더	구성 좌측: 뒤로가기 아이콘 + "마켓 - 판매 등록" 타이틀 중앙: 타이틀 우측: 취소 텍스트 버튼 동작 뒤로가기 클릭 시 → 이전 단계로 이동 취소 클릭 시 → MKT-012 (판매등록 취소 확인 화면)으로 이동
1-2	작가 이름 입력필드	구성 텍스트 입력 필드 플레이스홀더: "작가 이름을 입력해주세요" 동작 입력 시 자동완성 리스트 노출 자동완성 항목 선택 가능 직접 입력도 허용
1-3	다음 버튼	입력 전에는 비활성화 (opacity 낮춤) 작가 이름 입력 시 다음 버튼 활성화 클릭 시 이미지 업로드 화면으로 이동
2	이미지 업로드화면	MKT-006과 동일한 UI/동작 업로드 영역 CTA (드래그 앤 드롭 / 클릭) 최대 5장 제한 허용 형식: JPG, PNG, HEIC 장당 10MB 이하 이전/다음 버튼으로 단계 이동
3	작품 사진 확인 및 메인 사진 선택	구성 업로드된 이미지 2열 그리드로 노출 각 이미지 우측 상단에 X(삭제) 버튼 첫 번째 이미지에 "대표" 뱃지 기본 표시 동작 이미지 클릭 시 대표 사진으로 선택 X 버튼 클릭 시 해당 이미지 삭제 최소 1장 이상 업로드 시 다음 진행 가능
4	토스트 메시지 정의	이미지 업로드 실패 "이미지 업로드에 실패했습니다. 다시 시도해주세요." 파일 형식 오류 "지원하지 않는 파일 형식입니다. (JPG, PNG, HEIC만 가능)" 파일 용량 초과 "파일 용량이 10MB를 초과합니다."
5	공통 규칙	직접 업로드 플로우에서는 OCR/보증서 관련 로직 없음 단계별 필수 입력값 미충족 시 다음 단계 진행 불가 이전 단계 이동 시 입력 데이터 유지

Design Output

UI 디자인 산출물

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

9:41

마켓 - 판매 등록

취소

작가 이름

작가 이름을 입력해주세요

9:41

마켓 - 판매 등록

취소

작품 사진 - 최대 5장

작품 사진 업로드

JPG, PNG, HEIC 형식 / 장당 10MB 이하

9:41

마켓 - 판매 등록

취소

작품 사진 - 최대 5장

대표

대표 사진을 선택해주세요

Applied Design Tokens

요소	Token	값
전체 배경	`--bg`	#FAFAF8
헤더	`--sans` · 14px · 600	Pretendard, `--charcoal`, square/miter 아이콘
입력 필드	`--sans` · 14px · border-bottom 1px	rgba(26,26,26,0.15) 하단 보더, 직각
플레이스홀더	`--text-muted`	#888888
이미지 그리드	2col · 12px gap	`--paper` 배경, CHRT 워터마크, 직각
X 삭제 버튼	circle · `--charcoal` bg	22px, border-radius:50%, stroke: square
이전/다음 버튼	`--charcoal` bg · 50px	직각, 15px, 600 weight
좌우 패딩	24px	전체 콘텐츠 마진

Design Description

Update History

2026.03.04초기 디자인 작성

0	화면 접근 조건	MKT-003에서 직접 업로드 선택 시 진입 로그인 사용자만 접근 가능 직접 업로드 플로우 3단계 (작가 이름 → 이미지 → 보증서)
1-1	헤더	구성 좌측: 뒤로가기 아이콘 + "마켓 - 판매 등록" 타이틀 중앙: 타이틀 우측: 취소 텍스트 버튼 동작 뒤로가기 클릭 시 → 이전 단계로 이동 취소 클릭 시 → MKT-012 (판매등록 취소 확인 화면)으로 이동
1-2	작가 이름 입력필드	구성 텍스트 입력 필드 플레이스홀더: "작가 이름을 입력해주세요" 동작 입력 시 자동완성 리스트 노출 자동완성 항목 선택 가능 직접 입력도 허용
1-3	다음 버튼	입력 전에는 비활성화 (opacity 낮춤) 작가 이름 입력 시 다음 버튼 활성화 클릭 시 이미지 업로드 화면으로 이동
2	이미지 업로드화면	MKT-006과 동일한 UI/동작 업로드 영역 CTA (드래그 앤 드롭 / 클릭) 최대 5장 제한 허용 형식: JPG, PNG, HEIC 장당 10MB 이하 이전/다음 버튼으로 단계 이동
3	작품 사진 확인 및 메인 사진 선택	구성 업로드된 이미지 2열 그리드로 노출 각 이미지 우측 상단에 X(삭제) 버튼 첫 번째 이미지에 "대표" 뱃지 기본 표시 동작 이미지 클릭 시 대표 사진으로 선택 X 버튼 클릭 시 해당 이미지 삭제 최소 1장 이상 업로드 시 다음 진행 가능
4	토스트 메시지 정의	이미지 업로드 실패 "이미지 업로드에 실패했습니다. 다시 시도해주세요." 파일 형식 오류 "지원하지 않는 파일 형식입니다. (JPG, PNG, HEIC만 가능)" 파일 용량 초과 "파일 용량이 10MB를 초과합니다."
5	공통 규칙	직접 업로드 플로우에서는 OCR/보증서 관련 로직 없음 단계별 필수 입력값 미충족 시 다음 단계 진행 불가 이전 단계 이동 시 입력 데이터 유지

← 이전 화면: MKT-007 다음 화면: MKT-009 →