2023-2-SCS4031-01-Capsaicin

2023년 2학기 ‘융합캡스톤디자인’ 수업에서

스마트 경로당 개념의 혈압 수첩 웹 서비스 '고, 스톱!'을 제작하는 캡사이신 팀입니다! ❤️‍🔥

💭 About

1. 프로젝트명

스마트 경로당 개념의 혈압 수첩 웹 서비스 '고, 스톱!'

2. 프로젝트 목표

고혈압 위험 노인을 대상으로 디지털 경로당 기능을 수행하는 혈압 수첩 서비스를 개발하여 식단 및 건강 기록을 관리하고자 합니다.

급증한 고령 인구의 다양한 수요에 따라 경로당 역시 변화하고 있습니다.

기존 모바일 서비스를 분석한 결과, 경로당은 날로 늘어가고만 있지만 경로당을 위한 커뮤니티 서비스는 부재했고, 혈압 수치 자동 연동 기능 및 노년층 친화적인 서비스를 제공하는 서비스 또한 부재했습니다. 그래서 노인친화적인 UI를 가진 혈압을 비롯한 몸무게, 건강, 운동 관리 서비스를 만들었습니다.

3. 요구분석

질병관리본부에 따르면, 혈압 증가의 가장 큰 원인으로 운동 부족 및 부적절한 식사 습관이 손꼽혔습니다.
이를 통해 혈압 관리에 있어서 식사 습관과 운동 관리는 중요함을 알 수 있습니다.

혈압 관리 서비스는 많지만 노인들이 보기에 다소 UI가 불편한 점이 있습니다.
또한, 경로당은 증가하고 있지만 경로당 내에서 커뮤니티 기능을 수행하는 서비스가 존재하지 않습니다.

🔐 Guides

프론트엔드 서버와 백엔드 서버 모두 실행되고 있어야 정상적인 작동이 가능합니다.

• FrontEnd 설치 방법
  1. 터미널(맥) 혹은 cmd(윈도우) 창에서 원하는 경로에 git clone https://github.com/CSID-DGU/2023-2-SCS4031-01-Capsaicin
  2. VSCode에 들어가 VSCode 터미널 창을 켜 현재 CSID-DGU/2023-2-SCS4031-01-Capsacin 경로인 경우 cd front를 통해 프론트 폴더 접속
  3. 터미널 창에 npm install (초기 접속의 경우) 입력
  4. npm run dev 입력 (localhost 5173번으로 접속)
• BackEnd 설치 방법

  1. (이미 클론이 되었다고 가정, 클론을 하지 않았다면 프론트 1. 방법을 통해 클론) VSCode를 새로운 윈도우에서 실행한 다음 터미널 창을 켜 CSID-DGU/2023-2-SCS4031-01-Capsacin 경로인 경우 cd backend를 통해 백엔드 폴더 접속

  2. pip install -r requirements.txt (패키지 설치)

  3. python manage.py makemigrations

     python manage.py migrate —run-syncdb (db파일 생성, 깃에는 db를 올리지 않기 때문에 새로운 db파일 생성해주어야함)

  4. python manage.py runserver (서버 실행, localhost 8000번으로 접속)

⚙️ System Architecture

• Service Architecture

• Database Architecture

• Usecase Diagram

📚 Tech Stack

Common

Frontend

Backend

🖥 Project Result

1. 회원가입/로그인

회원가입 시 일반유저와 보호자 유저를 선택하여 가입합니다.

• 일반유저 : 소속 경로당과 건강정보(키, 몸무게, 수축혈압)을 포함한 개인 정보 입력하여 가입
• 보호자 유저 : 모니터링을 할 일반 사용자의 전화번호와 본인의 전화번호를 통해 가입

유저는 회원가입 버튼을 누르면 일반 유저, 보호자 유저 중 선택할 수 있습니다.

• 일반 유저 회원가입 화면

• 보호자 회원가입 화면

2. 메인화면

• 일반 사용자의 최근 건강수치와 경로당을 확인할 수 있고, 정보 입력 버튼에 접근 가능합니다.
• 보호자 회원은 건강기록과 맞춤케어만 열람 가능합니다.

3. 건강입력

• 건강입력 메인

  혈압, 몸무게, 음식 및 운동정보를 입력할 수 있는 탭에 접근할 수 있습니다.

• 혈압/몸무게 입력
  • 혈압과 몸무게를 입력할 수 있습니다.

• 식단정보 입력
  • 8개의 카테고리를 선택하면 해당 카테고리의 음식 리스트를 볼 수 있고, 음식과 먹은 음식의 양을 입력합니다.

• 운동 입력
  • 음식 입력과 UI 동일

4. 건강기록

• 사용자의 측정한 몸무게, 혈압 수치와 운동 소모 칼로리를 표 형태로 보여주며, 최근에 먹은 음식을 확인할 수 있습니다.

5. 맞춤케어

• 사용자의 식단 기록과 운동 기록을 바탕으로 맞춤 식단과 운동을 제공합니다.

6. 커뮤니티

• 경로당 내 공지를 통해 경로당의 소식을 알 수 있습니다.
• 경로당 내 관리자는 경로당 공지를 등록할 수 있습니다.
• 이번 달 운동 랭킹과 혈압 측정 랭킹을 볼 수 있습니다.

✨ Expected Outcomes

[사용자 측면]

• 건강 상태 파악 가능 :본인의 건강 상태를 더 주의깊게 관찰 가능
• 개인 맟줌형 건강 관리 : 주기적으로 입력받은 식단, 운동 정보를 토대로 사용자 선호도 기반 식단 추천 서비스 제공

[보호자 측면]

• 사용자 건강 모니터링 : 사용자의 건강 상태 실시간 모니터링 가능 및 일상 생활에서의 적당한 조언과 지원 가능

📍 Commit Convention

태그: 설명

태그 이름	설명
Feat	새로운 기능 추가
Fix	버그 수정
Design	CSS 등 사용자 UI 디자인 변경
Comment	필요한 경우 주석 추가 및 변경
Test	테스트 추가
Rename	파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
Remove	파일을 삭제하는 작업만 수행하는 경우

🗂 Folder Architecture

FE

|-- api => 프로젝트에서 사용할 API와 통신하기 위한 모듈들을 관리하는 디렉토리

|-- assets => 프로젝트에 사용될 폰트, 이미지 등의 정적 자원을 보관하는 디렉토리

|-- coponents => 재사용 가능한 공통 컴포넌트들을 모아둔 디렉토리

|-- node_modules => 프로젝트에 사용된 패키지들이 설치되는 디렉토리

|-- pages => React Router 등을 사용하여 페이지를 관리하는 디렉토리

|-- public => 정적 파일들을 저장하는 디렉토리

|-- src => 주요 소스 코드가 위치하는 디렉토리(컴포넌트, 스타일, 로직 등이 여기에 포함)

|-- store => Redux를 사용하여 상태를 관리하는데 필요한 액션, 리듀서 등을 모아둔 디렉토리

BE

|-- accounts => 사용자 정보 관리

|-- backend => 프로젝트 설정 및 app 관리

|-- main => Api 관리

🤝 Team Member

팀장	--	--	--
신승원	곽호은	정민경	한규민
AI	FE	BE	FE
산업시스템공학과	경영정보학과	화공생물공학과	산업시스템공학과
2018112481	2020111571	2019112294	2018112478

👷‍♀️ Jobs

신승원 : 음식 추천 AI 및 데이터셋 구성

곽호은 : 인프라 구축, 건강 기록 및 맞춤 케어 구현

정민경 : Rest API 개발 및 데이터베이스 관리

한규민 : 음식 입력 및 조회, 운동 입력 구현