관리자 화면 · 백오피스 거래 관리

거래 관리 메인 — 상세보기 페이지

BO-TRN-002 · 2026. 03. 04

화면 이름 거래 관리 메인 — 상세보기 페이지
화면 위치 백오피스 로그인 진입 > 거래 관리 메뉴 > 상세보기 클릭 > 거래 상세 페이지 진입
화면 ID BO-TRN-002
작성일 2026. 03. 04
거래 관리 메인 > 스토리보드 상세/보기
수정 요청하기
비밀번호 재발행하기
CHRT.
사용자 관리
작품 관리
거래 관리
작품 문의 관리
← 거래 정보 상세
작품 기본 정보
작품 이미지(들) (이미지 참조)
보증서 보증서001.pdf
재질 캔버스, 아크릴, 혼합
제작 년도(년) 2026. 01
수량/에 1점(호) / 작가
작품 설명 작품 설명입니다. 본 작품 설명글으로 거래를 원활하게 하기 위한 설명입니다. 작품 설명입니다. 본 작품 설명글은 거래를 원활하게 하기 위한 설명입니다...
차트 사내 공유 Y
거래 / 결제 정보
거래 일시 2024.08.23 AM 4시30분
구매자 연락처 010-1234-5678
거래유형(건) 1건(건)
프라이빗 세일(구매자/구매처) abcde@fgh.com
구분 (유형) 마켓
결제(은행) 정보(기) 000-0078-1234
결제수(지) 마켓공통
판매자 거래(구매자/구매처) efg@abcdef.com
유거래 1차비공개품
거래대비 일반
4분기(pm)(건) 100x100
총 금(판매건(값)) 110,000,000
판매 금액(건)(값) 100,000,000
이체확인(건)(값) 110%
구매 수수료(건)(값) 10,000,000
판매자 수수료(건)(값) 10,000,000
상태
거래대기 입금
▼
작성일(실비(비) 거래 정보 수정 안내용으로만 사용합니다
1
2
3
Description
0 화면 접근 조건
  • BO-TRN-001 거래 목록에서 '상세보기' 클릭 시 진입
  • 직접 URL 접근 시 권한 체크 후 화면 노출
  • 수정 권한이 없는 관리자는 조회 모드(읽기 전용)로 노출
1 상단 액션 바
  • 구성
    • 화면 경로 : "거래 관리 메인 > 스토리보드 상세/보기"
    • 수정 요청하기 버튼 (검정 배경)
    • 비밀번호 재발행하기 버튼 (아웃라인)
  • 동작
    • 수정 요청하기 클릭 시 → 거래 상태 변경 모달(BO-TRN-003 #3) 노출
    • 비밀번호 재발행하기 클릭 시 → 비밀번호 입력 모달(BO-TRN-003 #1) 노출
2 작품 기본 정보
  • 구성
    • 작품 이미지(들) : 6장까지 썸네일 표시, 클릭 시 이미지 확대 모달
    • 보증서 : PDF 파일명 표시 + 다운로드 링크
    • 재질, 제작 년도, 수량/에, 작품 설명, 차트 사내 공유 여부
  • 동작
    • 이미지 썸네일 클릭 시 이미지 원본 보기 모달 노출
    • 보증서 파일명 클릭 시 PDF 다운로드
    • 작품 설명은 장문 텍스트 → 스크롤 가능 영역 또는 접기/펼치기
3 거래 / 결제 정보
  • 구성
    • 거래 일시, 구매자 연락처, 거래유형, 판매자 정보
    • 결제(은행) 정보, 금액 관련 필드
    • 총 금, 판매 금액, 이체확인 비율, 수수료 등
    • 상태 필드 : 드롭다운으로 상태 변경 가능
    • 수정 가능 필드에는 연필 아이콘(✎) 표시
  • 동작
    • 연필 아이콘 클릭 시 → 해당 필드 인라인 수정 모드 활성화
    • 상태 드롭다운 변경 시 → 거래 상태 변경 모달(BO-TRN-003 #3) 노출
    • 금액 필드 수정 시 → 관련 비율/수수료 자동 재계산
    • 수정 후 페이지 이탈 시 → 페이지 이동 안내 모달(BO-TRN-003 #5) 노출
4 공통 규칙
  • 모든 수정은 비밀번호 확인 후 가능 (BO-TRN-003 #1 모달)
  • 수정된 정보가 있는 상태에서 다른 페이지 이동 시 확인 모달 노출
  • 거래 정보 수정 완료 시 거래 정보 수정 안내 모달(BO-TRN-003 #4) 노출
  • 모든 금액 필드는 천 단위 콤마 표시
  • 비공개 정보(연락처, 이메일 등)는 마스킹 처리

Design Output

UI 디자인 산출물

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

← 거래 정보 상세
수정 요청하기
비밀번호 재발행하기
CHRT.
사용자 관리
작품 관리
거래 관리
작품 문의 관리
작품 기본 정보
ARTWORK DETAIL TABLE
거래 / 결제 정보
TRANSACTION DETAIL TABLE
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
정보 카드 #fff + rgba(26,26,26,0.06) border R=0, 20px padding
테이블 라벨 열 #f5f5f3 bg 600 weight, 120~140px 너비
수정 아이콘 연필(edit) SVG --text-muted, 12px, stroke 1.5
액션 버튼(수정) --charcoal bg R=0, 11px font, 600 weight
아웃라인 버튼 rgba(26,26,26,0.12) border --text-secondary 텍스트
작품 썸네일 --paper + linen Paper-Catalog 메타포, 72x72px
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • BO-TRN-001 거래 목록에서 '상세보기' 클릭 시 진입
  • 직접 URL 접근 시 권한 체크 후 화면 노출
  • 수정 권한이 없는 관리자는 조회 모드(읽기 전용)로 노출
1 상단 액션 바
  • 구성
    • 화면 경로 : "거래 관리 메인 > 스토리보드 상세/보기"
    • 수정 요청하기 버튼 (검정 배경)
    • 비밀번호 재발행하기 버튼 (아웃라인)
  • 동작
    • 수정 요청하기 클릭 시 → 거래 상태 변경 모달(BO-TRN-003 #3) 노출
    • 비밀번호 재발행하기 클릭 시 → 비밀번호 입력 모달(BO-TRN-003 #1) 노출
2 작품 기본 정보
  • 구성
    • 작품 이미지(들) : 6장까지 썸네일 표시, 클릭 시 이미지 확대 모달
    • 보증서 : PDF 파일명 표시 + 다운로드 링크
    • 재질, 제작 년도, 수량/에, 작품 설명, 차트 사내 공유 여부
  • 동작
    • 이미지 썸네일 클릭 시 이미지 원본 보기 모달 노출
    • 보증서 파일명 클릭 시 PDF 다운로드
    • 작품 설명은 장문 텍스트 → 스크롤 가능 영역 또는 접기/펼치기
3 거래 / 결제 정보
  • 구성
    • 거래 일시, 구매자 연락처, 거래유형, 판매자 정보
    • 결제(은행) 정보, 금액 관련 필드
    • 총 금, 판매 금액, 이체확인 비율, 수수료 등
    • 상태 필드 : 드롭다운으로 상태 변경 가능
    • 수정 가능 필드에는 연필 아이콘(✎) 표시
  • 동작
    • 연필 아이콘 클릭 시 → 해당 필드 인라인 수정 모드 활성화
    • 상태 드롭다운 변경 시 → 거래 상태 변경 모달(BO-TRN-003 #3) 노출
    • 금액 필드 수정 시 → 관련 비율/수수료 자동 재계산
    • 수정 후 페이지 이탈 시 → 페이지 이동 안내 모달(BO-TRN-003 #5) 노출
4 공통 규칙
  • 모든 수정은 비밀번호 확인 후 가능 (BO-TRN-003 #1 모달)
  • 수정된 정보가 있는 상태에서 다른 페이지 이동 시 확인 모달 노출
  • 거래 정보 수정 완료 시 거래 정보 수정 안내 모달(BO-TRN-003 #4) 노출
  • 모든 금액 필드는 천 단위 콤마 표시
  • 비공개 정보(연락처, 이메일 등)는 마스킹 처리
← 이전 화면: BO-TRN-001 다음 화면: BO-TRN-003 →