Skip to content

codingjamee/ai-nutrition-record-service

Repository files navigation

팀원 소개 :


이름 역할
허제인 팀장 / 프론트
배현진 프론트
오혜수 프론트
양민정 프론트
정아영 프론트
김명지 백엔드
최유림 백엔드
장재웅 백엔드

1. 링크

배포 링크
에러 예상 시트
피그마

test 계정 :
ID: elicetest1@elice.com
PW: Kk12345678!

ID: elicetest2@elice.com
PW: Kk12345678!

ID: elicetest3@elice.com
PW: Kk12345678!

2. 프로젝트 설명:

현대인의 건강관리는 중요한 화두입니다.
운동도 중요하지만, 식단은 더욱이 중요합니다.
그러나 하루하루를 살아내기도 바쁜 현대인에게
식단관리까지 할 시간은  부족하기만 합니다.
만일 우리가 사진을 찍어 식단을 올리면
사진속 음식 이름과, 양과, 그에 따른 영양성분을 분석해준다면 얼마나 좋을까요?
우리는 그래서 나의 맞춤 AI 영양사 서비스인 "구그램"을 만들게 되었습니다.

3. 설치 및 사용법:

$ npm install
$ npm start

4. 프론트엔드 사용 기술 스택:

5. 서비스 실제 사진 캡쳐본 및 정리 요약 :

Screenshot 2024-02-08 at 9 26 59 PM Screenshot 2024-02-08 at 9 26 22 PM <img width= <img width= Screenshot 2024-02-08 at 9 27 14 PM Screenshot 2024-02-08 at 9 28 07 PM Screenshot 2024-02-08 at 9 28 18 PM Screenshot 2024-02-08 at 9 28 26 PM Screenshot 2024-02-08 at 9 28 34 PM Screenshot 2024-02-08 at 9 28 47 PM Screenshot 2024-02-08 at 9 28 47 PM

6. 직접 구현한 기술 및 배운 점 :

useCachingApi를 활용하여 자주 요청되는 데이터를
Caching하는 기능의 Api 훅을 구현하였습니다.
useCachingApi는 React-Query를 활용하여 Caching 여부, 시간 등을 선택할 수 있게 하였습니다.
Storybook을 구현하여 공통 컴포넌트 사용법을 명시하였고
디자인정의서에 정의되어있는 대로 스타일링을 하여
프롭으로 정의된 디자인을 사용할 수 있게 개발의 편의성을 확보하였습니다.
useProps로 Props에 따른 컴포넌트 UI를 정의하였습니다.
Compound Component 형태를 활용해
컴포넌트간의 의존성 분리를 도모하였습니다.
IntersectionObserver로 페이지 로딩시간을 단축하였습니다.
라이브러리 없이 캘린더 및 토스트를 구현하여 라이브러리 의존성을 완화하였습니다.
Proxy를 활용하여 서버 클라이언트 간의 CORS문제를 해결하였습니다.
다양한 에러 상황을 에러 예상 시트로 정리하여
각 상황에 따른 분기처리를 하여 사용자 경험을 증진하고자 하였습니다.
코드스플리팅으로 초기 렌더링 시간을 단축, CSR의 단점을 보완하였습니다.

About

AI가 분석해주는 식단 영양정보 서비스

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors