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

Update History

1. 화면 구조 개요

• 직접 업로드 플로우 1단계: 작가 이름 입력 → 이미지 업로드 → 이미지 확인 3단계 멀티 스텝
• MKT-003(업로드 방식 선택)에서 [직접 업로드] 클릭 시 진입, 로그인 사용자만 접근
• 전체 컨테이너 393×852px (Phone 3은 1040px), bg: var(--bg) #FAFAF8
• 각 단계는 동일한 헤더(48px) + 콘텐츠 영역 + 하단 버튼(bottom:34px)으로 구성
• OCR·보증서 관련 로직 없음 (직접 업로드 전용)

2. 레이어 구조 + 치수

3. 핵심 인터랙션

Step 1 — 작가 이름 입력 (Phone 1)

• 섹션 레이블: "작가 이름" — var(--sans) 13px/600 color:var(--charcoal) ls:-0.01em, mb:16px
• 검색 입력 필드: height:44px, border-bottom:1px solid rgba(26,26,26,0.15), padding:0 4px, gap:8px, 직각(R=0)
• 플레이스홀더: "작가 이름을 검색해주세요" — var(--sans) 14px/400 color:var(--text-muted) #888888 ls:-0.005em, flex:1
• 검색 아이콘: SVG 16×16 stroke:var(--text-muted) 1.5px square/miter (돋보기)
• 검색 동작: 입력값 기준 작품 리스트 필터링, 빈 값이면 전체 유지
• 다음 버튼 (단독): height:50px, bottom:34px. 미입력 시 bg:rgba(26,26,26,0.15) color:rgba(26,26,26,0.35) 비활성. 입력 완료 시 bg:var(--cta-gradient) color:#fff 활성

Step 2 — 이미지 업로드 (Phone 2, MKT-006 동일)

• 섹션 레이블: "작품 사진 - 최대 5장" — var(--sans) 13px/600 color:var(--charcoal) ls:-0.01em, mb:16px
• 업로드 버튼: height:48px bg:var(--charcoal) display:flex center gap:8px mb:16px. 아이콘 SVG 18×18 stroke:#fff 1.5px + "작품 사진 업로드" 14px/600 #fff
• 안내 문구: 12px/400 color:var(--text-muted) line-height:1.6 ls:-0.005em — 3줄 (품질, 확장자, 정방향)
• 하단 버튼: "이전" bg:var(--charcoal) + "완료" bg:var(--cta-gradient), 각 flex:1 height:50px 14px/600

Step 3 — 이미지 확인 그리드 (Phone 3, MKT-006 동일, height:1040px)

• 그리드: CSS Grid 2열 grid-template-columns:1fr 1fr gap:12px mb:16px
• 셀: aspect-ratio:1/1 bg:var(--paper) #F0EDE6 position:relative overflow:hidden 직각(R=0)
• 대표(MAIN) 뱃지: 선택 셀 outline:2px solid var(--red-brand) #961E23 offset:-2px. 좌하단 "MAIN" bg:var(--red-brand) var(--mono) 9px/700 #fff padding:2px 6px ls:0.04em
• 삭제(X) 버튼: 22×22px bg:var(--charcoal) 직각(R=0) top:6px right:6px. X SVG 10×10 stroke:#fff 2px
• 안내 문구: "대표 사진을 선택해주세요." 12px color:var(--text-muted)
• 대표 선택: 셀 탭 → 기존 대표 해제, 새 대표 지정 (1장 필수)

4. 상태 변화

• 다음 비활성: bg:rgba(26,26,26,0.15) color:rgba(26,26,26,0.35) pointer-events:none — 조건: Step1 작가명 미입력
• 다음/완료 활성: bg:var(--cta-gradient) color:#fff — 조건: Step1 작가명 입력 / Step2~3 이미지 1장+
• 이전 버튼: 항상 활성. bg:var(--charcoal) color:#fff
• 대표 이미지 선택: outline:2px solid var(--red-brand) + MAIN 뱃지 노출, 기존 대표 해제

5. 네비게이션 플로우

• 진입: MKT-003 [직접 업로드] → Step 1 (작가 이름)
• Step 1 → Step 2: "다음" (작가명 입력 완료 시)
• Step 2 → Step 3: "완료" (이미지 1장+ 업로드 시)
• Step 3 → MKT-009: "완료" (이미지 1장+ + 대표 선택 완료)
• 이전: 현재 스텝 -1, 입력 데이터 유지
• 뒤로가기 (chevron): 이전 단계 이동. MKT-003으로 가는 경우 입력 이력 있으면 초기화 안내 모달(MKT-012) 노출
• 취소: MKT-012 취소 확인 모달 → 확인 시 MKT-001 이동 + 데이터 초기화

6. 에러/예외 처리

• 작가 미입력: 다음 버튼 비활성 (탭 무반응)
• 파일 형식 오류: 토스트 "지원하지 않는 파일 형식입니다" (MKT-006 동일)
• 개수 초과: 토스트 "최대 5장까지 업로드 가능합니다"
• 업로드 실패: 토스트 "이미지 업로드에 실패했습니다. 다시 시도해주세요"

7. 모션 스펙

• 스텝 전환: crossfade 300ms var(--ease-material)
• 버튼 활성화: background transition 200ms ease
• 이미지 삭제: opacity 0 + scale(0.95) 200ms, 그리드 재배치
• 토스트: translateY(100%→0) 300ms var(--ease-ios-spring), auto-dismiss 2.5s

8. 여백 · 간격 요약

• 콘텐츠 좌우 패딩: 24px
• 콘텐츠 상단 패딩: 32px
• 섹션 레이블 → 콘텐츠 간격: 16px
• 이미지 그리드 gap: 12px
• 이전/완료 버튼 gap: 12px
• 버튼 영역 bottom: 34px
• 버튼 높이: 50px
• 삭제 X 위치: top:6px right:6px
• MAIN 뱃지 위치: bottom:6px left:6px

9. 적용 디자인 토큰

• 전체 배경: --bg #FAFAF8
• 헤더 타이틀: --sans 17px/700 --charcoal #1A1A1A
• 섹션 레이블: --sans 13px/600 --charcoal
• 검색 필드: --sans 14px, border-bottom rgba(26,26,26,0.15), 검색 아이콘 --text-muted
• 업로드 버튼: --charcoal bg, 48px, 아이콘+텍스트 #fff
• 안내 문구: --text-muted #888888, 12px
• 이미지 셀: --paper #F0EDE6 배경, 직각(R=0)
• MAIN 뱃지: --red-brand #961E23 bg, --mono 9px/700
• 삭제 X: --charcoal bg 22×22px, 직각
• 이전 버튼: --charcoal bg 50px
• 완료 버튼: --cta-gradient 50px
• 다음 비활성: rgba(26,26,26,0.15) bg, rgba(26,26,26,0.35) color