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

작품 관리 메인 — 각종 모달

BO-ART-004 · 2026. 03. 17

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

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

화면 ID BO-ART-004

작성일 2026. 03. 17

Description

1	엑셀 다운로드 요청 시 노출 모달	노출 조건 작품 관리 메인 화면에서 [엑셀 다운로드] 클릭 시 모달 노출 타이틀: 엑셀 다운로드 요청하기 입력 필드: 사유 입력 버튼: 취소 / 요청하기 닫기(X) 동작 [취소] 클릭 → 모달 닫기 [요청하기] 클릭 사유 입력값 검증 다운로드 요청 API 호출 상태: “승인 대기” 성공 시 모달 닫기 + 요청 완료 토스트 노출 슈퍼 관리자 승인 시 해당 관리자 계정의 알림 영역  → “엑셀 다운로드 요청이 승인되었습니다.” 알림 적재 승인 후 일정 시간 동안 다운로드 버튼 활성화 사유 미입력 시 “사유를 입력해주세요.” 토스트 노출 이미 승인 대기 중인 요청 존재 시 → 중복 요청 불가 토스트
2	상세보기 진입 시 노출 모달	노출 조건 관리자 계정이 BO-ART-001에서 [상세보기] 클릭 시 무조건 노출 접근 권한이 있어도 예외 없이 항상 노출  (개인정보 보호 정책에 따른 2차 인증 절차) 타이틀: 비밀번호 입력 입력 필드: 비밀번호 버튼: 확인 우측 상단 닫기(X) 동작 비밀번호 입력 후 [확인] 클릭 관리자 계정 비밀번호 검증 API 호출 성공 시 사용자 상세 화면 진입 실패 시 모달 유지 + 실패 토스트 노출 입력값 미존재 시 “비밀번호를 입력해주세요.” 토스트 노출
3	작품 상세 정보 수정 시 노출 모달	노출 조건 작품 상세 화면에서 저장 버튼 클릭 시 메시지: “작품 정보를 수정하시겠습니까?” 버튼: 취소 / 수정 동작 [취소] → 모달 닫기 [수정] → 수정 API 호출 성공 시 모달 닫기 + 성공 토스트 실패 시 모달 닫기 + 실패 토스트
4	작품 상세 정보 수정 내용이 있을 때 뒤로가기 버튼 클릭 시 노출 모달	노출 조건 작품 상세 화면에서 변경 상태 발생 후 뒤로가기 또는 메뉴 이동 시 메시지: “수정된 정보가 있습니다. 이동하시겠습니까?” 버튼: 취소 / 이동 동작 [취소] → 모달 닫기 + 현재 화면 유지 [이동] → 변경사항 폐기 + 이전 화면 이동
5	작품 정보 등록 안내 노출 모달	노출 조건 BO-ART-003(작품 업로드 화면)에서 [작품 업로드 하기] 버튼 클릭 시 모든 필수값 검증 통과 후 노출 작가명 카테고리 사이즈(숫자) 정산 금액 작품 이미지 최소 1장 보증서 파일 업로드 메시지  “이대로 작품을 등록하시겠습니까?” 버튼 취소 등록 [등록] 클릭 시 작품 등록 API 호출 (단일 트랜잭션) 텍스트 데이터 이미지 파일 (최소1장 ~ 최대5장) 보증서 파일 모달 닫힘 BO-ART-001 화면으로 이동 성공 토스트 노출 저장 실패 시 모달 닫힘 실패 토스트 노출 화면 유지 모달 닫기 + 현재 화면 유지 업로드 중 파일 오류 발생 시 전체 저장 롤백 처리 “작품 등록에 실패했습니다. 다시 시도해주세요.” 토스트
6	작품 정보 취소 안내 노출 모달	노출 조건 BO-ART-003에서 [취소] 버튼 클릭 시 하나 이상의 입력값이 존재하는 경우 메시지 “등록을 취소하면 입력한 정보가 사라집니다.” 취소 등록 취소 동작 [등록 취소] 클릭 시 입력 데이터 초기화 + 이전 화면(BO-ART-001) 이동 모달 닫힘 + 현재 화면 유지
7	작품 등록 내용이 있을 때 뒤로가기 버튼 클릭 시 노출 모달	노출 조건 BO-ART-003에서 상단 뒤로가기 버튼 클릭 시 입력값이 하나라도 존재할 경우 메시지 “입력된 정보가 있습니다. 이동하시겠습니까?” 취소 이동 동작 [이동] 클릭 시 입력값 폐기 + BO-ART-001로 이동 모달 닫힘 + 현재 화면 유지
8	(추가) 거래 상태 변경시 노출 모달	노출 조건 BO-ART-001에서 거래 상태 “거래 진행"으로 변경 시 메시지 “거래 상태 변경” “작품 구매 사용자 아이디 검색" Placeholder: 작품 구매 사용자 아이디 검색 버튼 취소 완료 작품 구매 사용자 아이디 검색 시 하단 입력한 아이디의 사용자 노출 해당 아이디 클릭 시, 해당 사용자 선택 완료 사용자 아이디 클릭 시, 해당 버튼 활성화 완료 버튼 시, BO-ART-001 거래 진행 상태 변경, BO-TRN-001 데이터 적재 [취소] 클릭 시 모달 닫힘 + 현재 화면 유지
9	토스트 메세지 정의	등록 관련 “작품이 등록되었습니다.” “작품 등록에 실패했습니다. 다시 시도해주세요.” “입력 정보가 삭제되었습니다.” 입력값 검증 관련 “필수 항목을 입력해주세요.” “이미지는 최소 1장 이상 등록해주세요.” “이미지는 최대 5장까지 등록할 수 있습니다.” “보증서를 업로드해주세요.” “사이즈는 숫자만 입력 가능합니다.” “정산 금액은 숫자만 입력 가능합니다.”
10	공통 규칙	모든 등록/수정/이동 행위는 LOG 기록 변경 상태에서는 확인 모달 없이 페이지 이동 불가 파일 업로드는 텍스트 데이터와 단일 트랜잭션 처리 최소 1장 이미지 + 보증서 없이는 등록 불가 관리자 권한이 없는 경우 등록 버튼 비활성화

Design Output

UI 디자인 산출물

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

작품 관리 — 각종 모달

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

Applied Design Tokens

요소	Token	값
모달 배경	#fff	R=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 var(--alpha-12)	R=0, placeholder: `--text-muted`
닫기(X) 아이콘	`--text-muted`	16px, 우측 상단

Design Description

Update History

2026.03.04초기 디자인 작성

1	엑셀 다운로드 요청 시 노출 모달	노출 조건 작품 관리 메인 화면에서 [엑셀 다운로드] 클릭 시 모달 노출 타이틀: 엑셀 다운로드 요청하기 입력 필드: 사유 입력 버튼: 취소 / 요청하기 닫기(X) 동작 [취소] 클릭 → 모달 닫기 [요청하기] 클릭 사유 입력값 검증 다운로드 요청 API 호출 상태: “승인 대기” 성공 시 모달 닫기 + 요청 완료 토스트 노출 슈퍼 관리자 승인 시 해당 관리자 계정의 알림 영역  → “엑셀 다운로드 요청이 승인되었습니다.” 알림 적재 승인 후 일정 시간 동안 다운로드 버튼 활성화 사유 미입력 시 “사유를 입력해주세요.” 토스트 노출 이미 승인 대기 중인 요청 존재 시 → 중복 요청 불가 토스트
2	상세보기 진입 시 노출 모달	노출 조건 관리자 계정이 BO-ART-001에서 [상세보기] 클릭 시 무조건 노출 접근 권한이 있어도 예외 없이 항상 노출  (개인정보 보호 정책에 따른 2차 인증 절차) 타이틀: 비밀번호 입력 입력 필드: 비밀번호 버튼: 확인 우측 상단 닫기(X) 동작 비밀번호 입력 후 [확인] 클릭 관리자 계정 비밀번호 검증 API 호출 성공 시 사용자 상세 화면 진입 실패 시 모달 유지 + 실패 토스트 노출 입력값 미존재 시 “비밀번호를 입력해주세요.” 토스트 노출
3	작품 상세 정보 수정 시 노출 모달	노출 조건 작품 상세 화면에서 저장 버튼 클릭 시 메시지: “작품 정보를 수정하시겠습니까?” 버튼: 취소 / 수정 동작 [취소] → 모달 닫기 [수정] → 수정 API 호출 성공 시 모달 닫기 + 성공 토스트 실패 시 모달 닫기 + 실패 토스트
4	작품 상세 정보 수정 내용이 있을 때 뒤로가기 버튼 클릭 시 노출 모달	노출 조건 작품 상세 화면에서 변경 상태 발생 후 뒤로가기 또는 메뉴 이동 시 메시지: “수정된 정보가 있습니다. 이동하시겠습니까?” 버튼: 취소 / 이동 동작 [취소] → 모달 닫기 + 현재 화면 유지 [이동] → 변경사항 폐기 + 이전 화면 이동
5	작품 정보 등록 안내 노출 모달	노출 조건 BO-ART-003(작품 업로드 화면)에서 [작품 업로드 하기] 버튼 클릭 시 모든 필수값 검증 통과 후 노출 작가명 카테고리 사이즈(숫자) 정산 금액 작품 이미지 최소 1장 보증서 파일 업로드 메시지  “이대로 작품을 등록하시겠습니까?” 버튼 취소 등록 [등록] 클릭 시 작품 등록 API 호출 (단일 트랜잭션) 텍스트 데이터 이미지 파일 (최소1장 ~ 최대5장) 보증서 파일 모달 닫힘 BO-ART-001 화면으로 이동 성공 토스트 노출 저장 실패 시 모달 닫힘 실패 토스트 노출 화면 유지 모달 닫기 + 현재 화면 유지 업로드 중 파일 오류 발생 시 전체 저장 롤백 처리 “작품 등록에 실패했습니다. 다시 시도해주세요.” 토스트
6	작품 정보 취소 안내 노출 모달	노출 조건 BO-ART-003에서 [취소] 버튼 클릭 시 하나 이상의 입력값이 존재하는 경우 메시지 “등록을 취소하면 입력한 정보가 사라집니다.” 취소 등록 취소 동작 [등록 취소] 클릭 시 입력 데이터 초기화 + 이전 화면(BO-ART-001) 이동 모달 닫힘 + 현재 화면 유지
7	작품 등록 내용이 있을 때 뒤로가기 버튼 클릭 시 노출 모달	노출 조건 BO-ART-003에서 상단 뒤로가기 버튼 클릭 시 입력값이 하나라도 존재할 경우 메시지 “입력된 정보가 있습니다. 이동하시겠습니까?” 취소 이동 동작 [이동] 클릭 시 입력값 폐기 + BO-ART-001로 이동 모달 닫힘 + 현재 화면 유지
8	(추가) 거래 상태 변경시 노출 모달	노출 조건 BO-ART-001에서 거래 상태 “거래 진행"으로 변경 시 메시지 “거래 상태 변경” “작품 구매 사용자 아이디 검색" Placeholder: 작품 구매 사용자 아이디 검색 버튼 취소 완료 작품 구매 사용자 아이디 검색 시 하단 입력한 아이디의 사용자 노출 해당 아이디 클릭 시, 해당 사용자 선택 완료 사용자 아이디 클릭 시, 해당 버튼 활성화 완료 버튼 시, BO-ART-001 거래 진행 상태 변경, BO-TRN-001 데이터 적재 [취소] 클릭 시 모달 닫힘 + 현재 화면 유지
9	토스트 메세지 정의	등록 관련 “작품이 등록되었습니다.” “작품 등록에 실패했습니다. 다시 시도해주세요.” “입력 정보가 삭제되었습니다.” 입력값 검증 관련 “필수 항목을 입력해주세요.” “이미지는 최소 1장 이상 등록해주세요.” “이미지는 최대 5장까지 등록할 수 있습니다.” “보증서를 업로드해주세요.” “사이즈는 숫자만 입력 가능합니다.” “정산 금액은 숫자만 입력 가능합니다.”
10	공통 규칙	모든 등록/수정/이동 행위는 LOG 기록 변경 상태에서는 확인 모달 없이 페이지 이동 불가 파일 업로드는 텍스트 데이터와 단일 트랜잭션 처리 최소 1장 이미지 + 보증서 없이는 등록 불가 관리자 권한이 없는 경우 등록 버튼 비활성화

← 이전 화면: BO-ART-003 다음 화면: BO-TRN-001 →