[React] 캡스톤 디자인 진행과정
안녕하세요 오랜만에 돌아왔네요.
1학기 동안 캡스톤 디자인을 진행했습니다.
저는 인공지능 서버와 프론트엔드 페이지 설계를 도맡아 진행했습니다.
서버는 Flask라는 파이썬을 이용했고,
프론트엔드는 리액트와 AntiDesign 툴을 주로 활용했습니다.
오늘은 페이지의 UI를 보여드리고 개발이 완료되면 코드 리뷰를 하도록 하겠습니다.
먼저 메인페이지입니다.
페이지에 대해 간단히 설명하고
영양성분 설명 버튼을 누르면 성분 설명 페이지로 이동합니다.
성분 설명 페이지입니다.
네모 박스를 누르면 해당 영양소에 대한 설명을 보여줍니다.
다음은 AI 질문 페이지입니다.
질문을 하면 ChatGPT API를 기반으로 답변을 생성해 줍니다.
Navbar에서 추천 받기 버튼을 누르면 위 페이지로 이동하고 추천받기를 누르면
정보 입력페이지로 이동합니다.
정보 입력페이지에서는 나이, 키, 몸무게, 식단을 입력합니다.
식단은 식단 등록창을 누르면 Modal창에서 확인할 수 있습니다.
정보를 입력하고 완료하기 버튼을 누르면
추천 결과 페이지로 이동합니다.
상단에는 BMI, 식단을 통계로 구한 일 평균 섭취량, 부족한 영양소 등을 보여줍니다.
이 부분의 UI는 개선할 예정입니다.
페이지 하단에는 추천 영양제 3개를 보여줍니다.
상세 정보 버튼을 누르면 상세 정보 버튼을 표시합니다.
아직까지 식단 입력 UI와 운동정보 입력, 가시성 부분에서
여러 보완이 필요한 부분이 보이고 있지만
계속해서 개선해나갈 계획입니다.
읽어주셔서 감사합니다!
