관리자 화면 · 백오피스 거래 관리
거래 관리 메인 — 각종 모달
BO-TRN-003 · 2026. 03. 04
거래 정보 수정 안내
거래 정보를 수정하시겠습니까?
4
페이지 이동 안내
수정된 정보가 있습니다.
이동하시겠습니까?
5
| 1 |
비밀번호 입력 모달 |
- 노출 조건
- 거래 관리 리스트 화면에서 '고객 정보 열기' 또는 '비밀' 클릭 시
- 거래 상세 화면 진입 시 (비밀번호 요구 시점)
- 구성
- 다크톤 : 비밀번호(이전전달화면하기) 토스트 노출
- 하단영역 : 비밀번호 입력 폼 + 입력 필드
- 취소 버튼 / 상세보기 버튼
- 동작
- 비밀번호 정확히 입력 시
- 서버단에 비밀번호 검증 API 호출
- 성공 시 → 모달 닫기 + 상세 화면 진입
- 실패 시 → 오류 메시지 표시
- 취소 클릭 시 → 모달 닫기
- X 버튼 클릭 시 → 모달 닫기
|
| 2 |
엑셀 다운로드 요청하기 모달 |
- 노출 조건
- 거래 관리 확인 화면에서 [엑셀 다운로드] 클릭 시 모달 노출
- 구성
- 다크톤 : 다운로드 안내 텍스트
- 사유 입력 필드
- 취소 / 요청하기 버튼
- 동작
- [요청하기] 클릭 시
- 사유를 입력값 검증
- 성공 시 모달 닫기 + "사유를 입력해주세요" 토스트 노출
- 추후 후 요청 완료 시 다운 다운로드 비밀번호 발급
- [취소] 클릭 시 → 모달 닫기
|
| 3 |
거래 상태 변경하기 모달 |
- 노출 조건
- 거래 상세 화면에서 상태 변경(드롭다운에서) 상태 변경 시
- 수정 요청 버튼 클릭 후 비밀번호 확인시 노출
- 구성
- 타이틀 : 거래 상태 변경하기
- 비밀번호 입력 필드
- 취소 / 변경 버튼
- 동작
- [변경] 클릭 시
- 비밀번호 검증 API 호출
- 성공 → 상태 변경 처리 + 성공 토스트 노출
- 실패 → 오류 메시지 표시
- [취소] 클릭 시 → 모달 닫기 + 상태 원복
|
| 4 |
거래 정보 수정 안내 모달 |
- 노출 조건
- 구성
- 메시지 : "거래 정보를 수정하시겠습니까?"
- 취소 / 수정 버튼
- 동작
- [수정] 클릭 시
- 비밀번호 입력 모달 → 성공 시 실제 수정 API 호출
- 성공 시 모달 닫기 + 성공 토스트
- [취소] 클릭 시 → 모달 닫기
|
| 5 |
페이지 이동 안내 모달 |
- 노출 조건
- 거래 상세 화면에서 데이터 수정 후 다른 페이지로 이동 시
- 구성
- 메시지 : "수정된 정보가 있습니다. 이동하시겠습니까?"
- 취소 / 이동 버튼
- 동작
- [이동] 클릭 시
- [취소] 클릭 시
- 모달 닫기 + 현재 화면 유지 (수정 내용 보존)
|
| 6 |
토스트 메시지 정의 |
- 성공
- "이동이 완료되었습니다."
- "거래 상태가 변경되었습니다."
- "엑셀 다운로드가 요청되었습니다."
- 오류/실패
- "비밀번호가 일치하지 않습니다."
- "요청 처리에 실패했습니다."
- "사유를 입력해 주세요."
- "거래 내용이 없습니다."
- "거래 수정이 완료되었습니다."
- "거래 줄임표, 잠시만 기다려주세요."
|
| 7 |
공통 규칙 |
- 모달 공통 동작
- 모든 모달은 화면 정중앙 절대 위치
- ESC 키 입력 시 모달 닫힘
- 모달 외부(오버레이) 클릭 시 닫힘 여부는 정책에 따름 (비밀번호 모달은 외부 클릭시 닫기 불가)
- 버튼 규칙
- 좌측 버튼은 항상 '취소' 서브 액션 (다크 배경)
- 우측 버튼은 주요 CTA (오렌지/브랜드)
- 다른 화면 시 활성화 시 각종 제한을 설정 가능
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
거래 정보 수정 안내
거래 정보를 수정하시겠습니까?
페이지 이동 안내
수정된 정보가 있습니다.
이동하시겠습니까?
| 요소 | Token | 값 |
|---|
| 모달 배경 |
#fff |
R=0 (직각 철학), border: --charcoal |
| 모달 다크 상단 |
--charcoal |
100px 높이 |
| CTA 버튼 (주요) |
--red-brand |
#961E23, R=0 |
| 서브 버튼 (취소) |
--charcoal |
#1A1A1A, R=0 |
| 입력 필드 |
rgba(26,26,26,0.12) border |
R=0, 12px font, 10-14px padding |
| 닫기 버튼 |
× 아이콘 |
rgba(255,255,255,0.4), 14px |
| 모달 타이틀 |
--sans 14px 700 |
--charcoal, center align |
| 안내 텍스트 |
--sans 12px |
--text-secondary, line-height 1.6 |
| 1 |
비밀번호 입력 모달 |
- 노출 조건
- 거래 관리 리스트 화면에서 '고객 정보 열기' 또는 '비밀' 클릭 시
- 거래 상세 화면 진입 시 (비밀번호 요구 시점)
- 구성
- 다크톤 : 비밀번호(이전전달화면하기) 토스트 노출
- 하단영역 : 비밀번호 입력 폼 + 입력 필드
- 취소 버튼 / 상세보기 버튼
- 동작
- 비밀번호 정확히 입력 시
- 서버단에 비밀번호 검증 API 호출
- 성공 시 → 모달 닫기 + 상세 화면 진입
- 실패 시 → 오류 메시지 표시
- 취소 클릭 시 → 모달 닫기
- X 버튼 클릭 시 → 모달 닫기
|
| 2 |
엑셀 다운로드 요청하기 모달 |
- 노출 조건
- 거래 관리 확인 화면에서 [엑셀 다운로드] 클릭 시 모달 노출
- 구성
- 다크톤 : 다운로드 안내 텍스트
- 사유 입력 필드
- 취소 / 요청하기 버튼
- 동작
- [요청하기] 클릭 시
- 사유를 입력값 검증
- 성공 시 모달 닫기 + "사유를 입력해주세요" 토스트 노출
- 추후 후 요청 완료 시 다운 다운로드 비밀번호 발급
- [취소] 클릭 시 → 모달 닫기
|
| 3 |
거래 상태 변경하기 모달 |
- 노출 조건
- 거래 상세 화면에서 상태 변경(드롭다운에서) 상태 변경 시
- 수정 요청 버튼 클릭 후 비밀번호 확인시 노출
- 구성
- 타이틀 : 거래 상태 변경하기
- 비밀번호 입력 필드
- 취소 / 변경 버튼
- 동작
- [변경] 클릭 시
- 비밀번호 검증 API 호출
- 성공 → 상태 변경 처리 + 성공 토스트 노출
- 실패 → 오류 메시지 표시
- [취소] 클릭 시 → 모달 닫기 + 상태 원복
|
| 4 |
거래 정보 수정 안내 모달 |
- 노출 조건
- 구성
- 메시지 : "거래 정보를 수정하시겠습니까?"
- 취소 / 수정 버튼
- 동작
- [수정] 클릭 시
- 비밀번호 입력 모달 → 성공 시 실제 수정 API 호출
- 성공 시 모달 닫기 + 성공 토스트
- [취소] 클릭 시 → 모달 닫기
|
| 5 |
페이지 이동 안내 모달 |
- 노출 조건
- 거래 상세 화면에서 데이터 수정 후 다른 페이지로 이동 시
- 구성
- 메시지 : "수정된 정보가 있습니다. 이동하시겠습니까?"
- 취소 / 이동 버튼
- 동작
- [이동] 클릭 시
- [취소] 클릭 시
- 모달 닫기 + 현재 화면 유지 (수정 내용 보존)
|
| 6 |
토스트 메시지 정의 |
- 성공
- "이동이 완료되었습니다."
- "거래 상태가 변경되었습니다."
- "엑셀 다운로드가 요청되었습니다."
- 오류/실패
- "비밀번호가 일치하지 않습니다."
- "요청 처리에 실패했습니다."
- "사유를 입력해 주세요."
- "거래 내용이 없습니다."
- "거래 수정이 완료되었습니다."
- "거래 줄임표, 잠시만 기다려주세요."
|
| 7 |
공통 규칙 |
- 모달 공통 동작
- 모든 모달은 화면 정중앙 절대 위치
- ESC 키 입력 시 모달 닫힘
- 모달 외부(오버레이) 클릭 시 닫힘 여부는 정책에 따름 (비밀번호 모달은 외부 클릭시 닫기 불가)
- 버튼 규칙
- 좌측 버튼은 항상 '취소' 서브 액션 (다크 배경)
- 우측 버튼은 주요 CTA (오렌지/브랜드)
- 다른 화면 시 활성화 시 각종 제한을 설정 가능
|