jinglaibang-h5

경래방·스마트 분실물 찾기(대중용 H5)는 경무 편민 서비스 데스크의 대중용 단일 파일 HTML 애플리케이션으로, 바로 사용할 수 있으며 프로젝터, 대형 화면 또는 휴대폰 시연에 적합합니다. ## 기능 - 🔍 **분실 등록(LF)**: 음성 또는 텍스트로 분실 물품을 설명하고, 접수 번호를 생성하며, 시스템이 습득 신고 건과 자동으로 매칭합니다. - 🎒 **습득 신고(HD)**: 습득 물품을 등록하고, 확인용 6자리 신고 코드를 자동 생성합니다. - 📋 **조회 / 수령**: 접수 번호 또는 수령 코드로 진행 상황을 조회합니다. - 🎯 **자동 매칭**: 물품명 + 장소 키워드로 분실 건과 습득 건을 매칭합니다. - 🧑‍✈️ **경찰 확인**: 매칭 후 경찰이 확인하여 수령 코드를 생성하고, 대중은 코드로 물품을 수령하고 확인 처리합니다(실제 시스템보다 경찰 확인 절차가 하나 더 있어 허위 신고를 방지). - 🎤 **음성 인터랙션**: 브라우저 네이티브 Web Speech API(ASR + TTS)를 사용하며, 지원되지 않을 경우 자동으로 텍스트 양식으로 전환됩니다. - 💾 **백엔드 없음**: 데이터는 브라우저 localStorage에 저장되어 새로고침해도 유지됩니다. ## 사용법 브라우저에서 `index.html`을 직접 열면 됩니다. Chrome / Edge를 권장합니다(음성 인식 지원이 가장 우수). 음성 인식은 `https://` 또는 `localhost` 환경에서 사용해야 하며, `file://`로 직접 열 때는 수동 입력으로 대체할 수 있습니다. ## 시연 흐름 1. 「물건을 주웠어요」에서 물품을 등록 → 신고 코드를 받습니다. 2. 「물건을 잃어버렸어요」에서 동일한 물품을 등록 → 시스템이 매칭되었음을 알립니다. 3. 분실 건 상세로 이동 → 「경찰 확인 · 수령 코드 생성」. 4. 「진행 상황 조회 / 코드로 수령」에서 수령 코드를 입력 → 수령 확인 처리, 두 건 모두 완료. ## 디렉터리 ``` index.html # 전체 인터페이스, 로직, 음성, 데이터 계층 ``` ## 향후 실제 백엔드 연동 `localStorage` 읽기/쓰기를 `/api` 호출로 교체하면 됩니다: 기록 인터페이스, 매칭 인터페이스, 수령 확인 인터페이스. 인터페이스와 상태 머신은 그대로 유지할 수 있습니다. ## License MIT