주문/취소/반품/쿠폰/프로필
마이페이지는 고객이 자신의 계정과 주문을 관리하는 허브 화면이다. 재구매율 35% 달성의 핵심 접점으로, 주문 현황 확인, 취소/반품 신청, 쿠폰 관리, 회원 정보 수정 기능을 제공한다.
Desktop (1440×900)
[Header - 64px]
├─ 로고 | 검색 | 장바구니 | 마이페이지(활성)
[Main Content - min-height: 800px]
├─ Left Navigation - 240px (고정)
│ ├─ 프로필 요약 카드
│ ├─ 메뉴 리스트
│ └─ 로그아웃
├─ Content Area - 960px
│ ├─ 페이지 제목 + 브레드크럼
│ └─ 콘텐츠 영역
Mobile (390×844)
[Header - 56px]
├─ 뒤로가기 | 마이페이지 | 설정
[Profile Summary - 120px]
├─ 프로필 이미지 + 이름 + 등급
[Quick Menu - 80px]
├─ 주문내역 | 쿠폰 | 적립금 | 찜
[Tab Navigation - 48px]
├─ 주문/배송 | 취소/반품 | 리뷰 | 문의
[Content Area - 가변]
├─ 탭별 콘텐츠
[Bottom Navigation - 56px]
├─ 홈 | 카테고리 | 검색 | 마이페이지(활성)
Desktop 레이아웃
마이페이지 전체 레이아웃
마이페이지 메인 화면 만들어주고, 헤더 상단 프로필 팝업의 마이페이지 클릭 시 링크 걸어줘.
상단 헤더 64px:
- 좌측 로고
- 중앙 검색바 400px
- 우측 장바구니 아이콘, 마이페이지 텍스트(파란색 활성 상태)
헤더 아래 본문 영역:
- 좌측 네비게이션 240px 고정
- 우측 콘텐츠 영역
좌측 네비게이션:
- 상단 프로필 카드 (프로필 이미지 64px 원형, 이름 16px Bold, 등급 배지, 적립금 표시)
- 구분선
- 메뉴 리스트 (주문/배송 조회, 취소/반품/교환, 쿠폰함, 적립금, 찜한 상품, 최근 본 상품, 상품 리뷰, 1:1 문의, 배송지 관리, 회원정보 수정)
- 각 메뉴 높이 48px, 좌측 아이콘 20px, 텍스트 14px
- 활성 메뉴는 배경색 #F5F5F5, 좌측 파란색 바 3px
- 하단 로그아웃 버튼
콘텐츠 영역:
- 상단 브레드크럼 (홈 > 마이페이지 > 주문/배송 조회)
- 페이지 제목 24px Bold
- 콘텐츠 카드 배경 흰색, 모서리 8px, 그림자
전체 배경색 #F9FAFB
주문/배송 조회 화면
마이페이지 주문/배송 조회 콘텐츠 만들어줘.
상단 필터 영역:
- 기간 필터 (최근 1개월, 3개월, 6개월, 1년, 직접입력) 탭 형태
- 활성 탭 배경 #000, 텍스트 흰색
- 비활성 탭 배경 흰색, 테두리 #E5E5E5
주문 리스트:
- 각 주문 카드 흰색 배경, 패딩 24px, 모서리 8px
- 카드 상단: 주문일자 14px Gray, 주문번호 14px, 주문 상세 보기 링크
- 구분선
- 상품 정보 영역:
- 상품 이미지 80x80px 모서리 4px
- 상품명 16px (2줄 말줄임)
- 옵션 14px Gray
- 가격 16px Bold, 수량
- 우측: 배송 상태 배지 + 배송조회 버튼
- 배송 상태 배지 색상:
- 결제완료: 배경 #E3F2FD 텍스트 #1976D2
- 배송준비중: 배경 #FFF3E0 텍스트 #F57C00
- 배송중: 배경 #E8F5E9 텍스트 #388E3C
- 배송완료: 배경 #F5F5F5 텍스트 #666
- 카드 하단: 버튼 영역 (교환/반품 신청, 리뷰 작성) 우측 정렬
- 버튼 높이 36px, 테두리 스타일
주문 카드 간 간격 16px
주문 상세 화면
마이페이지 주문 상세 화면 만들어줘.
상단 영역:
- 뒤로 가기 + 주문 상세
- 주문번호: ORD-20250120-001
- 주문일시: 2025.01.20 14:32
주문 상태 타임라인:
- 가로 스텝 인디케이터
- 단계: 결제완료 → 상품준비 중 → 배송 중 → 배송완료
- 완료된 단계 파란색 원 + 체크 아이콘
- 현재 단계 파란색 원 + 펄스 효과
- 미완료 단계 회색 원
- 각 단계 아래 날짜/시간 표시
- 단계 간 연결선 (완료: 파란색, 미완료: 회색)
주문 상품 섹션:
- 섹션 제목 "주문 상품" 18px Bold
- 상품 카드 (이미지 100x100, 상품명, 옵션, 가격, 수량)
- 여러 상품인 경우 리스트로 표시
배송 정보 섹션:
- 섹션 제목 "배송 정보" 18px Bold
- 2 칼럼 그리드: 라벨 | 값
- 수령인, 연락처, 배송지, 배송메모
- 운송장번호 (복사 버튼 포함), 배송조회 링크
결제 정보 섹션:
- 섹션 제목 "결제 정보" 18px Bold
- 상품금액, 배송비, 쿠폰할인, 적립금 사용
- 구분선
- 총 결제금액 굵게 표시
- 결제수단, 적립 예정 포인트
하단 버튼 영역:
- 취소/반품 신청 버튼 (배송완료 전: 주문취소, 배송완료 후: 반품신청)
- 1:1 문의 버튼
주문 취소 신청 모달
마이페이지 주문 취소 신청 모달 만들어줘.
모달 헤더:
- 제목 "주문 취소 신청" 18px Bold
- 우측 닫기(X) 버튼
취소 상품 정보:
- 상품 이미지 60x60px
- 상품명 14px
- 옵션, 가격, 수량
- 배경색 #F9FAFB 패딩 16px 모서리 8px
취소 사유 선택:
- 라벨 "취소 사유 선택" 14px Bold 필수 표시(*)
- 라디오 버튼 리스트:
- 단순 변심
- 다른 상품 주문 예정
- 배송 지연
- 상품 정보와 다름
- 기타
- 각 옵션 높이 44px
기타 선택 시 텍스트 입력:
- textarea 높이 80px
- placeholder "취소 사유를 입력해 주세요"
- 글자수 카운터 "0/200"
환불 예정 정보:
- 배경색 #FFF8E1 패딩 16px 모서리 8px
- 환불 예정 금액: 35,000원
- 환불 수단: 신용카드 (원결제수단)
- 예상 환불 소요: 3~5 영업일
모달 푸터:
- 취소 버튼 (테두리 스타일)
- 취소 신청 버튼 (검정 배경)
- 버튼 높이 48px
반품 신청 화면
마이페이지 반품 신청 화면 만들어줘.
상단:
- 뒤로 가기 + 반품 신청
단계 인디케이터:
- 1. 반품 상품 선택 → 2. 반품 사유 입력 → 3. 수거 정보 → 4. 신청 완료
- 현재 단계 표시
반품 상품 선택 섹션:
- 주문번호, 주문일자 표시
- 체크박스로 반품할 상품 선택
- 상품 카드 (이미지, 상품명, 옵션, 가격, 수량)
- 선택된 상품 테두리 파란색
반품 사유 섹션:
- 라벨 "반품 사유" 필수(*)
- 드롭다운 선택:
- 단순 변심 (고객 귀책)
- 상품 불량/파손
- 상품 정보와 다름
- 배송 중 파손
- 오배송
- 상세 사유 입력 textarea
사진 첨부 (상품 불량 시):
- "사진 첨부" 라벨 + "(상품 불량/파손 시 필수)"
- 이미지 업로드 영역 점선 테두리
- + 아이콘, "사진 추가" 텍스트
- 최대 5장, 각 10MB 이하 안내
수거 방법 선택:
- 라디오 버튼:
- 택배 수거 요청 (자동 접수)
- 직접 발송 (반품 주소 표시)
반품 배송비 안내:
- 배경색 #F5F5F5
- 단순 변심: 왕복 6,000원 (고객 부담)
- 상품 불량: 무료 (판매자 부담)
환불 예정 정보:
- 상품 금액, 반품 배송비, 환불 예정 금액
하단 버튼:
- 이전 단계 (테두리)
- 다음 단계 (검정 배경)
쿠폰함 화면
마이페이지 쿠폰함 화면 만들어줘.
상단 탭:
- 사용 가능 (12) | 사용 완료 | 기간 만료
- 활성 탭 하단 파란색 바 2px
- 괄호 안 숫자는 쿠폰 수량
쿠폰 등록 영역:
- 입력 필드 + 등록 버튼 가로 배치
- placeholder "쿠폰 코드를 입력하세요"
- 등록 버튼 80px
쿠폰 리스트:
- 쿠폰 카드 디자인:
- 좌측 할인 금액/비율 영역 (배경색, 세로 점선 구분)
- 5,000원 할인 또는 10% 할인
- 굵은 숫자 24px
- 우측 쿠폰 정보 영역
- 쿠폰명 16px Bold
- 적용 조건 14px Gray (3만 원 이상 구매 시)
- 유효기간 14px (~ 2025.02.28까지)
- 적용 가능 카테고리 태그
- 우측 끝 다운로드/적용 버튼
- 카드 높이 120px, 모서리 8px
- 사용 가능: 테두리 #E5E5E5
- 사용 완료/만료: 배경 #F5F5F5, 텍스트 Gray, "사용완료"/"만료" 오버레이
카드 간 간격 12px
빈 상태 (쿠폰 없음):
- 쿠폰 아이콘 64px Gray
- "보유한 쿠폰이 없습니다" 16px
- "쇼핑하러 가기" 버튼
적립금 화면
마이페이지 적립금 화면 만들어줘.
상단 적립금 요약 카드:
- 배경 그라데이션 (#1A1A1A → #333)
- 흰색 텍스트
- "사용 가능 적립금" 라벨
- 금액 "12,500원" 32px Bold
- 소멸 예정 안내 (30일 이내 소멸 예정: 2,000원) 노란색 텍스트
적립금 안내:
- 적립금 사용 조건 (최소 1,000원 이상 보유 시 사용 가능)
- 적립금 유효기간 (적립일로부터 1년)
- 배경색 #F5F5F5 패딩 16px
탭 영역:
- 전체 | 적립 | 사용 | 소멸
- 활성 탭 하단 파란색 바
적립금 내역 리스트:
- 각 항목:
- 좌측: 날짜 14px Gray, 내역 설명 16px
- 우측: 금액 (+3,500원 파란색 / -2,000원 빨간색 / 소멸 회색)
- 항목 높이 64px
- 구분선
페이지네이션:
- 숫자 페이지네이션 하단 중앙
회원정보 수정 화면
마이페이지 중앙 정렬 회원정보 수정 화면 만들어줘.
프로필 이미지 영역:
- 원형 프로필 이미지 100px 중앙
- 이미지 우측 하단 카메라 아이콘 버튼 (이미지 변경)
- 기본 이미지 또는 업로드 이미지
기본 정보 섹션:
- 섹션 제목 "기본 정보" 18px Bold
- 이메일 (수정 불가, 회색 배경)
- 이름 입력 필드
- 휴대폰 번호 입력 필드 + 인증 버튼
- 인증 완료 시 체크 아이콘 표시
- 생년월일 (선택)
- 성별 라디오 버튼 (선택)
비밀번호 변경 섹션:
- 섹션 제목 "비밀번호 변경" 18px Bold
- 현재 비밀번호 입력
- 새 비밀번호 입력 + 강도 표시 바
- 새 비밀번호 확인
- 비밀번호 조건 안내 (8자 이상, 영문/숫자/특수문자)
마케팅 수신 동의:
- 섹션 제목 "마케팅 정보 수신" 18px Bold
- 이메일 수신 동의 토글
- SMS 수신 동의 토글
- 푸시 알림 동의 토글
하단 버튼:
- 회원 탈퇴 (텍스트 링크, 빨간색)
- 저장하기 버튼 (검정 배경, 전체 너비)
필드 높이 48px, 필드 간 간격 16px
배송지 관리 화면
마이페이지 배송지 관리 화면 만들어줘.
상단:
- 페이지 제목 "배송지 관리"
- 우측 "새 배송지 추가" 버튼
배송지 리스트:
- 배송지 카드:
- 기본 배송지 배지 (파란색 배경)
- 배송지명 16px Bold (예: 집, 회사)
- 수령인 이름
- 연락처
- 주소 (우편번호 포함)
- 우측: 수정 | 삭제 텍스트 버튼
- 기본 배송지 아닌 경우: "기본 배송지로 설정" 링크
- 카드 패딩 20px, 모서리 8px, 테두리 #E5E5E5
- 기본 배송지 카드 테두리 파란색
카드 간 간격 12px
배송지 추가/수정 모달 (480x520px):
- 제목: 새 배송지 추가 / 배송지 수정
- 배송지명 입력 (예: 집, 회사)
- 수령인 입력
- 연락처 입력
- 우편번호 + 주소 검색 버튼
- 기본 주소 (읽기 전용)
- 상세 주소 입력
- 기본 배송지로 설정 체크박스
- 취소 / 저장 버튼
Mobile 레이아웃
마이페이지 메인 화면
모바일 마이페이지 메인 화면 만들어주고, 왼쪽 사이드 메뉴의 마이페이지 클릭 시 링크 걸어줘.
상단 헤더 56px:
- 중앙 "마이페이지" 텍스트
- 우측 설정(톱니바퀴) 아이콘
프로필 영역 120px:
- 배경 그라데이션 (#1A1A1A → #333)
- 프로필 이미지 56px 원형
- 이름 18px Bold 흰색
- 등급 배지 (예: Gold Member)
- 우측 화살표 (프로필 상세로 이동)
퀵 메뉴 80px:
- 4등분 그리드
- 각 항목: 아이콘 24px + 라벨 12px + 숫자(있을 경우)
- 주문내역 (3) | 쿠폰 (12) | 적립금 | 찜 (8)
- 배경 흰색, 상단 라운드 16px (프로필 영역과 겹침)
메뉴 리스트:
- 섹션별 그룹핑
- 쇼핑 정보: 주문/배송 조회, 취소/반품/교환, 찜한 상품
- 혜택: 쿠폰함, 적립금
- 활동: 상품 리뷰, 1:1 문의
- 설정: 배송지 관리, 회원정보 수정, 알림 설정
- 각 메뉴 항목 높이 52px
- 좌측 아이콘, 텍스트, 우측 화살표
- 섹션 간 구분 배경색 #F5F5F5 8px
하단 로그아웃 버튼:
- 텍스트 링크 스타일, 중앙 정렬
하단 네비게이션 56px:
- 홈 | 카테고리 | 검색 | 마이페이지(활성)
주문/배송 조회 모바일
모바일 마이페이지 주문/배송 조회 화면 만들어줘.
헤더 56px:
- 좌측 뒤로 가기 화살표
- 중앙 "주문/배송 조회"
기간 필터:
- 가로 스크롤 칩
- 최근 1개월 | 3개월 | 6개월 | 1년
- 활성 칩 검정 배경 흰색 텍스트
- 좌우 여백 16px, 칩 간 간격 8px
주문 리스트:
- 주문 카드:
- 상단: 주문일자, 주문번호, 상세보기(>) 링크
- 구분선
- 상품 영역:
- 이미지 72px, 상품명, 옵션, 가격
- 배송 상태 배지
- 하단: 버튼 영역 (배송조회, 교환/반품)
- 버튼 높이 36px, 전체 너비 반반
- 카드 패딩 16px, 모서리 8px
빈 주문 내역:
- 박스 아이콘 48px
- "주문 내역이 없습니다"
- "쇼핑하러 가기" 버튼
주문 상세 모바일
모바일 마이페이지 주문 상세 화면 만들어줘.
헤더 56px:
- 뒤로 가기 + "주문 상세"
주문 정보 요약:
- 주문번호, 주문일시
- 배경색 #F9FAFB 패딩 16px
배송 상태 타임라인:
- 세로 스텝 인디케이터 (모바일은 세로)
- 좌측 원형 아이콘 + 연결선
- 우측 단계명 + 날짜/시간
- 완료 단계 파란색, 미완료 회색
- 현재 단계 강조
주문 상품 섹션:
- 섹션 제목 + 접기/펼치기
- 상품 카드 리스트
배송 정보 섹션 (접을 수 있음):
- 수령인, 연락처, 배송지, 배송메모
- 운송장번호 (복사 버튼)
결제 정보 섹션 (접을 수 있음):
- 상품금액, 배송비, 할인, 총 결제금액
- 결제수단
하단 고정 버튼 영역 56px:
- 취소/반품 신청 버튼 (전체 너비)
주문 취소 바텀시트
모바일 마이페이지에서 높이 480px 주문 취소 바텀시트 만들어줘.
상단 핸들 바 40px 중앙
헤더:
- "주문 취소 신청" 18px Bold
- 우측 닫기(X)
스크롤 영역:
- 취소 상품 정보 (이미지, 상품명, 옵션, 가격)
- 취소 사유 선택 라디오 리스트
- 기타 선택 시 텍스트 입력
환불 정보:
- 배경색 #FFF8E1 모서리 8px
- 환불 예정 금액, 환불 수단
하단 고정 버튼:
- 취소 신청 버튼 전체 너비 48px
- Safe area 하단 여백
반품 신청 모바일
모바일 마이페이지 반품 신청 화면 만들어줘.
헤더 56px:
- 뒤로 가기 + "반품 신청"
단계 표시:
- 상단 스텝 인디케이터 (1/4)
- 현재 단계명 표시
콘텐츠 영역 (단계별):
1단계 - 상품 선택:
- 체크박스로 반품 상품 선택
- 상품 카드 리스트
2단계 - 사유 입력:
- 반품 사유 드롭다운
- 상세 내용 textarea
- 사진 첨부 (그리드 형태)
3단계 - 수거 정보:
- 수거 방법 선택
- 수거지 주소 (기본 배송지)
- 수거 희망일 선택
4단계 - 신청 완료:
- 완료 아이콘
- "반품 신청이 완료되었습니다"
- 반품 진행 상태 안내
하단 고정 버튼:
- 이전 | 다음 버튼
- 마지막 단계: 신청 완료 버튼
쿠폰함 모바일
모바일 마이페이지 쿠폰함 화면 만들어줘.
헤더 56px:
- 뒤로 가기 + "쿠폰함"
쿠폰 등록:
- 입력 필드 + 등록 버튼 한 줄
- 여백 16px
탭:
- 사용 가능 (12) | 사용 완료 | 만료
- 전체 너비 3등분
- 활성 탭 하단 파란색 바
쿠폰 리스트:
- 쿠폰 카드:
- 상단 컬러 영역 (할인 금액/비율 강조)
- 배경색 쿠폰 타입별 다름 (금액: 파란색, 비율: 주황색)
- "5,000원" 또는 "10%" 24px Bold 흰색
- 하단 정보 영역 흰색
- 쿠폰명 16px Bold
- 조건 14px Gray
- 유효기간 14px
- 다운로드/적용 버튼
- 카드 높이 140px 모서리 12px 그림자
쿠폰 없을 때:
- 쿠폰 아이콘 + 안내 메시지
회원정보 수정 모바일
모바일 마이페이지 회원정보 수정 화면 만들어줘.
헤더 56px:
- 뒤로 가기 + "회원정보 수정"
- 우측 "저장" 텍스트 버튼 (파란색)
프로필 이미지:
- 중앙 정렬 80px 원형
- 하단 "사진 변경" 텍스트 버튼
폼 영역:
- 이메일 (읽기 전용)
- 이름 입력
- 휴대폰 번호 + 인증 버튼
- 생년월일 (선택)
비밀번호 변경 섹션:
- 아코디언 형태 (펼치기/접기)
- 현재 비밀번호
- 새 비밀번호
- 비밀번호 확인
마케팅 수신:
- 토글 리스트
- 이메일, SMS, 푸시
하단:
- 회원 탈퇴 링크 (빨간색)
필드 높이 48px
좌우 여백 16px
로딩 상태 (Desktop)
마이페이지 주문 리스트 로딩 스켈레톤 만들어줘.
주문 카드 스켈레톤:
- 상단: 날짜 영역 회색 박스 100x16px
- 주문번호 영역 회색 박스 150x16px
- 구분선
- 이미지 영역 80x80px 회색 박스
- 텍스트 영역:
- 상품명 200x16px
- 옵션 120x14px
- 가격 80x16px
- 상태 배지 영역 60x24px
- 버튼 영역 2개 100x36px
3개 카드 반복
shimmer 애니메이션 (좌→우 그라데이션 이동)
배경색 #E5E5E5, 하이라이트 #F5F5F5
로딩 상태 (Mobile)
모바일 마이페이지 주문 리스트 로딩 스켈레톤 만들어줘.
주문 카드 스켈레톤:
- 상단 날짜/주문번호 회색 박스
- 이미지 72x72px 회색 박스
- 텍스트 영역 회색 박스
- 상태 배지 영역
- 버튼 영역
3개 카드 반복
shimmer 애니메이션
빈 상태 - 주문 내역 없음
주문 내역 없음 빈 상태 화면 만들어줘.
중앙 정렬:
- 박스/패키지 아이콘 64px 회색(#CCC)
- "주문 내역이 없습니다" 16px #666
- "첫 주문의 주인공이 되어보세요" 14px #999
- 28px 여백
- "쇼핑하러 가기" 버튼
- 검정 배경, 흰색 텍스트
- 높이 48px, 너비 160px
- 모서리 8px
빈 상태 - 쿠폰 없음
쿠폰 없음 빈 상태 화면 만들어줘.
중앙 정렬:
- 쿠폰/티켓 아이콘 64px 회색
- "보유한 쿠폰이 없습니다" 16px
- "이벤트 페이지에서 쿠폰을 받아보세요" 14px Gray
- 28px 여백
- "이벤트 보러 가기" 버튼
에러 상태 - 데이터 로드 실패
데이터 로드 실패 에러 화면 만들어줘.
중앙 정렬:
- 경고 아이콘 64px 회색
- "일시적인 오류가 발생했습니다" 16px
- "잠시 후 다시 시도해주세요" 14px Gray
- 28px 여백
- "다시 시도" 버튼 (테두리 스타일)
삭제 확인 모달
400x200px 삭제 확인 모달 만들어줘.
중앙 정렬:
- "배송지를 삭제하시겠습니까?" 16px Bold
- "삭제된 배송지는 복구할 수 없습니다" 14px Gray
- 24px 여백
- 버튼 영역 가로 배치:
- 취소 버튼 (테두리) 120px
- 삭제 버튼 (빨간 배경) 120px
- 버튼 간 간격 12px
- 높이 44px
반품 신청 완료
반품 신청 완료 화면 만들어줘.
중앙 정렬:
- 체크 원형 아이콘 80px (파란 배경, 흰색 체크)
- "반품 신청이 완료되었습니다" 20px Bold
- 24px 여백
- 정보 카드 (배경 #F9FAFB 패딩 20px):
- 반품 접수번호: RET-20250120-001
- 반품 상품: 상품명 외 1건
- 수거 예정일: 2025.01.22 (화)
- 환불 예정 금액: 35,000원
- 24px 여백
- 안내 문구:
- "상품 수거 후 검수가 완료되면 환불이 진행됩니다"
- "처리 현황은 마이페이지에서 확인 가능합니다"
- 32px 여백
- 버튼:
- "반품 현황 보기" (검정 배경)
- "쇼핑 계속하기" (테두리)
Idle (정상)
마이페이지 메인:
- 프로필 로드 완료: 이미지 + 이름 + 등급 배지 + 적립금 표시
- 퀵메뉴 숫자 표시: 진행중 주문, 쿠폰, 적립금, 찜 카운트
- 메뉴 활성화: 모든 메뉴 접근 가능, 현재 위치 강조
주문 리스트:
- 주문 내역 존재: 카드 리스트 표시
- 필터 적용됨: 선택된 기간 탭 활성화
- 정렬 완료: 최신순 정렬
쿠폰함:
- 탭 선택됨: 사용가능/사용완료/만료 중 활성 탭
- 쿠폰 리스트 표시: 해당 상태 쿠폰 목록
- 입력 필드 대기: 쿠폰 코드 입력 가능
적립금:
- 요약 표시: 사용 가능 적립금 + 소멸 예정
- 내역 로드 완료: 탭 필터별 리스트 표시
- 페이지네이션 활성화: 더보기/페이지 번호 클릭 가능
회원정보:
- 정보 로드 완료: 모든 필드에 기존 값 표시
- 수정 가능 상태: 입력 필드 활성화
- 저장 버튼 비활성화: 변경사항 없음
배송지:
- 배송지 존재: 카드 리스트 표시
- 기본 배송지 강조: 파란 테두리 + "기본" 배지
- 액션 버튼 활성화: 수정/삭제/기본설정 가능
Loading
마이페이지 메인:
- 프로필 로딩: 원형 스켈레톤 64px + 텍스트 라인 2개
- 퀵메뉴 로딩: 아이콘 유지, 숫자 영역 스켈레톤
- 메뉴 리스트: 즉시 표시 (정적 영역)
주문 리스트:
- 초기 로딩: 주문 카드 스켈레톤 3개
- 필터 변경: 리스트 영역 스켈레톤 교체
- 더보기 로딩: 하단 스피너 또는 카드 스켈레톤 추가
쿠폰함:
- 탭 전환: 쿠폰 카드 스켈레톤 3개
- 쿠폰 등록 중: 등록 버튼 로딩 스피너
- 탭 숫자 로딩: 배지 영역 스켈레톤
적립금:
- 요약 로딩: 요약 카드 전체 스켈레톤
- 내역 로딩: 히스토리 아이템 스켈레톤 5개
- 더보기 로딩: 하단 스피너
회원정보:
- 초기 로딩: 프로필 이미지 + 각 필드 스켈레톤
- 저장 중: 저장 버튼 로딩 스피너 + 입력 비활성화
- 인증번호 발송 중: 인증 버튼 로딩
배송지:
- 리스트 로딩: 배송지 카드 스켈레톤 2개
- 저장 중: 모달/바텀시트 버튼 로딩
- 주소 검색 중: 검색 모달 내 스피너
Empty
주문 리스트:
- 주문 없음: 빈 박스 아이콘 + "주문 내역이 없습니다" + "쇼핑하러 가기" CTA
- 기간 내 없음: "선택한 기간에 주문 내역이 없습니다" + 필터 유지
쿠폰함 (사용 가능 탭):
- 쿠폰 없음: 쿠폰 아이콘 + "보유한 쿠폰이 없습니다" + "이벤트 보러가기" CTA
쿠폰함 (사용완료/만료 탭):
- 내역 없음: 쿠폰 아이콘 (흐릿하게) + "사용 완료된 쿠폰이 없습니다" / "만료된 쿠폰이 없습니다"
적립금:
- 적립금 0원: 요약 카드 "0원" 표시
- 내역 없음: 코인 아이콘 + "적립금 내역이 없습니다" + 적립 방법 안내 링크
배송지:
- 배송지 없음: 위치 핀 아이콘 + "등록된 배송지가 없습니다" + "배송지 추가하기" CTA
찜한 상품:
- 찜 없음: 하트 아이콘 + "찜한 상품이 없습니다" + "상품 보러가기" CTA
Error
공통:
- 데이터 로드 실패: 경고 아이콘 + "일시적인 오류가 발생했습니다" + "다시 시도" 버튼
- 네트워크 오류: 와이파이 끊김 아이콘 + "인터넷 연결을 확인해 주세요" + "다시 시도" 버튼
주문 취소:
- 취소 불가: 빨간 X 아이콘 + "취소할 수 없는 주문입니다" + 사유 설명
- 처리 실패: "취소 처리에 실패했습니다" + "다시 시도" 버튼
반품 신청:
- 신청 실패: 빨간 X 아이콘 + "반품 신청에 실패했습니다" + "다시 시도" / "고객센터 문의"
- 기간 초과: "반품 가능 기간이 지났습니다" (배송완료 후 7일)
쿠폰 등록:
- 유효하지 않음: 필드 빨간 테두리 + "유효하지 않은 쿠폰 코드입니다"
- 이미 등록: "이미 등록된 쿠폰입니다"
- 기한 만료: "사용 기한이 만료된 쿠폰입니다"
- 수량 소진: "발급 수량이 모두 소진되었습니다"
회원정보:
- 비밀번호 불일치: 필드 빨간 테두리 + "현재 비밀번호가 일치하지 않습니다"
- 휴대폰 중복: "이미 사용 중인 휴대폰 번호입니다"
- 인증번호 오류: "인증번호가 올바르지 않습니다"
- 저장 실패: 토스트 "저장에 실패했습니다"
배송지:
- 개수 초과: "배송지는 최대 10개까지 등록할 수 있습니다"
- 주소 오류: "주소 정보를 확인해 주세요"
- 저장 실패: 토스트 "저장에 실패했습니다"
N.기능.마이페이지메인.01
마이페이지 메인 - 고객 계정 관리 허브
역할:
- 주문/배송 현황 빠른 확인
- 쿠폰/적립금 보유 현황 확인
- 각 관리 기능으로 빠른 진입
Desktop:
- 좌측 고정 네비게이션으로 모든 메뉴 상시 접근
- 프로필 요약에서 등급/적립금 즉시 확인
Mobile:
- 퀵메뉴로 자주 사용 기능 1탭 접근
- 메뉴 리스트는 섹션별 그룹핑
진입 경로:
- 헤더 마이페이지 아이콘
- 주문 완료 후 "주문 내역 보기"
- 푸시 알림 (배송완료, 쿠폰 만료 임박)
N.데이터.프로필.02
프로필 데이터 구조
CustomerProfile:
- customer_id: string (고객 ID)
- name: string (이름, 최대 20자)
- email: string (이메일, 로그인 ID)
- phone: string (휴대폰, 010-0000-0000)
- profile_image: string (이미지 URL, null이면 기본 아바타)
- grade: enum (silver|gold|vip)
- grade_name: string (등급명, "실버 회원")
- available_points: number (사용 가능 적립금)
- coupon_count: number (사용 가능 쿠폰 수)
- wishlist_count: number (찜한 상품 수)
- order_count: number (진행 중 주문 수)
등급별 표시:
- Silver: 배경 #E5E5E5, 텍스트 #666
- Gold: 배경 #FFF8E1, 텍스트 #F57C00
- VIP: 배경 #F3E5F5, 텍스트 #7B1FA2
N.이벤트.네비게이션.03
네비게이션 이벤트 흐름
Desktop 좌측 메뉴:
1. 메뉴 항목 클릭
2. 활성 상태 즉시 변경 (좌측 파란 바 + 배경색)
3. 우측 콘텐츠 영역 전환
4. 브레드크럼 업데이트
5. URL 변경 (/mypage/orders, /mypage/coupons 등)
Mobile 퀵메뉴:
1. 퀵메뉴 아이템 탭
2. 해당 상세 화면으로 이동
3. 헤더에 뒤로가기 버튼 표시
Mobile 메뉴 리스트:
1. 메뉴 항목 탭
2. 해당 상세 화면으로 슬라이드 전환
3. 뒤로가기 시 마이페이지 메인으로 복귀
N.기능.주문조회.04
주문/배송 조회
역할:
- 주문 내역 확인 및 상세 조회
- 배송 상태 추적
- 취소/반품/교환 신청 진입점
기간 필터:
- 기본값: 최근 1개월
- 옵션: 1개월, 3개월, 6개월, 1년, 직접입력
- 직접입력 시 날짜 선택 모달
정렬:
- 최신 주문순 (고정, 변경 불가)
페이지네이션:
- Desktop: 숫자 페이지네이션 (10건/페이지)
- Mobile: 무한 스크롤
N.데이터.주문카드.05
주문 카드 데이터 구조
Order:
- order_id: string (주문번호, ORD-YYYYMMDD-XXX)
- order_date: datetime (주문일시)
- order_status: enum (결제대기|결제완료|배송준비중|배송중|배송완료|취소|환불)
- total_amount: number (총 결제금액)
- items: OrderItem[] (주문 상품 목록)
- shipping: ShippingInfo (배송 정보)
- can_cancel: boolean (취소 가능 여부)
- can_return: boolean (반품 가능 여부)
- can_review: boolean (리뷰 작성 가능 여부)
OrderItem:
- product_id: string
- product_name: string (최대 50자, 2줄 말줄임)
- option: string (옵션 정보)
- price: number
- quantity: number
- thumbnail: string (이미지 URL)
- item_status: enum (개별 상품 상태)
배송 상태 배지:
- payment_pending: 결제대기 - 배경 #F5F5F5, 텍스트 #666
- paid: 결제완료 - 배경 #E3F2FD, 텍스트 #1976D2
- preparing: 배송준비중 - 배경 #FFF3E0, 텍스트 #F57C00
- shipped: 배송중 - 배경 #E8F5E9, 텍스트 #388E3C
- delivered: 배송완료 - 배경 #F5F5F5, 텍스트 #666
- cancelled: 취소 - 배경 #FFEBEE, 텍스트 #D32F2F
- refunded: 환불완료 - 배경 #FFEBEE, 텍스트 #D32F2F
N.이벤트.주문상세.06
주문 상세 이벤트 흐름
조회:
1. 주문 카드에서 "상세보기" 클릭
2. 주문 상세 페이지로 이동
3. API 호출: GET /api/orders/{order_id}
4. 주문 정보 + 배송 정보 + 결제 정보 렌더링
운송장 조회:
1. 운송장번호 영역 "배송조회" 클릭
2. 택배사 배송조회 URL 생성
3. 새 탭으로 열림
4. 파라미터: 택배사코드 + 운송장번호
운송장 복사:
1. 복사 아이콘 클릭
2. navigator.clipboard.writeText() 실행
3. "복사되었습니다" 토스트 2초
4. 실패 시 "복사에 실패했습니다" 토스트
버튼 분기:
- 결제완료/배송준비중: "주문 취소" 버튼 표시
- 배송완료 + 7일 이내: "반품 신청" 버튼 표시
- 배송완료 + 리뷰 미작성: "리뷰 작성" 버튼 표시
N.기능.주문취소.07
주문 취소 신청
가능 조건:
- 주문 상태: 결제완료 또는 배송준비중
- 배송 시작 전까지만 가능
- 부분 취소 불가 (전체 취소만)
취소 사유 (필수 선택):
- 단순 변심
- 다른 상품 주문 예정
- 배송 지연
- 상품 정보와 다름
- 기타 (직접 입력, 최대 200자)
환불 정책:
- 원결제수단으로 환불
- 신용카드: 3~5 영업일
- 계좌이체: 1~2 영업일
- 네이버페이/카카오페이: 1~3 영업일
- 적립금 사용분: 즉시 복구
- 쿠폰 사용분: 유효기간 내 복구
N.기능.반품신청.08
반품 신청
가능 조건:
- 배송 완료 후 7일 이내
- 상품 미사용, 태그 미제거
- 부분 반품 가능
반품 사유:
- 단순 변심 (고객 귀책)
- 상품 불량/파손 (판매자 귀책)
- 상품 정보와 다름 (판매자 귀책)
- 배송 중 파손 (판매자 귀책)
- 오배송 (판매자 귀책)
배송비 정책:
- 단순 변심: 왕복 6,000원 고객 부담
- 판매자 귀책: 무료
수거 방법:
- 택배 수거 요청: 자동 접수, 희망일 선택
- 직접 발송: 반품 주소 안내, 착불 발송
사진 첨부:
- 상품 불량/파손 시 필수
- 최대 5장, 각 10MB 이하
- 지원 형식: JPG, PNG
N.상태.반품신청.09
반품 신청 단계별 상태
1단계 - 상품 선택:
- 반품 가능 상품 목록 표시
- 최소 1개 선택 필수
- 선택 시 테두리 파란색 강조
- "다음" 버튼 활성화 조건: 1개 이상 선택
2단계 - 사유 입력:
- 반품 사유 드롭다운 필수
- 상세 내용 textarea (선택, 최대 500자)
- 불량/파손 선택 시 사진 첨부 필수
- "다음" 버튼 활성화 조건: 사유 선택 + (불량 시 사진 1장 이상)
3단계 - 수거 정보:
- 수거 방법 라디오 필수
- 택배 수거 시 희망일 선택 (익일~7일)
- 수거지 주소 확인 (기본 배송지, 변경 가능)
- "신청 완료" 버튼 활성화 조건: 수거 방법 선택
4단계 - 완료:
- 반품 접수번호 표시
- 수거 예정일, 환불 예정 금액 안내
- "반품 현황 보기", "쇼핑 계속하기" 버튼
N.데이터.반품.10
반품 데이터 구조
ReturnRequest:
- return_id: string (반품번호, RET-YYYYMMDD-XXX)
- order_id: string (원주문번호)
- items: ReturnItem[] (반품 상품)
- reason_type: enum (변심|불량|정보상이|배송파손|오배송)
- reason_detail: string (상세 사유, 최대 500자)
- photos: string[] (첨부 사진 URL, 최대 5개)
- pickup_method: enum (택배수거|직접발송)
- pickup_date: date (수거 희망일)
- pickup_address: Address (수거지 주소)
- shipping_fee: number (반품 배송비)
- refund_amount: number (환불 예정 금액)
- status: enum (접수|수거중|수거완료|검수중|완료|거절)
- created_at: datetime
ReturnItem:
- order_item_id: string
- product_name: string
- option: string
- quantity: number
- price: number
N.기능.쿠폰함.11
쿠폰함
역할:
- 보유 쿠폰 조회 및 관리
- 쿠폰 코드 등록
- 사용 내역 확인
탭 구성:
- 사용 가능: 현재 사용 가능한 쿠폰 (숫자 배지)
- 사용 완료: 이미 사용한 쿠폰
- 기간 만료: 유효기간 지난 쿠폰
쿠폰 등록:
- 코드 입력 (영문/숫자, 최대 20자)
- 등록 버튼 클릭
- 유효성 검사 후 결과 표시
정렬:
- 사용 가능: 만료일 임박순
- 사용 완료: 사용일 최신순
- 기간 만료: 만료일 최신순
N.데이터.쿠폰.12
쿠폰 데이터 구조
Coupon:
- coupon_id: string
- coupon_name: string (최대 30자)
- coupon_code: string (등록 코드)
- discount_type: enum (fixed|percentage)
- discount_value: number (금액 또는 %)
- min_purchase: number (최소 구매 금액)
- max_discount: number (최대 할인, 정률 시)
- valid_from: date (사용 시작일)
- valid_until: date (만료일)
- target_category: string[] (적용 카테고리, null=전체)
- status: enum (available|used|expired)
- used_at: datetime (사용일시)
- used_order_id: string (사용 주문번호)
- days_left: number (남은 일수, 계산값)
표시 형식:
- 금액: "5,000원 할인"
- 비율: "10% 할인 (최대 10,000원)"
- 조건: "3만원 이상 구매 시"
- 기간: "~2025.02.28까지"
- 임박: "D-7" (빨간색, 7일 이내)
카드 스타일:
- 사용 가능: 테두리 #E5E5E5, 할인 영역 컬러
- 사용 완료: 전체 회색 처리, "사용완료" 오버레이
- 기간 만료: 전체 회색 처리, "만료" 오버레이
N.기능.적립금.13
적립금
역할:
- 보유 적립금 확인
- 적립/사용/소멸 내역 조회
- 소멸 예정 알림
사용 조건:
- 최소 1,000원 이상 보유 시 사용 가능
- 1원 단위 사용 가능
- 상품 금액 한도 내 사용
적립 규칙:
- 구매 확정 시 결제 금액의 1% 적립
- 리뷰 작성 시 500원 적립 (텍스트)
- 포토리뷰 작성 시 1,000원 적립
- 이벤트 적립 (금액 변동)
소멸 규칙:
- 적립일로부터 1년 후 소멸
- 소멸 30일 전 푸시/이메일 알림
N.데이터.적립금.14
적립금 데이터 구조
PointSummary:
- available_points: number (사용 가능)
- expiring_soon: number (30일 내 소멸 예정)
- expiring_date: date (가장 빠른 소멸일)
- total_earned: number (누적 적립)
- total_used: number (누적 사용)
PointHistory:
- point_id: string
- type: enum (earn|use|expire|cancel)
- amount: number (양수: 적립, 음수: 사용/소멸)
- balance: number (거래 후 잔액)
- description: string (내역 설명)
- created_at: datetime
- order_id: string (관련 주문번호, 선택)
- expire_at: date (소멸 예정일, 적립 시)
표시 형식:
- 적립: "+3,500원" (파란색)
- 사용: "-2,000원" (빨간색)
- 소멸: "-1,000원" (회색)
- 취소: "+2,000원 (취소 복구)" (파란색)
탭 필터:
- 전체: 모든 내역
- 적립: type=earn
- 사용: type=use
- 소멸: type=expire
N.기능.회원정보.15
회원정보 수정
수정 가능:
- 프로필 이미지 (10MB 이하, JPG/PNG)
- 이름 (최대 20자)
- 휴대폰 번호 (인증 필요)
- 생년월일 (선택)
- 성별 (선택)
- 비밀번호
수정 불가:
- 이메일 (로그인 ID로 사용)
휴대폰 인증:
- 변경 시 SMS 인증 필수
- 인증번호 6자리, 3분 유효
- 3회 실패 시 10분 대기
비밀번호 변경:
- 현재 비밀번호 확인 필수
- 새 비밀번호 조건:
- 8자 이상
- 영문, 숫자, 특수문자 포함
- 이전 3개 비밀번호와 동일 불가
마케팅 수신:
- 이메일, SMS, 푸시 개별 설정
- 전체 해제 시 확인 모달 표시
N.이벤트.배송지관리.16
배송지 관리 이벤트
추가:
1. "새 배송지 추가" 클릭
2. 모달(Desktop) / 바텀시트(Mobile) 열림
3. 정보 입력
4. 주소 검색 API 연동
5. 저장 클릭
6. API: POST /api/addresses
7. 성공 시 리스트 갱신 + 토스트
8. 최대 10개 제한, 초과 시 안내
수정:
1. 배송지 카드 "수정" 클릭
2. 모달에 기존 정보 로드
3. 수정 후 저장
4. API: PUT /api/addresses/{id}
5. 리스트 갱신
삭제:
1. "삭제" 클릭
2. 확인 모달 표시
3. "삭제" 확인 클릭
4. API: DELETE /api/addresses/{id}
5. 리스트에서 제거
6. 기본 배송지 삭제 시: 가장 최근 배송지를 기본으로 자동 지정
기본 배송지 변경:
1. "기본 배송지로 설정" 클릭
2. API: PATCH /api/addresses/{id}/default
3. 즉시 변경, 토스트 표시
4. 기존 기본 배송지 해제
N.데이터.배송지.17
배송지 데이터 구조
Address:
- address_id: string
- address_name: string (배송지명, 집/회사 등, 최대 10자)
- recipient_name: string (수령인, 최대 20자)
- phone: string (연락처, 010-0000-0000)
- postal_code: string (우편번호, 5자리)
- address: string (기본 주소, 최대 100자)
- detail_address: string (상세 주소, 최대 50자)
- is_default: boolean (기본 배송지 여부)
- created_at: datetime
- updated_at: datetime
표시:
- 기본 배송지: 파란색 "기본" 배지 + 테두리 파란색
- 일반 배송지: 테두리 #E5E5E5
제한:
- 최대 10개 등록 가능
- 기본 배송지 1개 필수 (마지막 1개 삭제 불가)
N.기능.분석이벤트.18
마이페이지 GA4 이벤트
view_mypage:
- 마이페이지 메인 조회
- parameters: user_id, grade
view_orders:
- 주문 내역 조회
- parameters: period_filter, order_count
view_order_detail:
- 주문 상세 조회
- parameters: order_id, order_status
request_cancel:
- 주문 취소 신청
- parameters: order_id, cancel_reason, refund_amount
request_return:
- 반품 신청
- parameters: order_id, return_reason, item_count
view_coupons:
- 쿠폰함 조회
- parameters: available_count, tab
register_coupon:
- 쿠폰 등록
- parameters: coupon_code, result (success|fail)
view_points:
- 적립금 조회
- parameters: available_points, expiring_points
update_profile:
- 회원정보 수정
- parameters: updated_fields[]
manage_address:
- 배송지 관리
- parameters: action (add|edit|delete), address_count
네비게이션 컴포넌트
Navigation/SideMenu/Default → 좌측 메뉴 기본 상태
Navigation/SideMenu/Active → 좌측 메뉴 활성화 (파란 바 + 배경)
Navigation/SideMenu/Hover → 좌측 메뉴 호버
Navigation/ProfileCard/Default → 프로필 요약 카드 (64px 이미지)
Navigation/ProfileCard/Compact → 프로필 컴팩트 (40px 이미지)
Navigation/QuickMenu/Default → 퀵메뉴 아이템
Navigation/QuickMenu/WithBadge → 퀵메뉴 숫자 배지 포함
Navigation/Tab/Default → 탭 기본 상태
Navigation/Tab/Active → 탭 활성화 (파란 하단 바)
Navigation/MobileHeader/Default → 모바일 헤더 (뒤로가기 + 제목)
Navigation/MobileHeader/WithAction → 모바일 헤더 (우측 액션 버튼)
주문 관리 컴포넌트
Order/Card/Desktop/Default → 주문 카드 기본
Order/Card/Desktop/Expanded → 주문 카드 펼침 (다중 상품)
Order/Card/Mobile/Default → 모바일 주문 카드 기본
Order/Card/Mobile/Expanded → 모바일 주문 카드 펼침
Order/Item/Default → 주문 상품 항목
Order/Item/Selectable → 선택 가능 상품 (체크박스)
Order/Item/Selected → 선택된 상품 (파란 테두리)
Order/Status/Badge/Pending → 결제대기 배지 (회색)
Order/Status/Badge/Paid → 결제완료 배지 (파란색)
Order/Status/Badge/Preparing → 배송준비중 배지 (주황색)
Order/Status/Badge/Shipped → 배송중 배지 (녹색)
Order/Status/Badge/Delivered → 배송완료 배지 (회색)
Order/Status/Badge/Cancelled → 취소 배지 (빨간색)
Order/Status/Badge/Refunded → 환불완료 배지 (빨간색)
Order/Status/Timeline/Horizontal → 가로 타임라인 (Desktop)
Order/Status/Timeline/Vertical → 세로 타임라인 (Mobile)
Order/Filter/Desktop → 기간 필터 탭
Order/Filter/Mobile → 모바일 필터 칩 (가로 스크롤)
주문 취소/반품 컴포넌트
Cancel/Modal/Desktop → 주문 취소 모달 (560px)
Cancel/BottomSheet/Mobile → 주문 취소 바텀시트
Cancel/ReasonList/Default → 취소 사유 라디오 리스트
Cancel/ReasonList/Selected → 사유 선택됨
Cancel/RefundInfo → 환불 예정 정보 카드
Return/Step/Indicator → 반품 단계 인디케이터
Return/Step/Active → 현재 단계 강조
Return/Step/Complete → 완료 단계 (체크)
Return/ReasonSelect → 반품 사유 드롭다운
Return/PhotoUpload/Empty → 사진 첨부 영역 (빈 상태)
Return/PhotoUpload/Filled → 사진 첨부됨 (썸네일 그리드)
Return/PickupMethod/Courier → 택배 수거 요청 옵션
Return/PickupMethod/Self → 직접 발송 옵션
Return/ShippingFeeNotice → 배송비 안내 카드
Return/Complete/Desktop → 반품 완료 화면
Return/Complete/Mobile → 모바일 반품 완료
쿠폰 컴포넌트
Coupon/Card/Desktop/Available → 사용 가능 쿠폰 카드
Coupon/Card/Desktop/Used → 사용 완료 쿠폰 (회색 + 오버레이)
Coupon/Card/Desktop/Expired → 만료 쿠폰 (회색 + 오버레이)
Coupon/Card/Mobile/Available → 모바일 사용 가능 쿠폰
Coupon/Card/Mobile/Used → 모바일 사용 완료 쿠폰
Coupon/Card/Mobile/Expired → 모바일 만료 쿠폰
Coupon/DiscountBadge/Fixed → 금액 할인 배지 (파란 배경)
Coupon/DiscountBadge/Percentage → 비율 할인 배지 (주황 배경)
Coupon/Dday/Normal → 유효기간 일반 표시
Coupon/Dday/Urgent → D-day 7일 이내 (빨간색)
Coupon/Input/Default → 쿠폰 코드 입력 필드
Coupon/Input/Error → 입력 에러 상태
Coupon/Input/Success → 등록 성공 상태
Coupon/Tab/Available → 사용 가능 탭
Coupon/Tab/Used → 사용 완료 탭
Coupon/Tab/Expired → 만료 탭
적립금 컴포넌트
Point/Summary/Desktop → 적립금 요약 카드 (그라데이션)
Point/Summary/Mobile → 모바일 적립금 요약
Point/ExpiringNotice → 소멸 예정 알림 (노란색)
Point/HistoryItem/Earn → 적립 내역 (+파란색)
Point/HistoryItem/Use → 사용 내역 (-빨간색)
Point/HistoryItem/Expire → 소멸 내역 (-회색)
Point/HistoryItem/Cancel → 취소 복구 (+파란색)
Point/Tab/All → 전체 탭
Point/Tab/Earn → 적립 탭
Point/Tab/Use → 사용 탭
Point/Tab/Expire → 소멸 탭
Point/UsageInfo → 사용 조건 안내 카드
프로필 컴포넌트
Profile/Image/Small → 프로필 이미지 40px
Profile/Image/Medium → 프로필 이미지 64px
Profile/Image/Large → 프로필 이미지 100px
Profile/Image/Editable → 편집 가능 (카메라 아이콘)
Profile/GradeBadge/Silver → 실버 등급 배지
Profile/GradeBadge/Gold → 골드 등급 배지
Profile/GradeBadge/VIP → VIP 등급 배지
Profile/Form/Desktop → 회원정보 수정 폼 (Desktop)
Profile/Form/Mobile → 회원정보 수정 폼 (Mobile)
Profile/PhoneVerify/Default → 휴대폰 인증 버튼
Profile/PhoneVerify/Verified → 인증 완료 (체크 아이콘)
Profile/PhoneVerify/Modal → 인증번호 입력 모달
Profile/Password/Section → 비밀번호 변경 섹션
Profile/Password/Accordion → 모바일 아코디언 형태
Profile/Password/StrengthBar → 비밀번호 강도 표시
Profile/Marketing/Toggle → 마케팅 수신 토글
Profile/Withdrawal/Link → 회원 탈퇴 링크 (빨간색)
배송지 관리 컴포넌트
Address/Card/Default → 배송지 카드 기본
Address/Card/Primary → 기본 배송지 카드 (파란 테두리 + 배지)
Address/Badge/Primary → "기본" 배지
Address/ActionButton/Edit → 수정 버튼
Address/ActionButton/Delete → 삭제 버튼
Address/SetDefault/Link → 기본 배송지 설정 링크
Address/Modal/Add → 새 배송지 추가 모달
Address/Modal/Edit → 배송지 수정 모달
Address/BottomSheet/Add → 새 배송지 추가 (Mobile)
Address/BottomSheet/Edit → 배송지 수정 (Mobile)
Address/Search/Button → 주소 검색 버튼
Address/Search/Modal → 주소 검색 모달
Address/Form/PostalCode → 우편번호 입력 (읽기 전용)
Address/Form/BaseAddress → 기본 주소 (읽기 전용)
Address/Form/DetailAddress → 상세 주소 입력
폼 컴포넌트
Form/Input/Default → 입력 필드 기본
Form/Input/Focus → 포커스 상태 (파란 테두리)
Form/Input/Error → 에러 상태 (빨간 테두리 + 메시지)
Form/Input/Disabled → 비활성화
Form/Input/ReadOnly → 읽기 전용 (회색 배경)
Form/Textarea/Default → 텍스트 영역 기본
Form/Textarea/WithCounter → 글자수 카운터 포함
Form/Dropdown/Default → 드롭다운 기본
Form/Dropdown/Open → 드롭다운 펼침
Form/Dropdown/Selected → 항목 선택됨
Form/Radio/Default → 라디오 버튼 기본
Form/Radio/Checked → 라디오 선택됨
Form/Checkbox/Default → 체크박스 기본
Form/Checkbox/Checked → 체크박스 선택됨
Form/Toggle/Off → 토글 Off
Form/Toggle/On → 토글 On
Form/Label/Required → 필수 라벨 (*)
Form/Label/Optional → 선택 라벨
Form/ErrorMessage → 필드 하단 에러 메시지
Form/HelperText → 필드 하단 도움말
상태 컴포넌트
Mypage/Loading/Desktop/OrderList → 주문 리스트 스켈레톤
Mypage/Loading/Desktop/CouponList → 쿠폰 리스트 스켈레톤
Mypage/Loading/Mobile/OrderList → 모바일 주문 스켈레톤
Mypage/Loading/Mobile/CouponList → 모바일 쿠폰 스켈레톤
Mypage/Empty/Orders → 주문 없음 상태
Mypage/Empty/Coupons → 쿠폰 없음 상태
Mypage/Empty/Points → 적립금 내역 없음
Mypage/Empty/Address → 배송지 없음 상태
Mypage/Empty/Wishlist → 찜한 상품 없음
Mypage/Error/DataLoad → 데이터 로드 실패
Mypage/Error/Network → 네트워크 오류
모달/바텀시트 컴포넌트
Modal/Confirm/Delete → 삭제 확인 모달
Modal/Confirm/Cancel → 취소 확인 모달
Modal/Confirm/Logout → 로그아웃 확인 모달
Modal/Complete/OrderCancel → 주문 취소 완료
Modal/Complete/Return → 반품 신청 완료
Modal/Alert/MarketingOptout → 마케팅 전체 해제 확인
BottomSheet/Handle → 바텀시트 핸들 바
BottomSheet/Header → 바텀시트 헤더 (제목 + 닫기)
BottomSheet/Footer/Single → 단일 버튼 푸터
BottomSheet/Footer/Double → 이중 버튼 푸터
토스트/알림 컴포넌트
Toast/Success → 성공 토스트 (초록)
Toast/Error → 에러 토스트 (빨간)
Toast/Info → 정보 토스트 (파란)
Toast/Warning → 경고 토스트 (주황)
Toast/Copy → 복사 완료 토스트
90_Spec_Components 페이지 구성
Section: Mypage Components
├─ Subsection: Navigation
│ ├─ SideMenu (3 variants)
│ ├─ ProfileCard (2 variants)
│ ├─ QuickMenu (2 variants)
│ ├─ Tab (2 variants)
│ └─ MobileHeader (2 variants)
├─ Subsection: Order
│ ├─ Card/Desktop (2 variants)
│ ├─ Card/Mobile (2 variants)
│ ├─ Item (3 variants)
│ ├─ Status/Badge (7 variants)
│ ├─ Status/Timeline (2 variants)
│ └─ Filter (2 variants)
├─ Subsection: Cancel & Return
│ ├─ Cancel/Modal & BottomSheet (2 variants)
│ ├─ Cancel/ReasonList (2 variants)
│ ├─ Return/Step (3 variants)
│ ├─ Return/PhotoUpload (2 variants)
│ ├─ Return/PickupMethod (2 variants)
│ └─ Return/Complete (2 variants)
├─ Subsection: Coupon
│ ├─ Card/Desktop (3 variants)
│ ├─ Card/Mobile (3 variants)
│ ├─ DiscountBadge (2 variants)
│ ├─ Dday (2 variants)
│ ├─ Input (3 variants)
│ └─ Tab (3 variants)
├─ Subsection: Point
│ ├─ Summary (2 variants)
│ ├─ HistoryItem (4 variants)
│ ├─ Tab (4 variants)
│ └─ Info Cards (2 variants)
├─ Subsection: Profile
│ ├─ Image (4 variants)
│ ├─ GradeBadge (3 variants)
│ ├─ Form (2 variants)
│ ├─ PhoneVerify (3 variants)
│ ├─ Password (3 variants)
│ └─ Marketing/Withdrawal (2 variants)
├─ Subsection: Address
│ ├─ Card (2 variants)
│ ├─ ActionButton (2 variants)
│ ├─ Modal/BottomSheet (4 variants)
│ ├─ Search (2 variants)
│ └─ Form Fields (3 variants)
├─ Subsection: Form
│ ├─ Input (5 variants)
│ ├─ Textarea (2 variants)
│ ├─ Dropdown (3 variants)
│ ├─ Radio/Checkbox (2 variants each)
│ ├─ Toggle (2 variants)
│ └─ Labels/Messages (4 variants)
├─ Subsection: States
│ ├─ Loading/Desktop (2 variants)
│ ├─ Loading/Mobile (2 variants)
│ ├─ Empty (5 variants)
│ └─ Error (2 variants)
├─ Subsection: Modal & BottomSheet
│ ├─ Confirm (3 variants)
│ ├─ Complete (2 variants)
│ ├─ Alert (1 variant)
│ └─ BottomSheet Structure (4 variants)
└─ Subsection: Toast
└─ Toast (5 variants)
네비게이션 인터랙션
Desktop 좌측 메뉴:
- 메뉴 항목 클릭 → 활성 상태 변경 Instant (좌측 파란 바 + 배경색)
- 우측 콘텐츠 영역 교체 Instant
- URL 변경 (/mypage/orders, /mypage/coupons 등)
Mobile 퀵메뉴:
- 퀵메뉴 아이템 탭 → 해당 상세 화면 이동 Instant
- 헤더에 뒤로가기 버튼 표시
Mobile 메뉴 리스트:
- 메뉴 항목 탭 → 상세 화면 슬라이드 Slide Left 300ms
- 뒤로가기 탭 → 마이페이지 메인 복귀 Slide Right 300ms
탭 전환 인터랙션
탭 클릭/탭:
- 활성 탭 변경 Instant
- 하단 파란 바 이동 Smart Animate 200ms
- 탭 콘텐츠 교체 Instant
주문 조회 인터랙션
기간 필터:
- Desktop: 필터 탭 클릭 → 활성화 Instant + 리스트 갱신 Fade 200ms
- Mobile: 필터 칩 탭 → 활성화 Instant + 리스트 갱신 Fade 200ms
주문 카드:
- "상세보기" 클릭 → 주문 상세 페이지 이동 Instant
- Desktop: 카드 내 다중 상품 펼치기/접기 Smart Animate 200ms
- Mobile: 카드 탭 → 주문 상세 이동 Instant
배송 조회:
- "배송조회" 클릭 → 택배사 페이지 새 탭 열기 Instant
- 운송장 복사 아이콘 클릭 → 토스트 표시 Fade In 200ms → 2초 후 Fade Out
주문 상세 내 버튼 분기:
- 결제완료/배송준비중 → "주문 취소" 버튼 표시
- 배송완료 + 7일 이내 → "반품 신청" 버튼 표시
- 배송완료 + 리뷰 미작성 → "리뷰 작성" 버튼 표시
주문 취소 인터랙션
"주문 취소" 버튼 클릭:
- Desktop: 취소 모달 열림 Dissolve 200ms
- Mobile: 취소 바텀시트 슬라이드업 400ms
취소 사유 선택:
- 라디오 버튼 클릭 → 선택 상태 변경 Instant
- "기타" 선택 → textarea 활성화 Instant
- 사유 선택 완료 → "취소 신청" 버튼 활성화
"취소 신청" 버튼 클릭:
- 버튼 로딩 상태 → API 호출
- 성공: 모달/바텀시트 닫기 Fade Out 300ms → 토스트 표시 → 리스트 갱신
- 실패: 에러 메시지 표시 Instant
반품 신청 인터랙션
단계 이동:
- "다음" 클릭 → 유효성 검사 → 다음 단계 Slide Left 300ms
- "이전" 클릭 → 이전 단계 Slide Right 300ms (입력값 유지)
- 단계 인디케이터 업데이트 Instant
1단계 - 상품 선택:
- 상품 카드 클릭 → 체크박스 토글 + 테두리 색상 변경 Instant
- 1개 이상 선택 → "다음" 버튼 활성화
2단계 - 사유 입력:
- 사유 드롭다운 선택 → 배송비 안내 표시 Fade 200ms
- 불량/파손 선택 → 사진 첨부 필수 안내 표시
사진 첨부:
- 업로드 영역 클릭 → 파일 선택 창 Instant
- 업로드 완료 → 썸네일 추가 Fade In 200ms
- X 버튼 클릭 → 썸네일 제거 Fade Out 200ms
3단계 - 수거 정보:
- 택배 수거 선택 → 희망일 선택 필드 표시 Fade 200ms
- 직접 발송 선택 → 반품 주소 안내 표시 Fade 200ms
"신청 완료" 클릭:
- 버튼 로딩 → API 호출
- 성공: 완료 화면 표시 Fade In 300ms
쿠폰함 인터랙션
탭 전환:
- 탭 클릭 → 활성화 Instant + 하단 바 이동 Smart Animate 200ms
- 해당 상태 쿠폰 리스트 표시 Fade 200ms
쿠폰 코드 등록:
- 코드 입력 → "등록" 버튼 활성화
- "등록" 클릭 → 버튼 로딩 → 결과 표시
- 성공: 입력 필드 초록 테두리 + 토스트 + 리스트 갱신
- 실패: 입력 필드 빨간 테두리 + 에러 메시지 표시
쿠폰 카드:
- 사용 가능 쿠폰 "적용" 클릭 → 장바구니 이동 + 쿠폰 자동 적용
- 만료 임박 쿠폰 D-day 빨간색 강조 표시
적립금 인터랙션
탭 필터:
- 탭 클릭 → 활성화 Instant
- 필터된 내역 표시 Fade 200ms
더보기 로드:
- Desktop: 페이지 번호 클릭 → 리스트 Fade Out → Fade In 200ms
- Mobile: 스크롤 하단 도달 → 로딩 스피너 → 추가 항목 Fade In 200ms
회원정보 수정 인터랙션
프로필 이미지:
- 카메라 아이콘 클릭 → 파일 선택 창 Instant
- 이미지 선택 → 미리보기 업데이트 Instant
휴대폰 인증:
- "인증" 버튼 클릭 → 인증번호 모달 열림 Dissolve 200ms
- 인증번호 입력 → "확인" 클릭 → 검증
- 성공: 모달 닫기 + 체크 아이콘 표시
- 실패: 에러 메시지 + 재입력 유도
비밀번호 변경 (Mobile):
- 섹션 헤더 탭 → 아코디언 펼치기/접기 Slide 300ms
비밀번호 입력:
- 입력 중 → 강도 바 실시간 업데이트 Instant
- 눈 아이콘 클릭 → 비밀번호 표시/숨김 토글 Instant
마케팅 수신:
- 토글 탭 → On/Off 변경 Smart Animate 200ms
- 전체 해제 시 → 확인 모달 표시 Dissolve 200ms
"저장하기" 클릭:
- 버튼 로딩 → API 호출
- 성공: 토스트 "저장되었습니다" 표시
- 실패: 필드별 에러 메시지 표시
배송지 관리 인터랙션
"새 배송지 추가" 클릭:
- Desktop: 추가 모달 열림 Dissolve 200ms
- Mobile: 추가 바텀시트 슬라이드업 400ms
주소 검색:
- "주소 검색" 클릭 → 검색 모달 열림 Dissolve 200ms
- 검색어 입력 → "검색" 클릭 → 결과 표시 Fade 200ms
- 결과 항목 클릭 → 모달 닫기 + 주소 자동 입력 + 상세주소 포커스
배송지 카드:
- "수정" 클릭 → 수정 모달/바텀시트 열림 (기존 정보 로드)
- "기본 배송지로 설정" 클릭 → 즉시 변경 + 토스트 표시
- "삭제" 클릭 → 확인 모달 Dissolve 200ms
삭제 확인 모달:
- "삭제" 클릭 → 리스트에서 제거 Fade Out 200ms + 토스트
- "취소" 클릭 → 모달 닫기 Instant
에러/상태 인터랙션
데이터 로드 실패:
- 콘텐츠 영역에 에러 상태 표시 Fade 200ms
- "다시 시도" 클릭 → 스켈레톤 표시 → API 재호출
토스트:
- 표시: Fade In 200ms + 상단/하단에서 슬라이드
- 자동 닫기: 2~3초 후 Fade Out 300ms
- X 버튼 클릭: 즉시 Fade Out 200ms
모달 닫기:
- 오버레이 클릭 → 모달 닫기 Fade Out 200ms
- X 버튼 클릭 → 모달 닫기 Instant
- ESC 키 → 모달 닫기 Instant
바텀시트 닫기:
- 핸들 드래그 다운 → 바텀시트 닫기 슬라이드다운 300ms
- 오버레이 탭 → 바텀시트 닫기 슬라이드다운 300ms
페이지 이탈 인터랙션
수정 중 이탈 시도:
- 변경사항 있음 → 확인 모달 표시 Dissolve 200ms
- "저장하고 나가기" → 저장 후 이동
- "저장하지 않고 나가기" → 변경사항 버리고 이동
- "취소" → 현재 페이지 유지
디자인 체크리스트
[ ] Desktop 좌측 네비게이션 240px 고정
[ ] Desktop 콘텐츠 영역 960px
[ ] Mobile 프로필 영역 120px
[ ] Mobile 퀵메뉴 4등분 80px
[ ] 주문 상태 배지 색상 6종 정의
[ ] 쿠폰 카드 좌측 할인 영역 강조
[ ] 반응형 브레이크포인트 일관성
콘텐츠 체크리스트
[ ] 상품명 최대 50자, 2줄 말줄임
[ ] 쿠폰명 최대 30자
[ ] 주문번호 형식: ORD-YYYYMMDD-XXX
[ ] 반품번호 형식: RET-YYYYMMDD-XXX
[ ] 날짜 형식: YYYY.MM.DD
[ ] 금액 형식: 천 단위 콤마 + "원"
인터랙션 체크리스트
[ ] 모든 메뉴 이동 동작
[ ] 모달/바텀시트 열기/닫기
[ ] 탭 전환 동작
[ ] 폼 입력 및 유효성 검사
[ ] 토스트 메시지 표시
[ ] 무한 스크롤 또는 페이지네이션
상태 체크리스트
[ ] Idle: 데이터 있음 정상 상태
[ ] Loading: 스켈레톤 UI
[ ] Empty: 주문/쿠폰/적립금 없음 각각 정의
[ ] Error: 데이터 로드 실패
[ ] Success: 취소/반품 신청 완료
프로토타입 체크리스트
[ ] 네비게이션 메뉴 전체 연결
[ ] 주문 상세 → 취소/반품 → 완료 플로우
[ ] 쿠폰 등록 → 성공/실패 분기
[ ] 회원정보 수정 → 저장 → 성공 토스트
[ ] 배송지 추가/수정/삭제 전체 플로우
사용자 프론트는 큰 틀안에서는 대부분 구현하였다. (메인/카테고리/상품상세/장바구니/결제/마이페이지) 나머지 화면들은 프롬프트를 참고해서 제작하면 프로토타입 시연이 가능하다. 또한 피그마 디자인으로 전환 후 note를 기록하면 개발자, 이해관계자와 회의 및 소통에 지장이 없을 것으로 본다.
지금까지 만든 사용자 프로토타입 화면을 PPT로 레이아웃을 만들고, 설명을 넣는 작업을 한 후 PPT 자료를 넘기면서 상상으로 시연을 해야한다. 하지만 여기까지 만든 프로토타입으로 시연을 하면 이해도와 방향성이 확실하게 보이며, 이후 추가나 수정사항도 명확해질 수 있다.
https://ide-python-61918998.figma.site