사용자 화면 · 마이페이지

구매 내역 — 마켓 탭

MYP-003 · 2026. 03. 04

화면 이름 구매 내역 - 마켓 탭
화면 위치 마이페이지 > 구매 내역
화면 ID MYP-003
작성일 2026. 03. 04
9:41
구매 내역
마켓
프라이빗 세일

작품명

작가명

작품 타입

문의 중

12,345,678 원

작품명

작가명

작품 타입

거래 진행 중

12,345,678 원

작품명

작가명

작품 타입

배송 중 (감수 중)

12,345,678 원

구매 요청
1
2
3
4
9:41
구매 내역
마켓
프라이빗 세일

마켓 구매 내역이 없습니다

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

Design Output

UI 디자인 산출물

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

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

작품명

작가명 · 작품 타입

문의 중

12,345,678 원

작품명

작가명 · 작품 타입

거래 진행 중

12,345,678 원

작품명

작가명 · 작품 타입

배송 중 (감수 중)

12,345,678 원

구매 요청
9:41
구매 내역
마켓
프라이빗 세일

마켓 구매 내역이 없습니다

구매 요청
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 --sans · 17px · 700 Pretendard, --charcoal, square/miter 뒤로가기
탭 활성 --charcoal · 700 weight 2px bottom border, 비활성: --text-muted
작품 썸네일 --paper + linen 60px, Paper-Catalog 메타포, CHRT 워터마크
작품명 --sans · 14px · 600 Pretendard, --charcoal
메타 정보 --sans · 12px · --text-muted 작가명 · 작품 타입 (미드도트 구분)
상태 뱃지 --red-brand · 13px · 600 문의 중, 거래 진행 중, 배송 중 등
금액 --sans · 13px · 600 --charcoal
구매 요청 버튼 --charcoal bg · #fff 40px 높이, 직각 (R=0), 플로팅
Empty state --text-muted · 14px 중앙 정렬, 최소한의 안내 문구
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 구매 내역은 로그인 사용자만 접근 가능
  • 비로그인 상태에서
    • 마이페이지 > 구매 내역 진입 시 로그인 안내 모달(LOG-009) 노출
    • 로그인 완료 후 구매 내역 화면으로 이동
1 헤더 영역
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 구매 내역
  • 동작
    • 뒤로가기 버튼 클릭 시 마이페이지(메인)(MYP-001)으로 이동
2 탭 영역
  • 구성
    • 탭 2종: 마켓 / 프라이빗 세일
  • 기본 상태
    • 최초 진입 시 '마켓' 탭 기본 선택
  • 동작
    • 탭 선택 시 선택 탭별 기준으로 구매 내역 리스트 갱신
3 구매 내역 리스트
  • 노출 조건
    • 선택 탭에 구매 내역 데이터가 존재하는 경우
  • 리스트 구성
    • 각 항목별: 이미지 / 작품명 / 작가명 / 작품 타입 / 가격 상태 뱃지 / 구매 금액
  • 거래 상태 노출 규칙
    • 거래 스테이지 내의 상태값 기준으로 노출
    • 문의 중
    • 거래 진행 중
    • 배송 중
      • 신규 상태 노출: 배송 중(입력), 감수 중, 픽업 대기, 정산 완료
    • 거래 완료
    • 거래 취소 완료의 경우 완매 비활성화
  • 거래 뱃지
    • 하나의 정렬별로 하나의 상태만 노출
    • 상위 스테이스는 사용자가 수정할 수 없음
  • 리스트 아이템 동작
    • 리스트 아이템 전체 터치 영역 클릭 시 작품 상세 페이지로 이동 (MKT-013)
4 구매 요청
  • 구성
    • 버튼: 구매 요청
  • 노출 조건
    • 로그인 상태에서 항상 노출
    • 데이터 유무와 관계없이 유지
    • 플로팅 형태로 하단에 유지
  • 동작
    • 버튼 클릭 시 구매 요청 플로우로 이동 (화면 ID 추후 정의)
5 구매 내역 없음 화면
  • 노출 조건
    • 선택 탭(마켓)에 구매 내역 데이터가 없는 경우
  • 노출 문구
    • "마켓 구매 내역이 없습니다"
  • Empty 상위 동작 규칙
    • Empty 상태에서도 탭 전환 기능 유지
    • 구매 요청 버튼 유지
7 토스트 메시지 정의
  • 구매 내역 로딩 실패 시
    • "구매 내역을 불러오지 못했어요. 잠시 후 다시 시도해주세요."
  • 네트워크 오류 발생 시
    • "네트워크 오류" 잠시 후 다시 시도해주세요."
8 공통 규칙
  • 구매 내역의 조회 전용 화면
    • 직접적인 거래를 통해 불가
  • 비로그인 접근 시
    • 로그인 안내 이후 동 로그인 위치
  • 데이터가 없는 상태는 오류가 아닌 정상 상태
  • 추가 행동 권장 없음
  • 본 화면은 마이페이지 공통 규칙(MYP-001)을 따른다
← 이전 화면: MYP-002 다음 화면: MYP-004 →