← 포트폴리오 목록

행거 부품·규칙 관리 콘솔

구성 도구 뒤에서 쓰이는 관리 콘솔을 제안합니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종데이터 분석
기술 스택
React 18TypeScriptTailwind CSSReact Three FiberZustandNode.js + ExpressPostgreSQL + PrismaVitest
주요 기능
  • 구성 현황 대시보드
  • 부품·가격 관리 — CAD 자산 등록
  • 계산 규칙 — 수량·전원·100W 편집
  • 견적 문의 — 저장 구성 조회

프로젝트 개요

범위: 개발, 디자인, 기획

구성 도구 뒤에서 쓰이는 관리 콘솔을 제안합니다. 부품 마스터와 가격, 수량 계산 규칙과 전원·100W 규칙의 편집·버전 관리, 구성 저장과 견적 문의 목록, CAD 자산 등록 상태, 통계를 한 곳에서 다루도록 설계하며 구성 도구와 같은 백엔드 스택을 사용합니다.

작업 범위

  • 구성 현황 대시보드: 저장된 구성 수, 인기 구성 형태, 견적 문의 접수 현황과 CAD 자산 등록 상태를 한 화면에서 확인합니다. 확인이 필요한 항목은 목록 위쪽에 모아 보여줍니다
  • 부품·가격 관리 — CAD 자산 등록: 기둥·커넥터·봉·등기구 등 부품 마스터와 소비자 가격, 전선 있음·없음 구분, 등기구 와트를 편집합니다. 부품마다 CAD 3D 자산의 등록 상태를 표시합니다
  • 계산 규칙 — 수량·전원·100W 편집: 수량 계산 규칙, 봉 공유 조건, 전원 시작점 조건, 등기구 합계 100W 한계를 화면에서 편집하고 버전으로 저장합니다. 변경 전후 결과를 샘플 구성으로 미리 비교합니다
  • 견적 문의 — 저장 구성 조회: 고객이 저장하거나 문의로 보낸 구성을 목록으로 보고, 구성 상세에서 부품 목록과 견적, 전원 검증 결과를 확인합니다. 문의 상태를 접수·확인·답변 완료로 바꿉니다

주요 업무

  • 구성 현황 대시보드 화면: 구성·문의 테이블을 집계하는 조회 쿼리를 두고 대시보드가 같은 API를 사용하도록 구성합니다
  • 부품·가격 관리 — CAD 자산 등록 화면: 부품 마스터와 자산 매핑을 한 테이블 구조로 관리하고 가격 변경 이력을 남깁니다
  • 계산 규칙 — 수량·전원·100W 편집 화면: 규칙을 버전이 있는 JSON 스키마로 저장하고 샘플 구성에 적용한 결과 차이를 비교합니다
  • 견적 문의 — 저장 구성 조회 화면: 저장 구성 JSON을 읽어 구성 도구와 같은 계산 모듈로 부품 목록과 견적을 다시 산출합니다
행거 부품·규칙 관리 콘솔
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

규칙 문서가 확정되기 전에 수정이 반복될 수 있어

버전 저장과 전후 비교 미리보기로 변경 영향을 먼저 확인하게 합니다

CAD 자산이 부품마다 다른 시점에 수령되므로

임시 박스·등록 완료·검수 대기 상태를 구분해 부분 교체가 가능하도록 설계합니다

가격과 규칙을 바꿔도 이미 저장된 구성의 견적 기준이 흔들리지 않도록

저장 시점의 규칙 버전을 함께 기록하는 구조를 설계합니다

전원 연결 규칙이 부품 구분 변경에 영향을 받으므로

규칙 저장 전에 샘플 구성의 검증 결과를 다시 계산하는 사전 점검을 둘 계획입니다

구현 내용

핵심 기능 상세

핵심 기능 1

구성 현황 대시보드

저장된 구성 수, 인기 구성 형태, 견적 문의 접수 현황과 CAD 자산 등록 상태를 한 화면에서 확인합니다. 확인이 필요한 항목은 목록 위쪽에 모아 보여줍니다.

  • 구성 저장 테이블을 형태·길이별로 집계하는 PostgreSQL 조회와 Prisma 집계 쿼리 설계
  • SVG로 직접 그린 막대·선 차트에 토큰 색상만 적용하는 차트 컴포넌트 구현
  • 처리 대기 문의와 자산 미등록 부품을 우선 큐로 모아 보여주는 조회 설계

형태 A~D별 선택 비중과 길이 분포를 집계해 부품 재고 계획의 입력으로 쓸 수 있는 통계 화면을 구현합니다.

구성 현황 대시보드
구성 현황 대시보드 실제 화면
핵심 기능 2

부품·가격 관리 — CAD 자산 등록

기둥·커넥터·봉·등기구 등 부품 마스터와 소비자 가격, 전선 있음·없음 구분, 등기구 와트를 편집합니다. 부품마다 CAD 3D 자산의 등록 상태를 표시합니다.

  • 부품 마스터·가격·전선 구분·와트를 한 테이블에서 편집하는 인라인 편집 표 구현
  • 가격 변경 시 이전 값과 변경 시각을 이력 테이블에 남기는 Prisma 트랜잭션 설계
  • 부품 ID별 glTF 자산 업로드 상태를 임시 박스·등록 완료·검수 대기로 구분해 표시

가격 한 곳을 바꾸면 구성 도구의 견적이 같은 데이터를 읽어 바뀌는 구조를 설계합니다. 변경은 이력으로 되돌릴 수 있게 남깁니다.

부품·가격 관리 — CAD 자산 등록
부품·가격 관리 — CAD 자산 등록 실제 화면
핵심 기능 3

계산 규칙 — 수량·전원·100W 편집

수량 계산 규칙, 봉 공유 조건, 전원 시작점 조건, 등기구 합계 100W 한계를 화면에서 편집하고 버전으로 저장합니다. 변경 전후 결과를 샘플 구성으로 미리 비교합니다.

  • 규칙 문서를 스키마 검증이 걸린 JSON으로 저장하고 저장 시마다 버전 번호를 올리는 구조
  • 샘플 구성 5종에 이전·신규 규칙을 모두 적용해 수량 차이를 표로 비교하는 미리보기
  • 규칙 편집 권한을 역할별로 나누고 권한 밖에서는 읽기 전용으로 표시

규칙 확정 전에 정리·수정이 반복되는 상황을 고려해 변경 이력과 미리보기 비교를 기본 기능으로 설계합니다.

계산 규칙 — 수량·전원·100W 편집
계산 규칙 — 수량·전원·100W 편집 실제 화면
핵심 기능 4

견적 문의 — 저장 구성 조회

고객이 저장하거나 문의로 보낸 구성을 목록으로 보고, 구성 상세에서 부품 목록과 견적, 전원 검증 결과를 확인합니다. 문의 상태를 접수·확인·답변 완료로 바꿉니다.

  • 저장 구성 JSON을 구성 도구와 같은 계산 모듈로 재계산해 견적 불일치를 방지하는 구조
  • 문의 상태 전이를 접수·확인·답변 완료 3단계로 제한하는 상태 머신 구현
  • 구성 상세를 부품 목록·견적 CSV로 내려받는 내보내기 기능 구현

문의에 담긴 구성을 그대로 다시 열어 장면과 부품 목록을 확인할 수 있도록 설계해 견적 응대의 확인 단계를 줄이는 구조를 구축합니다.

견적 문의 — 저장 구성 조회
견적 문의 — 저장 구성 조회 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

관리 데이터 모델과 권한 체계 설계 · 2026.10

부품·가격 이력·규칙 버전·문의 테이블 ERD 설계, 역할별 접근 권한 정의

STEP 2

부품·자산 관리 API 개발 · 2026.10

부품 마스터 CRUD, 가격 변경 이력 트랜잭션, glTF 자산 업로드 상태 관리 API 구현

STEP 3

규칙 편집·버전 관리 구현 · 2026.10

규칙 JSON 스키마 검증, 버전 저장·복원, 샘플 구성 전후 비교 미리보기 구현

STEP 4

문의·통계 화면 개발 · 2026.10

견적 문의 상태 머신, 저장 구성 재계산, 형태·길이별 집계 차트 화면 개발

개발 결과

규칙 버전 관리와 전후 비교 구조 설계규칙 JSON 스키마 검증과 버전 복원, 샘플 구성 5종 전후 수량 비교 미리보기를 구현해 규칙 수정 부담을 줄이는 구조 설계
가격 변경 이력 트랜잭션 구현부품 가격 수정 시 이전 값·변경 시각·변경자를 Prisma 트랜잭션으로 함께 기록하고 되돌릴 수 있게 구현
공통 계산 모듈 재사용 구조 구축구성 도구와 관리 콘솔이 같은 계산 모듈을 사용해 저장 구성 재계산 시 견적이 어긋나지 않도록 구성
역할별 편집 권한 분리 구현규칙 편집·가격 수정·문의 응대 권한을 역할별로 나누고 권한 밖 화면은 읽기 전용으로 표시하는 구조 구현

기술적 주안점

  • 형태 A~D별 선택 비중과 길이 분포를 집계해 부품 재고 계획의 입력으로 쓸 수 있는 통계 화면을 구현합니다
  • 가격 한 곳을 바꾸면 구성 도구의 견적이 같은 데이터를 읽어 바뀌는 구조를 설계합니다. 변경은 이력으로 되돌릴 수 있게 남깁니다
  • 규칙 확정 전에 정리·수정이 반복되는 상황을 고려해 변경 이력과 미리보기 비교를 기본 기능으로 설계합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의