마그네틱 시스템 행거 3D 구성 도구

첫 화면에서 구성 형태 A~D와 가로 길이 3종을 고르면 등각 투영 장면이 바뀌고, 옆 모듈을 끌어 일렬로 이어 붙이면 부품 목록과 견적이 즉시 함께 움직입니다.

• Zustand 스토어에 구성 형태·길이·연결 순서를 보관하고 장면·목록·견적이 같은 상태를 구독
• 고정 규격 3종 안에서만 배치되도록 드롭 위치를 스냅하는 제약 로직 설계
• React Three Fiber 장면 구성을 본 개발 스택으로 두고 데모는 등각 투영 SVG로 표현

드래그로 이어 붙인 결과가 3D 장면과 부품 목록에 동시에 반영되는 단방향 상태 흐름을 설계합니다. 규격 밖 배치는 드롭 단계에서 차단합니다.

구성에 따라 기둥·커넥터·봉 등 부품 종류별 수량을 규칙으로 계산하고, 연결 시 봉을 공유하는 구조를 반영해 단독 사용 대비 수량 차이와 소비자 견적가를 함께 보여줍니다.

• 수량 계산을 형태·길이·연결 상태를 입력으로 받는 순수 함수로 분리하고 Vitest 케이스 표로 검증
• 연결 구간마다 공유되는 봉을 한 번만 세는 규칙을 별도 모듈로 구현
• 부품 단가 테이블과 수량을 곱해 소비자 견적 명세를 산출하는 견적 모듈 설계

단독 구성 대비 연결 구성의 부품 수량 차이를 표로 비교해 보여주는 계산 구조를 구현합니다. 규칙은 코드가 아니라 데이터로 두어 수정 범위를 줄입니다.

행거봉을 대체하는 조명 등기구를 고르고 전선 있는 봉·커넥터를 구분해 쓰면, 전선 부품이 끊김 없이 이어지는지와 천장 부착 발 부품의 전원 시작점을 확인합니다.

• 부품을 노드, 연결부를 간선으로 둔 그래프에서 전선 있는 노드만 탐색해 연결 여부 검사
• 천장 부착 발 부품 중 하나를 전원 시작점으로 지정하고 도달 가능성을 너비 우선 탐색으로 확인
• 등기구 용량 합계가 100W를 넘는 선택을 차단하고 초과분 안내 문구를 표시하는 검증 모듈

전선 있음·없음 구분이 부품 목록과 가격에도 함께 반영되도록 같은 부품 데이터를 사용합니다. 검증 결과는 끊긴 위치를 장면에서 표시합니다.

완성한 구성을 이름과 함께 저장하고 부품 목록·견적과 함께 문의로 보낼 수 있습니다. 운영 사이트 아임웹에는 iframe 임베드로 넣거나 별도 링크 페이지로 배포하는 두 경로를 모두 대응합니다.

• 구성 상태를 버전 필드가 있는 JSON으로 직렬화해 저장·불러오기·공유 링크에 같이 사용
• iframe 임베드 시 부모 창과 postMessage로 높이를 맞추는 임베드 어댑터 설계
• 임베드가 막힌 환경에서는 동일 앱을 별도 링크 페이지로 배포하는 이중 배포 구성

같은 빌드를 임베드와 단독 페이지에서 모두 쓰도록 설계해 아임웹 적용 방식이 정해지지 않은 상태에서도 개발을 먼저 시작할 수 있습니다.