| 0 | 화면 접근조건 |
- 본 화면은 마켓 내 작품 카드 클릭 시 진입 가능한 작품 상세 페이지
- 접근 주체에 따라 일부 UI 요소 노출 여부가 달라짐
- 접근 가능 사용자
- 로그인 사용자
- 비로그인 사용자 모두 접근 가능
- 접근 경로
- 홈 화면(HOM-001 ~ HOM-003)
- 마켓 메인 화면(MKT-001)
- 검색 결과 화면(MKT-001 / MKT-002)
- 마이페이지 화면(MYP-003 ~ MYP-008)
- 유사 작품 추천 영역 내 작품 카드 클릭 시
- 사용자 유형별 접근 조건 및 차이
- 일반 사용자(비작성자)
- 작품 상세 정보 열람 가능
- 구매 문의하기 버튼 노출
- 헤더 내 수정하기 버튼 비노출
- 작성자(해당 작품 등록 사용자)
- 작품 상세 정보 열람 가능
- 헤더 내 수정하기 버튼 노출
- 구매 문의하기 버튼 노출 여부는 정책에 따라 결정
- (※ 본 화면에서는 구매 문의 버튼 자체는 동일하게 유지)
- 접근 제한 조건
- 삭제되었거나 비공개 처리된 작품의 경우 접근 불가
- 접근 시 서버 상태에 따라 오류 발생 시 에러 화면 또는 토스트 메시지 노출 (정책 별도 정의)
|
| 1-1 | 헤더 |
- 구성
- 좌측: 뒤로가기 버튼
- 중앙: 화면 타이틀(고정 노출 없음)
- 우측:
- 찜 버튼
- 공유하기 버튼
- (작성자일 경우) 수정하기 버튼
- 동작
- 뒤로가기 버튼
- 클릭 시 이전 화면으로 이동
- 별도 확인 모달 없음
- 찜 버튼
- 로그인 상태
- 클릭 시 해당 작품 찜 처리
- 찜 완료 토스트 메시지 노출
- 비로그인 상태
- 클릭 시 로그인 유도 모달 노출(LOG-008)
- 모달 선택지:
- 공유하기 버튼
- 로그인 여부와 관계없이 사용 가능
- 클릭 시 OS 기본 공유 시트 노출
- 공유 항목:
- 수정하기 버튼
- 해당 작품을 등록한 작성자에게만 노출
- 클릭 시 작품 수정 플로우로 이동 (화면 ID 별도 정의)
- 비작성자에게는 버튼 자체 비노출
|
| 1-2 | 작품 이미지 |
- 구성
- 작품 대표 이미지 영역
- 이미지 슬라이드(Carousel) 형태
- 이미지 인디케이터(페이지 점 또는 카운트) 노출
- 최대 5장, 최소 1장 이상 필수 노출
- 노출 규칙
- 판매자가 등록한 작품 이미지 중 대표 이미지가 첫 번째로 노출
- 작품 상세 설명 영역(1-5)에 등록된 이미지와 동일한 이미지 셋 사용
- 이미지 수가 2장 이상일 경우 좌/우 스와이프 가능
- 이미지 수가 1장일 경우 슬라이드 동작 및 인디케이터 비노출
- 동작
- 좌/우 스와이프 시 이미지 전환
- 이미지 탭 시 전체 화면 이미지 뷰어(확대 보기) 노출 (확대 보기 화면 ID는 추후 정의)
- 확대 보기에서도 동일하게 슬라이드 가능
- 공통 규칙
- 이미지 로딩 전에는 스켈레톤 UI 또는 플레이스홀더 노출
- 이미지 비율은 업로드 원본 비율 유지하되, 영역 초과 시 중앙 기준 크롭
- 이미지 로딩 실패 시 기본 플레이스홀더 이미지 노출
|
| 1-3 | 작가+작품 카운팅+ 작품 가격+ 유사 도상낙찰가 정보 |
- 구성
- 작품 가격 정보 카드
- 작품 가격(판매가)
- 유사 도상 낙찰가 정보
- 인포메이션 버튼(i 아이콘)
- 가격 단위는 원화(KRW) 기준으로 표기
- 천 단위 콤마 적용
- 노출 정책
- 작품 가격은 판매자가 설정한 희망 판매 가격을 기준으로 노출
- 가격 정보는 모든 사용자에게 동일하게 노출됨 (로그인 여부 무관)
- 유사 도상 낙찰가
- 실제 판매가와는 무관하며, 참고 지표로만 활용됨
- 인포메이션 버튼 동작
- 유사 도상 낙찰가 영역 내 인포메이션 버튼 클릭 시 토스트 메시지 노출
- 토스트 메시지 문구:
- "차트 AI 시스템이 분석한 동일 작가∙유사 도상 기준 낙찰가입니다."
- 인터랙션
- 가격 영역은 클릭 불가 영역 (정보 제공 목적)
- 인포메이션 버튼(i)만 인터랙션 요소로 동작
- 상태 처리
- 유사 도상 낙찰가 데이터가 없는 경우
- 해당 영역 미노출
- 인포메이션 버튼도 함께 미노출
|
| 1-4 | 작품 정보 |
- 구성
- 작품명
- 카테고리
- 재료
- 사이즈
- 제작연도
- 구성품
- 가격 제안
- 작품 등급
- 작가명
- 제작연도
- 작품 재료
- 작품 사이즈
- 작품명 노출 규칙
- 판매자가 작품명을 입력한 경우
- 작품명이 입력되지 않은 경우
- ※ 작품명이 없는 경우에도 작품 상세 페이지 접근 및 구매 문의에는 영향 없음
- 기타 정보 노출 규칙
- 작가명, 제작연도, 재료, 사이즈는 판매자가 입력한 정보를 기준으로 노출
- 입력되지 않은 항목은 해당 영역 미노출 또는 - 처리 (표현 방식은 디자인 정책에 따름)
- 인터랙션
- 본 영역은 정보 제공 목적의 영역으로 별도 클릭 액션 없음
|
| 1-5 | 작품 상세설명 |
- 구성
- 작품 설명 텍스트 영역
- 작품 설명 이미지 영역(슬라이드)
- 작품 설명 텍스트
- 노출 규칙
- 판매자가 입력한 작품 설명 텍스트를 그대로 노출
- 줄바꿈 및 문단 구분은 입력값 기준 유지
- 텍스트가 없는 경우
- 인터랙션
- 텍스트 영역은 읽기 전용
- 별도 클릭 액션 없음
- 작품 설명 이미지
- 구성
- 작품 설명에 첨부된 이미지 리스트
- 일렬(세로 스택) 형태로 순차 노출
- 노출 규칙
- 최소 1장 이상, 최대 5장까지 노출
- 판매자가 업로드한 이미지 순서를 그대로 유지하여 위에서 아래로 노출
- 각 이미지는 독립된 블록 형태로 표시됨
- 작품 상단 이미지 영역(1-2)과 동일한 이미지 셋 사용
- 동작
- 공통 처리
- 이미지 로딩 전에는 스켈레톤 UI 또는 플레이스홀더 노출
- 이미지 로딩 실패 시 기본 이미지로 대체 노출
- 이미지 비율은 원본 비율 유지
|
| 1-6 | 거래프로세스 |
- 구성
- 작품 관련 부가 정보가 노출되는 영역
- 본 영역에 포함되는 정보의 내용 구조만 정의하며, UI 레이아웃 및 시각 디자인은 추후 디자이너에 의해 변경될 예정
- 포함 정보
- 작품 상태(컨디션)
- 거래 관련 유의사항
- 기타 작품 판매 및 거래에 필요한 안내 문구
- ※ 위 정보들은 판매자가 입력한 값 또는 시스템 기준 값을 기반으로 노출됨
- 노출 규칙
- 각 정보 항목은 존재하는 정보만 노출
- 정보가 없는 항목은 해당 영역에서 미노출
- 본 영역은 작품 상세 정보 흐름 중 보조 정보 제공 목적의 영역임
- 인터랙션
- 공통 규칙
- 본 영역의 정보 순서 및 구분 기준은 유지
- 시각적 표현(카드형/리스트형/구분선 등)은 디자인 단계에서 조정 가능
- 기능 및 데이터 구조는 변경 없이 디자인만 변경 가능하도록 설계
|
| 1-7 | 유사 작품추천 |
- 구성
- 유사 작품 추천 섹션 타이틀
- 작품 카드 리스트
- 최대 5개의 작품 카드 노출
- 추천 기준 (우선순위)
- 1️차 기준
- 현재 작품과 동일 작가의 작품
- 동일 작가 작품 중 최신 등록순으로 정렬
- 2️차 기준 (대체 조건)
- 동일 작가의 유사 작품이 없는 경우
- 현재 작품의 희망 판매 가격과 유사한 금액대의 작품 기준으로 추천
- 유사 금액대 작품 중 최신 등록순으로 정렬
- ※ 1차 기준이 충족되는 경우, 2차 기준은 적용되지 않음
- 노출 규칙
- 추천 가능한 작품이 있는 경우에만 영역 노출
- 추천 작품이 5개 미만인 경우:
- 추천 작품이 전혀 없는 경우:
- 작품 카드 구성
- 인터랙션
- 작품 카드 클릭 시:
- 해당 작품의 작품 상세 페이지(MKT-013) 로 이동
- 스크롤은 가로 스크롤 형태
- 공통 규칙
- 본 영역은 탐색 유도 목적의 보조 영역
- 현재 보고 있는 작품과 동일한 작품은 추천 리스트에 포함하지 않음
- 추천 로직은 서버 기준으로 처리하며, 클라이언트에서 임의 변경 불가
|
| 1-8 | 구매문의하기버튼 |
- 구성
- 노출 규칙
- 로그인/비로그인 모두 버튼 노출
- 단, 비로그인 사용자는 문의 진행 불가 (로그인 유도)
- 판매 완료 상태인 작품은 버튼 비활성화
- 동작
- 로그인 사용자
- 버튼 클릭 시 → 2-1 구매 문의 바텀시트 노출
- 비로그인 사용자
- 버튼 클릭 시 → 로그인 유도 모달(LOG-008) 노출
|
| 2 | 구매 문의바텀시트 |
- 노출 트리거
- 작품 상세 화면(1-8)에서 [구매 문의하기] 버튼 클릭 시 노출
- 노출 방식
- 기존 작품 상세 화면은 딤 처리(dim) 되어 비활성화
- 화면 하단에서 바텀시트가 슬라이드 업 형태로 노출
- 바텀시트가 열린 동안:
- 배경(작품 상세)은 스크롤/탭/버튼 조작 불가
- 바텀시트 내부만 조작 가능
- 바텀시트 구성
- 헤더 영역
- 우측: 닫기(X) 버튼
- 클릭 시 바텀시트 닫힘
- 배경 딤 해제 및 작품 상세 화면으로 복귀
- 안내/설명 텍스트 영역
- 구매 문의 단계임을 안내하는 텍스트 블록
- 결제/구매 확정이 아님을 명확히 고지하는 목적
- 입력 영역
- 사용자 입력 필드(문의 메시지 입력)
- Placeholder 포함
- 입력 시 키보드 노출, 바텀시트 내에서 입력 가능한 상태 유지
- 동의/체크 영역
- 체크박스 1개 (개인정보 수집∙이용 동의)
- 체크 상태에 따라 CTA 활성화 조건에 영향
- 개인정보 수집∙이용 동의 버튼 클릭 시, 동의서 노출
- CTA 버튼 영역
- 하단 1개 메인 CTA 버튼(예: "문의하기")
- 활성화 조건:
- 필수 입력값 충족(문의 메시지)
- 체크박스 필수 동의(필요 시)
- 클릭 시:
- 구매 문의 요청 처리(서버 요청)
- 성공 시 바텀시트 닫힘 + 후속 화면/토스트 정책은 3/4에서 정의(이번 항목 제외)
- 닫기/이탈 규칙
- X 버튼 클릭: 즉시 닫힘(입력 내용 유지/초기화 정책은 공통 규칙에서 확정)
- 딤 영역 탭: (정책 선택 필요)
|
| 3 | 토스트메시지 정의 |
- 유사 도상 낙찰가 정보 안내
- 노출 조건
- 1-3 유사 도상 낙찰가 영역의 인포메이션 버튼(i) 클릭 시
- 노출 방식
- 화면 하단 토스트 메시지 노출
- 자동으로 일정 시간 후 사라짐
- 토스트 문구
- 차트 AI 시스템이 분석한 동일 작가∙유사 도상 기준 낙찰가입니다.
- 구매 문의 바텀시트 관련 토스트
- 구매 문의 바텀시트에서 필수 입력값 미충족 상태로 CTA 클릭 시
- 구매 문의 바텀시트 제출 완료 시
|
| 4 | 공통 규칙 |
- 본 화면은 작품 상세 정보 확인 전용 화면
- 스크롤 가능한 단일 페이지 구조
- 화면 상태/데이터 유지
- 작품 상세 진입 시 작품 기본 정보/이미지/추천 리스트는 서버 응답 기준으로 렌더링
- 네트워크 지연 시 각 영역은 스켈레톤/플레이스홀더로 표시 후 로딩 완료 시 치환
- 이미지(대표/상세)는 로딩 실패 시 기본 대체 이미지 (placeholder) 노출 및 재시도 가능(UX는 디자이너 가이드에 따름)
- 스크롤/레이아웃 동작
- 본 화면은 세로 스크롤 페이지이며, 상단(헤더/작품 이미지 영역) 이후 정보 영역이 자연스럽게 이어지는 구조
- 하단 CTA(구매 문의하기)는 고정 영역(Sticky)으로 동작하며, 콘텐츠 스크롤과 독립적으로 항상 노출
|
