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

판매등록 - 이미지 업로드 및 확인

MKT-006 · 2026. 03. 04

화면 이름 판매등록 - 이미지 업로드 및 확인

화면 위치 마켓 > 판매 등록 > 간편업로드 > 보증서 > 이미지 업로드 및 확인

화면 ID MKT-006

작성일 2026. 03. 04

9:41

마켓 - 판매 등록 취소

작품 사진 - 최대 5장

작품 사진 업로드

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

최소 1장, 최대 5장까지 업로드 가능합니다

1-1

1-2

1-3

9:41

마켓 - 판매 등록 취소

작품 사진 - 최대 5장

대표

대표 사진을 선택해주세요. 첫 번째 사진이 대표 사진으로 설정됩니다.

2-1

Description

0	화면 접근 조건	MKT-005에서 다음 버튼 클릭 시 진입 로그인 사용자만 접근 가능
1-1	헤더	구성 좌측: 뒤로가기 아이콘 중앙: 마켓 - 판매 등록 우측: 취소 텍스트 버튼 동작 뒤로가기 클릭 시 MKT-005로 이동 취소 버튼 클릭 시 MKT-012 확인 모달 노출
1-2	작품 사진 업로드 버튼 및 안내 카피	구성 작품 사진 업로드 CTA 버튼 업로드 가능 확장자 안내: jpeg / png / bmp 최대 5장까지 업로드 가능 안내 동작 업로드 버튼 클릭 시 갤러리/카메라 선택 다이얼로그 노출 업로드 완료 시 이미지 그리드에 썸네일 노출
1-3	이전/다음 버튼	이전 버튼 클릭 시 MKT-005로 이동 다음 버튼 기본 상태: 비활성화 (이미지 미업로드 시) 최소 1장 업로드 시 활성화 클릭 시 MKT-007로 이동
2-1	작품 사진 확인 및 메인 사진 선택	구성 업로드된 이미지를 2열 그리드로 노출 각 이미지에 X 삭제 버튼 (우측 상단) 첫 번째 이미지에 '대표' 뱃지 표시 동작 대표 사진 선택: 이미지 클릭 시 대표 사진 변경 X 버튼 클릭 시 해당 이미지 삭제 모든 이미지 삭제 시 다음 버튼 비활성화
3	토스트 메시지 정의	지원하지 않는 파일 형식 업로드 시 토스트: "지원하지 않는 파일 형식입니다" 최대 5장 초과 업로드 시도 시 토스트: "최대 5장까지 업로드 가능합니다" 이미지 삭제 시 토스트: "이미지가 삭제되었습니다"
4	공통 규칙	본 화면은 간편 업로드 Step 3 (이미지 업로드 단계) 최소 1장, 최대 5장 업로드 가능 대표 사진은 마켓 목록에서 썸네일로 사용됨

Design Output

UI 디자인 산출물

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

9:41

마켓 - 판매 등록 취소

작품 사진 - 최대 5장

작품 사진 업로드

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

최소 1장, 최대 5장까지 업로드 가능합니다

9:41

마켓 - 판매 등록 취소

작품 사진 - 최대 5장

MAIN

대표 사진을 선택해주세요. 첫 번째 사진이 대표 사진으로 설정됩니다.

Applied Design Tokens

요소	Token	값
전체 배경	`--bg`	#FAFAF8
헤더	`--sans` · 14px · 600	Pretendard, `--charcoal`
업로드 버튼	`--charcoal` bg · #fff text	48px, 직각 (R=0)
이미지 그리드	2-col · 12px gap	`--paper` bg, CHRT 워터마크 placeholder
삭제 X 버튼	`--charcoal` bg · #fff stroke	22px square, 직각, stroke: square
안내 문구	`--sans` · 12px · `--text-muted`	#888888
이전/다음 버튼	`--charcoal` bg (active/disabled)	활성: `--charcoal` / 비활성: rgba(26,26,26,0.15)
좌우 패딩	24px	전체 콘텐츠 마진

Design Description

Update History

2026.03.04초기 디자인 작성

0	화면 접근 조건	MKT-005에서 다음 버튼 클릭 시 진입 로그인 사용자만 접근 가능
1-1	헤더	구성 좌측: 뒤로가기 아이콘 중앙: 마켓 - 판매 등록 우측: 취소 텍스트 버튼 동작 뒤로가기 클릭 시 MKT-005로 이동 취소 버튼 클릭 시 MKT-012 확인 모달 노출
1-2	작품 사진 업로드 버튼 및 안내 카피	구성 작품 사진 업로드 CTA 버튼 업로드 가능 확장자 안내: jpeg / png / bmp 최대 5장까지 업로드 가능 안내 동작 업로드 버튼 클릭 시 갤러리/카메라 선택 다이얼로그 노출 업로드 완료 시 이미지 그리드에 썸네일 노출
1-3	이전/다음 버튼	이전 버튼 클릭 시 MKT-005로 이동 다음 버튼 기본 상태: 비활성화 (이미지 미업로드 시) 최소 1장 업로드 시 활성화 클릭 시 MKT-007로 이동
2-1	작품 사진 확인 및 메인 사진 선택	구성 업로드된 이미지를 2열 그리드로 노출 각 이미지에 X 삭제 버튼 (우측 상단) 첫 번째 이미지에 '대표' 뱃지 표시 동작 대표 사진 선택: 이미지 클릭 시 대표 사진 변경 X 버튼 클릭 시 해당 이미지 삭제 모든 이미지 삭제 시 다음 버튼 비활성화
3	토스트 메시지 정의	지원하지 않는 파일 형식 업로드 시 토스트: "지원하지 않는 파일 형식입니다" 최대 5장 초과 업로드 시도 시 토스트: "최대 5장까지 업로드 가능합니다" 이미지 삭제 시 토스트: "이미지가 삭제되었습니다"
4	공통 규칙	본 화면은 간편 업로드 Step 3 (이미지 업로드 단계) 최소 1장, 최대 5장 업로드 가능 대표 사진은 마켓 목록에서 썸네일로 사용됨

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