관리자 화면 · 백오피스 사용자 관리

사용자 관리 각종 모달

BO-USR-006 · 2026. 02. 26

화면 이름 사용자 관리 각종 모달
화면 위치 사용자 관리
화면 ID BO-USR-006
작성일 2026. 02. 26
1
×
비밀번호 입력
확인
2
×
엑셀 다운로드 요청하기
취소
요청하기
3
사용자 정보 수정 안내
사용자 정보를 수정하시겠습니까?
취소
수정
4
페이지 이동 안내
수정된 정보가 있습니다.
이동하시겠습니까?
취소
이동
Description
1 상세보기 비밀번호 입력 모달
  • 노출 조건
    • 관리자 계정의 BO-USR-001에서 [상세보기] 클릭 시 우선 노출
    • 보안 관련 인증이 매번 진행될 수도 노출
  • 구성
    • 타이틀: 비밀번호 입력
    • 비밀번호 input
    • 우측 상단 닫기(X)
    • 하단 확인 버튼
  • 동작
    • 비밀번호 입력 후 확인 클릭
      • 백엔드 비밀번호 인증 API 호출
      • 성공 시 사용자 상세 정보 페이지로 이동
      • 실패 시 "비밀번호가 일치하지 않습니다." 토스트
    • 닫기(X) 클릭 시 모달 닫힘, 리스트 화면 유지
2 엑셀 다운로드 요청하기 모달
  • 노출 조건
    • 사용자 관리 메인 화면에서 [엑셀 다운로드] 클릭 시 모달 노출
  • 구성
    • 타이틀: 엑셀 다운로드 요청하기
    • 사유 input
    • 버튼: 취소 / 요청하기
  • 동작
    • 취소 클릭 → 모달 닫기
    • 요청하기 클릭
      • 사유 입력 검증 → 미입력 시 "사유를 입력해주세요." 토스트
      • 성공 시 요청완료 토스트 + 모달 닫힘
      • 다운로드 실행 시 파일명에 요건 작성 포함
3 사용자 정보 수정 안내 모달
  • 노출 조건
    • 사용자 상세 화면에서 정보 변경 후 저장 버튼 클릭 시
  • 메시지: "사용자 정보를 수정하시겠습니까?"
  • 동작
    • 취소 → 모달 닫기
    • 수정 → 수정 API 호출
    • 성공 시 "수정되었습니다." 토스트
    • 실패 시 오류 토스트
4 페이지 이동 안내 모달
  • 노출 조건
    • 사용자 상세 편집에서 변경 사항이 발생 후
    • 페이지 이동(뒤로가기 또는 다른 메뉴 클릭) 시 모달 노출
  • 메시지: "수정된 정보가 있습니다. 이동하시겠습니까?"
  • 동작
    • 취소 → 모달 닫기 + 현재 화면 유지
    • 이동 → 변경 사항 버리고 해당 페이지로 이동
5 토스트 예제 정의
  • 보안 인증 완료: "비밀번호 확인이 완료되었습니다."
  • "비밀번호가 일치하지 않습니다."
  • "엑셀 다운로드 요청이 완료되었습니다."
  • "사용자 정보가 수정되었습니다."
  • "더미 데이터 / 실행 중 요청 상태입니다." (변동에 맞게 토스트 노출 가능)
  • 사용자 정보 수정 관련
    • "사용자 정보가 수정되었습니다."
6 공통 규칙
  • UI 타입 > 모달 팝업 (LG 사이즈/480px)
  • 다른 화면 앞 모달 노출 시 dim(어둡게) 적용
  • 모달 외부 클릭 시 모달 닫힘 (선택적)
  • 사용자 정보
    • 사용자 정보 변경 관리
    • 사용자 정보 탈퇴 기록
    • 사용자 정보 삭제 관련
  • 비밀번호 입력 모달
    • 엔터 키로 제출 가능
  • 전체 모달
    • ESC 키로 닫기 가능

Design Output

UI 디자인 산출물

사용자 관리 모달 4종의 CHAART OS 디자인 토큰 적용.

비밀번호 입력
비밀번호를 입력해주세요.
확인
엑셀 다운로드 요청하기
사유를 입력해주세요.
취소
요청하기
사용자 정보 수정 안내
사용자 정보를 수정하시겠습니까?
취소
수정
페이지 이동 안내
수정된 정보가 있습니다.
이동하시겠습니까?
취소
이동
Applied Design Tokens
요소Token값
모달 배경--bg#FAFAF8, R=0
모달 보더rgba(26,26,26,0.07)1px solid, 직각
모달 타이틀--sans 16px 700Pretendard, --charcoal, letter-spacing -0.02em
모달 본문--sans 13px--text-secondary
Input 필드--bg + borderR=0, rgba(26,26,26,0.12) border
확인/수정/이동 버튼--charcoal bgR=0, #fff text, 14px 600
취소 버튼--neutral-90 bgR=0, --charcoal text
닫기 아이콘X mark · square/miter16px, stroke-width 1.5, --charcoal
오버레이(dim)rgba(0,0,0,0.4)모달 뒤 어두운 배경
Design Description

Update History

2026.02.26초기 디자인 작성
1 상세보기 비밀번호 입력 모달
  • 노출 조건
    • 관리자 계정의 BO-USR-001에서 [상세보기] 클릭 시 우선 노출
    • 보안 관련 인증이 매번 진행될 수도 노출
  • 구성
    • 타이틀: 비밀번호 입력
    • 비밀번호 input
    • 우측 상단 닫기(X)
    • 하단 확인 버튼
  • 동작
    • 비밀번호 입력 후 확인 클릭
      • 백엔드 비밀번호 인증 API 호출
      • 성공 시 사용자 상세 정보 페이지로 이동
      • 실패 시 "비밀번호가 일치하지 않습니다." 토스트
    • 닫기(X) 클릭 시 모달 닫힘, 리스트 화면 유지
2 엑셀 다운로드 요청하기 모달
  • 노출 조건
    • 사용자 관리 메인 화면에서 [엑셀 다운로드] 클릭 시 모달 노출
  • 구성
    • 타이틀: 엑셀 다운로드 요청하기
    • 사유 input
    • 버튼: 취소 / 요청하기
  • 동작
    • 취소 클릭 → 모달 닫기
    • 요청하기 클릭
      • 사유 입력 검증 → 미입력 시 "사유를 입력해주세요." 토스트
      • 성공 시 요청완료 토스트 + 모달 닫힘
      • 다운로드 실행 시 파일명에 요건 작성 포함
3 사용자 정보 수정 안내 모달
  • 노출 조건
    • 사용자 상세 화면에서 정보 변경 후 저장 버튼 클릭 시
  • 메시지: "사용자 정보를 수정하시겠습니까?"
  • 동작
    • 취소 → 모달 닫기
    • 수정 → 수정 API 호출
    • 성공 시 "수정되었습니다." 토스트
    • 실패 시 오류 토스트
4 페이지 이동 안내 모달
  • 노출 조건
    • 사용자 상세 편집에서 변경 사항이 발생 후
    • 페이지 이동(뒤로가기 또는 다른 메뉴 클릭) 시 모달 노출
  • 메시지: "수정된 정보가 있습니다. 이동하시겠습니까?"
  • 동작
    • 취소 → 모달 닫기 + 현재 화면 유지
    • 이동 → 변경 사항 버리고 해당 페이지로 이동
5 토스트 예제 정의
  • 보안 인증 완료: "비밀번호 확인이 완료되었습니다."
  • "비밀번호가 일치하지 않습니다."
  • "엑셀 다운로드 요청이 완료되었습니다."
  • "사용자 정보가 수정되었습니다."
  • "더미 데이터 / 실행 중 요청 상태입니다." (변동에 맞게 토스트 노출 가능)
  • 사용자 정보 수정 관련
    • "사용자 정보가 수정되었습니다."
6 공통 규칙
  • UI 타입 > 모달 팝업 (LG 사이즈/480px)
  • 다른 화면 앞 모달 노출 시 dim(어둡게) 적용
  • 모달 외부 클릭 시 모달 닫힘 (선택적)
  • 사용자 정보
    • 사용자 정보 변경 관리
    • 사용자 정보 탈퇴 기록
    • 사용자 정보 삭제 관련
  • 비밀번호 입력 모달
    • 엔터 키로 제출 가능
  • 전체 모달
    • ESC 키로 닫기 가능
← 이전 화면: BO-USR-005 다음 화면: BO-ART-001 →