프로젝트 상세
개인 프로젝트Medicine Platform
의약품 리콜 정보를 검색하고 확인할 수 있는 서비스
프로젝트 자료
프로젝트 화면
Medicine Platform의 실제 화면과 프로젝트 시각 자료입니다.
개요
프로젝트 개요
제품명과 LOT 번호로 의약품 리콜 정보를 검색하고, 이미지 OCR과 생성형 AI 요약을 활용해 필요한 정보를 확인할 수 있도록 구현한 개인 프로젝트입니다.
- 프로젝트 형태
- 개인 프로젝트
- 담당 영역
- 백엔드 · 프런트엔드
- 서비스 유형
- 의약품 리콜 정보 검색
개인 기여
담당 기능
리콜 조회부터 이미지 인식, AI 요약, 인증과 이력 관리까지 백엔드와 프런트엔드 전반을 구현한 개인 프로젝트입니다.
리콜 검색 및 상세 조회
제품명·LOT 번호·이미지 검색 API와 조회 유형에 맞는 상세 조회 흐름을 구현하고, Spring Data JPA와 MyBatis로 MySQL의 의약품 및 리콜 배치 데이터를 조회했습니다.
OCR 기반 LOT 번호 추출
Tesseract로 이미지 텍스트를 인식하고 공백 정규화와 정규식을 적용해 LOT 표기 및 영문·숫자 조합에서 LOT 번호를 추출했습니다.
AI 리콜 정보 요약
조회한 리콜 결과로 프롬프트를 구성하고 Gemini API 응답을 파싱해 전체 회수 현황, 주요 사유와 사용자 주의사항을 요약하는 기능을 구현했습니다.
인증 및 조회 이력 관리
Spring Security와 JWT 인증을 구성하고 제품명·LOT·이미지 조회 이력을 저장·조회·삭제하는 API와 마이페이지를 구현했습니다.
React 화면 및 API 연동
검색 유형별 입력과 결과 화면, 리콜 상세 정보, 사용자 이력 화면을 백엔드 API와 연결하고 이력 목록에 클라이언트 페이지네이션을 적용했습니다.
사용 기술
기술 스택
Medicine Platform의 리콜 조회, AI 요약과 이미지 인식 기능을 구성하는 기술입니다.
백엔드
- Java 21
- Spring Boot 3.5.5
- Spring Security
- JWT
- Spring Data JPA
- MyBatis
프런트엔드
- React
- Vite
- React Router
데이터 및 AI
- MySQL
- Tesseract OCR
- Gemini API
구성
시스템 아키텍처
React 클라이언트가 JWT와 함께 Spring Boot REST API를 호출하며, 백엔드는 MySQL 조회·이력 저장, Tesseract OCR 처리와 Gemini API 요약 요청을 담당합니다.
핵심 흐름사용자 → React/Vite → Spring Boot REST API → MySQL·Gemini API·Tesseract OCR → 결과 반환
원본 크기로 보기 (새 창에서 열림)핵심 기능
주요 기능
현재 확인된 의약품 리콜 검색 및 이력 관리 기능을 정리했습니다.
제품명 기반 검색
제품명을 이용해 의약품 리콜 정보를 검색
LOT 번호 기반 검색
제품의 LOT 번호를 이용해 리콜 대상 여부를 검색
이미지 OCR
이미지에서 LOT 번호를 인식해 검색에 활용
리콜 상세 정보
검색한 리콜 대상의 상세 정보를 조회
AI 리콜 정보 요약
리콜 정보의 주요 내용을 AI로 요약
검색 및 확인 이력
검색과 확인 이력을 저장하고 마이페이지에서 조회·삭제
페이지네이션
마이페이지 이력 목록을 페이지 단위로 조회
트러블슈팅
문제 해결
공개 저장소의 수정 커밋에서 확인되는 프런트엔드와 백엔드 연동 문제를 정리했습니다.
이미지 조회 API의 multipart 필드 불일치
- 문제
- 이미지 리콜 조회와 이미지 조회 이력 저장 요청에서 업로드 파일이 백엔드에 올바르게 전달되지 않았습니다.
- 원인
- 두 백엔드 API가 각각 요구하는 multipart 필드 이름이 달랐지만 프런트엔드가 `file`과 `image`를 반대로 전송하고 있었습니다.
- 해결
- 리콜 이미지 조회에는 `image`, 이미지 검증 이력 저장에는 `file`을 사용하도록 각 FormData 필드와 호출 흐름을 API 계약에 맞게 수정했습니다.
결과
- 이미지 조회와 이력 저장 요청 형식 일치
- OCR 조회 후 이력 저장 흐름 연결
검색 유형에 맞지 않는 상세 조회
- 문제
- LOT 번호와 이미지 검색 결과에서도 제품명 기반 상세 조회 API를 호출해 상세 데이터를 올바르게 가져오지 못했습니다.
- 원인
- 결과 카드의 상세 조회 URL이 검색 유형과 관계없이 제품명 API로 고정되어 있었습니다.
- 해결
- 제품명 검색은 제품명 상세 API를, LOT 및 이미지 검색은 추출된 LOT 번호 상세 API를 호출하도록 검색 유형별 URL을 분리했습니다.
결과
- 제품명·LOT·이미지별 상세 조회 경로 분리
- 검색 결과와 상세 데이터의 조회 기준 일치
로그아웃 후 인증 토큰 잔존
- 문제
- 마이페이지에서 로그아웃한 뒤에도 인증 토큰이 남아 API 인증 상태가 유지될 수 있었습니다.
- 원인
- 로그아웃 처리에서 사용자 정보만 삭제하고 JWT 토큰은 제거하지 않았습니다.
- 해결
- 사용자 정보와 토큰을 함께 제거하고 홈 경로로 이동하도록 로그아웃 처리를 수정했습니다.
결과
- 브라우저 인증 상태 정리
- 로그아웃 후 홈 화면으로 이동
성과와 학습
결과 및 배운 점
구현 코드와 수정 이력에서 확인되는 결과와 개발 경험을 정리했습니다.
제품명·LOT 번호·이미지라는 서로 다른 입력을 하나의 리콜 조회 흐름으로 연결하며 검색 유형별 API와 응답 구조를 설계했습니다.
Tesseract OCR 결과를 정규화하고 정규식으로 LOT 번호를 추출해 데이터베이스 검색으로 연결하는 과정을 구현했습니다.
리콜 조회 결과를 프롬프트로 구성하고 Gemini API 응답을 서비스 화면에 제공하는 연동 흐름을 구현했습니다.
JWT 인증과 조회 이력의 저장·조회·삭제, React 마이페이지를 연결하며 백엔드와 프런트엔드의 데이터 계약을 조정했습니다.