사용자 화면 · 마이페이지

구매 내역 — 프라이빗 세일

MYP-004 · 2026. 03. 17

화면 이름 구매 내역 - 프라이빗 세일 탭

화면 위치 마이페이지 > 구매 내역

화면 ID MYP-004

작성일 2026. 03. 17

Description

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

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-003과 동일 구조이나 PS 탭이 활성이고, 탭 underline 색상이 --red-brand #961E23. 거래 완료/취소 상태는 --text-muted로 비강조 처리. 리스트 + 빈 상태 2가지 뷰. 컨테이너 393x852px, 배경 --bg #FAFAF8.

2. 레이어 구조 + 치수

#	영역	높이/위치	세부 스펙
1	상태 표시줄	47px	iOS system status bar
2	헤더	height:48px	MYP-003과 동일. "구매 내역" Pretendard 17px/700 `--charcoal` ls:-0.02em
3	탭 네비게이션	flex row	비활성(마켓): 14px `--text-muted`. 활성(프라이빗 세일): 14px/700 `--charcoal`, border-bottom:2px solid `--red-brand` #961E23 (MYP-003의 --charcoal과 다름)
4	거래 카드 리스트	flex:1, 스크롤	MYP-003과 동일 구조. 썸네일 60x60 `--paper`. 상태 텍스트: 거래 완료/취소 → `--text-muted` #888 (비강조), 진행 중 → `--red-brand` #961E23
5	빈 상태	flex center, padding:120px 24px	"프라이빗 세일 구매 내역이 없습니다" 14px `--text-muted`
6	구매 요청 버튼	position:absolute bottom:50px right:24px	height:40px bg:`--cta-gradient` 13px/600 #fff 직각(R=0)

3. 핵심 인터랙션

탭 전환: 프라이빗 세일↔마켓 탭 전환 (MYP-004↔MYP-003)
카드 탭: 해당 거래 상세 화면으로 push navigation
구매 요청 버튼 탭: 구매 요청 플로우 진입
뒤로가기: MYP-001로 pop

4. 상태 변화

MYP-003과의 차이점: PS 탭 활성, underline 색상 --red-brand #961E23 (마켓 탭은 --charcoal)
상태 텍스트 컬러: "거래 완료"/"거래 취소" → --text-muted (비강조). 진행 중 상태만 --red-brand
로딩/빈 상태: MYP-003과 동일 패턴

5. 네비게이션 플로우

진입: MYP-003 탭 전환 또는 MYP-001에서 직접 진입
마켓 탭 → MYP-003 (탭 전환)
카드 탭 → 거래 상세 (push)
뒤로가기 → MYP-001 (pop)

6. 에러/예외 처리

API 오류: 토스트 "데이터를 불러올 수 없습니다." + 재시도
네트워크 오류: 토스트 "네트워크 상태를 확인해주세요."
데이터 없음: 빈 상태 뷰 전환

7. 모션 스펙

탭 전환 underline: translateX, 250ms, ease-out
리스트 아이템: opacity 0→1, stagger 50ms, 200ms ease-out
카드 pressed: bg rgba(26,26,26,0.04), 즉시→150ms fade-out

8. 여백 · 간격 요약

항목	값
MYP-003과 동일	좌우 24px, 카드 16px 24px, 썸네일-텍스트 gap 14px
구매 요청 버튼	absolute bottom:50px right:24px, padding:0 20px

9. 적용 디자인 토큰

전체 배경: --bg → #FAFAF8
헤더: --sans Pretendard 17px/700, --charcoal #1A1A1A, 뒤로가기 stroke round/round
탭 활성 (PS): --charcoal #1A1A1A 700 weight, border-bottom 2px solid --red-brand #961E23 (PS 탭 강조)
탭 비활성: --text-muted, 400 weight, border 없음
작품 썸네일: 60px 직각(R=0), bg --paper #F0EDE6 + linen 텍스처 + CHRT 워터마크
작품명: --sans Pretendard 14px/600, --charcoal #1A1A1A
완료 상태 뱃지: --text-muted, 13px/600 (거래 완료/취소 비강조)
진행 상태 뱃지: --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-003 다음 화면: MYP-005 →