사용자 화면 · 마이페이지

구매 내역 — 프라이빗 세일

MYP-004 · 2026. 03. 04

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

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

화면 ID MYP-004

작성일 2026. 03. 04

9:41

구매 내역

마켓

프라이빗 세일

작품명

작가명

작품 타입

거래 완료

12,345,678 원

작품명

작가명

작품 타입

거래 완료

12,345,678 원

작품명

작가명

작품 타입

거래 취소

12,345,678 원

구매 요청

9:41

구매 내역

마켓

프라이빗 세일

프라이빗 세일 구매 내역이 없습니다

구매 요청

Description

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

← 이전 화면: MYP-003 다음 화면: MYP-005 →