판매등록 - 직접 업로드 - 작품정보

Update History

1. 화면 구조 개요

• 직접 업로드 플로우의 작품 정보 입력 단계. MKT-009(보증서 업로드)에서 [다음] 버튼 정상 완료 후 진입
• 이전 단계에서 입력·업로드된 정보는 세션 유지 상태로 연동
• 2단계 멀티 스텝 폼: Step 1 작품 기본정보(8개 필드, Phone 1) → Step 2 희망 가격 + 작품 설명(Phone 3). 구매정보 단계(Phone 2)는 삭제됨
• 작품 주인공 원칙: 각 스텝 상단에 이전 단계 업로드 이미지 프리뷰 또는 입력 정보 요약 카드를 배치하여 "지금 등록하는 작품"을 시각적으로 상기
• 스텝 인디케이터: 2단 프로그레스 바(charcoal=완료/진행, alpha-8=미진행) + STEP N/2 모노 라벨
• 직접 업로드 전용 — OCR 자동 입력 로직 없음, 모든 정보는 사용자 직접 입력
• 전체 컨테이너: 393px 너비, Phone 1 높이 1000px(폼 필드 많아 스크롤), Phone 3 높이 852px. 배경 var(--bg) #FAFAF8

2. 레이어 구조 + 치수

3. 핵심 인터랙션

3-1. Step 1 — 작품 기본정보 (Phone 1, 8개 필드)

• 필드 공통 스타일: height:40px, border-bottom: 1px solid rgba(26,26,26,0.12), display:flex align-items:center. 라벨: font: var(--sans) 13px/600 color:var(--charcoal) #1A1A1A ls:-0.01em, mb:8px. Placeholder: font: var(--sans) 14px/400 color:var(--text-muted) #888888 ls:-0.005em
• 필수 표시(*): color: var(--red-brand) #961E23 — 작품명, 제작연도, 카테고리에 적용
• ① 작품명: 텍스트 입력, placeholder "작품명을 입력해주세요", 필수(*)
• ② 제작연도: 선택 필드, placeholder var(--mono) TASA Orbiter "YYYY" ls:0.04em, 필수(*)
• ③ 카테고리: 드롭다운, 우측 chevron-down SVG 16×16 stroke:var(--text-muted) 1.5px square/miter, justify-content:space-between, 필수(*). 카테고리 선택에 따라 사이즈 입력 필드 변경:
• 원화, 판화 → 가로(cm) × 세로(cm) 2열 flex gap:12px
• 아트토이, 기타 → 가로(cm) × 세로(cm) × 높이(cm) 3열 flex gap:12px (선택 사항)
• ④ 작품 재료: 텍스트 입력, placeholder "재료를 입력해주세요"
• ⑤ 작품 사이즈: 2열 flex gap:12px, 각 flex:1 — "가로 (cm)" / "세로 (cm)" (카테고리에 따라 변경)
• ⑥ 작가 서명: 드롭다운, 우측 chevron-down, placeholder "선택"
• ⑦ 컨디션(상태): 텍스트 입력, placeholder "상태를 입력해주세요". 라벨 옆 info 아이콘(SVG 14×14, circle+i, stroke:var(--text-muted) 1.5px square, vertical-align:middle) — 클릭 시 토스트 메시지 노출
• ⑧ 프레임(액자): 드롭다운, 우측 chevron-down, placeholder "선택". 단순 선택 항목
• 필드 margin-bottom: 22px (각 필드 간격)
• 필수 항목 3개(작품명, 제작연도, 카테고리) 모두 입력 시: "다음" 버튼 활성화

3-2. 구매정보 — 삭제된 단계

• 이 단계는 삭제됨. 구현하지 않음. Step 1 "다음" → 바로 Step 2(희망 가격/작품 설명)로 이동

3-3. Step 2 — 희망 가격 + 작품 설명 (Phone 3)

• 희망 판매 가격: 필수(*), height:40px border-bottom 1px solid rgba(26,26,26,0.12), placeholder "가격을 입력해주세요" font: var(--sans) 14px. 라벨 옆 info 아이콘(SVG 14×14, circle+i, stroke:var(--text-muted) 1.5px square, vertical-align:middle) — 클릭 시 가격 입력 기준 토스트 노출. mb:28px
• 작품 설명 (textarea): height:200px, border: 1px solid rgba(26,26,26,0.1), padding:14px, R=0. placeholder "작품에 대한 설명을 입력해주세요" font: var(--sans) 13px color:var(--text-muted) ls:-0.005em line-height:1.7. 선택 사항, 글자 수 제한 정책에 따라 적용 가능
• 안내 문구: "작품 설명이 자세할수록 많은 관심을 받아요" font: var(--sans) 12px color:var(--text-muted) ls:-0.005em line-height:1.6
• 버튼: "이전" + "완료". 완료 버튼은 희망 판매 가격 입력 시 활성화 (선택 항목은 비워둬도 활성)

4. 상태 변화

• "이전" 버튼: 항상 활성. bg: rgba(26,26,26,0.06), color: var(--charcoal) #1A1A1A, 15px/600
• "다음" 버튼 (Step 1): 필수 필드(작품명, 제작연도, 카테고리) 미입력 시 비활성 — bg: rgba(26,26,26,0.15), color: rgba(26,26,26,0.35). 필수 충족 시 활성 — bg: var(--cta-gradient) linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%), color: #fff
• "완료" 버튼 (Step 2): 희망 판매 가격 미입력 시 비활성. 입력 시 활성 — bg: var(--cta-gradient), color: #fff
• 입력 필드 focus 상태: border-bottom-color rgba(26,26,26,0.3)으로 진하게 전환, 200ms ease-out
• 필수 필드 에러 상태: border-bottom-color var(--red-brand) #961E23, 하단 에러 메시지 "필수 항목입니다" 12px color:var(--red-brand)
• 모든 입력 필드: 포커스 시 밑줄 강조(charcoal), 입력 후 placeholder 사라짐

5. 네비게이션 플로우

• 진입: MKT-009(보증서 업로드)에서 [다음] 버튼 정상 완료 시
• 이전 (Step 1): MKT-009로 복귀, 입력 데이터 유지
• 다음 (Step 1→2): 필수 항목 충족 + 유효성 검증 후 Step 2로 전환
• 이전 (Step 2): Step 1로 복귀, 입력 데이터 유지
• [완료] (Step 2): 필수 항목 검증 후 완료 화면(MKT-011)으로 이동
• 상단 취소: MKT-003 기준 정책에 따라 동작
• 상단 뒤로가기(chevron): 이전 입력 단계로 이동, 해당 단계까지 입력한 정보 유지
• 각 단계 전환 시: 입력 데이터 반드시 유지 (이전 단계 복귀 시 기존 값 보존)

6. 에러 / 예외 처리

• 필수 입력값 누락 시 [다음]/[완료] 클릭: 토스트 "필수 정보를 모두 입력해주세요" — bg: var(--color-error-toast), color: #fff, 2.5초 자동 dismiss
• 컨디션(상태) info 아이콘 클릭: 해당 항목 설명용 토스트 노출 (문구 추후 확정)
• 희망 판매 가격 info 아이콘 클릭: 가격 입력 기준 설명 토스트 노출 (문구 추후 확정)
• 가격 필드 숫자 외 입력: 입력 즉시 검증, 숫자만 허용
• API 실패 (완료 탭): 토스트 에러 + 재시도 안내
• 직접 업로드 전용: OCR 자동 채움 없음 — 모든 필드 사용자 수동 입력 원칙

7. 모션 스펙

8. 여백 · 간격 요약

9. 적용 디자인 토큰

• 스텝 인디케이터: 2단 flex bar height:2px, 활성 --charcoal, 미진행 --alpha-8. 라벨 --mono 12px ls:--ls-wide color:--text-muted
• 작품 프리뷰 (Step 1): 72×72px 썸네일, bg --alpha-4, 이미지 placeholder SVG stroke:--text-muted 1px. 잔여 카운터 --mono 12px. 하단 border --alpha-8
• 작품 요약 카드 (Step 2): bg --alpha-4, border-left 2px --charcoal, padding:12px. 썸네일 `var(--size-lg-height)` 48px bg:--alpha-8. 작품명 --sans 13px/600, 메타 --sans 12px --text-muted
• 전체 배경: --bg → #FAFAF8
• 헤더 타이틀: --sans Pretendard · 17px · 700 · ls:-0.02em → --charcoal #1A1A1A
• 헤더 취소: --sans · 13px · 500 · ls:-0.01em → --charcoal
• 뒤로가기 chevron: 10×18 SVG, stroke --charcoal 1.5px, square/miter, left:24px
• 필드 라벨: --sans · 13px · 600 · ls:-0.01em → --charcoal, mb:8px
• 필수 표시(*): --red-brand → #961E23
• 입력 필드: height:40px, border-bottom rgba(26,26,26,0.12), --sans 14px → 직각(R=0)
• 플레이스홀더: --text-muted → #888888, 14px
• 드롭다운 chevron: 16×16 SVG, stroke --text-muted 1.5px, square/miter
• info 아이콘: 14×14 SVG circle+i, stroke --text-muted 1.5px square, vertical-align:middle
• 작품 설명 textarea: --sans · 13px, border rgba(26,26,26,0.1), padding:14px, height:200px, R=0
• "이전" 버튼: bg rgba(26,26,26,0.06), color --charcoal, 50px height, --sans 15px/600, R=0
• "다음"/"완료" 버튼 (활성): bg --cta-gradient linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%), color #fff, 50px, R=0
• "다음"/"완료" 버튼 (비활성): bg rgba(26,26,26,0.15), color rgba(26,26,26,0.35)
• 토스트 (에러): bg var(--color-error-toast), color var(--white), 2.5초 auto-dismiss
• Home Indicator: 120×5px, --charcoal, border-radius:5px