← 포트폴리오 목록

임상시험 보고서 QR 연동 관리 플랫폼

화장품 임상시험 완료 보고서를 등록·관리하고 보고서마다 고유 QR을 발급해 이력을 추적하며, 고객사는 별도 포털에서 자사 보고서만 조회하고 제품에 인쇄된 QR을 스캔하면 로그인 없이 자료를 확인할 수 있는 플랫폼을 React + Node.js 기반으로 설계·구현합니다.

고유 토큰 기반 QR 검증 구조 설계보고서-QR 1:1 매핑 토큰 체계와 서명 검증 로직을 설계해 위조·중복 발급을 방지하는 구조를 구현
역할 기반 데이터 스코핑 미들웨어 구현JWT role/customerId 클레임 기반으로 API 계층에서 자동 데이터 필터링을 적용하는 미들웨어 설계
암호화 파일 업로드 파이프라인 구축Multer 업로드 후 AES-256 암호화 저장과 접근 시 복호화 스트리밍을 처리하는 구조 구현
서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaJWT
주요 기능
  • 보고서 관리
  • QR 발급·이력
  • 고객사 포털
  • QR 스캔 조회
Overview

프로젝트 개요

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

화장품 임상시험 완료 보고서를 등록·관리하고 보고서마다 고유 QR을 발급해 이력을 추적하며, 고객사는 별도 포털에서 자사 보고서만 조회하고 제품에 인쇄된 QR을 스캔하면 로그인 없이 자료를 확인할 수 있는 플랫폼을 React + Node.js 기반으로 설계·구현합니다.

작업 범위

  • 보고서 관리: 관리자가 임상시험 완료 보고서를 등록하고 고객사·보고서 번호별로 조회·수정할 수 있는 관리 화면입니다
  • QR 발급·이력: 등록된 보고서마다 고유 QR 코드를 자동 생성하고, 어떤 QR이 언제 어떤 보고서에 발급됐는지 이력을 관리합니다
  • 고객사 포털: 고객사 담당자가 별도 계정으로 로그인해 자사에 발급된 보고서만 번호로 검색·조회하고 QR을 재다운로드할 수 있는 포털입니다
  • QR 스캔 조회: 제품에 인쇄된 QR을 스캔하면 로그인 없이 해당 시험 자료 요약을 확인할 수 있는 공개 페이지로, PC와 모바일에서 반응형으로 표시됩니다

주요 업무

  • 보고서 관리 화면: PostgreSQL 기반 보고서 테이블을 설계하고, 파일 업로드는 Multer로 처리한 뒤 원본을 암호화 저장하며, 등록·수정 이력은 별도 로그 테이블에 적재합니다
  • QR 발급·이력 화면: qrcode 라이브러리로 보고서 고유 URL을 인코딩한 QR 이미지를 서버에서 생성하고, 발급 이력 테이블에 발급자·발급시각·상태를 기록합니다
  • 고객사 포털 화면: JWT 기반 인증에 고객사 ID 클레임을 포함해 데이터 조회 시 자동으로 스코프를 제한하고, 역할별 라우트 가드를 적용합니다
  • QR 스캔 조회 화면: QR에 인코딩된 고유 토큰으로 공개 API를 조회하고, Tailwind 반응형 그리드로 모바일 우선 레이아웃을 구성합니다
임상시험 보고서 QR 연동 관리 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

화장품 임상시험 보고서 원본 파일의 암호화 저장과 접근 시 복호화 처리를 함께 고려한 저장 구조 설계

동일 보고서에 대한 QR 재발급 시 기존 QR의 유효성을 안전하게 무효화하는 상태 전이 로직 설계

관리자·고객사 두 사용자 그룹이 하나의 코드베이스를 공유하면서 데이터 접근 범위가 절대 섞이지 않

하는 스코핑 검증 필요

로그인 없는 공개 QR 조회 페이지에서 위조 토큰 접근을 차단하면서도 정상 사용자의 접근 흐름을 저해하지 않는 검증 로직 설계

구현 내용

핵심 기능 상세

핵심 기능 1

보고서 관리

관리자가 임상시험 완료 보고서를 등록하고 고객사·보고서 번호별로 조회·수정할 수 있는 관리 화면입니다.

  • Prisma 스키마로 보고서·고객사·이력 테이블 간 관계를 정의하고 트랜잭션으로 등록·수정을 원자적으로 처리
  • Multer 기반 파일 업로드 후 AES-256 암호화로 원본 파일을 저장하는 구조를 적용
  • React Query로 보고서 목록 캐싱 및 검색·필터 상태를 URL과 동기화

트리 구조 탐색과 목록 뷰를 결합하여 대량 보고서를 빠르게 탐색할 수 있는 노션형 문서 관리 인터페이스를 구현합니다.

보고서 관리
핵심 기능 2

QR 발급·이력

등록된 보고서마다 고유 QR 코드를 자동 생성하고, 어떤 QR이 언제 어떤 보고서에 발급됐는지 이력을 관리합니다.

  • qrcode 라이브러리로 보고서별 고유 URL을 인코딩한 QR PNG/SVG를 서버에서 생성
  • QR 발급 이력 테이블에 발급자·발급시각·다운로드 여부를 기록하는 감사 트레일 설계
  • PDF 인쇄용 QR 시트를 jsPDF로 생성해 다건 일괄 다운로드를 지원하는 구조 구현

QR 코드와 보고서 데이터를 1:1로 매핑하는 고유 토큰 체계를 설계하여 위변조 및 중복 발급을 방지하는 검증 로직을 구현합니다.

QR 발급·이력
핵심 기능 3

고객사 포털

고객사 담당자가 별도 계정으로 로그인해 자사에 발급된 보고서만 번호로 검색·조회하고 QR을 재다운로드할 수 있는 포털입니다.

  • JWT 클레임에 role/customerId를 포함해 API 미들웨어에서 자동 데이터 스코핑 적용
  • React Router에서 역할 기반 라우트 가드로 관리자·고객사 화면 진입을 분리
  • 고객사 대시보드에 발급 현황 요약 카드와 최근 조회 보고서 목록을 구성

단일 코드베이스에서 관리자와 고객사 두 사용자 그룹의 화면과 데이터 접근 범위를 동시에 분리하는 권한 분리(RBAC) 아키텍처를 설계합니다.

고객사 포털
핵심 기능 4

QR 스캔 조회

제품에 인쇄된 QR을 스캔하면 로그인 없이 해당 시험 자료 요약을 확인할 수 있는 공개 페이지로, PC와 모바일에서 반응형으로 표시됩니다.

  • QR 토큰 검증 API를 별도 공개 엔드포인트로 분리해 인증 없이도 안전하게 조회 가능하도록 구성
  • Tailwind 반응형 브레이크포인트로 모바일 세로 화면과 데스크톱 레이아웃을 동시에 대응
  • 만료·폐기된 QR 접근 시 안내 화면으로 분기 처리하는 상태 머신을 설계

로그인 없는 공개 조회임에도 토큰 서명 검증으로 위조 QR 접근을 차단하는 경량 보안 구조를 구현합니다.

QR 스캔 조회
구현 과정

프로젝트 진행 단계

STEP 1

요구사항 분석 및 보고서·QR 데이터 모델 설계 · 2026.08

보고서·고객사·QR 발급 이력 테이블 관계 설계, PostgreSQL 스키마 정의 및 Prisma 마이그레이션 작성

STEP 2

보고서 등록·QR 발급 API 개발 · 2026.08

Express 기반 보고서 CRUD, qrcode 생성, 파일 암호화 업로드 API 22~28개 엔드포인트 구현

STEP 3

권한 분리 및 고객사 포털 UI 개발 · 2026.08

JWT 역할 클레임 기반 라우트 가드, 관리자·고객사 화면 분리, React 트리+목록 UI 구현

STEP 4

QR 공개 조회 페이지 및 반응형 대응 · 2026.08

비로그인 공개 조회 API, 모바일 우선 반응형 레이아웃 구현 및 크로스 브라우저 검증

프로젝트 성과

주요 성과

고유 토큰 기반 QR 검증 구조 설계보고서-QR 1:1 매핑 토큰 체계와 서명 검증 로직을 설계해 위조·중복 발급을 방지하는 구조를 구현
역할 기반 데이터 스코핑 미들웨어 구현JWT role/customerId 클레임 기반으로 API 계층에서 자동 데이터 필터링을 적용하는 미들웨어 설계
암호화 파일 업로드 파이프라인 구축Multer 업로드 후 AES-256 암호화 저장과 접근 시 복호화 스트리밍을 처리하는 구조 구현
노션형 트리 탐색 UI 컴포넌트 설계보고서 계층 탐색을 위한 재귀 트리 컴포넌트와 목록 뷰 전환 인터페이스를 구현
Highlights

기술적 주안점

  • 트리 구조 탐색과 목록 뷰를 결합하여 대량 보고서를 빠르게 탐색할 수 있는 노션형 문서 관리 인터페이스를 구현합니다
  • QR 코드와 보고서 데이터를 1:1로 매핑하는 고유 토큰 체계를 설계하여 위변조 및 중복 발급을 방지하는 검증 로직을 구현합니다
  • 단일 코드베이스에서 관리자와 고객사 두 사용자 그룹의 화면과 데이터 접근 범위를 동시에 분리하는 권한 분리(RBAC) 아키텍처를 설계합니다

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

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기