• 어르신 관리: 어르신 등록, 정보 수정, 상태 모니터링
• 실시간 건강 데이터: 심박수, 산소포화도, 호흡수, 걸음수 등 생체 신호 추적
• AI 기반 분석: 1일 건강 데이터를 분석하여 종합 건강 리포트 생성
• 보호자 연동: 어르신와 보호자 간의 연결 및 관리
• PDF 리포트: AI 분석 결과를 PDF 형태로 내보내기
• 반응형 대시보드: 직관적인 차트와 통계 정보 제공

• 요양사(Admin): 어르신 목록 관리, 상세 데이터 확인, AI 리포트 조회
• 보호자(Guardian): 어르신 정보 조회, 건강 상태 모니터링, AI 리포트 조회

• React 19.1.1 - UI 라이브러리
• React Router 7.9.3 - 클라이언트 사이드 라우팅
• Axios 1.12.2 - HTTP 클라이언트 (API 통신)
• Vite 7.1.7 - 빌드 도구 및 개발 서버
• Recharts 3.2.1 - 데이터 시각화 및 차트
• React Icons 5.5.0 - 아이콘 라이브러리

• html2canvas 1.4.1 - HTML을 Canvas로 변환
• jsPDF 3.0.3 - PDF 문서 생성

• ESLint 9.36.0 - 코드 품질 관리
• Vite Plugin React 5.0.4 - React 개발 환경

📦src
 ┣ 📂api                             # Axios 인스턴스 설정
 ┃ ┣ 📜authApi.js                    # 인증 관련 API
 ┃ ┣ 📜axiosInstance.js              # Axios 인스턴스 설정
 ┃ ┣ 📜guardianAPI.js                # 보호자 관련 API
 ┃ ┗ 📜patientApi.js                 # 어르신 및 AI 레포트 관련 API
 ┣ 📂assets                          # 정적 자산
 ┃ ┗ 📂styles                        # CSS 스타일 파일
 ┣ 📂components                      # 재사용 가능한 컴포넌트
 ┃ ┣ 📂layout                        # 레이아웃 컴포넌트
 ┃ ┃ ┣ 📂sidebar                     # 사이드바 관련
 ┃ ┃ ┣ 📜Footer.jsx                  # 푸터
 ┃ ┃ ┣ 📜Header.jsx                  # 헤더
 ┃ ┃ ┗ 📜Layout.jsx                  # Header와 Sidebar를 조합하고 메인 컨텐츠를 표시하는 최상위 레이아웃
 ┃ ┗ 📂ui                            # UI 컴포넌트
 ┃ ┃ ┣ 📂modal                       # 어르신 빛 보호자 CRUD 모달
 ┃ ┃ ┣ 📜AuthLayout.jsx              # 로그인/회원가입 페이지 전용 레이아웃
 ┃ ┃ ┣ 📜Button.jsx                  # 버튼 컴포넌트
 ┃ ┃ ┣ 📜PatientCard.jsx             # 어르신 및 보호자 정보 카드
 ┃ ┃ ┣ 📜RecordChart.jsx             # 건강 데이터(차트)를 표시하는 Recharts 컴포넌트
 ┃ ┃ ┗ 📜StatCard.jsx                # 단일 건강 지표 카드
 ┣ 📂data                            # 개발용 더미 데이터
 ┣ 📂pages                           # 페이지 컴포넌트
 ┃ ┣ 📂adminPages                    # 요양사 전용 페이지
 ┃ ┣ 📂authPages                     # 인증(로그인, 회원가입) 관련 페이지
 ┃ ┃ ┣ 📜LoginPage.jsx               # 로그인 페이지
 ┃ ┃ ┗ 📜RegisterPage.jsx            # 회원가입 페이지
 ┃ ┣ 📂patientPages                  # 어르신 관리 핵심 기능 페이지
 ┃ ┃ ┣ 📜AIReportPage.jsx            # AI 건강 분석 리포트 페이지
 ┃ ┃ ┣ 📜PatientDetailPage.jsx       # 어르신 상세 건강 모니터링 대시보드
 ┃ ┃ ┣ 📜PatientEditPage.jsx         # 어르신 정보 수정 페이지
 ┃ ┃ ┣ 📜PatientGuardianListPage.jsx # 보호자 목록 페이지
 ┃ ┃ ┣ 📜PatientListPage.jsx         # 어르신 목록 페이지
 ┃ ┗ 📂publicPages                   # 비로그인 사용자도 접근 가능한 페이지
 ┃ ┃ ┗ 📜HomePage.jsx                # 홈페이지
 ┣ 📂utils                           # 헬퍼 함수
 ┃ ┣ 📜arrayUtils.js                 # 배열 데이터 가공
 ┃ ┣ 📜chartUtils.js                 # Recharts 데이터 포맷팅, 평균 계산 등 차트 관련 함수
 ┃ ┣ 📜dateUtils.js                  # 만 나이 계산
 ┃ ┣ 📜formatUtils.js                # 년월일시분초 표시 형식 변환
 ┃ ┗ 📜statusUtils.js                # 건강 지표 값에 따른 '상태' 판별
 ┣ 📜App.jsx                         # 메인 앱 컴포넌트
 ┗ 📜main.jsx                        # 애플리케이션 진입점

• Node.js (v16 이상)
• npm 또는 yarn

1. 저장소 클론

git clone [repository-url]
cd AI-Care-Hub-frontend

2. 의존성 설치

npm install

3. 개발 서버 실행

npm run dev

4. 빌드

npm run build

• 어르신 목록: 카드 형태로 어르신 정보 표시
• 상태 분류: 정상, 주의, 위험 상태로 어르신 분류
• 검색: 어르신 검색 기능
• 어르신 등록: 새로운 어르신 정보 등록

• 생체 신호 추적: 체중, 혈압(이완기/수축기), 체온, 분당심박수, 혈중 산소 농도, 혈당, 수면 점수, 걸음수, 소모 칼로리
• 시간대별 분석: 시간, 일간, 주간, 월간 평균 데이터 제공
• 상태 알림: 비정상 수치 감지 시 위험 알림

• 7일간 데이터 분석 및 평가: 하루 건강 데이터 종합 분석 및 평가
• AI 예측: 정상, 주의, 위험 단계로 건강 상태 분류
• 시각화: 차트를 통한 데이터 추이 시각화
• PDF 내보내기: 분석 결과를 PDF 형태로 이메일 전송

• 보호자-어르신 연결: 어르신와 보호자 간의 관계 설정
• 보호자 목록: 어르신별 보호자 정보 관리
• 보호자 등록: 새로운 보호자 정보 등록

• 어르신 및 보호자 로그인: 일반 사용자 인증(보호자 아이디와 동일)
• 요양사 로그인: 관리자 권한 인증

• 비밀번호 정규식 검증: 강력한 비밀번호 정책
• 자동 로그인: 사용자 편의성 제공
• 아이디/비밀번호 찾기: 계정 복구 기능

• Recharts: 반응형 차트 컴포넌트
• ComposedChart: 막대 차트와 선 차트 조합
• ResponsiveContainer: 반응형 차트 컨테이너

• 체중: 일간 체중 변화 추이 및 BMI 지수 계산
• 혈당: 식전/식후 혈당 수치 모니터링 및 당뇨 관리
• 혈압: 수축기/이완기 혈압 변화 및 고혈압 위험도 분석
• 혈중 산소 농도: 시간대별 산소포화도(SpO2) 수치 추적
• 체온: 체온 변화 모니터링 및 발열 감지 알림
• 분당 심박수: 시간대별 평균 심박수 변화 및 부정맥 감지
• 활동량: 걸음수 및 칼로리 소모량 추적 및 운동량 분석
• 수면 점수: 수면 시간, 수면 품질, 수면 단계별 분석

• 실시간 모니터링: 모든 생체 신호의 실시간 추적 및 표시
• 트렌드 분석: 장기간 데이터 추이를 통한 건강 상태 변화 파악
• 임계값 알림: 정상 범위를 벗어난 수치 감지 시 즉시 알림
• 비교 분석: 이전 기간 대비 건강 지표 변화율 계산
• 예측 모델: AI 기반 건강 상태 예측 및 위험도 평가
• 개인화된 기준: 어르신별 연령, 성별, 병력에 따른 맞춤형 정상 범위 설정

• 다중 차트 지원: 막대 차트, 선 차트
• 인터랙티브 차트: 마우스 오버 시 상세 정보 표시
• 데이터 내보내기: 차트 데이터를 PDF 형태로 저장
• 컬러 코딩: 정상(녹색), 주의(주황), 위험(빨강) 상태별 색상 구분
• 반응형 차트: 다양한 화면 크기에 최적화된 차트 표시

• 직관적 네비게이션: 사용자 친화적 인터페이스
• 상태별 색상 구분: 정상(녹색), 주의(주황), 위험(빨강)

• 재사용 가능한 UI: 모듈화된 컴포넌트 구조
• 일관된 스타일링: CSS 모듈을 통한 스타일 관리
• 아이콘 시스템: React Icons를 활용한 직관적 아이콘

• API Base URL: http://localhost:8080/api
• Axios 인스턴스: 통일된 HTTP 클라이언트 설정
• 어르신 API: 어르신 데이터 CRUD 작업
• AI 리포트 API: 건강 데이터 분석 요청

• Vite: 빠른 빌드 및 HMR
• 코드 분할: 효율적인 번들 크기 관리

• 개발 환경: npm run dev
• 프로덕션 빌드: npm run build
• 프리뷰: npm run preview

AI Care Hub Frontend - 지능형 어르신 관리 시스템으로 더 나은 요양 서비스를 제공합니다.

• 어르신 목록 페이지

• 어르신 상세 페이지

• AI 레포트 페이지