A-dinger (알츠하이머딩거) — 치매 환자 케어 웹앱

보호자–환자 연결, 통화 기록 분석, 감정 리포트, 리마인더와 알림을 제공하는 치매 환자 케어 서비스

GitHub : https://github.com/Alzheimer-dinger

📒 목차

📖 프로젝트 소개

본 프로젝트는 치매 환자와 보호자를 위한 AI 동반 케어 웹앱입니다. 환자는 앱에서 인공지능과 실시간 대화(음성/자막)로 일상을 공유하고, 보호자는 연결 계정을 통해 심리 상태와 이상 징후를 모니터링합니다. 하루하루 축적되는 대화·활동 데이터를 분석해 일·주·월 단위 종합 리포트 (감정 타임라인, 참여도, 평균 통화시간, 위험 지표)를 제공하여 세심한 돌봄 계획 수립을 돕습니다.

원클릭 통화 흐름 구현 (대기 → 진행 → 종료 상태 관리)
WebSocket 기반 실시간 자막 및 응답 렌더링
보호자–환자 관계 관리(요청/승인/해제) 및 리마인더/알림
PWA/FCM 기반 푸시 알림, 웹 대시보드로 리포트 열람

👥 팀원 구성

_노예원
_{Frontend
UI/UX · 통화 WebSocket
API 연동 · CD · FCM}

_김효신
_{Frontend
UI/UX · API 연동 · 상태관리}

🧰 기술 스택

Frontend

UI / Styling

Dev Tools

📦 컨벤션 · 프로젝트 구조

Branch Convention

main — 배포용 브랜치.
develop — 통합 개발 브랜치. 기능/리팩토링/버그 픽스 머지 대상. 배포 시 PR → main.
feature/{#issue number}/{short-desc} — 기능 단위 작업. 완료 시 PR → develop.
refactor/{#issue number}/{short-desc} — 리팩토링 작업. PR → develop.
fix/{#issue number}/{short-desc} — 오류 수정. PR → develop.

Commit Convention


  [feat]: 새로운 기능 추가
  [refactor]: 코드 리팩토링
  [style]: 스타일 수정, 코드 의미에 영향을 주지 않는 변경사항
  [fix]: 버그 수정
  [docs]: 문서 작성 및 수정
  [test]: 테스트 코드 추가
  [chore]: 빌드 업무 및 패키지 매니저 수정, production code와 무관한 부분들
  [rename]: 파일, 폴더 삭제 및 이름 수정
  [comment]: 주석 추가 및 변경

프로젝트 구조


src/
├── assets/        # 이미지, 아이콘 등 정적 리소스
│
├── components/    # 재사용 가능한 UI 컴포넌트
│   ├── common/
│   ├── modal/
│   └── index.ts
│
├── hooks/         # 커스텀 React Hooks
│
├── mocks/         # 개발 및 테스트용 mock 데이터
│
├── pages/         # 라우트 단위 페이지 컴포넌트
│   ├── call/
│   ├── init/
│   ├── mypage/
│   ├── report/
│   └── index.ts   # 페이지 export 관리
│
├── services/      # API 통신 로직
│
├── utils/         # 공통 유틸리티 함수
│
├── App.tsx
├── main.tsx
└── vite-env.d.ts

🗓️ 개발 기간

기간	스프린트 목표	주요 산출물
2025-06-20 ~ 2025-07-03 (1~2주차)	요구사항 정의 · API 명세 · DB 설계	요구사항 정의서, ERD, Swagger 초안
2025-07-04 ~ 2025-07-31 (3~6주차)	핵심 기능·UI/UX 개발, RAG 구현, 프롬프트 엔지니어링	FE 페이지/컴포넌트, BE 도메인/인증, RAG 서비스
2025-08-01 ~ 2025-08-14 (7~8주차)	기능 통합·안정화 테스트	E2E/통합 테스트, 버그픽스, 성능/보안 점검
2025-08-15 ~ 2025-08-21 (9주차)	배포·모니터링·운영	릴리즈 노트, 대시보드, 알림 룰

🧠 핵심 기능 구현 내용

1) 실시간 AI 기반 통화 제공

환자와 AI가 음성으로 대화하고, 실시간 자막을 제공하는 통화 기능을 구현했습니다. 통화 전/중/후 상태를 명확히 분리하고, 오디오 스트림 처리와 스트리밍 응답을 안정적으로 연결합니다.

① UI 흐름

CallWaiting → CallActive → CallEnd (종료 후 요약/저장)

CallWaiting: 장치/권한 체크(마이크), 서버 연결 준비, 상태 표시
CallActive: 실시간 자막(부분/최종), 발화/응답 타임라인, 음소거/종료 버튼
CallEnd: 통화 요약 노출, 저장/이탈 동작 분기

② 오디오 처리

useAudioStream 훅으로 발화 감지(VAD) 및 마이크 스트림 수집
WebAudio / MediaDevices API 사용, 입력 레벨 모니터링 및 일시정지/재개
샘플레이트/채널 정규화 → 네트워크 전송 포맷으로 인코딩(스트리밍)

③ 실시간 연결

WebSocket 기반 양방향 스트리밍: 오디오 업스트림, 자막/오디오 다운스트림
부분/최종 자막 구분 렌더링(부분 갱신 → 최종 확정)
연결 신뢰성: 핑/퐁 헬스체크, 지수적 재시도, 일시 네트워크 단절 복구
에러/예외 처리: 인증 오류, 장치 접근 실패, 모델 과부하 시 사용자 가이드
리소스 정리: 트랙 stop, 소켓 close, 메모리 해제(종료/이탈 시)

2) 사용자 맞춤형 통합 보고서

일간/기간 종합 관점에서 감정 및 이용 지표를 시각화합니다. 날짜/기간 선택에 따라 API 파라미터를 구성하고, 전처리된 데이터로 그래프/지표 컴포넌트를 렌더링합니다.

① 일간(DailySection)

날짜 선택 + 월간 이모지 캘린더로 하루 흐름 빠른 탐색
감정 계산 로직: 대화 로그 기반 점수 산출(행복/슬픔/분노/놀람/권태 등)
원형 스코어 게이지로 당일 상태를 직관적으로 표현

② 종합(TotalSection)

기간 선택: 1주 / 1달 / 사용자 지정 범위
감정 타임라인: 날짜별 점수 추세(Recharts 라인/에어리어 차트)
참여도/평균 통화시간/위험도 계산 및 카드 지표로 요약
EndDate 기준 종합 보고서: 선택 범위의 말일을 기준으로 요약 문구/지표 확정

③ 데이터 흐름(요약)

통화 중: 마이크 권한 → 오디오 스트림(WebSocket) 전송 → AI 응답(오디오/자막) 수신
통화 후: 세션 요약/대화 로그 서버 기록 → 분석 API가 집계/리포트 생성
리포트 조회: 사용자/연결 대상 식별 → 쿼리 파라미터 구성 → 일간/종합 API 호출 → 시각화

🧭 페이지별 기능

Splash · 온보딩

앱 로드시 스플래시 → 로그인 상태에 따라 라우팅
간단 소개/권한 안내(마이크, 푸시)

로그인/회원가입

이메일·비밀번호 유효성 검사, 오류 메시지 인라인 표시
회원가입 후 프로필 초기 설정(이름/성별/환자코드 옵션)
JWT 발급(Access/Refresh), FCM 토큰 등록

프로필

내 프로필: 이미지/이름/성별/비밀번호 수정, 판매 영역은 미사용
관계(보호자-환자) 상태 표시

관계 관리

환자코드로 요청, 만료 시 재전송, 승인/거절
관계 목록/해제, 상태(REQUESTED/APPROVED 등) 표시

통화(실시간 AI)

흐름: CallWaiting → CallActive → End
마이크 권한, 발화 감지(useAudioStream), WebSocket/Streaming
실시간 자막/응답, 종료 후 기록 저장

통화 기록(Transcripts)

목록: 세션ID/제목/일시/지속시간 요약
상세: 요약/대화 로그, 페이징/검색

분석 리포트

일간: 날짜 선택, 월간 이모지 캘린더, 감정 점수, 원형 스코어
종합: 기간(1주/1달/사용자 지정) 선택, 감정 타임라인, 참여도/평균 통화시간/위험도

리마인더

알림 시각·상태 등록/조회(ACTIVE/INACTIVE)
PWA/FCM 기반 푸시

설정/로그아웃

세션 종료(토큰 무효화), 보안/알림 설정

피드백

평점(예: VERY_LOW~)과 사유 저장, 운영 개선에 활용

맨 위로 ⤴

Name		Name	Last commit message	Last commit date
Latest commit History 168 Commits
.github		.github
public		public
src		src
.gitignore		.gitignore
.gitmessage.txt		.gitmessage.txt
.prettierrc		.prettierrc
README.md		README.md
build.sh		build.sh
cors.json		cors.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite-env.override.d.ts		vite-env.override.d.ts
vite.config.ts		vite.config.ts

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

A-dinger (알츠하이머딩거) — 치매 환자 케어 웹앱

📒 목차

📖 프로젝트 소개

👥 팀원 구성