관리자 화면 · 백오피스 문의 관리

작품 문의 관리 메인 — 각종 모달

BO-INQ-002 · 2026. 03. 16

화면 이름 작품 문의 관리 메인 - 각종 모달

화면 위치 백오피스 로그인 진입 > 작품 문의 관리 > 각종 모달

화면 ID BO-INQ-002

작성일 2026. 03. 16

비밀번호 입력

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

확인

작품 문의 상태 변경하기

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

상태를 선택해주세요.

상태를 선택해주세요. ▼

취소

변경

Description

1	고객 정보 확인 버튼 클릭 시, 노출되는 모달	노출 조건 작품 문의 관리 메인 화면에서 [고객 정보 확인] 버튼 클릭 시 노출 현재 활성 탭 기준 마켓 프라이빗 세일(구해요) 프라이빗 세일(팔아요) 타입명: 비밀번호 입력 입력 필드: 비밀번호 버튼: 확인 [확인] 클릭 시 비밀번호 검증 API 호출 검증 성공 시 사용자 고객 정보 조회 권한 확인 후 고객 정보 확인 기능 수행 검증 실패 시 오류 토스트 노출 닫기(X) 클릭 시 모달 닫힘 규칙 고객 정보 확인은 현재 활성 탭에서 조회 중인 문의 데이터 기준으로 수행 비밀번호 미입력 시 확인 불가 권한이 없는 경우 고객 정보 확인 불가 모달 닫힘 후 현재 화면 상태 유지
2	작품 문의 상태 변경 시, 노출되는 모달	노출 조건 작품 문의 관리 메인 화면에서 상태값 변경 시도 시 노출 대상 탭 마켓 프라이빗 세일(구해요) 프라이빗 세일(팔아요) 타입명: 작품 문의 상태 변경하기 입력 필드: 비밀번호 버튼 취소 변경 리스트의 상태 드롭다운 값 변경 시 해당 모달 노출 [변경] 클릭 시 비밀번호 검증 API 호출 검증 성공 후 상태 변경 API 호출 성공 시 상태값 즉시 반영 답변 완료 변경 시 답변 일시 반영 가능 답변 미완료 변경 시 답변 일시 초기화 가능 상태 변경 취소 기존 상태값으로 복원 닫기(X) 클릭 시 모달 닫힘 기존 상태 유지 상태 변경은 현재 활성 탭의 문의 row 기준으로만 수행 상태값은 운영 정책상 허용된 값만 사용 답변 미완료 답변완료 상태 변경 이력은 Backoffice LOG에 기록
3	토스트 메세지 정의	비밀번호 인증 공통 비밀번호를 입력해주세요. 비밀번호가 일치하지 않습니다. 비밀번호를 입력해주세요. 인증에 실패했습니다. 다시 시도해주세요. 고객 정보 조회 중 오류가 발생했습니다. 고객 정보 조회에 실패했습니다. 고객 정보를 조회했습니다. 작품 문의 상태 변경 관련 상태 변경이 완료되었습니다. 상태 변경에 실패했습니다. 상태 변경 중 오류가 발생했습니다. 다시 시도해주세요. 선택한 상태와 동일합니다. 상태 변경 권한이 없습니다. 요청을 처리 중입니다. 잠시만 기다려주세요. API 요청 중 오류가 발생했습니다. 네트워크 오류가 발생했습니다. 일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요. 권한 관련 권한이 없습니다. 작업을 진행할 수 없습니다.
4	공통 규칙	모달 기본 정책 모든 모달은 중앙 정렬 팝업 구조 ESC 키 또는 외부영역 클릭 정책은 운영정책 기준 적용 모달 중복 호출 방지 모달 오픈 시 포커스는 비밀번호 입력 필드 우선 작품 문의 관리 메인은 아래 3개 탭으로 운영 마켓 프라이빗 세일(구해요) 프라이빗 세일(팔아요) 각 탭은 서로 다른 리스트/컬럼 구조를 가지지만, 모달 호출 방식은 공통으로 유지 비밀번호 인증 정책 비밀번호 인증은 관리자 본인 인증 용도 인증 성공 시 요청 중인 기능 실행 인증 실패 시 기능 차단 인증 성공 시점 유효시간은 운영정책 기준 적용 가능 세션 만료 시 재인증 필요 고객 정보 확인은 개인정보 접근 권한 보유 사용자만 가능 기본 식별 정보 노출 범위 문의자 연락처 문의자명 문의자 아이디(이메일) 모든 조회 행위는 Backoffice LOG 기록 상태 변경 정책 상태 변경은 현재 활성 탭의 문의 row에만 적용 상태 변경 시 상태값 및 답변 일시 연동 가능 답변 완료 → 답변 일시 기록 가능 답변 미완료 → 답변 일시 초기화 가능 상태 변경 권한 없는 경우 변경 불가 상태 변경 이력은 모두 LOG 기록 모달 실행 결과는 API 성공 응답 이후 UI 반영 실패 시 리스트 상태 유지 리스트 재조회 시 서버 반영값 기준으로 동기화 LOG 정책 인증 시도 및 결과 고객정보 조회 요청 상태 변경 요청 및 결과 탭 정보(마켓 / 프라이빗 세일(구해요) / 프라이빗 세일(팔아요)) 포함 기록 가능 비밀번호 입력 필드는 마스킹 처리 비밀번호 재사용 저장 금지 관리자 인증용 팝업만 사용 개발자도구 노출 시 민감 정보 평문 출력 금지 UX 일관성 정책 모든 모달 버튼 텍스트 통일 취소 확인 / 변경 상태 변경 성공 후 리스트 상태 즉시 반영 제어 후 현재 화면 유지

Design Output

UI 디자인 산출물

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

작품 문의 관리 — 각종 모달

2개 모달 디자인 — 와이어프레임과 동일 구조
토큰 적용 사항은 하단 테이블 참조

Applied Design Tokens

요소	Token	값
모달 배경	#fff	R=0, border: `--charcoal`
딤 오버레이	rgba(0,0,0,0.4)	중앙 정렬
모달 헤더 영역	`--charcoal` bg	70px height, 장식 영역
모달 타이틀	`--sans` · 16px · 700	`--charcoal`
비밀번호 입력	border var(--alpha-12)	R=0, 36px height, type=password
상태 드롭다운	border var(--alpha-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 스타일

Design Description

Update History

2026.03.19인라인 스타일 → sb-dp-thumb-texture 클래스 전환

2026.03.04초기 디자인 작성

1	고객 정보 확인 버튼 클릭 시, 노출되는 모달	노출 조건 작품 문의 관리 메인 화면에서 [고객 정보 확인] 버튼 클릭 시 노출 현재 활성 탭 기준 마켓 프라이빗 세일(구해요) 프라이빗 세일(팔아요) 타입명: 비밀번호 입력 입력 필드: 비밀번호 버튼: 확인 [확인] 클릭 시 비밀번호 검증 API 호출 검증 성공 시 사용자 고객 정보 조회 권한 확인 후 고객 정보 확인 기능 수행 검증 실패 시 오류 토스트 노출 닫기(X) 클릭 시 모달 닫힘 규칙 고객 정보 확인은 현재 활성 탭에서 조회 중인 문의 데이터 기준으로 수행 비밀번호 미입력 시 확인 불가 권한이 없는 경우 고객 정보 확인 불가 모달 닫힘 후 현재 화면 상태 유지
2	작품 문의 상태 변경 시, 노출되는 모달	노출 조건 작품 문의 관리 메인 화면에서 상태값 변경 시도 시 노출 대상 탭 마켓 프라이빗 세일(구해요) 프라이빗 세일(팔아요) 타입명: 작품 문의 상태 변경하기 입력 필드: 비밀번호 버튼 취소 변경 리스트의 상태 드롭다운 값 변경 시 해당 모달 노출 [변경] 클릭 시 비밀번호 검증 API 호출 검증 성공 후 상태 변경 API 호출 성공 시 상태값 즉시 반영 답변 완료 변경 시 답변 일시 반영 가능 답변 미완료 변경 시 답변 일시 초기화 가능 상태 변경 취소 기존 상태값으로 복원 닫기(X) 클릭 시 모달 닫힘 기존 상태 유지 상태 변경은 현재 활성 탭의 문의 row 기준으로만 수행 상태값은 운영 정책상 허용된 값만 사용 답변 미완료 답변완료 상태 변경 이력은 Backoffice LOG에 기록
3	토스트 메세지 정의	비밀번호 인증 공통 비밀번호를 입력해주세요. 비밀번호가 일치하지 않습니다. 비밀번호를 입력해주세요. 인증에 실패했습니다. 다시 시도해주세요. 고객 정보 조회 중 오류가 발생했습니다. 고객 정보 조회에 실패했습니다. 고객 정보를 조회했습니다. 작품 문의 상태 변경 관련 상태 변경이 완료되었습니다. 상태 변경에 실패했습니다. 상태 변경 중 오류가 발생했습니다. 다시 시도해주세요. 선택한 상태와 동일합니다. 상태 변경 권한이 없습니다. 요청을 처리 중입니다. 잠시만 기다려주세요. API 요청 중 오류가 발생했습니다. 네트워크 오류가 발생했습니다. 일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요. 권한 관련 권한이 없습니다. 작업을 진행할 수 없습니다.
4	공통 규칙	모달 기본 정책 모든 모달은 중앙 정렬 팝업 구조 ESC 키 또는 외부영역 클릭 정책은 운영정책 기준 적용 모달 중복 호출 방지 모달 오픈 시 포커스는 비밀번호 입력 필드 우선 작품 문의 관리 메인은 아래 3개 탭으로 운영 마켓 프라이빗 세일(구해요) 프라이빗 세일(팔아요) 각 탭은 서로 다른 리스트/컬럼 구조를 가지지만, 모달 호출 방식은 공통으로 유지 비밀번호 인증 정책 비밀번호 인증은 관리자 본인 인증 용도 인증 성공 시 요청 중인 기능 실행 인증 실패 시 기능 차단 인증 성공 시점 유효시간은 운영정책 기준 적용 가능 세션 만료 시 재인증 필요 고객 정보 확인은 개인정보 접근 권한 보유 사용자만 가능 기본 식별 정보 노출 범위 문의자 연락처 문의자명 문의자 아이디(이메일) 모든 조회 행위는 Backoffice LOG 기록 상태 변경 정책 상태 변경은 현재 활성 탭의 문의 row에만 적용 상태 변경 시 상태값 및 답변 일시 연동 가능 답변 완료 → 답변 일시 기록 가능 답변 미완료 → 답변 일시 초기화 가능 상태 변경 권한 없는 경우 변경 불가 상태 변경 이력은 모두 LOG 기록 모달 실행 결과는 API 성공 응답 이후 UI 반영 실패 시 리스트 상태 유지 리스트 재조회 시 서버 반영값 기준으로 동기화 LOG 정책 인증 시도 및 결과 고객정보 조회 요청 상태 변경 요청 및 결과 탭 정보(마켓 / 프라이빗 세일(구해요) / 프라이빗 세일(팔아요)) 포함 기록 가능 비밀번호 입력 필드는 마스킹 처리 비밀번호 재사용 저장 금지 관리자 인증용 팝업만 사용 개발자도구 노출 시 민감 정보 평문 출력 금지 UX 일관성 정책 모든 모달 버튼 텍스트 통일 취소 확인 / 변경 상태 변경 성공 후 리스트 상태 즉시 반영 제어 후 현재 화면 유지

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