관리자 화면 · 백오피스 문의 관리
작품 문의 관리 메인 — 각종 모달
BO-INQ-002 · 2026. 03. 04
2
×
작품 문의 상태 변경하기
상태를 선택해주세요.
상태를 선택해주세요. ▼
| 1 |
고객 정보 확인용 비밀번호 입력 모달 |
- 노출 조건
- 작품 문의 관리 리스트 화면에서 [고객 정보 확인] 버튼 클릭 시
- 구성
- 타이틀: 비밀번호 입력
- 입력 필드: 비밀번호
- 다운로드 요청 사이 길이
- 입력 시 요청 밸리 + 요청 현황 포스트 노출
- 확인 포스트 노출
- 동작
- 비밀번호 입력 후 [확인] 클릭
- 인증 성공: 고객 정보(연락처, 이메일) 원본 노출 + 상태 확인 컬럼 활성화
- [X] 클릭 시: 모달 닫기
- 비밀번호 인증 (공통)
- 인증 성공: 정보 노출 허용
- 인증 실패: "비밀번호가 일치하지 않습니다." 에러 메시지
- 5회 연속 실패: 일정 시간 입력 제한
|
| 2 |
작품 문의 상태 변경하기 모달 |
- 노출 조건
- 작품 문의 관리 화면에서 상태 변경 시
- 비밀번호 인증 완료 후에만 접근 가능
- 구성
- 타이틀: 작품 문의 상태 변경하기
- 입력 필드: 비밀번호
- 드롭다운: 상태 선택
- 하단 버튼: 취소 / 변경
- [변경] 클릭 시
- 비밀번호 + 상태 모두 입력 확인
- 상태 변경 처리 API 호출
- 성공: 리스트 갱신 + 모달 닫기
- 실패: 에러 토스트 노출
- 상태 드롭다운 항목
- 문의 접수 / 문의 확인 완료 / 고객 관심 노출 / 거래 진행중 / 거래 완료 / 거래 취소
|
| 3 |
토스트 메시지 정의 |
- 비밀번호 인증 (공통)
- 인증 성공: "인증이 완료되었습니다."
- 인증 실패: "비밀번호가 일치하지 않습니다."
- 5회 실패: "입력 횟수가 제한되었습니다. 잠시 후 다시 시도해주세요."
- 네트워크 오류: "인증 시간이 만료되었습니다. 다시 시도해주세요."
- 상태 변경
- 성공: "상태가 변경되었습니다."
- 실패: "상태 변경에 실패했습니다. 다시 시도해주세요."
- 미입력: "상태를 선택해주세요."
- 비밀번호 미입력: "비밀번호를 입력해주세요."
|
| 4 |
공통 규칙 |
- 모든 모달은 딤(overlay) 배경 위에 중앙 정렬
- ESC 키 또는 배경 클릭 시 모달 닫기
- 모달 border-radius: 0 (직각 철학)
- 비밀번호 필드는 마스킹 처리 (type=password)
- 상태 변경 시 기존 상태와 동일한 상태 선택 불가
- 모든 상태 변경은 히스토리/로그 기록 (auditLog-LLG 기록)
- 비밀번호 인증 유효 시간: 세션 기반 (페이지 이탈 시 만료)
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
2개 모달 디자인 — 와이어프레임과 동일 구조
토큰 적용 사항은 하단 테이블 참조
| 요소 | Token | 값 |
|---|
| 모달 배경 | #fff | R=0, border: --charcoal |
| 딤 오버레이 | rgba(0,0,0,0.4) | 중앙 정렬 |
| 모달 헤더 영역 | --charcoal bg | 70px height, 장식 영역 |
| 모달 타이틀 | --sans · 16px · 700 | --charcoal |
| 비밀번호 입력 | border rgba(0,0,0,0.12) | R=0, 36px height, type=password |
| 상태 드롭다운 | border rgba(0,0,0,0.12) | R=0, 36px height, placeholder: --text-muted |
| 확인/변경 버튼 | --charcoal bg | #fff text, R=0 |
| 취소 버튼 | transparent bg | --charcoal text |
| 닫기(X) 아이콘 | --text-muted | 16px, 우측 상단 |
| 안내 텍스트 | --text-muted | 11px, placeholder 스타일 |
| 1 |
고객 정보 확인용 비밀번호 입력 모달 |
- 노출 조건
- 작품 문의 관리 리스트 화면에서 [고객 정보 확인] 버튼 클릭 시
- 구성
- 타이틀: 비밀번호 입력
- 입력 필드: 비밀번호
- 다운로드 요청 사이 길이
- 입력 시 요청 밸리 + 요청 현황 포스트 노출
- 확인 포스트 노출
- 동작
- 비밀번호 입력 후 [확인] 클릭
- 인증 성공: 고객 정보(연락처, 이메일) 원본 노출 + 상태 확인 컬럼 활성화
- [X] 클릭 시: 모달 닫기
- 비밀번호 인증 (공통)
- 인증 성공: 정보 노출 허용
- 인증 실패: "비밀번호가 일치하지 않습니다." 에러 메시지
- 5회 연속 실패: 일정 시간 입력 제한
|
| 2 |
작품 문의 상태 변경하기 모달 |
- 노출 조건
- 작품 문의 관리 화면에서 상태 변경 시
- 비밀번호 인증 완료 후에만 접근 가능
- 구성
- 타이틀: 작품 문의 상태 변경하기
- 입력 필드: 비밀번호
- 드롭다운: 상태 선택
- 하단 버튼: 취소 / 변경
- [변경] 클릭 시
- 비밀번호 + 상태 모두 입력 확인
- 상태 변경 처리 API 호출
- 성공: 리스트 갱신 + 모달 닫기
- 실패: 에러 토스트 노출
- 상태 드롭다운 항목
- 문의 접수 / 문의 확인 완료 / 고객 관심 노출 / 거래 진행중 / 거래 완료 / 거래 취소
|
| 3 |
토스트 메시지 정의 |
- 비밀번호 인증 (공통)
- 인증 성공: "인증이 완료되었습니다."
- 인증 실패: "비밀번호가 일치하지 않습니다."
- 5회 실패: "입력 횟수가 제한되었습니다. 잠시 후 다시 시도해주세요."
- 네트워크 오류: "인증 시간이 만료되었습니다. 다시 시도해주세요."
- 상태 변경
- 성공: "상태가 변경되었습니다."
- 실패: "상태 변경에 실패했습니다. 다시 시도해주세요."
- 미입력: "상태를 선택해주세요."
- 비밀번호 미입력: "비밀번호를 입력해주세요."
|
| 4 |
공통 규칙 |
- 모든 모달은 딤(overlay) 배경 위에 중앙 정렬
- ESC 키 또는 배경 클릭 시 모달 닫기
- 모달 border-radius: 0 (직각 철학)
- 비밀번호 필드는 마스킹 처리 (type=password)
- 상태 변경 시 기존 상태와 동일한 상태 선택 불가
- 모든 상태 변경은 히스토리/로그 기록 (auditLog-LLG 기록)
- 비밀번호 인증 유효 시간: 세션 기반 (페이지 이탈 시 만료)
|