← 포트폴리오 목록

메저링크 계측기·전자부품 B2B 스토어

본 프로젝트의 요구사항(회원 유형별 가격, 옵션 조합 가격, 장바구니 자동 견적, 견적에서 주문·결제로 이어지는 흐름, 사업자 인증 승인제 가입)을 기반으로 구현하는 프로젝트입니다.

프로젝트 납품 요약

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

서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPrismaPostgreSQLPG 결제 연동팝빌 또는 바로빌 API (전자세금계산서)
주요 기능
  • 회원 유형별 가격 카탈로그
  • 옵션 조합 가격 상품 상세
  • 자동 견적서 발행·주문·결제
  • 사업자 인증 가입

프로젝트 개요

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

본 프로젝트의 요구사항(회원 유형별 가격, 옵션 조합 가격, 장바구니 자동 견적, 견적에서 주문·결제로 이어지는 흐름, 사업자 인증 승인제 가입)을 기반으로 구현하는 프로젝트입니다.

작업 범위

  • 회원 유형별 가격 카탈로그: 첫 화면에서 로그인한 회원 유형(대학·법인·개인 사업자)에 맞는 가격으로 오늘 많이 담기는 오실로스코프·전원공급기·측정 모듈을 보여 줍니다. 카테고리 칩으로 8개 분류를 거를 수 있습니다
  • 옵션 조합 가격 상품 상세: 상품 상세에서 측정 범위·프로브 종류·보증 연장 같은 옵션을 고르면 조합에 맞는 단가가 바로 반영됩니다. 회원 유형별 가격 비교 표를 열어 볼 수 있습니다
  • 자동 견적서 발행·주문·결제: 장바구니 품목으로 견적서를 즉시 만들고 견적번호·유효기간을 표기하며 PDF로 내려받을 수 있습니다. 같은 견적서에서 주문서를 작성하고 PG 카드 결제 또는 무통장 입금을 고릅니다
  • 사업자 인증 가입: 사업자등록번호를 입력해 인증하고 회원 유형을 고르면 승인 대기 안내가 표시됩니다. 관리자 승인 전에는 가격과 주문 기능이 제한됩니다

주요 업무

  • 회원 유형별 가격 카탈로그 화면: 회원 등급에 따라 가격 계산과 가격 노출 여부를 서버에서 결정하고, 화면은 결과만 그립니다
  • 옵션 조합 가격 상품 상세 화면: 옵션 조합 키마다 가격과 재고를 두는 구조로 설계합니다
  • 자동 견적서 발행·주문·결제 화면: 견적서는 발행 시점 가격을 고정 저장하고, 주문은 견적 ID를 참조해 생성합니다
  • 사업자 인증 가입 화면: 가입 상태(신청·승인 대기·승인·반려)를 상태 값으로 관리하고 API 접근을 상태별로 제한합니다
메저링크 계측기·전자부품 B2B 스토어
요구사항 정의

프로젝트 핵심 과제

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

회원 유형·옵션·수량 구간이 겹치는 가격 규칙의 우선순위가 모호해질 수 있어

규칙 데이터와 계산 테스트 케이스로 대응합니다

견적 발행 이후 가격이 바뀌는 경우의 분쟁 가능성이 있어

발행 시점 스냅샷과 유효기간으로 대응합니다

PG 시험 환경과 운영 환경의 설정 차이 리스크

환경별 설정 분리와 결제 결과 재조회 로직으로 대응합니다

구현 내용

핵심 기능 상세

핵심 기능 1

회원 유형별 가격 카탈로그

첫 화면에서 로그인한 회원 유형(대학·법인·개인 사업자)에 맞는 가격으로 오늘 많이 담기는 오실로스코프·전원공급기·측정 모듈을 보여 줍니다. 카테고리 칩으로 8개 분류를 거를 수 있습니다.

  • 회원 유형·등급별 가격표 테이블을 분리하고 서버에서 최종 판매가를 계산하는 가격 서비스 설계
  • 미승인·비회원에게는 가격 필드를 응답에서 제외하는 노출 제어 미들웨어 적용
  • 카테고리·재고 상태 필터를 URL 쿼리와 동기화하여 목록 상태를 공유 가능하게 구성

한 상품에 회원 유형별 가격 규칙을 조합하는 가격 서비스를 두고, 대학 회원 할인(약 5%)을 규칙 데이터로 관리하도록 설계합니다.

회원 유형별 가격 카탈로그
회원 유형별 가격 카탈로그 실제 화면
핵심 기능 2

옵션 조합 가격 상품 상세

상품 상세에서 측정 범위·프로브 종류·보증 연장 같은 옵션을 고르면 조합에 맞는 단가가 바로 반영됩니다. 회원 유형별 가격 비교 표를 열어 볼 수 있습니다.

  • 옵션 그룹과 조합(SKU) 테이블을 분리하고 조합 키로 가격·재고를 조회하는 Prisma 스키마 설계
  • 옵션 선택 상태를 React 상태 머신으로 관리하여 불가능한 조합을 비활성 처리
  • 수량 구간별 단가 규칙을 가격 서비스에서 일괄 계산하는 구조 적용

옵션 조합마다 독립된 단가와 재고를 갖는 SKU 구조로 설계하고, 선택 즉시 합계가 갱신되도록 구성합니다.

옵션 조합 가격 상품 상세
옵션 조합 가격 상품 상세 실제 화면
핵심 기능 3

자동 견적서 발행·주문·결제

장바구니 품목으로 견적서를 즉시 만들고 견적번호·유효기간을 표기하며 PDF로 내려받을 수 있습니다. 같은 견적서에서 주문서를 작성하고 PG 카드 결제 또는 무통장 입금을 고릅니다.

  • 연월일 기반 견적번호 채번 시퀀스와 유효기간 만료 판정 로직 설계
  • 발행 시점 가격 스냅샷을 견적 라인에 저장하여 이후 가격 변경과 분리
  • 서버 PDF 생성 템플릿으로 견적서 다운로드 구현, 포트원 계열 PG 결제와 무통장 입금 분기 적용

견적서를 가격 스냅샷으로 저장하고 주문이 견적을 참조하도록 설계하여 견적에서 주문·결제까지 한 흐름으로 이어지게 합니다.

자동 견적서 발행·주문·결제
자동 견적서 발행·주문·결제 실제 화면
핵심 기능 4

사업자 인증 가입

사업자등록번호를 입력해 인증하고 회원 유형을 고르면 승인 대기 안내가 표시됩니다. 관리자 승인 전에는 가격과 주문 기능이 제한됩니다.

  • 사업자등록번호 체크섬 검증과 국세청 상태조회 API 연동 인터페이스 분리 설계
  • 가입 상태 값에 따라 가격 조회·주문 API를 막는 권한 미들웨어 적용
  • React Hook Form과 서버 검증 오류를 칸별로 표시하는 가입 폼 구성

사업자번호 인증 단계와 관리자 승인 단계를 분리한 가입 상태 흐름으로 설계합니다.

사업자 인증 가입
사업자 인증 가입 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

요구사항 분석 및 DB 설계 · 2026.10

회원 유형·등급, 옵션 조합(SKU), 견적·주문 테이블 ERD 설계

STEP 2

가격·견적 서비스 개발 · 2026.10

회원별 가격 계산, 견적번호 채번, PDF 견적서 생성 구현

STEP 3

주문·결제 연동 · 2026.10

견적 기반 주문 생성, PG 결제와 무통장 입금 흐름 구현

STEP 4

프론트엔드 UI 개발 및 통합 테스트 · 2026.10

PC·모바일 반응형 상품·견적·가입 화면 구현과 가격·권한 시나리오 통합 검증

개발 결과

회원 유형별 가격 서비스 설계회원 유형·등급·옵션 조합을 하나의 가격 규칙으로 계산하는 서버 가격 서비스를 설계하고 가격 노출 제어를 적용합니다.
견적 스냅샷 기반 주문 흐름 설계견적 발행 시점 가격을 고정 저장하고 주문이 견적을 참조하는 구조로 견적에서 결제까지 이어지게 설계합니다.
승인제 가입 상태 흐름 구축사업자번호 검증과 관리자 승인을 분리한 상태 흐름과 API 권한 제한을 적용합니다.
옵션 조합 SKU 가격·재고 구조 설계옵션 그룹과 조합 테이블을 분리하고 조합 키로 단가와 재고를 조회하여 불가능한 조합을 선택 단계에서 막도록 설계합니다.

기술적 주안점

  • 한 상품에 회원 유형별 가격 규칙을 조합하는 가격 서비스를 두고, 대학 회원 할인(약 5%)을 규칙 데이터로 관리하도록 설계합니다
  • 옵션 조합마다 독립된 단가와 재고를 갖는 SKU 구조로 설계하고, 선택 즉시 합계가 갱신되도록 구성합니다
  • 견적서를 가격 스냅샷으로 저장하고 주문이 견적을 참조하도록 설계하여 견적에서 주문·결제까지 한 흐름으로 이어지게 합니다

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

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

프로젝트 문의