가방 부품 쇼룸 관리자 콘솔

제품 목록을 검색·필터링하고 신규 등록, 정보 수정을 비개발자도 쉽게 수행할 수 있는 관리 화면을 제공합니다.

• 좌측 제품 리스트와 우측 편집 패널을 연동하는 마스터-디테일 구조로 300여 종 제품을 효율적으로 관리합니다
• 이미지 드래그 앤 드롭 업로드와 AWS S3 연동으로 별도 개발 지식 없이 제품 사진을 등록할 수 있게 구현합니다
• 필수 항목 유효성 검증과 임시 저장(초안) 기능을 적용해 입력 중 데이터 손실을 방지합니다

제품 등록·수정 폼을 비개발자도 직관적으로 다룰 수 있도록 단계별 입력 구조와 실시간 미리보기를 구현합니다.

새 부품 유형을 등록하거나 사용하지 않는 유형을 비노출 처리할 수 있는 관리 화면을 제공합니다. 유형 목록을 드래그 정렬 가능한 리스트로 구성하고, 비노출 처리는 소프트 삭제(플래그)로 구현합니다.

• 유형 순서를 드래그 앤 드롭으로 조정하면 고객용 필터 chips 노출 순서에 즉시 반영되는 구조를 구현합니다
• 삭제 대신 비노출 플래그를 적용하는 소프트 삭제 방식으로 기존 제품과의 연결 데이터를 보존합니다
• 유형별 연결된 제품 수를 함께 표시해 관리자가 영향 범위를 미리 확인할 수 있게 구현합니다

부품 유형 추가·정렬·비노출을 코드 배포 없이 관리자 화면에서 직접 처리할 수 있는 구조를 설계합니다.

가방 이미지 위에서 부품 영역을 직접 클릭·드래그로 지정하고 제품과 연결할 수 있는 이미지 편집 도구를 제공합니다.

• 이미지 위 클릭·드래그로 핫스팟 영역을 그리는 캔버스 편집 UI를 구현해 좌표를 수동 입력 없이 지정합니다
• 지정한 영역을 제품 목록에서 선택해 연결하는 드롭다운 매핑 UI로 비개발자도 직접 다룰 수 있게 구현합니다
• 핫스팟 좌표는 백분율 단위로 저장해 원본 이미지 크기와 무관하게 일관되게 렌더링되도록 설계합니다

좌표 편집을 코드 수정 없이 관리자 화면에서 직접 수행할 수 있는 커스텀 이미지 매핑 도구를 구현합니다.

회사 소개 등 고정 페이지의 문구와 이미지를 관리자가 직접 수정할 수 있는 콘텐츠 관리 화면을 제공합니다. 섹션 블록 단위 콘텐츠 에디터로 텍스트·이미지를 수정하고 미리보기 후 게시하는 구조로 구현합니다.

• 섹션 블록 단위로 텍스트와 이미지를 수정하는 콘텐츠 에디터를 구현해 코드 수정 없이 페이지를 갱신합니다
• 수정 내용을 즉시 반영하지 않고 미리보기 후 게시하는 2단계 구조로 실수 노출을 방지합니다
• 변경 이력을 버전별로 기록해 이전 콘텐츠로 되돌릴 수 있는 구조를 설계합니다

고정 페이지 콘텐츠를 블록 단위로 관리하는 경량 CMS 구조를 자체 구현해 콘텐츠 변경 시 개발 의존도를 낮춥니다.