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

거래 관리 메인 — 각종 모달

BO-TRN-003 · 2026. 02. 27

화면 이름 거래 관리 메인 — 각종 모달

화면 위치 백오피스 로그인 진입 > 거래 관리 > 각종 모달

화면 ID BO-TRN-003

작성일 2026. 02. 27

비밀번호 입력

비밀번호를 입력해주세요.

취소

상세보기

엑셀 다운로드 요청하기

사유를 입력해주세요.

취소

요청하기

거래 상태 변경하기

비밀번호를 입력해주세요.

취소

변경

거래 정보 수정 안내

거래 정보를 수정하시겠습니까?

취소

수정

페이지 이동 안내

수정된 정보가 있습니다.
이동하시겠습니까?

취소

이동

Description

1	고객 정보 확인 시, 노출되는 비밀번호 입력 모달	노출 조건 거래 리스트 화면에서 ‘고객 정보 확인’ 버튼 클릭 시 거래 상세 화면 진입 시 (재인증 요구 시점) 타이틀: 비밀번호 입력 입력 필드: 비밀번호 버튼: 취소 / 확인 닫기(X) 버튼 동작 [확인] 클릭 시 비밀번호 유효성 검증 API 호출 성공 시 모달 닫기 고객 정보 노출 처리 성공 토스트 노출 오류 메시지 표시 모달 유지 모달 닫기 고객 정보 비노출 상태 유지
2	엑셀 다운로드 요청 사유 입력 모달	노출 조건 거래 관리 메인 화면에서 [엑셀 다운로드] 클릭 시 모달 노출 타이틀: 엑셀 다운로드 요청하기 입력 필드: 사유 입력 버튼: 취소 / 요청하기 닫기(X) 동작 [취소] 클릭 → 모달 닫기 [요청하기] 클릭 사유 입력값 검증 다운로드 요청 API 호출 상태: “승인 대기” 성공 시 모달 닫기 + 요청 완료 토스트 노출 슈퍼 관리자 승인 시 해당 관리자 계정의 알림 영역  → “엑셀 다운로드 요청이 승인되었습니다.” 알림 적재 승인 후 일정 시간 동안 다운로드 버튼 활성화 사유 미입력 시 “사유를 입력해주세요.” 토스트 노출 이미 승인 대기 중인 요청 존재 시 → 중복 요청 불가 토스트
3	거래 상태 변경 시, 노출되는 비밀번호 입력 모달	노출 조건 거래 리스트 또는 거래 상세 화면에서 상태 변경 시 보안 정책상 재인증이 필요한 경우 타이틀: 거래 상태 변경하기 입력 필드: 비밀번호 버튼: 취소 / 변경 닫기(X) 버튼 동작 [변경] 클릭 시 비밀번호 검증 API 호출 성공 시 상태 변경 처리 API 호출 모달 닫기 성공 토스트 노출 오류 메시지 표시 상태 변경 미처리 모달 닫기 상태 유지 비밀번호 미입력 시  → “비밀번호를 입력해주세요.” 상태 변경 API 실패 시  → 실패 토스트 노출
4	거래 상세 정보 화면 에서 거래 정보 수정 시, 노출되는 모달	노출 조건 거래 정보 상세 화면에서 저장 버튼 클릭 시 메시지: “거래 정보를 수정하시겠습니까?” 버튼: 취소 / 수정 동작 [취소] → 모달 닫기 [수정] → 수정 API 호출 성공 시 모달 닫기 + 성공 토스트 실패 시 모달 닫기 + 실패 토스트
5	거래 상세 정보 화면 에서 수정된 정보가 있을 때 노출되는 모달	노출 조건 거래 상세 화면에서 변경 상태 발생 후 뒤로가기 또는 메뉴 이동 시 메시지: “수정된 정보가 있습니다. 이동하시겠습니까?” 버튼: 취소 / 이동 동작 [취소] → 모달 닫기 + 현재 화면 유지 [이동] → 변경사항 폐기 + 이전 화면 이동
6	토스트 메세지 정의	성공 “인증이 완료되었습니다.” “거래 상태가 변경되었습니다.” “엑셀 다운로드 요청이 접수되었습니다.” “거래 정보가 수정되었습니다.” “비밀번호가 일치하지 않습니다.” “상태 변경에 실패했습니다.” “요청 처리 중 오류가 발생했습니다.” 경고/안내 “변경된 내용이 없습니다.” “보안을 위해 다시 인증이 필요합니다.” “처리 중입니다. 잠시만 기다려주세요.”
7	공통 규칙	모달 공통 정책 모든 모달은 중앙 정렬 팝업 형태 ESC 키 입력 시 모달 닫힘 모달 외부 영역 클릭 시 닫기 여부는 정책에 따름 (보안 모달은 외부 클릭 닫기 불가) 비밀번호 인증 모달은 서버 검증 필수 인증 성공 시 일정 시간 동안 재인증 생략 가능 세션 만료 시 재인증 요구

Design Output

UI 디자인 산출물

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

Applied Design Tokens

요소	Token	값
모달 배경	`--bg`	R=0 (직각 철학), border: `--charcoal`
모달 다크 상단	`--charcoal`	100px 높이
CTA 버튼 (primary)	`--red-brand`	#961E23, R=0, `ch-btn--primary` 위계
서브 버튼 (ghost)	`--border-strong`	transparent bg, 1px solid `--border-strong`, R=0, `ch-btn--ghost` 위계
입력 필드	`--alpha-12` border	R=0, `--size-xs-font` font, 8-14px padding
닫기 버튼	× 아이콘	`--text-inverse` opacity 0.5, `--size-sm-font`
모달 타이틀	`--sans` 14px 700	`--charcoal`, center align
안내 텍스트	`--sans` 12px	`--text-secondary`, line-height 1.6

Design Description

Update History

2026.03.04초기 디자인 작성

1	고객 정보 확인 시, 노출되는 비밀번호 입력 모달	노출 조건 거래 리스트 화면에서 ‘고객 정보 확인’ 버튼 클릭 시 거래 상세 화면 진입 시 (재인증 요구 시점) 타이틀: 비밀번호 입력 입력 필드: 비밀번호 버튼: 취소 / 확인 닫기(X) 버튼 동작 [확인] 클릭 시 비밀번호 유효성 검증 API 호출 성공 시 모달 닫기 고객 정보 노출 처리 성공 토스트 노출 오류 메시지 표시 모달 유지 모달 닫기 고객 정보 비노출 상태 유지
2	엑셀 다운로드 요청 사유 입력 모달	노출 조건 거래 관리 메인 화면에서 [엑셀 다운로드] 클릭 시 모달 노출 타이틀: 엑셀 다운로드 요청하기 입력 필드: 사유 입력 버튼: 취소 / 요청하기 닫기(X) 동작 [취소] 클릭 → 모달 닫기 [요청하기] 클릭 사유 입력값 검증 다운로드 요청 API 호출 상태: “승인 대기” 성공 시 모달 닫기 + 요청 완료 토스트 노출 슈퍼 관리자 승인 시 해당 관리자 계정의 알림 영역  → “엑셀 다운로드 요청이 승인되었습니다.” 알림 적재 승인 후 일정 시간 동안 다운로드 버튼 활성화 사유 미입력 시 “사유를 입력해주세요.” 토스트 노출 이미 승인 대기 중인 요청 존재 시 → 중복 요청 불가 토스트
3	거래 상태 변경 시, 노출되는 비밀번호 입력 모달	노출 조건 거래 리스트 또는 거래 상세 화면에서 상태 변경 시 보안 정책상 재인증이 필요한 경우 타이틀: 거래 상태 변경하기 입력 필드: 비밀번호 버튼: 취소 / 변경 닫기(X) 버튼 동작 [변경] 클릭 시 비밀번호 검증 API 호출 성공 시 상태 변경 처리 API 호출 모달 닫기 성공 토스트 노출 오류 메시지 표시 상태 변경 미처리 모달 닫기 상태 유지 비밀번호 미입력 시  → “비밀번호를 입력해주세요.” 상태 변경 API 실패 시  → 실패 토스트 노출
4	거래 상세 정보 화면 에서 거래 정보 수정 시, 노출되는 모달	노출 조건 거래 정보 상세 화면에서 저장 버튼 클릭 시 메시지: “거래 정보를 수정하시겠습니까?” 버튼: 취소 / 수정 동작 [취소] → 모달 닫기 [수정] → 수정 API 호출 성공 시 모달 닫기 + 성공 토스트 실패 시 모달 닫기 + 실패 토스트
5	거래 상세 정보 화면 에서 수정된 정보가 있을 때 노출되는 모달	노출 조건 거래 상세 화면에서 변경 상태 발생 후 뒤로가기 또는 메뉴 이동 시 메시지: “수정된 정보가 있습니다. 이동하시겠습니까?” 버튼: 취소 / 이동 동작 [취소] → 모달 닫기 + 현재 화면 유지 [이동] → 변경사항 폐기 + 이전 화면 이동
6	토스트 메세지 정의	성공 “인증이 완료되었습니다.” “거래 상태가 변경되었습니다.” “엑셀 다운로드 요청이 접수되었습니다.” “거래 정보가 수정되었습니다.” “비밀번호가 일치하지 않습니다.” “상태 변경에 실패했습니다.” “요청 처리 중 오류가 발생했습니다.” 경고/안내 “변경된 내용이 없습니다.” “보안을 위해 다시 인증이 필요합니다.” “처리 중입니다. 잠시만 기다려주세요.”
7	공통 규칙	모달 공통 정책 모든 모달은 중앙 정렬 팝업 형태 ESC 키 입력 시 모달 닫힘 모달 외부 영역 클릭 시 닫기 여부는 정책에 따름 (보안 모달은 외부 클릭 닫기 불가) 비밀번호 인증 모달은 서버 검증 필수 인증 성공 시 일정 시간 동안 재인증 생략 가능 세션 만료 시 재인증 요구

← 이전 화면: BO-TRN-002 다음 화면: BO-INQ-001 →