관리자 화면 · 백오피스 공통

GNB / 헤더 (알림 버튼 / 관리자 정보)

BO-ETC-001 · 2026. 02. 27

화면 이름 GNB / 헤더 (알림 버튼 / 관리자 정보)
화면 위치 백오피스 로그인 진입
화면 ID BO-ETC-001
작성일 2026. 02. 27
사용자 관리
joonyoob.kim joonyoob.kim@chaart.co
CHRT.
사용자 관리
작품 관리
거래 관리
작품 문의 관리
1

메인 콘텐츠 영역

(각 메뉴별 화면이 이 영역에 표시됩니다)

2
3
Description
0 화면 접근 조건
  • 백오피스 로그인 완료 사용자만 접근 가능
  • 인증 세션 유효 상태에서만 헤더 기능 활성화
  • 권한(Role) 기준으로 알림 유형 노출 범위 달라짐
1 GNB
  • 구성
    • 상단 로고 영역
      • 클릭 시 백오피스 메인(기본 랜딩 화면)으로 이동
      • 사용자 관리
      • 작품 관리
      • 거래 관리
      • 작품 문의 관리
      • (추후 메뉴 확장 가능 구조)
    • 현재 접속 메뉴 활성화 상태 표시
    • 권한이 없는 메뉴는
      • 비노출 또는 비활성 처리 (운영 정책에 따름)
      • 해당 메뉴 메인 화면으로 이동
      • 이전 검색 조건은 유지하지 않음 (메뉴 전환 기준 초기화)
2 알림(아이콘) 버튼
  • 노출 위치
    • 헤더 우측 상단 종 아이콘 형태
    • 클릭 시 하단 드롭다운 방식으로 알림 리스트 노출
    • 외부 영역 클릭 시 닫힘
    • 읽지 않은 알림 존재 시 뱃지 표시
  • 알림 유형 정책
    • 슈퍼관리자
      • 엑셀 다운로드 승인 요청
      • 주요 상태 변경 발생
      • 승인 대기 요청
      • 시스템 중요 이벤트
      • 본인 요청에 대한 승인 결과
      • 본인이 속한 메뉴의 상태 변경
      • 처리 대상 변경 발생
      • 시스템 알림 (권한 범위 내)
    • 알림 리스트 구조
      • 기본 10개 노출
      • 하단 "더보기" 버튼 클릭 시 10개 추가 로딩
      • 최대 50개까지 노출
      • 50개 초과 시 더 이상 로드하지 않음
      • 클릭 시 해당 메뉴 메인 화면으로 이동
      • 관련 데이터가 존재할 경우 필터 자동 적용 가능 (추후 확장 고려)
      • 이동 후 해당 알림 읽음 처리
    • 확장 계획 (추후 개발 예정)
      • 알림 전체 내역 조회 전용 화면 구성 예정
      • 기간별 조회 / 유형 필터 / 읽음 처리 기능 포함 예정
3 관리자 정보
  • 구성
    • 관리자 이름
    • 관리자 이메일
    • 드롭다운 아이콘
    • 클릭 시 드롭다운 노출
    • 현재 구성:
      • 로그아웃 버튼
    • 클릭 시 로그아웃 API 호출
    • 세션 삭제
    • 로그인 화면으로 이동
    • 로그아웃 이력 로그 적재
4 토스트 메세지 정의
  • 알림 관련
    • 알림 로딩 실패
      • 알림을 불러오지 못했습니다.
      • 추가 알림을 불러오지 못��습니다.
    • 알림 이동 실패
      • 해당 화면으로 이동할 수 없습니다.
    • 로그아웃 되었습니다.
    • 로그아웃 처리 중 오류가 발생했습니다.
5 타이틀
  • 접근 및 권한 정책
    • GNB 및 헤더 영역은 로그인 사용자만 접근 가능
    • 모든 메뉴 노출은 Role 기반 권한 제어
    • 권한이 없는 메뉴는
      • 비노출 또는 비활성 처리 (운영 정책 기준)
    • 데이터 기준
      • 모든 알림 데이터는 서버 기준 생성
      • 알림 발생 시점 기준으로 정렬 (최신순)
      • 중복 알림 방지 로직 적용
      • 기본 10개 노출
      • 더보기 클릭 시 10개 단위 추가 로드
      • 최대 50개까지 노출
      • 50개 초과 데이터는 드롭다운에서 조회하지 않음
    • 읽음 처리 정책
      • 알림 클릭 시 읽음 처리
      • 동일 알림 재클릭 시 중복 이동 방지 가능
      • 읽지 않은 알림은 뱃지로 표시
      • 알림 클릭 시 해당 메뉴 메인 화면으로 이동
      • 이동 실패 시 토스트 노출
      • 권한 없는 메뉴 알림은 노출되지 않음
    • 확장 정책 (향후)
      • 알림 전용 이력 관리 화면 추가 예정
      • 필터 기능(기간 / 유형 / 읽음 여부) 확장 가능 구조
      • 중요도(High/Normal) 체계 도입 가능 구조
    • 관리자 이름 / 이메일은 로그인 세션 기준 렌더링
    • 로그아웃은 서버 세션 완전 종료 기준
    • 세션 만료 시 자동 로그인 화면 이동
    • 관리자 정보 변경은 별도 화면에서 관리 (현재 범위 제외)
  • UI 일관성 정책
    • GNB는 모든 백오피스 화면에서 동일 구조 유지
    • 메뉴 선택 시 현재 메뉴 활성 상태 유지
    • 페이지 이동 시 헤더 영역은 리렌더링하지 않음 (SPA 기준)
    • 헤더 영역은 레이아웃 고정
    • 알림 조회는 비동기 API 처리
    • 로딩 중 중복 클릭 방지
    • API 실패 시 기존 데이터 유지
    • 비정상 응답 시 알림 목록 갱신하지 않음
  • 로그 정책
    • 메뉴 이동
    • 알림 클릭
    • 로그아웃

Design Output

UI 디자인 산출물

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

사용자 관리
joonyoob.kim joonyoob.kim@chaart.co
CHRT.
사용자 관리
작품 관리
거래 관리
작품 문의 관리

메인 콘텐츠 영역

MAIN CONTENT AREA

Applied Design Tokens
요소Token값
사이드바 배경 --charcoal #1A1A1A, 160px 고정
사이드바 로고 CHRT + --red-brand dot 16px, 700 weight, 28px 하단 여백
활성 메뉴 #fff + rgba(255,255,255,0.08) bg 600 weight, 10px 상하 패딩
비활성 메뉴 rgba(255,255,255,0.45) 일반 weight, 동일 패딩
헤더 배경 --bg 44px 고정 높이, border-bottom 0.08
알림 아이콘 bell SVG · square/miter --charcoal, 18px, stroke 1.5
알림 뱃지 --red-brand 7px 원형, 우상단 절대 배치
관리자 이름 --sans 12px 600 --charcoal
관리자 이메일 --mono 11px --text-muted, letter-spacing 0.02em
드롭다운 화살표 chevron-down · square --text-muted, 10px, stroke 2
메인 영역 배경 --bg #FAFAF8
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 백오피스 로그인 완료 사용자만 접근 가능
  • 인증 세션 유효 상태에서만 헤더 기능 활성화
  • 권한(Role) 기준으로 알림 유형 노출 범위 달라짐
1 GNB
  • 구성
    • 상단 로고 영역
      • 클릭 시 백오피스 메인(기본 랜딩 화면)으로 이동
      • 사용자 관리
      • 작품 관리
      • 거래 관리
      • 작품 문의 관리
      • (추후 메뉴 확장 가능 구조)
    • 현재 접속 메뉴 활성화 상태 표시
    • 권한이 없는 메뉴는
      • 비노출 또는 비활성 처리 (운영 정책에 따름)
      • 해당 메뉴 메인 화면으로 이동
      • 이전 검색 조건은 유지하지 않음 (메뉴 전환 기준 초기화)
2 알림(아이콘) 버튼
  • 노출 위치
    • 헤더 우측 상단 종 아이콘 형태
    • 클릭 시 하단 드롭다운 방식으로 알림 리스트 노출
    • 외부 영역 클릭 시 닫힘
    • 읽지 않은 알림 존재 시 뱃지 표시
  • 알림 유형 정책
    • 슈퍼관리자
      • 엑셀 다운로드 승인 요청
      • 주요 상태 변경 발생
      • 승인 대기 요청
      • 시스템 중요 이벤트
      • 본인 요청에 대한 승인 결과
      • 본인이 속한 메뉴의 상태 변경
      • 처리 대상 변경 발생
      • 시스템 알림 (권한 범위 내)
    • 알림 리스트 구조
      • 기본 10개 노출
      • 하단 "더보기" 버튼 클릭 시 10개 추가 로딩
      • 최대 50개까지 노출
      • 50개 초과 시 더 이상 로드하지 않음
      • 클릭 시 해당 메뉴 메인 화면으로 이동
      • 관련 데이터가 존재할 경우 필터 자동 적용 가능 (추후 확장 고려)
      • 이동 후 해당 알림 읽음 처리
    • 확장 계획 (추후 개발 예정)
      • 알림 전체 내역 조회 전용 화면 구성 예정
      • 기간별 조회 / 유형 필터 / 읽음 처리 기능 포함 예정
3 관리자 정보
  • 구성
    • 관리자 이름
    • 관리자 이메일
    • 드롭다운 아이콘
    • 클릭 시 드롭다운 노출
    • 현재 구성:
      • 로그아웃 버튼
    • 클릭 시 로그아웃 API 호출
    • 세션 삭제
    • 로그인 화면으로 이동
    • 로그아웃 이력 로그 적재
4 토스트 메세지 정의
  • 알림 관련
    • 알림 로딩 실패
      • 알림을 불러오지 못했습니다.
      • 추가 알림을 불러오지 못��습니다.
    • 알림 이동 실패
      • 해당 화면으로 이동할 수 없습니다.
    • 로그아웃 되었습니다.
    • 로그아웃 처리 중 오류가 발생했습니다.
5 타이틀
  • 접근 및 권한 정책
    • GNB 및 헤더 영역은 로그인 사용자만 접근 가능
    • 모든 메뉴 노출은 Role 기반 권한 제어
    • 권한이 없는 메뉴는
      • 비노출 또는 비활성 처리 (운영 정책 기준)
    • 데이터 기준
      • 모든 알림 데이터는 서버 기준 생성
      • 알림 발생 시점 기준으로 정렬 (최신순)
      • 중복 알림 방지 로직 적용
      • 기본 10개 노출
      • 더보기 클릭 시 10개 단위 추가 로드
      • 최대 50개까지 노출
      • 50개 초과 데이터는 드롭다운에서 조회하지 않음
    • 읽음 처리 정책
      • 알림 클릭 시 읽음 처리
      • 동일 알림 재클릭 시 중복 이동 방지 가능
      • 읽지 않은 알림은 뱃지로 표시
      • 알림 클릭 시 해당 메뉴 메인 화면으로 이동
      • 이동 실패 시 토스트 노출
      • 권한 없는 메뉴 알림은 노출되지 않음
    • 확장 정책 (향후)
      • 알림 전용 이력 관리 화면 추가 예정
      • 필터 기능(기간 / 유형 / 읽음 여부) 확장 가능 구조
      • 중요도(High/Normal) 체계 도입 가능 구조
    • 관리자 이름 / 이메일은 로그인 세션 기준 렌더링
    • 로그아웃은 서버 세션 완전 종료 기준
    • 세션 만료 시 자동 로그인 화면 이동
    • 관리자 정보 변경은 별도 화면에서 관리 (현재 범위 제외)
  • UI 일관성 정책
    • GNB는 모든 백오피스 화면에서 동일 구조 유지
    • 메뉴 선택 시 현재 메뉴 활성 상태 유지
    • 페이지 이동 시 헤더 영역은 리렌더링하지 않음 (SPA 기준)
    • 헤더 영역은 레이아웃 고정
    • 알림 조회는 비동기 API 처리
    • 로딩 중 중복 클릭 방지
    • API 실패 시 기존 데이터 유지
    • 비정상 응답 시 알림 목록 갱신하지 않음
  • 로그 정책
    • 메뉴 이동
    • 알림 클릭
    • 로그아웃
← 이전 화면: BO-USR-006 다음 화면 →