사용자 화면 · 프라이빗 세일

프라이빗 세일 안내 모달

PRS-004 · 2026. 02. 24

화면 이름 프라이빗 세일 안내 모달
화면 위치 프라이빗 세일 > 안내 모달
화면 ID PRS-004
작성일 2026. 02. 24
PRS-004 PRS-004 PRS-004 PRS-004
Description
0 화면 접근 조건
  • PRS-002(구매 등록 화면) 또는 PRS(판매 등록 화면)에서 다음 조건해서 해당 모달 노출
    • 헤더 “뒤로가기" 클릭 시
    • “취소" 버튼 클릭 시
  • 배경 화면 스크롤 불가
2 구매 등록 취소 모달 - 취소 버튼 클릭 시
  • 구성
    • 타이틀: “프라이빗 세일 구매 등록 취소 안내"
    • 안내 문구
      • “프라이빗 세일 구매 등록을 취소하면 지금까지 작성한 정보가 사라집니다"
      • 취소
      • 구매 등록 취소
    • “취소" 클릭 시
      • 모달 닫힘
      • 기존 화면 (PRS-002) 유지
      • 입력 데이터 유지
      • PRS-001 화면 이동
      • PRS-002 입력 데이터 초기화
3 구매 등록 취소 모달 - 뒤로 가기 버튼 클릭 시
  • 구성
    • 타이틀: “프라이빗 세일 구매 등록 취소 안내"
    • 안내 문구
      • “지금 뒤로 가시면 지금까지 작성한 정보가 사라집니다"
      • 취소
      • 뒤로가기
    • “취소” 클릭 시
      • 모달 닫힘
      • 기존 화면 (PRS-002) 유지
      • 입력 데이터 유지
      • PRS-001 화면 이동
      • PRS-002 입력 데이터 초기화
4 판매 등록 취소 모달 - 취소 버튼 클릭 시
  • 구성
    • 타이틀: “프라이빗 세일 판매 등록 취소 안내"
    • 안내 문구
      • “프라이빗 세일 판매 등록을 취소하면 지금까지 작성한 정보가 사라집니다"
      • 취소
      • 판매 등록 취소
    • “취소” 클릭 시
    • 모달 닫힘
    • PRS-003 화면 유지
    • 입력 데이터 유지
  • “판매 등록 취소" 클릭 시
    • PRS-001 화면 이동
    • PRS-003 입력 데이터 초기화
5 판매 등록 취소 모달 - 뒤로 가기 버튼 클릭 시
  • 구성
    • 타이틀: “프라이빗 세일 판매 등록 취소 안내"
    • 안내 문구
      • “지금 뒤로 가시면 지금까지 작성한 정보가 사라집니다"
      • 취소
      • 뒤로가기
    • “취소” 클릭 시
      • 모달 닫힘
      • PRS-003 화면 유지
      • 입력 데이터 유지
      • PRS-001 화면 이동
      • PRS-003 입력 데이터 초기화
6 공통 규칙
  • 하드웨어 뒤로가기 버튼 클릭 시
    • 기존 화면 유지
      • 모달 중복 노출 불가
      • 입력 데이터 삭제는 “우측 확인 버튼" 클릭 시에만 수행
      • 서버 요청 없음

Design Output

UI 디자인 산출물

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

프라이빗 세일 구매 등록 취소 안내

프라이빗 세일 구매 등록을 취소 하면
지금까지 작성한 정보가 사라집니다

취소
구매 등록 취소

프라이빗 세일 구매 등록 취소 안내

지금 뒤로 가시면
지금까지 작성한 정보가 사라집니다

취소
뒤로가기

프라이빗 세일 판매 등록 취소 안내

프라이빗 세일 판매 등록을 취소하면
지금까지 작성한 정보가 사라집니다

취소
판매 등록 취소

프라이빗 세일 판매 등록 취소 안내

지금 뒤로 가시면
지금까지 작성한 정보가 사라집니다

취소
뒤로가기
개발 구현 가이드 — PRS-004 프라이빗 세일 안내 모달

Update History

2026.03.16구현 가이드 최신화 (8섹션 재작성)
2026.03.11구현 가이드 추가 (7섹션: 화면구조, 레이어구조, 안내문구, 버튼구성, 동작로직, 닫기규칙, 에러처리)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

  • 화면 유형: Center Modal — 딤 오버레이(rgba 45%) 위에 중앙 배치되는 확인 대화상자
  • 4가지 변형 (동일 레이아웃, 문구만 상이):
    • 모달 1: 구매 등록 취소 — 취소 버튼 클릭 시 (PRS-002에서 호출)
    • 모달 2: 구매 등록 취소 — 뒤로가기 버튼 클릭 시 (PRS-002에서 호출)
    • 모달 3: 판매 등록 취소 — 취소 버튼 클릭 시 (PRS-003에서 호출)
    • 모달 4: 판매 등록 취소 — 뒤로가기 버튼 클릭 시 (PRS-003에서 호출)
  • 직각 원칙: border-radius:0 전면 적용 (CHAART 브랜드 R=0)
  • 모든 화면 위 레이어 방식 — 배경 딤(반투명) 처리

2. 레이어 구조 + 치수

# 영역 높이/위치 비고
1딤 오버레이position:fixed; inset:0rgba(26,26,26,0.45), z-index 최상위
2모달 컨테이너center, padding 32px 24px--bg #FAFAF8, R=0, min(80%,320px) 권장
3타이틀auto, mb 12px--sans 17px/700 center, ls:-0.02em
4안내 문구auto (멀티라인), mb 32px--sans 14px/400 center, lh:1.6, ls:-0.005em
5버튼 행50px x 2, gap 10px취소(좌) + 확인(우), flex:1 균등

3. 핵심 인터랙션

  • 모달 타이틀: --sans (Pretendard) 17px/700, --charcoal (#1A1A1A), text-align:center, letter-spacing:var(--ls-tight), line-height:1.4
  • 안내 문구: --sans 14px/400, --text-secondary (#555555), text-align:center, line-height:1.6, letter-spacing:var(--ls-normal)
  • 취소 버튼 (좌): flex:1, height:50px, bg rgba(26,26,26,0.06), text --charcoal 15px/600, R=0 — 모달 닫힘 → 등록 플로우 복귀, 입력 데이터 유지
  • 확인 버튼 (우): flex:1, height:50px, bg --charcoal (#1A1A1A), text #fff 15px/600, R=0 — 등록 취소 확정 → PRS-001 이동, 입력 데이터 초기화
  • 확인 버튼 라벨 (변형별):
    • 모달 1: "구매 등록 취소" / 모달 2: "뒤로가기"
    • 모달 3: "판매 등록 취소" / 모달 4: "뒤로가기"
  • 중복 클릭 방지: 첫 터치 후 pointer-events:none 처리

4. 상태 변화

  • 모달 표시 전: 딤 + 모달 모두 opacity:0, visibility:hidden
  • 모달 표시 중: 딤 opacity:1, 모달 opacity:1 + scale(1)
  • 취소 버튼 hover/press: bg opacity 미세 증가 (rgba(26,26,26,0.10))
  • 확인 버튼 hover/press: bg opacity 미세 감소 (rgba(26,26,26,0.85))
  • 확인 후 처리 중: 버튼 pointer-events:none + opacity:0.7
  • 안내 문구 변형: 모달 1,3 = 동사형 ("취소하면"), 모달 2,4 = 조건형 ("뒤로 가시면")

5. 네비게이션 플로우

  • 진입 (모달 1): PRS-002 취소 버튼 클릭 (입력 데이터 있을 때)
  • 진입 (모달 2): PRS-002 뒤로가기(chevron-left) 클릭 (입력 데이터 있을 때)
  • 진입 (모달 3): PRS-003 취소 버튼 클릭 (입력 데이터 있을 때)
  • 진입 (모달 4): PRS-003 뒤로가기(chevron-left) 클릭 (입력 데이터 있을 때)
  • 취소 버튼: 모달 닫힘 → 이전 등록 화면(PRS-002/003) 복귀, 입력 상태 유지
  • 확인 버튼: 등록 취소 확정 → PRS-001 메인으로 이동, 입력 데이터 초기화
  • 입력 데이터 없는 경우: 모달 노출 없이 PRS-001 직행

6. 에러/예외 처리

  • 접근성: role="dialog", aria-modal="true", aria-labelledby 타이틀 연결 필수
  • 포커스 트랩: 모달 열린 동안 포커스가 모달 내 요소(취소/확인 버튼)에만 머물도록 처리
  • 딤 영역 터치: 안내 모달 특성상 비활성화 권장 (기획 확인 필요)
  • 하드웨어 뒤로가기: 기본 팝업 노출 불가, iOS/Android 뒤로가기 → 모달 닫힘(취소와 동일)
  • 확인 후 서버 오류: 에러 토스트 "네트워크 연결을 확인해주세요" + 모달 유지 + 버튼 재활성화
  • 입력 데이터 삭제: "우측 확인 버튼" 클릭 시에만 수행 (취소 시 보존)

7. 모션 스펙

  • 딤 진입: opacity 0 → 1, duration 200ms, ease-out
  • 모달 진입: opacity 0 + scale(0.95) → opacity 1 + scale(1), duration 250ms, ease-out
  • 딤 닫힘: opacity 1 → 0, duration 150ms, ease-in
  • 모달 닫힘: opacity 1 → 0 + scale(0.95), duration 200ms, ease-in
  • 버튼 press: background-color, duration 100ms, ease

8. 여백 · 간격 요약

  • 모달 정렬: position:fixed, top:50%, left:50%, transform:translate(-50%,-50%)
  • 모달 내부 패딩: 32px (상하) / 24px (좌우)
  • 타이틀 → 안내 문구: margin-bottom 12px
  • 안내 문구 → 버튼 행: margin-bottom 32px
  • 버튼 행 내 간격: gap 10px
  • 버튼 사이즈: flex:1, height 50px (균등 2분할)
  • 모달 권장 너비: min(80%, 320px)

9. 적용 디자인 토큰

  • --bg: #FAFAF8
  • --charcoal: #1A1A1A
  • --sans: Pretendard Variable
  • --text-secondary: #555555
← 이전 화면: PRS-003 다음 화면: BO-ART-001 →