관리자 화면 · 백오피스 작품 관리

작품 관리 메인 — 각종 모달

BO-ART-004 · 2026. 03. 04

화면 이름 작품 관리 메인 - 각종 모달
화면 위치 백오피스 로그인 진입 > 작품 관리 > 각종 모달
화면 ID BO-ART-004
작성일 2026. 02. 26
1
×

엑셀 다운로드 요청하기

사유를 입력해주세요.
취소
요청하기
2
×

비밀번호 입력

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

작품 정보 수정 안내

작품 정보를 수정하시겠습니까?

취소
수정
4

페이지 이동 안내

수정된 정보가 있습니다.
이동하시겠습니까?

취소
이동
5

작품 정보 등록 안내

이대로 작품을 등록하시겠습니까?

취소
등록
6

작품 등록 취소 안내

등록을 취소하면
입력한 정보가 사라집니다

취소
등록 취소
7

페이지 이동 안내

입력된 정보가 있습니다.
이동하시겠습니까?

취소
이동
Description
1 엑셀 다운로드 요청 시 노출 모달
  • 노출 조건: 작품 관리 화면에서 [엑셀 다운로드] 클릭 시 모달 노출
  • 구성
    • 사유 입력란: 엑셀 다운로드 요청 사유 입력
    • 다운로드 요청 사이 길이
    • 입력 시 요청 밸리 + 요청 현황 포스트 노출
  • 취소: 모달 닫기
  • 요청하기: 사유 미입력 시 "사유를 입력해주세요." 토스트 노출, 이미 입력 다시 검의 요청해 시 요청 완료 토스트
2 비밀번호 입력 모달
  • 노출 조건: BO-ART-002에서 [수정하기] 클릭 시 모달 노출
  • 구성: 비밀번호 입력 필드 + 확인 버튼
  • 동작
    • 비밀번호 입력 후 [확인] 클릭
    • 일치: 편집 모드 진입
    • 불일치: 에러 메시지 표시
3 작품 정보 수정 안내 노출 모달
  • 노출 조건: 작품 상세 편집에서 저장 버튼 클릭 시
  • 메시지: "작품 정보를 수정하시겠습니까?"
  • 취소: 모달 닫기 + 현재 화면 유지
  • 수정: API 호출 → 성공 시 상세보기 갱신
4 페이지 이동 안내 노출 모달
  • 노출 조건: 수정된 정보가 있는 상태에서 다른 페이지 이동 시
  • 메시지: "수정된 정보가 있습니다. 이동하시겠습니까?"
  • 취소: 모달 닫기 + 현재 화면 유지
  • 이동: 변경사항 버리고 이전 화면 이동
5 작품 정보 등록 안내 노출 모달
  • 노출 조건: BO-ART-003(작품 업로드)에서 [작품 업로드 하기] 클릭 시 필수값 검증 후 노출
  • 메시지: "이대로 작품을 등록하시겠습니까?"
  • 취소: 모달 닫기
  • 등록: 서버 전송 → 성공 시 BO-ART-001로 이동 + 토스트
  • 실패 시: "작품 등록에 실패했습니다. 다시 시도해주세요." 토스트
6 작품 등록 취소 안내 노출 모달
  • 노출 조건: BO-ART-003에서 [취소] 버튼 클릭 시
  • 메시지: "등록을 취소하면 입력한 정보가 사라집니다."
  • 취소: 모달 닫기 (폼 유지)
  • 등록 취소: 입력 데이터 초기화 + 이전 화면(BO-ART-001) 이동
7 작품 등록 내 페이지 이동 안내 노출 모달
  • 노출 조건: BO-ART-003에서 뒤로가기(산 넘기기) 버튼 클릭 시, 입력값이 존재하는 경우
  • 메시지: "입력된 정보가 있습니다. 이동하시겠습니까?"
  • 취소: 모달 닫기 + 현재 화면 유지
  • 이동: 입력값 버리고 BO-ART-001로 이동
8 토스트 메시지 정의
  • "작품이 등록되었습니다."
  • "작품 등록에 실패했습니다. 다시 시도해주세요."
  • "대량 등록이 실패했습니다."
  • "사유를 입력해주세요."
9 공통 규칙
  • 모든 모달은 딤(overlay) 배경 위에 중앙 정렬
  • ESC 키 또는 배경 클릭 시 모달 닫기
  • 모달 border-radius: 0 (직각 철학)
  • 버튼 영역은 하단 고정, 좌/우 분리

Design Output

UI 디자인 산출물

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

작품 관리 — 각종 모달
7개 모달 디자인 — 와이어프레임과 동일 구조
토큰 적용 사항은 하단 테이블 참조
Applied Design Tokens
요소Token값
모달 배경#fffR=0, border: --charcoal
딤 오버레이rgba(0,0,0,0.4)중앙 정렬
모달 타이틀--sans · 15~16px · 700--charcoal
모달 본문--sans · 13px--text-secondary
확인/수정/등록 버튼--charcoal bg#fff text, R=0
위험 액션 버튼--red-brand bg#fff text (등록 취소, 요청하기)
취소 버튼transparent bg--charcoal text
입력 필드border rgba(0,0,0,0.12)R=0, placeholder: --text-muted
닫기(X) 아이콘--text-muted16px, 우측 상단
Design Description

Update History

2026.03.04초기 디자인 작성
1 엑셀 다운로드 요청 시 노출 모달
  • 노출 조건: 작품 관리 화면에서 [엑셀 다운로드] 클릭 시 모달 노출
  • 구성
    • 사유 입력란: 엑셀 다운로드 요청 사유 입력
    • 다운로드 요청 사이 길이
    • 입력 시 요청 밸리 + 요청 현황 포스트 노출
  • 취소: 모달 닫기
  • 요청하기: 사유 미입력 시 "사유를 입력해주세요." 토스트 노출, 이미 입력 다시 검의 요청해 시 요청 완료 토스트
2 비밀번호 입력 모달
  • 노출 조건: BO-ART-002에서 [수정하기] 클릭 시 모달 노출
  • 구성: 비밀번호 입력 필드 + 확인 버튼
  • 동작
    • 비밀번호 입력 후 [확인] 클릭
    • 일치: 편집 모드 진입
    • 불일치: 에러 메시지 표시
3 작품 정보 수정 안내 노출 모달
  • 노출 조건: 작품 상세 편집에서 저장 버튼 클릭 시
  • 메시지: "작품 정보를 수정하시겠습니까?"
  • 취소: 모달 닫기 + 현재 화면 유지
  • 수정: API 호출 → 성공 시 상세보기 갱신
4 페이지 이동 안내 노출 모달
  • 노출 조건: 수정된 정보가 있는 상태에서 다른 페이지 이동 시
  • 메시지: "수정된 정보가 있습니다. 이동하시겠습니까?"
  • 취소: 모달 닫기 + 현재 화면 유지
  • 이동: 변경사항 버리고 이전 화면 이동
5 작품 정보 등록 안내 노출 모달
  • 노출 조건: BO-ART-003(작품 업로드)에서 [작품 업로드 하기] 클릭 시 필수값 검증 후 노출
  • 메시지: "이대로 작품을 등록하시겠습니까?"
  • 취소: 모달 닫기
  • 등록: 서버 전송 → 성공 시 BO-ART-001로 이동 + 토스트
  • 실패 시: "작품 등록에 실패했습니다. 다시 시도해주세요." 토스트
6 작품 등록 취소 안내 노출 모달
  • 노출 조건: BO-ART-003에서 [취소] 버튼 클릭 시
  • 메시지: "등록을 취소하면 입력한 정보가 사라집니다."
  • 취소: 모달 닫기 (폼 유지)
  • 등록 취소: 입력 데이터 초기화 + 이전 화면(BO-ART-001) 이동
7 작품 등록 내 페이지 이동 안내 노출 모달
  • 노출 조건: BO-ART-003에서 뒤로가기(산 넘기기) 버튼 클릭 시, 입력값이 존재하는 경우
  • 메시지: "입력된 정보가 있습니다. 이동하시겠습니까?"
  • 취소: 모달 닫기 + 현재 화면 유지
  • 이동: 입력값 버리고 BO-ART-001로 이동
8 토스트 메시지 정의
  • "작품이 등록되었습니다."
  • "작품 등록에 실패했습니다. 다시 시도해주세요."
  • "대량 등록이 실패했습니다."
  • "사유를 입력해주세요."
9 공통 규칙
  • 모든 모달은 딤(overlay) 배경 위에 중앙 정렬
  • ESC 키 또는 배경 클릭 시 모달 닫기
  • 모달 border-radius: 0 (직각 철학)
  • 버튼 영역은 하단 고정, 좌/우 분리
← 이전 화면: BO-ART-003 다음 화면: BO-INQ-001 →