플러스프로젝트 배경
1) 문제점 - QR 스캔 후 모바일 브라우저에서 카메라 촬영과 이미지 첨부를 동시에 지원할 때 iOS Safari와 Android Chrome의 input[type=file] capture 속성 동작 차이 — User-Agent 감지 후 플랫폼별 촬영/갤러리 모드를 분기하여 해결 - 칸반 보드에서 드래그앤드롭으로 상태 전이 시 여러 관리자가 동일 건을 동시에 처리하면 상태 충돌 발생 — PostgreSQ
프로젝트 성과
QR 기반 모바일 불량 신고 워크플로우 구현
QR 스캔→카메라 촬영→Canvas API 이미지 압축→불량 정보 입력을 3단계로 간소화한 모바일 최적화 신고 폼 설계, CSS Container Query로 데스크톱·모바일 자동 전환 레이아웃 구현
4단계 상태 머신 칸반 보드 설계
접수→검토→포상/반려→지급 워크플로우를 Finite State Machine 패턴으로 설계, CSS Grid 5열 칸반 보드에서 드래그앤드롭으로 상태 전이하되 유효하지 않은 전이를 서버·클라이언트 양측에서 차단
RBAC 3종 역할 기반 권한 매트릭스 구현
작업자·관리자·협력사 역할별 메뉴·기능 접근 권한을 체크박스 그리드 UI로 시각화, JWT 토큰 + Express 미들웨어로 28개 API 엔드포인트에 대한 역할별 접근 제어 적용
Recharts 복합 차트 품질 대시보드 구축
BarChart로 월별 신고 추이 + PieChart로 불량 유형별 분포를 시각화, useReducer + Context API 기반 전역 필터로 기간·라인·유형 조건 전환 시 KPI 카드 4개와 차트가 동기
Canvas API 클라이언트사이드 이미지 압축 적용
모바일 카메라 촬영 원본을 Canvas API로 1200px 리사이즈 + JPEG quality 0.7 압축하여 서버 업로드 부하를 최소화, 다중 이미지 첨부 및 즉시 미리보기 구현
핵심 기능
통합 대시보드
불량 신고 현황, 처리율, 유형별 분포, 월별 추이를 KPI 카드와 차트로 한눈에 파악하는 메인 대시보드. Recharts 기반 BarChart/PieChart + KPI 카드 그리드 + 기간·라인별 필터
진행 단계
불량 신고 도메인 분석 및 DB 스키마 설계
2025.03.
QR 기반 불량 신고 워크플로우(접수→검토→포상/반려→지급) 상태 머신 설계, PostgreSQL 12개 테이블 및 Prisma ORM 모델 정의, 작업자·관리자·협력사 3종 역할 기반 RBAC 구조 수립
프로젝트 상세
1) 포트폴리오 소개 제조 현장 작업자가 QR 코드를 스캔하여 불량을 즉시 신고하고, 관리자가 접수→검토→포상/반려→지급 워크플로우로 처리하는 품질관리 시스템을 Node.js + Express + PostgreSQL 기반으로 설계·구현했습니다. 모바일 최적화 신고 폼, 이미지 업로드/압축, 관리자 대시보드(Recharts 차트/필터/엑셀 다운로드), 작업자·관리자·협력사 3종 계정 관리를 포함한 6개 핵심
