데모커머스·예약
가방 부품 쇼룸·제품 연결 편집 데모
가방 사진의 부품을 눌러 가상 제품을 찾고, 운영자의 제품·연결 편집이 구매자 화면에 반영되는 쇼룸입니다.
web-production-3b3e85.up.railway.app
열어 보시면 이런 걸 확인하실 수 있습니다
- 쇼룸에서 가방 사진의 부품 영역을 누르면 제품 코드·유형·가상 규격이 나옵니다
- 제품 목록에서 코드나 유형으로 찾은 제품이 문의 초안으로 이어집니다(실제 발송 없음)
- 연결 편집에서 연결 제품을 바꾸면 구매자 화면에서 같은 제품이 열립니다
- 제품 관리에서 고친 내용은 이 브라우저에만 저장되고, 페이지 편집에서 초기 데이터로 되돌릴 수 있습니다
만들면서 풀어야 했던 것
- 부품을 설명하는 사진과 제품 목록이 따로 있으면 구매자가 본 부품을 다시 찾아야 합니다. 가방 사진 위 부품 영역과 제품 정보를 같은 데이터로 묶어, 영역을 누르면 제품 상세와 문의 초안으로 이어지게 했고 문의는 초안까지만 만들 뿐 실제로 발송하지 않습니다.
- 운영 화면에서 연결 제품과 상대 위치를 바꾸면 구매자 화면에서 같은 제품이 열립니다. 숨긴 제품은 구매자 목록과 부품 연결에서 빠지고, 유형을 숨기면 그 유형의 제품도 함께 제외되며, 장면 이미지를 바꾸면 위치를 다시 확인하라고 안내합니다.
- 초기 가상 제품 300건(공개 292건·숨김 8건)을 기준으로 화면별 숫자를 같은 데이터에서 계산합니다. 변경은 이 브라우저에만 저장되며, 사진은 이용허락을 확인한 가방 사진 2장으로 부품 위치 연결을 설명하는 예시이고, 제품 이미지는 가상 규격으로 만든 예시 렌더라 가상 제품 각각의 실제 사진이 아닙니다.
비슷한 걸 만들어 보고 싶으시다면
구간 견적으로 규모를 먼저 가늠해 보시거나, 조건을 적어 보내 주시면 범위를 정리해 회신드립니다.