플러스프로젝트 배경
1) 문제점 - react-grid-layout 위젯 리사이즈 이벤트와 Recharts ResponsiveContainer의 리사이즈 감지가 동시에 발생할 때 차트 SVG 너비가 순간적으로 0으로 수렴하여 깜빡임이 발생, ResizeObserver를 debounce로 래핑하고 차트 컨테이너에 min-width 보호 값을 설정하여 해결했습니다. - TanStack Virtual의 measureElement는
프로젝트 성과
TanStack Virtual 3,000행 가상 스크롤 구조 구현
TanStack Table v8 + TanStack Virtual measureElement로 가변 높이 3,000행 가상 스크롤 구현, 19개 컬럼 정의 기반 셀 인라인 편집 Map 관리 설계
Web Worker 기반 CSV 파싱 분리 구조 설계
3,000행 CSV 파일 파싱 로직을 Web Worker로 분리하여 메인 스레드 블로킹 없이 파싱·검증·미리보기 렌더링 파이프라인 구현, 파싱 완료 이벤트로 TanStack Table 초기 데이터 주입 연동
Immer + Zustand 버전 스냅샷 캐싱 구조 구축
Immer produce로 버전별 불변 스냅샷 생성·Zustand 맵 캐싱으로 즉시 복원, diff-match-patch 품목·공량·단가 변경 삭제/추가/수정 3색 diff 렌더러 구현
withRoleGuard HOC 기반 RBAC UI 접근 제어 설계
사용자 역할(입력자·검수자·승인자)을 Context로 주입하고 HOC로 버튼·폼·탭 접근 제어 적용, Zustand 검수 상태 머신(미요청→요청중→검토중→승인/반려) 전환 가드와 결합한 협업 아키텍처 구축
react-grid-layout 커스터마이징 대시보드 위젯 구현
드래그 가능한 위젯 레이아웃 구현 및 배치 상태 localStorage 직렬화·복원, React Query staleTime/cacheTime 분리 전략으로 KPI 5분·대기열 10초 독립 갱신 캐싱 아키텍처 설계
핵심 기능
통합 대시보드 및 프로젝트 현황
진행 중인 입찰 프로젝트, 견적 처리 현황, AI 매칭 대기/완료 건수를 한눈에 파악하는 대시보드와 프로젝트별 세부 현황 패널을 구현하였습니다. KPI 카드 + Recharts 차트 + 프로젝트 상태 타임라인
진행 단계
입찰 견적 도메인 분석 및 아키텍처 설계
2025.10.
건설 입찰 견적 업무 흐름(품목 입력→AI 매칭→검수→승인) 분석, TanStack Table v8 + Zustand 슬라이스 기반 상태 아키텍처 설계, PostgreSQL 스키마 및 API 17개 정의
프로젝트 상세
1) 포트폴리오 소개 건설 입찰 견적 업무 전 주기를 지원하는 통합 플랫폼을 React + TypeScript 기반으로 설계·구현하였습니다. AI 자동 품목 매칭(RAG+LLM), 견적서 이력 관리, 프로젝트별 통계 대시보드, 팀원 역할 기반 협업 워크플로우를 단일 시스템으로 구축하였으며, 대용량 견적 데이터(건당 최대 3,000행)를 가상 스크롤 테이블로 처리하는 고성능 UI 구조를 적용하였습니다.
