← 포트폴리오 목록
케어로그 보호자 발작·복약 기록 앱
소아 신경계 발작 질환을 앓는 자녀를 돌보는 보호자가 실행기능 점수·발작 양상·복약 내역·병원 일정을 하나의 PWA에서 기록하고 시계열로 되짚어볼 수 있는 프로젝트입니다.
실행기능·발작 추이 모니터링 카드 구현Recharts 기반 주간·월간 추이 차트로 실행기능 점수와 발작 빈도를 한 화면에서 모니터링할 수 있는 카드 컴포넌트를 설계합니다.
PWA 오프라인 기록 동기화 구조 설계Service Worker와 IndexedDB로 오프라인 입력을 큐에 적재하고, 온라인 복귀 시 서버와 자동 동기화하는 구조를 구현합니다.
의료정보 3분리 스키마 설계일반정보·개인정보·의료정보를 물리적으로 분리된 PostgreSQL 스키마로 설계하고, Prisma 클라이언트를 분리해 접근 계층을 구성합니다.
Overview
프로젝트 개요
소아 신경계 발작 질환을 앓는 자녀를 돌보는 보호자가 실행기능 점수·발작 양상·복약 내역·병원 일정을 하나의 PWA에서 기록하고 시계열로 되짚어볼 수 있는 프로젝트입니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
실행기능·발작 등 시계열 기록을 보호자가 짧은 시간에 반복 입력할 수 있는 폼 UX와 입력 검증 로직 설계
개인정보와 의료정보를 분리된 스키마에 저장하면서도 조회 성능을 유지하는 DB 접근 계층 설계
동의서 4개 카테고리의 동의 이력을 추후 감사 가능하
남기는 구조 설계 필요
보호자·의료진 역할에 따라 진입 화면과 데이터 접근 범위를 분리하는 인증 미들웨어 설계
오프라인 상태에서 입력한 발작·복약 기록을 온라인 복귀 시 충돌 없이 동기화하는 큐 구조 설계
핵심 기능 1
병원 일정 관리
보호자가 Echo·외래 등 병원 일정을 캘린더에서 등록하고, 다가오는 일정을 홈 화면에서 바로 확인합니다
핵심 기능 2
실행기능 체크 기록
보호자가 항목별 실행기능 점수를 체크박스로 입력하고, 시간에 따른 변화를 추이 차트로 확인합니다. 항목별 점수 입력 폼과 Recharts 라인 차트를 결합해 기간별 실행기능 변화를 시계열로 시각화합니다
핵심 기능 3
발작 기록 및 이력 관리
보호자가 발작 경향을 텍스트로 기록하고 발작 횟수를 드롭박스로 선택해 이력을 남깁니다. 텍스트 입력과 드롭박스 선택을 결합한 기록 폼과, 발작 이력을 날짜순으로 조회하는 타임라인 뷰를 구현합니다
핵심 기능 4
복약 기록 관리
보호자가 복용 중인 약물 정보를 텍스트·선택 항목으로 기록하고 복약 이력을 관리합니다. 약물명·용량·시간대를 입력하는 폼과 복약 이력 리스트를 구현하고, 복약 누락 여부를 시각적으로 구분합니다
구현 과정
프로젝트 진행 단계
STEP 1
기록 데이터 모델 및 DB 3분리 설계
실행기능·발작·복약·일정 기록 스키마 설계, 일반/개인/의료정보 3분리 PostgreSQL 스키마 및 Prisma 클라이언트 구성
STEP 2
기록 입력 API 및 인증 미들웨어 개발
Express 기반 기록 CRUD API 구현, 보호자·의료진 역할 분리 JWT 인증 미들웨어 및 동의서 이력 API 구현
STEP 3
PWA 기록 화면 및 시계열 뷰 개발
React 기반 실행기능·발작·복약·일정 기록 화면 구현, Recharts 시계열 카드 및 Service Worker 오프라인 캐시 적용
STEP 4
동기화 안정화 및 통합 테스트
오프라인 기록 큐 동기화 로직 검증, 동의서 이력 감사 로그 통합 테스트 및 반응형 크로스 브라우저 검증
프로젝트 성과
실행기능·발작 추이 모니터링 카드 구현Recharts 기반 주간·월간 추이 차트로 실행기능 점수와 발작 빈도를 한 화면에서 모니터링할 수 있는 카드 컴포넌트를 설계합니다.
PWA 오프라인 기록 동기화 구조 설계Service Worker와 IndexedDB로 오프라인 입력을 큐에 적재하고, 온라인 복귀 시 서버와 자동 동기화하는 구조를 구현합니다.
의료정보 3분리 스키마 설계일반정보·개인정보·의료정보를 물리적으로 분리된 PostgreSQL 스키마로 설계하고, Prisma 클라이언트를 분리해 접근 계층을 구성합니다.
동의서 이력 감사 구조 구현개인정보·의료정보 등 4개 카테고리 동의 항목의 동의 시각과 버전을 기록하는 이력 테이블을 설계해 추후 감사에 대응합니다.
역할 기반 라우팅 및 접근 제어 구현보호자·의료진 역할에 따라 로그인 직후 진입 화면과 API 접근 범위를 분리하는 JWT 기반 미들웨어를 설계합니다.
Review
기술적 주안점
- 캘린더 기반 홈 대시보드에 최근 기록 요약을 함께 배치하고, PWA 매니페스트·Service Worker로 설치 가능한 모바일 앱 수준의 진입 경험을 구현합니다
- 체크박스 입력과 시계열 차트를 결합해 보호자가 실행기능 변화 추이를 한눈에 파악할 수 있는 기록 화면을 구현합니다
- 텍스트·선택형 입력을 결합한 발작 기록 폼과 타임라인 뷰로 장기간(longitudinal) 발작 패턴을 추적할 수 있는 구조를 구현합니다
