사용자 화면 · 마이페이지

구매 내역 — 마켓 탭

MYP-003 · 2026. 03. 17

화면 이름 구매 내역 - 마켓 탭
화면 위치 마이페이지 > 구매 내역
화면 ID MYP-003
작성일 2026. 03. 17
MYP-003 MYP-003
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-003 구매 내역 (마켓 탭)

Update History

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

Implementation Specification

1. 화면 구조 개요

구매 내역 목록 화면 (마켓 탭 활성). MYP-001 "구매 내역" 아이콘 탭으로 진입. 2탭 구조(마켓/프라이빗 세일). 리스트 + 빈 상태 2가지 뷰. 하단 "구매 요청" 플로팅 버튼 포함. 컨테이너 393x852px, 배경 --bg #FAFAF8.

2. 레이어 구조 + 치수

# 영역 높이/위치 세부 스펙
1상태 표시줄47pxiOS system status bar
2헤더height:48pxbg:--bg, padding:0 24px, gap:12px. 뒤로가기 10x18 stroke:--charcoal 1.5px round/round. "구매 내역" Pretendard(--sans) 17px/700 --charcoal #1A1A1A ls:-0.02em
3탭 네비게이션flex row, border-bottom:1px rgba(26,26,26,0.06)각 탭 flex:1 text-align:center padding:12px 0. 활성(마켓): Pretendard 14px/700 --charcoal ls:-0.01em, border-bottom:2px solid --charcoal margin-bottom:-1px. 비활성(프라이빗 세일): 14px --text-muted ls:-0.01em
4구매 내역 리스트flex:1, 스크롤각 아이템 padding:16px 24px, flex row gap:14px, border-bottom:1px rgba(26,26,26,0.06). 썸네일 60x60 bg:--paper #F0EDE6 직각(R=0) + linen 텍스처 + CHRT 워터마크 opacity:0.15. 작품명 Pretendard 14px/600 --charcoal ls:-0.01em mb:2px. 메타 12px --text-muted mb:2px (작가명 · 작품 타입, 미드도트 구분). 상태 13px/600 --red-brand #961E23 mb:4px. 금액 13px/600 --charcoal ls:-0.01em
5빈 상태flex center, padding:120px 24px"마켓 구매 내역이 없습니다" Pretendard 14px --text-muted ls:-0.01em text-align:center
6구매 요청 버튼position:absolute bottom:50px right:24pxheight:40px bg:--cta-gradient padding:0 20px. "구매 요청" Pretendard 13px/600 #fff ls:-0.01em 직각(R=0)

3. 핵심 인터랙션

  • 탭 전환: 마켓↔프라이빗 세일 탭 클릭 시 해당 카테고리 내역으로 교체 (MYP-003↔MYP-004)
  • 카드 탭: 해당 구매 거래 상세 화면으로 push navigation
  • 구매 요청 버튼 탭: 구매 요청 플로우 진입
  • 스크롤: 무한 스크롤 또는 페이지네이션으로 추가 목록 로드
  • 뒤로가기: MYP-001로 pop

4. 상태 변화

  • 로딩 중: 스켈레톤 UI 표시 (썸네일+텍스트 플레이스홀더)
  • 데이터 있음: 거래 카드 목록 표시. 상태 텍스트 색상: 진행 중="문의 중/거래 진행 중/배송 중" --red-brand #961E23
  • 데이터 없음: 빈 상태 뷰 "마켓 구매 내역이 없습니다"
  • 탭 전환: 활성 탭 underline 이동, 해당 탭 데이터 lazy loading

5. 네비게이션 플로우

  • 진입: MYP-001 "구매 내역" 아이콘 탭 → push
  • 프라이빗 세일 탭 → MYP-004 (탭 전환, push 아님)
  • 카드 탭 → 구매 거래 상세 화면 (push)
  • 뒤로가기 → MYP-001 (pop)

6. 에러/예외 처리

  • API 오류: 토스트 "데이터를 불러올 수 없습니다." + 재시도 버튼
  • 네트워크 오류: 토스트 "네트워크 상태를 확인해주세요."
  • 비로그인: MYP-001에서 이미 로그인 확인 완료 (이 화면 직접 진입 불가)

7. 모션 스펙

  • 화면 진입: translateX(100%→0), 350ms, --ease-ios-spring
  • 탭 전환 underline: translateX 이동, 250ms, ease-out
  • 리스트 아이템 로딩: opacity 0→1, stagger 50ms per item, 200ms ease-out
  • 카드 pressed: bg:rgba(26,26,26,0.04), 즉시 적용, 해제 시 150ms fade-out

8. 여백 · 간격 요약

항목 값
좌우 콘텐츠 패딩24px
탭 내부 padding12px 0
카드 항목 padding16px 24px
썸네일-텍스트 gap14px
텍스트 행간 margin-bottom2px (작품명→메타), 2px (메타→상태), 4px (상태→금액)
구매 요청 버튼 위치absolute bottom:50px right:24px

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 헤더: --sans Pretendard 17px/700, --charcoal #1A1A1A, 뒤로가기 stroke round/round
  • 탭 활성: --charcoal #1A1A1A 700 weight, border-bottom 2px solid --charcoal. 비활성: --text-muted
  • 작품 썸네일: 60px 직각(R=0), bg --paper #F0EDE6 + linen 텍스처 + CHRT 워터마크
  • 작품명: --sans Pretendard 14px/600, --charcoal #1A1A1A
  • 메타 정보: --sans Pretendard 12px, --text-muted, 작가명 + 작품 타입 미드도트 구분
  • 상태 뱃지: --red-brand #961E23, 13px/600 (문의 중, 거래 진행 중, 배송 중)
  • 금액: --sans Pretendard 13px/600, --charcoal #1A1A1A
  • 구매 요청 버튼: bg --cta-gradient, color #fff, height 44px, 직각(R=0), 플로팅
  • Empty state: --text-muted, 14px, 중앙 정렬
  • 좌우 패딩: 24px 전체 콘텐츠 마진
← 이전 화면: MYP-002 다음 화면: MYP-004 →