Connection-Health

FE 2 BE 1 Designer 1 (23.08.24~23.09.04)

본 프로젝트는 React를 사용해서 개발한 개인 맞춤형 AI 건강 관리 어시스턴트 서비스입니다. 사용자의 질병 정보와 음식 및 의약품의 성분을 입력받아 GPT-3.5 Turbo를 기반으로 식품과 의약품의 성분을 분석하여 사용자 개개인의 건강 상태에 따른 섭취 여부 판단을 돕는 서비스입니다. 사용자가 보유한 질병 및 알레르기와 입력된 원재료명을 바탕으로 GPT 모델을 활용하여 성분 특징, 1일 섭취량 등이 포함된 결과를 보여줍니다.

(Prompt-er Day Seoul 2023 예선 출전작입니다.)

주요 특징

사용자 보유 질병 및 알레르기 선택
제품 성분 사진 업로드 및 텍스트 입력
GPT 프롬프터를 활용한 결과 분석

https://github.com/Eunseo-jo/prompterday-frontend

https://prompterday-frontend.vercel.app/home

사용 기술

React: 컴포넌트 기반의 선언적 UI 구성과 효율적인 상태 관리를 위해 사용했습니다.
TypeScript: 컴파일 단계에서 발생할 수 있는 오류를 사전에 감지하여 코드의 안정성을 향상시키고 버그 발생 가능성을 줄이기 위해 사용하였습니다.
Styled-Component: 컴포넌트 단위의 스타일 캡슐화와 동적 스타일링으로 유연한 디자인 구현을 위해 선택하였습니다.
Axios: HTTP 요청을 간결하게 처리하고, 자동 JSON 데이터 파싱, 에러 처리 및 재시도 로직을 구성하기 위해 선택했습니다.
Vite: ES 모듈을 기반으로 하는 개발 서버와 Rollup을 활용한 최적화된 프로덕션 빌드로 빠른 개발과 효율적인 배포 과정을 위해 선택했습니다.

전체 페이지 및 담당 페이지

개발 과정

로딩 화면

영양성분을 분석하는 과정에서 불규칙한 API 응답시간(최대 2분)으로 인한 UX 저하의 문제 발생
setInterval을 이용하여 랜덤한 속도(0.35초~0.5초)로 퍼센테이지를 증가시키고 로딩 퍼센테이지를 랜덤한 시점(50~70% 사이)에 랜덤 시간(3초~5초) 정지하도록 구현
분석 과정이 동적으로 변하는 것처럼 사용자에게 보여지도록 로딩 애니메이션을 구현하여 UX 향상

사용자 검색

사용자의 입력 키워드에 따라 질병 목록을 필터링하고 키워드가 포함된 항목을 보여주는 기능 구현
사용자가 입력한 키워드를 기반으로 질병 목록에서 해당 키워드가 포함된 질병 이름 필터링
필터링된 질병 목록에서 검색 키워드 부분은 다른 색상으로 하이라이트를 적용하여 사용자가 키워드를 쉽게 식별할 수 있도록 구현