프로젝트 배경
1) 예상 리스크 및 대응 계획 - 이미지 좌표 지정 UI를 비개발자가 실수 없이 다룰 수 있도록 드래그 인터랙션과 되돌리기 흐름을 설계할 필요 - 부품 유형 비노출 처리 시 이미 연결된 제품·핫스팟 데이터의 무결성을 보존하는 소프트 삭제 전략 필요 - 고정 페이지 콘텐츠 수정이 게시 전 실수로 반영되지 않도록 미리보기·게시 분리 구조 설계 필요 - 300여 종 제품 데이터의 대량 등록·수정 시 관리자
프로젝트 성과
마스터-디테일 제품 관리 구조 구현
좌측 리스트-우측 편집 패널 연동 구조를 설계, 300여 종 제품을 효율적으로 다루는 관리 UI를 구현합니다
드래그 기반 핫스팟 편집 도구 구현
캔버스 클릭·드래그로 좌표를 지정하는 커스텀 이미지 매핑 UI를 자체 구현, 제품 연결 드롭다운을 연동합니다
소프트 삭제 기반 유형 관리 구조 설계
부품 유형 비노출을 플래그로 처리하는 구조를 구현, 기존 제품 연결 데이터 무결성을 보존합니다
버전 이력 포함 콘텐츠 CMS 구조 구축
섹션 블록 단위 콘텐츠 에디터와 게시 전 미리보기, 버전 이력 테이블을 설계합니다
핵심 기능
진행 단계
관리자 데이터 모델 및 권한 구조 설계
2026.09
제품·유형·핫스팟·콘텐츠 버전 테이블을 확장 설계하고 관리자 인증 구조를 정의합니다
프로젝트 상세
1) 포트폴리오 소개 쇼룸 MVP 이후 운영 단계를 지원하는 가방 부품 제조업 전용 관리자 콘솔로, 제품·부품 유형 CRUD와 가방-부품 핫스팟 연결을 이미지 편집 UI로 직접 관리하고 고정 페이지 콘텐츠까지 비개발자가 수정할 수 있는 구조를 React와 Node.js 기반으로 확장 구현합니다. 2) 작업 범위 - 관리자 제품 관리: 제품 목록을 검색·필터링하고 신규 등록, 정보 수정을 비개발자도 쉽







