사용자 화면 · 마이페이지

판매 내역 — 프라이빗 세일

MYP-006 · 2026. 03. 17

화면 이름 판매 내역 - 프라이빗 세일 탭
화면 위치 마이페이지 > 판매 내역
화면 ID MYP-006
작성일 2026. 03. 17
MYP-006 MYP-006
Description
0 화면 접근 조건
  • 판매 내역은 로그인 사용자만 접근 가능
  • 비로그인 상태에서
    • 마이페이지 > 판매 내역 선택 시
      • 로그인 안내 모달(LOG-008) 노출
      • 로그인 완료 후 구매 내역 화면으로 이동
1 헤더 영역
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 판매 내역
    • 뒤로가기 버튼 클릭 시
      • 마이페이지(메인(MYP-001)으로 이동
2 탭 영역
  • 구성
    • 탭 2종
      • 마켓
      • 프라이빗 세일
    • 화면 진입 시 ‘마켓' 탭 기본 선택
    • 탭 선택 시
      • 선택한 탭 기준으로 구매 내역 리스트 갱신
3 판매 내역 리스트
  • 노출 조건
    • 선택한 탭(프라이빗 세일)에 판매 내역 데이터가 존재하는 경우
    • 문의 중일 때는 노출하지 않으며, 거래 대금 입금으로 실 거래가 이루어 질 때 노출
    • 작품 썸네일 이미지 / 작품명 / 작가명 / 작품 타입 / 거래 상태 텍스트 / 구매 금액
  • 거래 상태 노출 규칙
    • 거래 상태는 서버 상태값 기준으로 노출
      • 문의 중
      • 거래 진행 중
      • 배송 중
        • 서브 상태 노출: 배송 중(생략), 검수 중, 픽업 대기, 정산 완료
        • 거래 완료의 경우, 전체 비활성화
      • 거래 취소
        • 서브 상태 노출: 환불 완료
    • 리스트 아이템 전체 영역 클릭 시
      • 작품 상세 페이지로 이동 (화면 ID 추후 정의)
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-006 판매 내역 - 프라이빗 세일

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. 화면 구조 개요

  • 화면 ID: MYP-006, 판매 내역 - 프라이빗 세일 탭
  • 뷰포트: 393 x 852px (iPhone 기준), 전체 배경 --bg #FAFAF8
  • 수직 구조: 상태바(44px) → 네비바(48px) → 탭(padding 12px 0, border-bottom) → 레드 악센트 라인(1px) → 리스트 영역(flex:1, 스크롤) → 하단 고정 CTA(padding 16px 24px 34px) → 홈 인디케이터
  • 2개 상태: 판매 내역 있음(아이템 리스트) / 빈 상태(CHRT 모노그램 120x120 + 안내 문구)
  • MYP-005(마켓 탭)와 동일 레이아웃, 탭 활성 상태와 거래 상태 색상만 차이
  • 로그인 필수 화면 — 비로그인 시 로그인 안내 모달(LOG-009) 노출

2. 레이어 구조 + 치수

#영역높이/위치세부 스펙
1상태바44pxiOS 시스템 상태바, 시간 9:41
2네비바48pxbg: --bg #FAFAF8, padding: 0 24px. 좌: 뒤로가기 20x20 stroke --charcoal stroke-width:1.5 round/round. 중앙: "판매 내역" --sans 17px/700 --charcoal ls:-0.02em. 우: 20px 빈 공간
3탭 영역auto (padding 12px 0)margin: 0 24px, border-bottom: 1px solid rgba(26,26,26,0.06). 2탭: "마켓"(비활성 --text-muted 500) / "프라이빗 세일"(활성 --charcoal 700, border-bottom: 2px solid --charcoal #1A1A1A, margin-bottom: -1px). 모두 14px --sans
3-1레드 악센트 라인1pxmargin: 0 24px, bg: --red-brand #961E23, opacity: 0.15. 탭 바 직하단 브랜드 시그니처 라인
4리스트 영역flex:1 (스크롤)padding: 0 24px. 아이템 간 border-bottom: 1px solid rgba(26,26,26,0.06). 아이템당 padding: 18px 0
5하단 CTAposition:absolute; bottom:0left:0; right:0; padding: 16px 24px 34px. bg: --bg. border-top: 1px solid rgba(26,26,26,0.06). 버튼: height 50px, bg --cta-gradient, "판매 등록" 15px/600 #fff --sans ls:-0.01em, 직각(R=0)
6홈 인디케이터34pxiOS 하단 홈바

3. 핵심 인터랙션

  • 탭 전환: "마켓" 탭 클릭 시 MYP-005 화면으로 전환. 활성 탭에 2px solid --charcoal underline + 700 weight, 비활성 탭은 --text-muted + 500 weight
  • 판매 카드 구조: display:flex, gap:14px. 좌: 썸네일 72x72px bg --paper #F0EDE6 직각(R=0) + linen 텍스처 + CHRT 워터마크(opacity:0.15). 우: 작품명 14px/700 --charcoal ls:-0.01em → 작가명 12px --text-secondary #555555 → 작품 타입 --mono 11px --text-muted ls:0.02em → 거래 상태 12px/600 → 가격 14px/700 --charcoal ls:-0.01em
  • 거래 상태 색상: "거래 완료" = --green-50 #16A34A, "거래 취소" = --red-brand #961E23
  • 카드 전체 영역 탭: 해당 작품 상세 페이지로 이동 (화면 ID 추후 정의)
  • 판매 등록 CTA: 탭 시 판매 요청 플로우 진입 (화면 ID 추후 정의). 데이터 유무와 관계없이 항상 고정 노출
  • 뒤로가기: 마이페이지 메인(MYP-001)으로 이동

4. 상태 변화

  • 데이터 있음 → 리스트 뷰: 프라이빗 세일 판매 내역 아이템 목록 표시. 각 아이템에 거래 상태(거래 완료/거래 취소) 뱃지 포함
  • 데이터 없음 → 빈 상태: CHRT 모노그램 히어로(120x120px) + "프라이빗 세일 판매 내역이 없습니다" 14px --text-muted ls:-0.01em 중앙 정렬, gap:16px. 빈 상태에서도 탭 전환 가능 + 판매 등록 CTA 유지
  • 탭 비활성↔활성: 비활성: --text-muted 500, 밑줄 없음 / 활성: --charcoal 700, border-bottom 2px solid --charcoal

5. 네비게이션 플로우

  • 진입 경로: MYP-001 마이페이지 메인 → 판매 내역 → 프라이빗 세일 탭 선택
  • 뒤로가기 (chevron): → MYP-001 마이페이지 메인
  • "마켓" 탭: → MYP-005 판매 내역 마켓 탭
  • 판매 등록 CTA: → 판매 요청 플로우 (화면 ID 추후 정의)
  • 리스트 아이템 탭: → 작품 상세 페이지 (화면 ID 추후 정의)
  • 비로그인 접근: → LOG-009 로그인 안내 모달 → 로그인 완료 후 본 화면 복귀

6. 에러/예외 처리

  • 판매 내역 로딩 실패: 토스트 "판매 내역을 불러오지 못했어요. 잠시 후 다시 시도해주세요."
  • 네트워크 오류: 토스트 "네트워크 오류 — 잠시 후 다시 시도해주세요"
  • 데이터 없음: 빈 상태 뷰 + 판매 등록 CTA 유지
  • 비로그인 접근: 로그인 안내 모달(LOG-009) 노출 → 로그인 유도 (오류가 아닌 정상 상태)
  • 조건 전용 화면: 현재 가격 갱신 불가 — 구매 시점 데이터 고정 표시

7. 모션 스펙

  • 화면 진입: translateX(100% → 0), duration 350ms, easing --ease-ios-spring
  • 탭 전환: active underline translateX, duration 250ms, easing ease-out
  • 카드 pressed: background rgba(26,26,26,0.04) 즉시 적용 → 150ms fade-out으로 해제
  • CTA pressed: opacity 1 → 0.85, duration 100ms
  • 화면 퇴장 (뒤로가기): translateX(0 → 100%), duration 300ms, easing ease-in

8. 여백 · 간격 요약

요소속성값
네비바padding0 24px
탭 영역margin / paddingmargin: 0 24px, 탭 padding: 12px 0
레드 악센트 라인margin0 24px (탭 직하단)
리스트 컨테이너padding0 24px
리스트 아이템padding / gappadding: 18px 0, gap: 14px (썸네일-텍스트)
작품명 → 가격 스택margin-bottom3px → 2px → 6px → 4px → 0
하단 CTA 영역padding16px 24px 34px
빈 상태gap16px (모노그램-텍스트 사이)

9. 적용 디자인 토큰

  • [색상]
  • --bg: #FAFAF8
  • --charcoal: #1A1A1A
  • --cta-gradient: linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%)
  • --red-brand: #961E23
  • --text-muted: #888888
  • --text-secondary: #555555
  • [타이포그래피]
  • --mono: TASA Orbiter
  • --sans: Pretendard Variable
  • [기타]
  • --green-50: (see tokens.css)
  • --paper: (see tokens.css)
← 이전 화면: MYP-005 다음 화면: MYP-007 →