관리자 화면 · 백오피스 작품 관리
작품 관리 상세보기
BO-ART-002 · 2026. 03. 04
화면 이름
작품 관리 - 상세보기
화면 위치
작품 관리 > 상세 > 상세보기 클릭
화면 ID
BO-ART-002
CHRT.
사용자 관리
사용자 감시
작품 관리
거래 관리
작품 문의 관리
●
작품 관리
<
작품 상세보기
기본 > 기본
이미지 정보
판매 가격
상세 가격
작품 설명
작품에 대한 설명이 들어갑니다. 작품은 드넓은 자연 안에서의 내면의 이야기를 그려냅니다. 작가는 색채와 형태의 조화를 통해 관객에게 사유의 시간을 선물합니다.
보증서 이미지
certificate001.jpg
1
2
3
4
5
| 0 |
화면 접근 조건 |
- BO-ART-001(작품 관리 메인)에서 [상세보기] 클릭 시 진입
- 해당 작품의 고유 ID 기준으로 데이터 로딩
- 읽기 전용 화면 (수정은 [수정하기] 버튼 클릭 후)
|
| 1 |
작품 기본 정보 |
- 구성: 키-값 테이블 형태
- 작가 선택/직접 입력: 작가명 표시
- 작품명, 구성(마켓/프라이빗 세일/비공개)
- 카테고리(원화/판화/아트토이/기타)
- 도상, 사이즈(호), 재료, 제작 연도
- 정산 금액(원), 작품 등급
- 작품 설명 (장문 텍스트)
- 동작
- 모든 필드는 읽기 전용
- 수정하기 버튼 클릭 시 편집 모드로 전환
|
| 2 |
탭 네비게이션 |
- 구성: 기본 > 기본 / 이미지 정보 / 판매 가격 / 상세 가격
- 동작
- 탭 클릭 시 해당 섹션으로 스크롤 또는 내용 전환
- 활성 탭은 시각적 강조
|
| 3 |
작품 이미지 |
- 구성: 작품 이미지 썸네일 최대 5장 표시
- 동작
- 썸네일 클릭 시 원본 크기 이미지 팝업 또는 라이트박스
- 이미지 없을 경우 빈 플레이스홀더 표시
|
| 4 |
판매/보증 정보 |
- 구성
- 판매가
- 보증서 이미지 (파일명 표시)
- 등록한 사용자
- 작가 서명 유무
- 보증서 이미지 클릭 시 원본 보기
|
| 5 |
하단 버튼 |
- 구성
- 목록으로: BO-ART-001(작품 관리 메인)으로 복귀
- 수정하기: 편집 모드 진입, 각 필드 수정 가능
- 수정하기 클릭 시
- 비밀번호 입력 모달(BO-ART-004 #2) 노출
- 인증 완료 후 편집 모드 활성화
- 수정 완료 시 작품 정보 수정 안내 모달(BO-ART-004 #3) 노출
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
데스크톱 관리자 화면 — 와이어프레임과 동일 구조
토큰 적용 사항은 우측 테이블 참조
| 요소 | Token | 값 |
|---|
| 필드 라벨 영역 |
--neutral-95 bg |
width: 140px, font-weight: 600 |
| 필드 값 영역 |
--sans · 12px |
--charcoal, padding: 12px 16px |
| 이미지 썸네일 |
--neutral-95 bg |
80x80px, R=0, stroke icon |
| 목록으로 버튼 |
#fff + border |
rgba(0,0,0,0.12) border, R=0 |
| 수정하기 버튼 |
--charcoal bg |
#fff text, R=0 |
| 테이블 구분선 |
rgba(0,0,0,0.06) |
1px solid, 행 구분 |
| 0 |
화면 접근 조건 |
- BO-ART-001(작품 관리 메인)에서 [상세보기] 클릭 시 진입
- 해당 작품의 고유 ID 기준으로 데이터 로딩
- 읽기 전용 화면 (수정은 [수정하기] 버튼 클릭 후)
|
| 1 |
작품 기본 정보 |
- 구성: 키-값 테이블 형태
- 작가 선택/직접 입력: 작가명 표시
- 작품명, 구성(마켓/프라이빗 세일/비공개)
- 카테고리(원화/판화/아트토이/기타)
- 도상, 사이즈(호), 재료, 제작 연도
- 정산 금액(원), 작품 등급
- 작품 설명 (장문 텍스트)
- 동작
- 모든 필드는 읽기 전용
- 수정하기 버튼 클릭 시 편집 모드로 전환
|
| 2 |
탭 네비게이션 |
- 구성: 기본 > 기본 / 이미지 정보 / 판매 가격 / 상세 가격
- 동작
- 탭 클릭 시 해당 섹션으로 스크롤 또는 내용 전환
- 활성 탭은 시각적 강조
|
| 3 |
작품 이미지 |
- 구성: 작품 이미지 썸네일 최대 5장 표시
- 동작
- 썸네일 클릭 시 원본 크기 이미지 팝업 또는 라이트박스
- 이미지 없을 경우 빈 플레이스홀더 표시
|
| 4 |
판매/보증 정보 |
- 구성
- 판매가
- 보증서 이미지 (파일명 표시)
- 등록한 사용자
- 작가 서명 유무
- 보증서 이미지 클릭 시 원본 보기
|
| 5 |
하단 버튼 |
- 구성
- 목록으로: BO-ART-001(작품 관리 메인)으로 복귀
- 수정하기: 편집 모드 진입, 각 필드 수정 가능
- 수정하기 클릭 시
- 비밀번호 입력 모달(BO-ART-004 #2) 노출
- 인증 완료 후 편집 모드 활성화
- 수정 완료 시 작품 정보 수정 안내 모달(BO-ART-004 #3) 노출
|