사용자 화면 · 마이페이지

판매 내역 — 마켓

MYP-005 · 2026. 03. 17

화면 이름 판매 내역 - 마켓 탭
화면 위치 마이페이지 > 판매 내역
화면 ID MYP-005
작성일 2026. 03. 17
MYP-005 MYP-005
Description
0 화면 접근 조건
  • 판매 내역은 로그인 사용자만 접근 가능
  • 비로그인 상태에서
    • 마이페이지 > 판매 내역 선택 시
      • 로그인 안내 모달(LOG-008) 노출
      • 로그인 완료 후 구매 내역 화면으로 이동
1 헤더 영역
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 판매 내역
    • 뒤로가기 버튼 클릭 시
      • 마이페이지(메인(MYP-001)으로 이동
2 탭 영역
  • 구성
    • 탭 2종
      • 마켓
      • 프라이빗 세일
    • 화면 진입 시 ‘마켓' 탭 기본 선택
    • 탭 선택 시
      • 선택한 탭 기준으로 구매 내역 리스트 갱신
3 판매 내역 리스트
  • 노출 조건
    • 선택한 탭(마켓)에 판매 내역 데이터가 존재하는 경우
    • 작품 썸네일 이미지 / 작품명 / 작가명 / 작품 타입 / 거래 상태 텍스트 / 구매 금액
  • 거래 상태 노출 규칙
    • 거래 상태는 서버 상태값 기준으로 노출
      • 문의 중
      • 거래 진행 중
      • 배송 중
        • 서브 상태 노출: 배송 중(생략), 검수 중, 픽업 대기, 정산 완료
        • 거래 완료의 경우, 전체 비활성화
      • 거래 취소
        • 서브 상태 노출: 환불 완료
    • 리스트 아이템 전체 영역 클릭 시
      • 작품 상세 페이지로 이동 (MKT-013)
4 (삭제) 판매 요청
  • 구성
    • 버튼 : 판매 요청
    • 로그인 상태에서 항상 노출
    • 데이터 유무와 관계없이 유지
    • 플로팅 형태로 위치에 유지
  • 동작
    • 버튼 클릭 시
      • 판매 요청 플로우로 이동 (화면 ID 추후 정의)
5 구매 내역 없음 화면
  • 노출 조건
    • 선택한 탭(마켓)에 판매 내역 데이터가 없는 경우
    • 마켓 판매 내역이 없습니다
  • Empty 상태 동작 규칙
    • Empty 상태에서도 탭 전환 가능
    • ‘판매 요청' 버튼 사용 가능
7 토스트 메시지 정의
  • 판매 내역 로딩 실패 시
    • 판매 내역을 불러오지 못했어요. 잠시 후 다시 시도해주세요.
    • “네트워크 오류” 잠시 후 다시 시도해주세요
8 공통 규칙
  • 구매 내역은 조회 전용 화면
    • 직접적인 거래 처리 불가
    • 로그인 안내 모달 노출 후 로그인 유도
  • 데이터 없음 상태는 오류가 아닌 정상 상태
    • 추가 행동 강제 없음

Design Output

UI 디자인 산출물

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

9:41
판매 내역
마켓
프라이빗 세일

작품명

작가명

작품 타입

문의 중

12,345,678 원

작품명

작가명

작품 타입

거래 진행 중

12,345,678 원

작품명

작가명

작품 타입

배송 중 (픽업 대기)

12,345,678 원

판매 등록
9:41
판매 내역
마켓
프라이빗 세일

마켓 판매 내역이 없습니다

판매 등록
개발 구현 가이드 — MYP-005 판매 내역 - 마켓

Update History

2026.03.19sb-wireframe-frame 패턴 전환 (MKT 품질 통일), DS v2 연동, 구조 정합성 수정
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.11구현 가이드 추가 (7섹션), 판매 등록 CTA 레드 그라디언트 적용
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

판매 내역 마켓 탭 화면. MYP-001 "판매 내역" 아이콘 탭으로 진입. 2탭(마켓/프라이빗 세일). 헤더 타이틀 중앙 정렬, 탭은 margin:0 24px. 리스트 + 빈 상태 2가지 뷰. 하단 고정 "판매 등록" CTA. 썸네일 72x72 (구매 내역 60x60보다 큼). 컨테이너 393x852px, 배경 --bg #FAFAF8.

2. 레이어 구조 + 치수

# 영역 높이/위치 세부 스펙
1상태 표시줄47pxiOS system status bar
2헤더height:48pxbg:--bg, padding:0 24px. 좌: chevron 20x20 stroke:--charcoal 1.5px round/round. 중앙: "판매 내역" Pretendard 17px/700 --charcoal ls:-0.02em flex:1 text-align:center. 우: 20px spacer
3탭 네비게이션margin:0 24px, border-bottom:1px rgba(26,26,26,0.06)각 탭 flex:1, padding:12px 0. 활성(마켓): 14px/700 --charcoal, border-bottom:2px solid --charcoal margin-bottom:-1px. 비활성: 14px/500 --text-muted
4판매 카드 리스트padding:0 24px, flex:1 스크롤각 아이템 flex row gap:14px padding:18px 0 border-bottom:1px rgba(26,26,26,0.06). 썸네일 72x72 bg:--paper #F0EDE6 직각(R=0) + linen + CHRT. 작품명 Pretendard 14px/700 --charcoal ls:-0.01em mb:3px. 작가명 12px --text-secondary #555555 mb:2px. 작품 타입 TASA Orbiter(--mono) 11px --text-muted ls:0.02em mb:6px. 상태 12px/600 (문의 중: --orange-50 #FF6F00, 거래 진행 중: --blue-50 #2563EB, 배송 중: --green-50 #16A34A) mb:4px. 가격 14px/700 --charcoal ls:-0.01em
5빈 상태flex column center, height:500px, gap:16pxCHRT 모노그램 hero 120x120 + "마켓 판매 내역이 없습니다" Pretendard 14px --text-muted ls:-0.01em
6판매 등록 CTAposition:absolute bottom:0 left:0 right:0padding:16px 24px 34px, bg:--bg, border-top:1px rgba(26,26,26,0.06). 버튼 height:50px bg:--cta-gradient, "판매 등록" Pretendard 15px/600 #fff ls:-0.01em 직각(R=0)

3. 핵심 인터랙션

  • 탭 전환: 마켓↔프라이빗 세일 (MYP-005↔MYP-006)
  • 카드 탭: 해당 판매 거래 상세 화면으로 push
  • 판매 등록 CTA 탭: MKT-001 판매등록 방식 선택 화면으로 push
  • 뒤로가기: MYP-001로 pop

4. 상태 변화

  • 거래 상태별 색상: 문의 중 --orange-50 #FF6F00, 거래 진행 중 --blue-50 #2563EB, 배송 중 --green-50 #16A34A
  • 로딩 중: 스켈레톤 UI
  • 데이터 없음: 빈 상태 뷰 (CHRT 모노그램 hero + 안내 문구)

5. 네비게이션 플로우

  • 진입: MYP-001 "판매 내역" 아이콘 탭 → push
  • 프라이빗 세일 탭 → MYP-006 (탭 전환)
  • 카드 탭 → 판매 거래 상세 (push)
  • 판매 등록 CTA → MKT-001 (push)
  • 뒤로가기 → MYP-001 (pop)

6. 에러/예외 처리

  • API 오류: 토스트 + 재시도
  • 네트워크 오류: 토스트 "네트워크 상태를 확인해주세요."
  • 데이터 없음: 빈 상태 뷰 + 판매 등록 CTA 유지

7. 모션 스펙

  • 화면 진입: translateX(100%→0), 350ms, --ease-ios-spring
  • 탭 전환: underline translateX, 250ms, ease-out
  • 카드 pressed: bg rgba(26,26,26,0.04), 즉시→150ms
  • CTA pressed: opacity 1→0.85, 100ms

8. 여백 · 간격 요약

항목 값
좌우 콘텐츠 패딩24px
탭 margin0 24px
카드 항목 padding18px 0
썸네일-텍스트 gap14px
텍스트 행간3px (작품명→작가명), 2px (작가명→타입), 6px (타입→상태), 4px (상태→가격)
CTA 영역 padding16px 24px 34px (safe area 포함)

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 헤더 타이틀: --sans Pretendard 17px/700, --charcoal #1A1A1A, ls: -0.02em
  • 탭 활성: --charcoal #1A1A1A 700 weight, border-bottom 2px solid --charcoal. 비활성: --text-muted 500
  • 작품 썸네일: 72x72 직각(R=0), bg --paper #F0EDE6 + linen + CHRT 워터마크
  • 작품명: --sans Pretendard 14px/700, --charcoal, ls: -0.01em
  • 작가명: --sans Pretendard 12px, --text-secondary #555555
  • 작품 타입: --mono TASA Orbiter 11px, --text-muted, ls: 0.02em
  • 상태 - 문의 중: --orange-50 #FF6F00, 12px/600
  • 상태 - 거래 진행 중: --blue-50 #2563EB, 12px/600
  • 상태 - 배송 중: --green-50 #16A34A, 12px/600
  • 가격: --sans Pretendard 14px/700, --charcoal #1A1A1A
  • 판매 등록 CTA: bg --cta-gradient, height 50px, 직각(R=0), 15px/600 #fff
  • 빈 상태 문구: --sans Pretendard 14px, --text-muted, 중앙 정렬
  • 좌우 패딩: 24px 전체 콘텐츠 마진
← 이전 화면: MYP-004 다음 화면: MYP-006 →