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

판매등록 - 공통 모달

MKT-012 · 2026. 03. 04

화면 이름 판매등록 - 공통 모달
화면 위치 마켓 > 판매 등록 > 공통 모달
화면 ID MKT-012
작성일 2026. 03. 04

마켓 판매 등록 취소 안내

마켓 판매 등록을 취소 하면 지금까지 작성한 정보가 사라집니다

취소
판매 등록 취소
1

작성 중인 내용 안내

지금 뒤로 가시면 입력한 정보가 저장되지 않고 사라집니다

취소
뒤로가기
2
Description
0 화면 접근 조건
  • 본 모달은 판매 등록 플로우 전 단계에서 공통으로 사용
  • 직접 업로드/간편 업로드 모두 동일 모달 사용
  • 트리거 조건에 따라 1번 or 2번 노출
1 취소 버튼 클릭 시 노출 모달
  • 노출 조건
    • 판매 등록 플로우 중 헤더의 '취소' 버튼 클릭 시
  • 안내 문구
    • 판매 등록을 취소하면 지금까지 작성한 정보가 사라집니다
  • 버튼 구성
    • 취소
      • 모달 닫힘
      • 현재 화면 유지
    • 판매 등록 취소
      • 판매 등록 플로우 종료 → MKT-001로 이동
2 뒤로가기 버튼 클릭 시 노출 모달
  • 노출 조건
    • 뒤로가기 버튼 클릭 시 입력값이 1개 이상 존재할 경우
  • 안내 문구
    • 지금 뒤로 가시면 입력한 정보가 저장되지 않고 사라집니다
  • 버튼 구성
    • 취소
      • 모달 닫힘
    • 뒤로가기
      • 입력 데이터 전체 폐기 → 이전 화면으로 이동
3 토스트 메시지 정의
  • 화면 전환 완료 이후 토스트 노출
  • 토스트 문구: 입력 중이던 정보가 삭제되었습니다
  • 타일 포스트/중복 노출 없음
  • 자동 사라짐 (팝업)
4 공통 규칙
  • 모든 판매 등록 관련 화면에서 동일한 UX 패턴
  • 시스템 뒤로가기/OS 스와이프 백(iOS) 동일 조건 적용
  • 입력값 존재 여부에 따른 분기
  • 모달 노출 중 배경 스크롤 비활성화 처리

Design Output

UI 디자인 산출물

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

마켓 판매 등록 취소 안내

마켓 판매 등록을 취소 하면 지금까지 작성한 정보가 사라집니다

취소
판매 등록 취소

작성 중인 내용 안내

지금 뒤로 가시면 입력한 정보가 저장되지 않고 사라집니다

취소
뒤로가기
Applied Design Tokens
요소Token
전체 배경 --bg #FAFAF8
모달 배경 #fff · 직각 border-radius: 0, border: 1px solid rgba(26,26,26,0.12)
모달 제목 --sans · 16px · 700 Pretendard, --charcoal
모달 본문 --sans · 13px · --text-secondary #6B6B6B
취소 버튼 transparent · 1px --charcoal border 직각 (R=0), 44px height
확인 버튼 --charcoal bg · #fff 직각 (R=0), 44px height
딤 오버레이 rgba(0,0,0,0.4) 실제 앱 적용 시
좌우 패딩 32px 모달 내부 패딩
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 본 모달은 판매 등록 플로우 전 단계에서 공통으로 사용
  • 직접 업로드/간편 업로드 모두 동일 모달 사용
  • 트리거 조건에 따라 1번 or 2번 노출
1 취소 버튼 클릭 시 노출 모달
  • 노출 조건
    • 판매 등록 플로우 중 헤더의 '취소' 버튼 클릭 시
  • 안내 문구
    • 판매 등록을 취소하면 지금까지 작성한 정보가 사라집니다
  • 버튼 구성
    • 취소
      • 모달 닫힘
      • 현재 화면 유지
    • 판매 등록 취소
      • 판매 등록 플로우 종료 → MKT-001로 이동
2 뒤로가기 버튼 클릭 시 노출 모달
  • 노출 조건
    • 뒤로가기 버튼 클릭 시 입력값이 1개 이상 존재할 경우
  • 안내 문구
    • 지금 뒤로 가시면 입력한 정보가 저장되지 않고 사라집니다
  • 버튼 구성
    • 취소
      • 모달 닫힘
    • 뒤로가기
      • 입력 데이터 전체 폐기 → 이전 화면으로 이동
3 토스트 메시지 정의
  • 화면 전환 완료 이후 토스트 노출
  • 토스트 문구: 입력 중이던 정보가 삭제되었습니다
  • 타일 포스트/중복 노출 없음
  • 자동 사라짐 (팝업)
4 공통 규칙
  • 모든 판매 등록 관련 화면에서 동일한 UX 패턴
  • 시스템 뒤로가기/OS 스와이프 백(iOS) 동일 조건 적용
  • 입력값 존재 여부에 따른 분기
  • 모달 노출 중 배경 스크롤 비활성화 처리
← 이전 화면: MKT-011 다음 화면: MKT-013 →