플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 현장마다 커스텀 폼 항목 구조가 달라 단일 응답 테이블 스키마로 모든 현장 데이터를 저장하기 어려운 문제 — 폼 정의를 JSON Schema로 직렬화하고 응답 값은 JSONB 컬럼에 저장하는 유연한 스키마 구조 설계 - 알림톡 발송 후 응답 완료 여부를 발송 이력 테이블에서 실시간으로 연동 조회해야 하는 데이터 연결 과제 — 발송 이력과 응답 테이블을 작업자 전화번호 +
프로젝트 성과
현장별 단축 URL 자동 발급 온보딩 구현
현장 등록과 동시에 nanoid slug 기반 단축 URL을 자동 발급하고 qrcode.js로 QR코드 즉시 생성, `/s/{slug}` 공개 라우트에서 로그인 없이 현장별 커스텀 폼을 동적 렌더링하는 구조 설계
알림톡→SMS 폴백 이중 채널 발송 큐 구축
Bull Queue 기반 카카오 알림톡 발송 시도 → 실패 시 NCP SMS 자동 폴백 처리 구현, 채널별 재시도 정책과 발송 로그 테이블 설계, 대량 발송 시 진행 상태 SSE 실시간 표시
dnd-kit 기반 7종 항목 폼 빌더 구현
텍스트·선택·날짜·체크박스·파일·서명·번호 7종 입력 항목을 드래그앤드롭으로 조합하는 폼 빌더 구현, 폼 정의를 JSON Schema로 직렬화하여 동적 워커 폼 렌더러와 연동하는 구조 설계
동적 폼 구조 대응 Key-Value 렌더러 설계
현장마다 다른 커스텀 폼 항목 구조를 조회 화면에서 항목명·값·유형 기반으로 동적 렌더링하는 Key-Value 렌더러 컴포넌트 구현, 16개 재사용 컴포넌트로 다형성 입력 UI 체계화
SheetJS 현장별 시트 분리 엑셀 내보내기 구현
TanStack Table 필터 조건을 서버에 전달하여 필터링된 응답 데이터를 현장별 시트로 분리하고 헤더 스타일링을 포함한 xlsx 파일을 생성하는 서버사이드 엑셀 내보내기 파이프라인 설계
핵심 기능
현장 관리 대시보드
등록된 현장별 응답 현황, 발송 건수, 미응답 작업자 수를 한눈에 파악하는 관리자 메인 화면. 현장별 KPI 카드 + Recharts 응답률 차트 + 실시간 수신 피드 구현
진행 단계
현장-작업자-응답 도메인 ERD 및 단축 URL 설계
2026.03.
현장·작업자·폼 항목·응답 4개 도메인 관계형 스키마 설계, PostgreSQL 18개 테이블 정의, nanoid 기반 단축 URL slug 생성 및 라우팅 구조 확정
프로젝트 상세
1) 포트폴리오 소개 건설 현장별 작업자 수발신 데이터를 수집·관리하는 B2B 웹 플랫폼을 React + Node.js 기반으로 설계·구현할 예정. 현장 단위 단축 URL 자동 생성, 로그인 없는 모바일 폼 접근, 알림톡/SMS 발송, 실시간 응답 수집 및 엑셀 다운로드를 포함한 6개 핵심 기능 모듈을 관리자 대시보드와 모바일 워커 폼으로 구성하여 현장별 수작업 데이터 수집 흐름을 디지털화한 통합 솔루션을
