← 포트폴리오 목록
임상시험 보고서 QR 연동 관리 플랫폼
화장품 임상시험 완료 보고서를 등록·관리하고 보고서마다 고유 QR을 발급해 이력을 추적하며, 고객사는 별도 포털에서 자사 보고서만 조회하고 제품에 인쇄된 QR을 스캔하면 로그인 없이 자료를 확인할 수 있는 플랫폼을 React + Node.js 기반으로 설계·구현합니다.
고유 토큰 기반 QR 검증 구조 설계보고서-QR 1:1 매핑 토큰 체계와 서명 검증 로직을 설계해 위조·중복 발급을 방지하는 구조를 구현
역할 기반 데이터 스코핑 미들웨어 구현JWT role/customerId 클레임 기반으로 API 계층에서 자동 데이터 필터링을 적용하는 미들웨어 설계
암호화 파일 업로드 파이프라인 구축Multer 업로드 후 AES-256 암호화 저장과 접근 시 복호화 스트리밍을 처리하는 구조 구현
Overview
프로젝트 개요
화장품 임상시험 완료 보고서를 등록·관리하고 보고서마다 고유 QR을 발급해 이력을 추적하며, 고객사는 별도 포털에서 자사 보고서만 조회하고 제품에 인쇄된 QR을 스캔하면 로그인 없이 자료를 확인할 수 있는 플랫폼을 React + Node.js 기반으로 설계·구현합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
화장품 임상시험 보고서 원본 파일의 암호화 저장과 접근 시 복호화 처리를 함께 고려한 저장 구조 설계
동일 보고서에 대한 QR 재발급 시 기존 QR의 유효성을 안전하게 무효화하는 상태 전이 로직 설계
관리자·고객사 두 사용자 그룹이 하나의 코드베이스를 공유하면서 데이터 접근 범위가 절대 섞이지 않
하는 스코핑 검증 필요
로그인 없는 공개 QR 조회 페이지에서 위조 토큰 접근을 차단하면서도 정상 사용자의 접근 흐름을 저해하지 않는 검증 로직 설계
구현 내용
핵심 기능 상세
핵심 기능 1
보고서 관리
관리자가 임상시험 완료 보고서를 등록하고 고객사·보고서 번호별로 조회·수정할 수 있는 관리 화면입니다
핵심 기능 2
QR 발급·이력
등록된 보고서마다 고유 QR 코드를 자동 생성하고, 어떤 QR이 언제 어떤 보고서에 발급됐는지 이력을 관리합니다
핵심 기능 3
고객사 포털
고객사 담당자가 별도 계정으로 로그인해 자사에 발급된 보고서만 번호로 검색·조회하고 QR을 재다운로드할 수 있는 포털입니다
핵심 기능 4
QR 스캔 조회
제품에 인쇄된 QR을 스캔하면 로그인 없이 해당 시험 자료 요약을 확인할 수 있는 공개 페이지로, PC와 모바일에서 반응형으로 표시됩니다
구현 과정
프로젝트 진행 단계
STEP 1
요구사항 분석 및 보고서·QR 데이터 모델 설계
보고서·고객사·QR 발급 이력 테이블 관계 설계, PostgreSQL 스키마 정의 및 Prisma 마이그레이션 작성
STEP 2
보고서 등록·QR 발급 API 개발
Express 기반 보고서 CRUD, qrcode 생성, 파일 암호화 업로드 API 22~28개 엔드포인트 구현
STEP 3
권한 분리 및 고객사 포털 UI 개발
JWT 역할 클레임 기반 라우트 가드, 관리자·고객사 화면 분리, React 트리+목록 UI 구현
STEP 4
QR 공개 조회 페이지 및 반응형 대응
비로그인 공개 조회 API, 모바일 우선 반응형 레이아웃 구현 및 크로스 브라우저 검증
프로젝트 성과
주요 성과
고유 토큰 기반 QR 검증 구조 설계보고서-QR 1:1 매핑 토큰 체계와 서명 검증 로직을 설계해 위조·중복 발급을 방지하는 구조를 구현
역할 기반 데이터 스코핑 미들웨어 구현JWT role/customerId 클레임 기반으로 API 계층에서 자동 데이터 필터링을 적용하는 미들웨어 설계
암호화 파일 업로드 파이프라인 구축Multer 업로드 후 AES-256 암호화 저장과 접근 시 복호화 스트리밍을 처리하는 구조 구현
노션형 트리 탐색 UI 컴포넌트 설계보고서 계층 탐색을 위한 재귀 트리 컴포넌트와 목록 뷰 전환 인터페이스를 구현
Review
기술적 주안점
- 트리 구조 탐색과 목록 뷰를 결합하여 대량 보고서를 빠르게 탐색할 수 있는 노션형 문서 관리 인터페이스를 구현합니다
- QR 코드와 보고서 데이터를 1:1로 매핑하는 고유 토큰 체계를 설계하여 위변조 및 중복 발급을 방지하는 검증 로직을 구현합니다
- 단일 코드베이스에서 관리자와 고객사 두 사용자 그룹의 화면과 데이터 접근 범위를 동시에 분리하는 권한 분리(RBAC) 아키텍처를 설계합니다
