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

판매등록 - 공통 모달

MKT-012 · 2026. 02. 02

화면 이름 판매등록 - 공통 모달

화면 위치 마켓 > 판매 등록 > 공통 모달

화면 ID MKT-012

작성일 2026. 02. 02

Description

0	화면 접근 조건	본 모달은 판매 등록 플로우 전 단계에서 공통으로 사용 직접 업로드 / 간편 업로드 모두 동일 모달 사용 트리거 조건에 따라 1번 / 2번 모달 타입으로 분기 노출
1	취소 버튼 클릭 시 노출 모달	노출 조건 판매 등록 플로우 중 헤더의 ‘취소’ 버튼 클릭 시 항상 노출 입력 여부와 관계없이 노출됨 타이틀 판매 등록 취소 안내 판매 등록을 취소하면 지금까지 작성한 정보가 사라집니다 버튼 구성 좌측: 취소 우측: 판매 등록 취소 취소 모달 닫힘 현재 화면 유지 판매 등록 플로우 종료 MKT-001 (마켓 메인 화면) 으로 이동 입력 데이터 전체 초기화
2	뒤로가기 버튼 클릭 시 노출 모달	“뒤로가기 = 이전 화면 이동”으로 정의했기 때문에 ‘데이터 손실 가능성’이 있을 때만 제한적으로 노출 노출 조건 뒤로가기 버튼 클릭 시 현재 스텝 또는 이전 스텝에 입력값이 1개 이상 존재할 경우 입력이 전혀 없는 경우 → 모달 없이 즉시 이전 화면 이동 타이틀 작성 중인 내용 안내 지금 뒤로 가시면 입력한 정보가 저장되지 않고 사라집니다 버튼 구성 좌측: 취소 우측: 뒤로가기 취소 모달 닫힘 현재 화면 유지 입력 데이터 전체 폐기 이전 화면으로 이동
3	토스트 메시지 정의	노출 조건 다음 행동이 실제로 완료되었을 때 노출 ①번 모달에서 [판매 등록 취소] 버튼 클릭 후 ②번 모달에서 [뒤로가기] 버튼 클릭 후, 입력 데이터가 초기화되며 이전 화면으로 이동한 경우 화면 전환 완료 직후 모달 닫힘 이후 0.3~0.5초 내 노출 작성 중이던 정보가 삭제되었습니다 노출 규칙 단일 토스트, 중복 노출 없음 자동 사라짐 (약 2초) 사용자 액션 불필요 모달에서 [취소] 버튼 클릭 시 입력값이 없는 상태에서 뒤로가기한 경우 단순 화면 이동(이전/다음 버튼)에는 노출하지 않음
4	공통 규칙	모든 판매 등록 관련 화면에서 동일 UI / 동일 카피 사용 시스템 뒤로가기 제스처(iOS 스와이프 백)에도 동일 조건 적용 모달 노출 중: 배경 화면 스크롤 및 인터랙션 비활성화 텍스트 입력 파일 업로드 드롭다운 선택 가격 입력 등 모든 사용자 액션 포함

Design Output

UI 디자인 산출물

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

개발 구현 가이드 — MKT-012 판매등록 - 공통 모달

Update History

2026.03.26감도 개선 — 모달 내 작품 컨텍스트 카드(썸네일 40×40 `var(--size-md-height)` + 작품명/메타) 삽입. 모션 토큰 치환(ease-out → var(--ease-decelerate))

2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정

2026.03.17PM Description 전면 교체(5섹션), Modal 1 문구 디스크립션 기준 동기화("마켓" 제거), 토스트 메시지 정의·공통 규칙 반영, 적용 디자인 토큰 디자인 산출물 기준 전면 수정

2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성

2026.03.11구현 가이드 추가 (7섹션: 화면구조, 레이어구조, 취소모달, 뒤로가기모달, 노출트리거, 버튼스타일규칙, 에러처리)

2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

판매 등록 플로우 전반에서 공통으로 사용되는 확인 모달 2종. Modal 1 "판매 등록 취소 안내" — 헤더 취소 버튼 클릭 시 노출. Modal 2 "작성 중인 내용 안내" — 뒤로가기 클릭 + 입력 데이터 존재 시 노출. 둘 다 폰 프레임 없이 독립 모달 카드 형태이며, width:393px 기준으로 디자인되어 있다. 직접 업로드 / 간편 업로드 모두 동일 모달을 사용한다.

2. 레이어 구조 + 치수 (모달 공통)

#	영역	치수/위치	비고
1	딤 오버레이	전체 화면, rgba(0,0,0,0.4)	딤 클릭으로 닫기 불가
2	모달 카드	width:393px, 화면 중앙	`var(--bg)` #FAFAF8 bg, border:1px solid rgba(0,0,0,0.06), R=0
3	타이틀	상단, padding-top:40px	18px/700 `var(--sans)` `var(--charcoal)`, ls:-0.02em
3-1	작품 컨텍스트 카드	타이틀 아래, py:10px, border-bottom `var(--alpha-8)`	썸네일 40×40 `var(--size-md-height)` bg:`var(--alpha-4)` + 작품명 12px/600 + 메타 10px `var(--text-muted)`. 등록 중인 작품 실시간 반영. 작품 주인공 영역
4	본문 텍스트	작품 카드 아래, margin-bottom:28px	15px/400 `var(--text-secondary)` #555555, line-height:1.6, ls:-0.01em
5	버튼 영역 (취소 + 액션)	flex, gap:12px, 각 flex:1	height:50px, 15px/600, ls:-0.01em
6	하단 여백	padding-bottom:32px	버튼 아래 여백

버튼 스타일 상세

취소 버튼 (좌): border:1px solid var(--charcoal) #1A1A1A, 배경 transparent, 텍스트 var(--charcoal), 15px/600, R=0
액션 버튼 (우): background:var(--cta-gradient), 텍스트 #fff, 15px/600, R=0
디자인 폰 기준: 액션 버튼은 cta-gradient 적용 (Design Output에서 확인)
공통: height:50px, flex:1 동일 너비, letter-spacing:var(--ls-normal)

3. 핵심 인터랙션

Modal 1 — 취소 확인 모달

타이틀: "판매 등록 취소 안내"
본문: "판매 등록을 취소하면 지금까지 작성한 정보가 사라집니다"
좌 [취소]: 모달 닫힘, 현재 화면 유지
우 [판매 등록 취소]: 플로우 종료 → MKT-001 이동, 입력 데이터 전체 초기화

Modal 2 — 뒤로가기 확인 모달

타이틀: "작성 중인 내용 안내"
본문: "지금 뒤로 가시면 입력한 정보가 저장되지 않고 사라집니다"
좌 [취소]: 모달 닫힘, 현재 화면 유지
우 [뒤로가기]: 입력 데이터 전체 폐기, 이전 화면 이동

4. 상태 변화

Modal 1 노출 조건: 헤더 '취소' 버튼 클릭 시 항상 노출 (입력 여부 무관)
Modal 2 노출 조건: 뒤로가기 버튼 클릭 시 + 현재/이전 스텝에 입력값 1개 이상 존재
Modal 2 미노출: 입력이 전혀 없는 상태에서 뒤로가기 → 모달 없이 즉시 이전 화면
모달 노출 중: 배경 스크롤 및 인터랙션 전체 비활성화
iOS 스와이프 백: Modal 2와 동일 조건 적용
토스트 (액션 완료 후): "작성 중이던 정보가 삭제되었습니다" — 화면 전환 완료 후 0.3~0.5초 내 노출, 2초 후 자동 dismiss
토스트 미노출: [취소] 클릭 / 입력값 없는 뒤로가기 / 단순 이전·다음 이동
입력값 판단 기준: 텍스트 입력, 파일 업로드, 드롭다운 선택, 가격 입력 등 모든 사용자 액션

5. 네비게이션 플로우

Modal 1 [판매 등록 취소]: 현재 화면 → MKT-001 (마켓 메인), nav stack 초기화
Modal 2 [뒤로가기]: 현재 화면 → 이전 화면 (MKT-008~010 중 해당 단계), 데이터 폐기
Modal [취소]: 모달 닫힘, 현재 화면 유지 (네비게이션 없음)
적용 범위: MKT-004~MKT-010 전체 판매 등록 플로우에서 동일 모달 재사용

6. 에러/예외 처리

딤 클릭: 모달 닫힘 없음 — 반드시 버튼으로만 닫기 (의도적 선택 유도)
입력 없는 상태에서 뒤로가기: 모달 미노출, 바로 이전 화면 이동
단순 화면 이동 (이전/다음 버튼): 모달 없음
데이터 초기화 실패: 서버 오류 시 토스트 에러 + 재시도 안내

7. 모션 스펙

딤 등장: opacity 0→0.4, duration:200ms, easing:var(--ease-decelerate)
모달 카드 등장: opacity 0→1 + scale 0.95→1, duration:250ms, easing:var(--ease-decelerate)
모달 닫힘 (취소): 역순 — scale 1→0.95 + opacity 1→0, duration:200ms, easing:var(--ease-accelerate)
화면 전환 (액션 버튼): 모달 닫힘 200ms → 0.3~0.5초 딜레이 → 화면 이동 + 토스트 등장
토스트: 하단에서 슬라이드 업, duration:300ms var(--ease-decelerate), 2초 유지 후 페이드 아웃 300ms var(--ease-accelerate)

8. 여백·간격 요약

위치	값	비고
모달 상단 padding	40px	padding:40px 24px 0
모달 좌우 padding	24px	콘텐츠 영역 좌우
타이틀 → 본문 간격	10px	margin:0 0 10px
본문 → 버튼 간격	28px	margin:0 0 28px
버튼 간 간격	12px	flex gap:12px
버튼 높이	50px	양쪽 동일, R=0
하단 여백	32px	padding-bottom:32px

9. 적용 디자인 토큰

작품 컨텍스트: 썸네일 40×40 `var(--size-md-height)` bg:--alpha-4 R=0, 작품명 --sans 12px/600 --charcoal, 메타 10px --text-muted. border-bottom --alpha-8. 입력된 작품 정보 동적 반영
모달 배경: --bg #FAFAF8, border: 1px solid rgba(0,0,0,0.06), R=0 직각
모달 타이틀: --sans Pretendard · 18px · 700 · ls:-0.02em → --charcoal #1A1A1A
모달 본문: --sans · 15px · 400 · ls:-0.01em · line-height:1.6 → --text-secondary #555555
취소 버튼 (좌): transparent bg, border: 1px solid --charcoal #1A1A1A, color: --charcoal, 50px height, 15px/600, R=0
액션 버튼 (우): bg: --cta-gradient linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%), color: #fff, 50px height, 15px/600, R=0
딤 오버레이: rgba(0,0,0,0.4), 전체 화면 커버
모달 패딩: padding: 40px 24px 0, 하단 여백 32px
토스트: "작성 중이던 정보가 삭제되었습니다" — 화면 전환 후 0.3~0.5초 노출, 2초 auto-dismiss

← 이전 화면: MKT-011 다음 화면: MKT-013 →