환자가 진료 전에 증상·혈압·혈당·체온·복용약·질문을 본인 휴대폰에만 기록하고, 진료실에서 의사에게 "진료실 보여주기" 화면을 직접 보여주는 진료 전 메모 도구입니다.

⚠️ 이 앱은 진단, 처방, 응급상황 판단을 위한 도구가 아닙니다. 응급 증상이 있으면 즉시 119 또는 가까운 응급실로 문의하세요.

• 서버 저장 없음: 모든 데이터는 환자 본인 휴대폰 브라우저의 localStorage에만 저장됩니다.
• 로그인/회원가입/전화번호/주민번호 없음: 개인 식별 정보를 일절 수집하지 않습니다.
• EMR 연동 없음: 최종 진료기록은 의료진 판단에 따라 EMR에 작성됩니다.
• 외부 서버/DB/API 없음: 정적 파일만으로 동작합니다.
• 오프라인 지원: 한 번 접속 후에는 인터넷 없이도 기존 기록을 볼 수 있습니다(서비스 워커 캐시).

clinic-memo/
├── index.html          # 모든 화면(홈/기록/목록/상세/진료실/백업/삭제)
├── style.css           # 고령자 친화 큰 글씨·큰 버튼 스타일
├── app.js              # 앱 로직 (localStorage 저장/불러오기, 화면 전환)
├── manifest.json       # PWA 매니페스트 (홈 화면 추가용)
├── service-worker.js   # 오프라인 캐시
├── icons/
│   ├── icon-192.png
│   └── icon-512.png
└── docs/
    ├── 대기실-QR-안내문.md   # 대기실 게시용 문구
    └── 환자-사용-안내문.md   # 환자 배포용 사용 설명서

PWA(서비스 워커)는 file://로 열면 동작하지 않으므로, 간단한 로컬 서버로 띄워야 합니다. 아래 중 편한 방법 하나를 사용하세요. (모두 clinic-memo 폴더에서 실행)

# 방법 1: Python이 있는 경우
python -m http.server 8000

# 방법 2: Node.js가 있는 경우
npx serve .

브라우저에서 http://localhost:8000 접속.

확인할 것:

1. "오늘 기록하기" → 입력 → "내 폰에 저장하기" → 저장 알림 확인
2. "지난 기록 보기"에서 기록 클릭 → 수정/삭제 동작 확인
3. "진료실 보여주기" 화면에 최근 기록과 변화 요약 표시 확인
4. 개발자 도구(F12) → Application → Service Workers 등록 확인
5. 개발자 도구에서 Network를 Offline으로 바꾸고 새로고침 → 화면이 열리는지 확인

휴대폰에서 직접 테스트하려면 HTTPS가 필요하므로, 아래 배포 후 QR로 접속하는 것이 가장 간단합니다.

1. GitHub에 새 저장소를 만들고 clinic-memo 폴더 내용을 푸시합니다.

   cd clinic-memo
   git init
   git add .
   git commit -m "진료 전 메모 PWA"
   git branch -M main
   git remote add origin https://github.com/<아이디>/<저장소이름>.git
   git push -u origin main

2. 저장소 → Settings → Pages → Source를 main 브랜치 / (root)로 설정합니다.
3. 몇 분 후 https://<아이디>.github.io/<저장소이름>/ 주소가 생깁니다. (자동 HTTPS)

1. https://pages.cloudflare.com 에서 새 프로젝트 생성
2. GitHub 저장소 연결 (또는 "Direct Upload"로 폴더를 그대로 업로드)
3. 빌드 설정은 비워 두고(Framework preset: None) 배포
4. https://<프로젝트이름>.pages.dev 주소가 생깁니다. (자동 HTTPS)

배포 후 해당 주소로 QR 코드를 만들어 대기실에 게시하면 됩니다. (QR 생성은 네이버 QR코드, qr-code-generator.com 등 아무 서비스나 사용 가능)

앱 파일을 수정해 다시 배포할 때는 service-worker.js의 CACHE_NAME 버전 숫자를 올려 주세요. (예: jinryo-memo-v2)

안드로이드 (삼성 인터넷 / 크롬)

1. 대기실의 QR 코드를 카메라로 비추고 화면의 주소를 누릅니다.
2. 화면 아래(또는 메뉴 ⋮)에 나오는 "홈 화면에 추가" 를 누릅니다.
3. 홈 화면에 생긴 "진료메모" 아이콘을 누르면 앱처럼 열립니다.

아이폰 (Safari)

1. QR 코드를 카메라로 비추고 화면의 주소를 누릅니다.
2. 화면 아래 가운데의 공유 버튼(네모에 화살표) 을 누릅니다.
3. "홈 화면에 추가" 를 누르고 "추가" 를 누릅니다.
4. 홈 화면의 "진료메모" 아이콘으로 사용합니다.

기록 1건은 localStorage 키 jinryoMemo.records.v1에 아래 형태의 배열로 저장됩니다.

{
  "id": "자동 생성 ID",
  "createdAt": "ISO 날짜시간",
  "mainSymptom": "",
  "onset": "",
  "painScore": 0,
  "temperature": "",
  "systolicBP": "",
  "diastolicBP": "",
  "glucoseType": "공복/식후/모름",
  "glucoseValue": "",
  "bowelSymptoms": "",
  "respiratorySymptoms": "",
  "dizzinessHeadache": "",
  "currentMeds": "",
  "missedMeds": "",
  "allergy": "",
  "questions": ["", "", ""],
  "memo": ""
}

• 브라우저 데이터(인터넷 사용 기록)를 삭제하면 기록도 함께 삭제됩니다. → 데이터 백업 기능 안내 필요
• 사생활 보호(시크릿) 모드에서는 저장이 되지 않거나 창을 닫으면 사라질 수 있습니다.
• 휴대폰을 바꿀 때는 "데이터 백업 → 파일로 내보내기"로 옮길 수 있습니다.

1. IndexedDB 전환: 기록이 수백 건 이상 쌓이거나 사진 첨부가 필요해지면 localStorage 대신 IndexedDB로 전환
2. 인쇄/PDF 버튼: "진료실 보여주기" 화면을 종이로 출력해 차트에 끼울 수 있게 인쇄 버튼 추가 (인쇄 CSS는 이미 포함됨)
3. 글씨 크기 조절: 설정에서 "보통/크게/아주 크게" 3단계 글씨 크기 선택
4. 혈압/혈당 추이 그래프: 입력값을 단순 선 그래프로 표시 (의학적 해석 없이 수치만)
5. 복약 체크리스트: 매일 약 복용 여부를 ○× 로만 기록하는 간단 체크 화면
6. 질환별 입력 양식: 고혈압용/당뇨용/소화기용 등 의원 진료과목에 맞춘 입력 항목 구성
7. 다국어 지원: 외국인 환자를 위한 영어/중국어/베트남어 UI
8. 백업 파일 암호화: 내보내기 시 간단한 비밀번호 암호화 옵션
9. 보호자 모드: 글씨를 더 키우고 항목을 줄인 초간단 입력 모드
10. 알림(선택 동의): 진료 예약일 전날 "메모를 작성해 두세요" 로컬 알림