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

거래 관리 메인

BO-TRN-001 · 2026. 03. 04

화면 이름 거래 관리 메인
화면 위치 백오피스 로그인 진입 > 거래 관리 메뉴 클릭
화면 ID BO-TRN-001
작성일 2026. 03. 04
거래 관리 메인 화면 위치 백오피스 로그인 진입 > 거래 관리 메뉴 클릭
admin@chaart.co
CHRT.
사용자 관리
작품 관리
거래 관리
작품 문의 관리
거래 현황
joonyoob.kim@chaart.co
전체
마켓
프라이빗 세일
비공개
기간별 거래 · 2024.1 AM
전체거래건
1,345,678
마켓 거래
567
PS 거래
1,234
비공개 거래
234
총 거래액
5,000
미수금
300
정산 완료
300
수수료
300
정산액
300
거래 기간
2024.MM.DD 기준
~
2024.MM.DD 기준
검색어
거래번호로 검색하세요
거래유형선택
● 전체○ 마켓○ 프라이빗세일○ 기타
상태
☑ 전체☐ 거래대기 입금☐ 매출 등☐ 입금 확인☐ 작품 수령 준비☐ 작품 전달 중☐ 추적 확인
교포 입금
● 구매자 입금
교포 항목
전체항목
교포 입금을 검색하세요
초기화
검색
거래 목록
엑셀다운로드
거래 신규등록
거래 정보 편집
no. 거래 내역 일시 거래유형 선택/값 거래번호 거래대기 이전/이후(변동) 주성 판매자(판매자/식) 판매자 판매자 지분(판매/매형목) 획거래 거래대비 4분기(pm) 대 유류비(건) 이체확인(건) VR유 수수료(건) 판매자 수수료(건) 상태 비고 상세보기
10 2024. MM. DD HH:MM Q2*-****-**** 김** abc@defgh.com 마켓 abc**-****-**** 김** abcde@fgh.com 마켓공통 일반 10%-비 1,100,000 1,000,000 110% 100,000 거래대기 입금 R.C 입금대 대응-01 상세보기
9 2024. MM. DD HH:MM Q2*-****-**** 김** abc@defgh.com 프라이빗 세일 abc**-****-**** 김** abcde@fgh.com 비공개품 일반 100%-비Q 11,000,000 10,000,000 110% 1,000,000 매출 등 R.C 입금대 대응-01 상세보기
8 2024. MM. DD HH:MM Q2*-****-**** 김** abc@defgh.com 비공개 abc**-****-**** 김** abcde@fgh.com 비공개품 프레임 30-50 70,000,000 80,000,000 110% 10,000,000 정산 완료 R.C 입금대 대응-01 상세보기
< 1 2 3 4 5 >
1
2
3
4
5
Description
0 화면 접근 조건
  • 백오피스 로그인 후 접근 가능
  • 좌측 GNB의 '거래 관리' 메뉴 클릭 시 본 화면으로 이동
  • 권한 관리
    • 관리자 등급에 따라 조회/수정/삭제 권한 분기
    • 비인가 접근 시 접근 불가 화면 노출
1 거래 현황 헤더
  • 구성
    • 화면 타이틀 : "거래 현황"
    • 우측 : 알림 아이콘 + 관리자 이메일 표시
  • 동작
    • 알림 아이콘 클릭 시 알림 드롭다운 노출
2 탭 영역
  • 구성
    • 전체 / 마켓 / 프라이빗 세일 / 비공개 4개 탭
    • 활성 탭 : 검정 배경 + 흰색 텍스트
    • 비활성 탭 : 흰색 배경 + 회색 텍스트
  • 동작
    • 탭 클릭 시 해당 카테고리로 필터링
    • 탭 변경 시 통계 박스 및 거래 목록 동시 갱신
3 통계 박스 영역
  • 구성
    • 9개 KPI 박스 : 전체거래건, 마켓 거래, PS 거래, 비공개 거래, 총 거래액, 미수금, 정산 완료, 수수료, 정산액
    • 기간 표시 라벨
  • 동작
    • 선택된 탭에 따라 수치 갱신
    • 기간 필터 변경 시 통계 재계산
4 검색 필터 영역
  • 구성
    • 거래 기간 : 시작일 ~ 종료일 날짜 선택
    • 검색어 : 거래번호 직접 입력
    • 거래유형선택 : 전체 / 마켓 / 프라이빗세일 / 기타 (라디오)
    • 상태 : 전체 / 거래대기 입금 / 매출 등 / 입금 확인 / 작품 수령 준비 / 작품 전달 중 / 추적 확인 (체크박스)
    • 교포 입금, 교포 항목 필터
  • 동작
    • 초기화 버튼 → 모든 필터 초기 상태로 리셋
    • 검색 버튼 → 입력 조건으로 거래 목록 필터링
5 거래 목록 테이블
  • 구성
    • 상단 액션 버튼 : 엑셀다운로드, 거래 신규등록, 거래 정보 편집
    • 테이블 컬럼 (19열) : no., 거래 내역 일시, 거래유형, 거래번호, 거래대기, 주성, 판매자 정보, 금액, 비율, 수수료, 상태, 비고, 상세보기
  • 동작
    • 상세보기 클릭 시 → BO-TRN-002 (거래 상세 페이지) 로 이동
    • 엑셀다운로드 클릭 시 → 비밀번호 입력 모달(BO-TRN-003 #2) 노출
    • 거래 신규등록 클릭 시 → 거래 등록 화면으로 이동
    • 거래 정보 편집 클릭 시 → 편집 모드 활성화
    • 하단 페이지네이션으로 목록 탐색
6 GNB 사이드바
  • 구성
    • CHRT. 로고
    • 메뉴 항목 : 사용자 관리 / 작품 관리 / 거래 관리 / 작품 문의 관리
    • 현재 활성 메뉴 : 거래 관리 (흰색 텍스트 + 배경 하이라이트)
  • 동작
    • 메뉴 클릭 시 해당 관리 화면으로 이동
    • GNB 상세 규격은 BO-ETC-001 참조
7 공통 규칙
  • 데이터 로딩 시 스켈레톤 UI 노출
  • 검색 결과 0건 시 빈 상태(Empty State) 표시
  • 테이블 정렬 : 거래 내역 일시 기준 내림차순 (최신순)
  • 1페이지당 10건 노출, 페이지네이션으로 이동

Design Output

UI 디자인 산출물

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

거래 관리 메인
joonyoob.kim@chaart.co
CHRT.
사용자 관리
작품 관리
거래 관리
작품 문의 관리
전체
마켓
프라이빗 세일
비공개
전체거래
1,345,678
마켓
567
PS
1,234
비공개
234
총 거래액
5,000
미수금
300
정산
300
수수료
300
정산액
300
검색 결과 · 데이터 테이블
DATA TABLE AREA
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
사이드바 --charcoal #1A1A1A, 160px 너비
활성 탭 --charcoal bg R=0, 흰색 텍스트, border-bottom 2px
KPI 박스 --mono label + --sans value 9px uppercase label, 15px 700 value
테이블 헤더 --neutral-95 bg 600 weight, charcoal border-bottom
상세보기 링크 --red-brand underline, 10px, cursor pointer
검색 필터 --bg card + border 1px solid #ddd, 16px 내부 패딩
관리자 이메일 --mono 11px --text-muted, letter-spacing 0.02em
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 백오피스 로그인 후 접근 가능
  • 좌측 GNB의 '거래 관리' 메뉴 클릭 시 본 화면으로 이동
  • 권한 관리
    • 관리자 등급에 따라 조회/수정/삭제 권한 분기
    • 비인가 접근 시 접근 불가 화면 노출
1 거래 현황 헤더
  • 구성
    • 화면 타이틀 : "거래 현황"
    • 우측 : 알림 아이콘 + 관리자 이메일 표시
  • 동작
    • 알림 아이콘 클릭 시 알림 드롭다운 노출
2 탭 영역
  • 구성
    • 전체 / 마켓 / 프라이빗 세일 / 비공개 4개 탭
    • 활성 탭 : 검정 배경 + 흰색 텍스트
    • 비활성 탭 : 흰색 배경 + 회색 텍스트
  • 동작
    • 탭 클릭 시 해당 카테고리로 필터링
    • 탭 변경 시 통계 박스 및 거래 목록 동시 갱신
3 통계 박스 영역
  • 구성
    • 9개 KPI 박스 : 전체거래건, 마켓 거래, PS 거래, 비공개 거래, 총 거래액, 미수금, 정산 완료, 수수료, 정산액
    • 기간 표시 라벨
  • 동작
    • 선택된 탭에 따라 수치 갱신
    • 기간 필터 변경 시 통계 재계산
4 검색 필터 영역
  • 구성
    • 거래 기간 : 시작일 ~ 종료일 날짜 선택
    • 검색어 : 거래번호 직접 입력
    • 거래유형선택 : 전체 / 마켓 / 프라이빗세일 / 기타 (라디오)
    • 상태 : 전체 / 거래대기 입금 / 매출 등 / 입금 확인 / 작품 수령 준비 / 작품 전달 중 / 추적 확인 (체크박스)
    • 교포 입금, 교포 항목 필터
  • 동작
    • 초기화 버튼 → 모든 필터 초기 상태로 리셋
    • 검색 버튼 → 입력 조건으로 거래 목록 필터링
5 거래 목록 테이블
  • 구성
    • 상단 액션 버튼 : 엑셀다운로드, 거래 신규등록, 거래 정보 편집
    • 테이블 컬럼 (19열) : no., 거래 내역 일시, 거래유형, 거래번호, 거래대기, 주성, 판매자 정보, 금액, 비율, 수수료, 상태, 비고, 상세보기
  • 동작
    • 상세보기 클릭 시 → BO-TRN-002 (거래 상세 페이지) 로 이동
    • 엑셀다운로드 클릭 시 → 비밀번호 입력 모달(BO-TRN-003 #2) 노출
    • 거래 신규등록 클릭 시 → 거래 등록 화면으로 이동
    • 거래 정보 편집 클릭 시 → 편집 모드 활성화
    • 하단 페이지네이션으로 목록 탐색
6 GNB 사이드바
  • 구성
    • CHRT. 로고
    • 메뉴 항목 : 사용자 관리 / 작품 관리 / 거래 관리 / 작품 문의 관리
    • 현재 활성 메뉴 : 거래 관리 (흰색 텍스트 + 배경 하이라이트)
  • 동작
    • 메뉴 클릭 시 해당 관리 화면으로 이동
    • GNB 상세 규격은 BO-ETC-001 참조
7 공통 규칙
  • 데이터 로딩 시 스켈레톤 UI 노출
  • 검색 결과 0건 시 빈 상태(Empty State) 표시
  • 테이블 정렬 : 거래 내역 일시 기준 내림차순 (최신순)
  • 1페이지당 10건 노출, 페이지네이션으로 이동
← 이전 화면: BO-INQ-002 다음 화면: BO-TRN-002 →