← 포트폴리오 목록
영유아 장내미생물 검사 신청 서비스
영유아 장내미생물 검사 신청부터 결과 확인까지 이어지는 고객 플로우와 협력사 시스템 REST API 연동을 하나의 서비스로 묶은 맞춤 데모를 구현합니다.
협력사 양방향 API 연동 구조 설계수신(고객·배송정보)과 송신(검사상태)을 분리한 REST 엔드포인트 8개 설계, 재시도 큐로 전송 실패 대응
실시간 상태 동기화 엔진 구현WebSocket STOMP 기반으로 5단계 상태 변경을 사용자 화면에 즉시 반영하는 push 구조 설계
동적 문진표 스키마 엔진 구축JSON Schema 기반 문진 항목 렌더링 엔진 설계로 항목 추가·변경 시 코드 수정 없이 대응
Overview
프로젝트 개요
영유아 장내미생물 검사 신청부터 결과 확인까지 이어지는 고객 플로우와 협력사 시스템 REST API 연동을 하나의 서비스로 묶은 맞춤 데모를 구현합니다. 자녀정보 등록, 문진표 작성, 검사 진행현황 추적, 결과지 확인, 반송 신청을 Vue.js + Spring Boot 기반으로 설계하며 협력사 고객·배송정보 수신과 검사상태 송신 API를 함께 구현합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
협력사 API 응답 지연·실패 시에도 접수 데이터 정합성을 보장하는 재시도 큐 아키텍처 설계
5단계 검사 상태를 실시간으로 동기화하면서도 다중 사용자 동시 접속 시 이벤트 순서를 보장하는 구조 설계
출생형태·수유형태 등 가변 문진 항목을 코드 수정 없이 확장 가능한 동적 폼 스키마 설계
9페이지 결과지 렌더링 시 대용량 이미지 로딩으로 인한 초기 렌더링 지연을 완화하는 지연 로딩 전략
핵심 기능 1
협력사 API 연동 기반 접수 자동화
협력사 시스템과 REST API로 연동해 고객정보·배송정보를 자동 수신하고, 검사상태 변경 시 협력사로 실시간 재송신하는 접수 화면을 제공합니다
핵심 기능 2
검사 진행현황 실시간 상태 추적
키트등록→검사접수→진행중→분석중→완료 5단계를 실시간으로 시각화하고, 관리자 페이지의 상태 변경과 자동 동기화되는 진행현황 화면을 제공합니다
핵심 기능 3
문진표 작성 및 자녀정보 등록
자녀 이름·생년월일·성별과 출생형태·수유형태 등 동적 문진 항목을 단계별로 입력하고, 작성 중 임시저장을 자동화하는 화면을 제공합니다
핵심 기능 4
검사 결과지 확인 및 반송 신청
9페이지 결과지를 요약 카드와 함께 확인하고, 반송이 필요한 키트는 운송장번호를 입력해 반송 신청할 수 있는 화면을 제공합니다
구현 과정
프로젝트 진행 단계
STEP 1
협력사 API 명세 분석 및 DB 스키마 확장 설계
기존 MariaDB 스키마에 검사 관련 테이블을 추가하고 협력사 REST API 요청·응답 명세를 정의합니다.
STEP 2
협력사 연동 API 및 상태 관리 백엔드 개발
Spring Boot 기반 접수·상태관리 API를 구현하고 WebSocket 상태 push 로직을 적용합니다.
STEP 3
고객 앱 화면(자녀정보·문진표·결과확인) 개발
Vue 3 기반 동적 문진표, 진행현황 타임라인, 결과지 뷰어 화면을 구현합니다.
STEP 4
통합 테스트 및 협력사 연동 검증
협력사 API 연동 시나리오 테스트, 상태 동기화 검증, 크로스 브라우저 테스트를 진행합니다.
프로젝트 성과
협력사 양방향 API 연동 구조 설계수신(고객·배송정보)과 송신(검사상태)을 분리한 REST 엔드포인트 8개 설계, 재시도 큐로 전송 실패 대응
실시간 상태 동기화 엔진 구현WebSocket STOMP 기반으로 5단계 상태 변경을 사용자 화면에 즉시 반영하는 push 구조 설계
동적 문진표 스키마 엔진 구축JSON Schema 기반 문진 항목 렌더링 엔진 설계로 항목 추가·변경 시 코드 수정 없이 대응
결과지 페이지 뷰어 컴포넌트 설계9페이지 결과지를 페이지네이션 뷰어로 렌더링하는 재사용 컴포넌트 구현
Review
기술적 주안점
- 협력사 REST API를 수신·송신 양방향으로 연동하는 구조를 설계하며, 상태 변경 이벤트 기반 자동 재송신 로직을 함께 구현합니다
- WebSocket 기반 실시간 상태 동기화 구조를 구현해 관리자 상태 변경이 사용자 화면에 즉시 반영되도록 설계합니다
- 동적 폼 스키마와 자동저장 구조를 결합해 문진표 작성 중단 시에도 데이터가 보존되는 UX를 설계합니다
