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

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

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 →