chpark
0a111c172f
- 14개 핵심 기능 화면 구현 (진단/점수/청구/가족/AI판정 등) - 하단 탭 5개 (홈/내보험/보험금/상담/마이) — 시그널플래너/보맵 참고 - 공용 컴포넌트, 테마 시스템, Zustand 전역 스토어 - Android/iOS/Web 크로스플랫폼 지원 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
100 lines
3.8 KiB
Markdown
100 lines
3.8 KiB
Markdown
# 보험케어 (Insurance Care)
|
|
|
|
시그널플래너 / 보맵 벤치마크 기반 보험 관리 앱.
|
|
**React Native + Expo**로 **Android · iOS · Web** 모두 지원합니다.
|
|
|
|
## 🚀 실행 방법
|
|
|
|
### 1. 의존성 설치
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 2. 앱 실행
|
|
|
|
```bash
|
|
npm start # Expo Dev Tools 실행 (QR 코드로 실기기 연결)
|
|
npm run android # Android 에뮬레이터 또는 연결된 기기
|
|
npm run ios # iOS 시뮬레이터 (macOS 필요)
|
|
npm run web # 브라우저에서 미리보기 (디자인 확인용)
|
|
```
|
|
|
|
개발 중 UI 빠르게 확인할 때는 `npm run web`이 가장 편합니다.
|
|
실기기는 Expo Go 앱 설치 후 QR 스캔.
|
|
|
|
## 📱 주요 구성
|
|
|
|
### 하단 탭 (시그널플래너/보맵 스타일)
|
|
| 탭 | 설명 |
|
|
|---|---|
|
|
| 홈 | 보험 점수, 숨은보험금, 주요 기능 바로가기 |
|
|
| 내 보험 | 가입된 보험 목록·월 납입·총 보장 |
|
|
| 보험금 | 청구·AI 판정·숨은보험금·체크리스트 |
|
|
| 상담 | 카카오/전화/방문 상담, 추천 설계사 |
|
|
| 마이 | 내 정보, 설정, 고객센터 |
|
|
|
|
### 구현된 14개 핵심 기능
|
|
|
|
| # | 기능 | 라우트 |
|
|
|---|---|---|
|
|
| 1 | 3초 보험 진단 (단계형 설문) | `Diagnosis` |
|
|
| 2 | 연령별 분석 (차트 + 추천) | `Analysis` |
|
|
| 3 | 내 보험 점수 (원형 게이지) | `Score` |
|
|
| 4 | 전문가 상담 (카카오/전화/방문) | `Consult` |
|
|
| 5 | 숨은보험금 조회 (로딩→결과) | `HiddenMoney` |
|
|
| 6 | 질병코드 조회 (검색 + DB) | `DiseaseCode` |
|
|
| 7 | 보험금 청구 (카메라/갤러리) | `Claim` |
|
|
| 8 | 건강검진 결과 분석 | `HealthCheck` |
|
|
| 9 | 우리 가족 보험 한눈에 | `Family` |
|
|
| 10 | 병원 가기 전 체크리스트 | `HospitalChecklist` |
|
|
| 11 | AI 보험금 판정 (챗봇형) | `AIJudge` |
|
|
| 12 | 보험료 다이어트 진단 | `PremiumDiet` |
|
|
| 13 | 실손 세대 자동 판별 | `SilsonGen` |
|
|
| 14 | 만기·갱신 알림 (알림톡 설정) | `Notifications` |
|
|
|
|
## 🧩 기술 스택
|
|
|
|
- **React Native 0.74** + **Expo 51**
|
|
- **TypeScript**
|
|
- **React Navigation 6** (Native Stack + Bottom Tabs)
|
|
- **Zustand** — 전역 상태 (프로필/가족/보험 데이터)
|
|
- **expo-linear-gradient**, **react-native-svg** — 그라데이션/점수 게이지
|
|
- **react-native-chart-kit** — 연령별 보험료 막대 차트
|
|
- **expo-image-picker** — 영수증 카메라/갤러리 (보험금 청구)
|
|
- **@expo/vector-icons** — Ionicons
|
|
|
|
## 📂 폴더 구조
|
|
|
|
```
|
|
src/
|
|
├── components/ # 공용 UI (Card, Button, Header, Badge, ScoreGauge 등)
|
|
├── data/ # 질병 코드 DB, 실손 세대 테이블 (목업)
|
|
├── navigation/ # RootNavigator, BottomTabs
|
|
├── screens/ # 화면 19개 (하단 탭 5 + 스택 14)
|
|
├── store/ # Zustand 전역 스토어
|
|
└── theme/ # colors, typography, spacing, radius, shadow
|
|
```
|
|
|
|
## 🎨 디자인 시스템
|
|
|
|
- **Primary**: `#3B82F6` (파란 계열 / 보험 앱 관례)
|
|
- **Success**: `#10B981` / **Warning**: `#F59E0B` / **Danger**: `#EF4444`
|
|
- **폰트**: 시스템 폰트 (SF Pro / Roboto / 나눔고딕)
|
|
- 라운드 14px, 그림자 3단계, Pill/Badge/Progress 컴포넌트 제공
|
|
|
|
## 📝 TODO (다음 단계)
|
|
|
|
- [ ] 실제 보험사 OpenAPI 연동 (현재 목업 데이터)
|
|
- [ ] 카카오 알림톡 발송 백엔드 (Solapi/Kakao Business API)
|
|
- [ ] 푸시 알림 스케줄링 (expo-notifications)
|
|
- [ ] 사용자 인증 (소셜 로그인 — 카카오/네이버/애플)
|
|
- [ ] 보험 증권 OCR (네이버 Clova / Google Vision)
|
|
- [ ] AI 판정 기능 실제 LLM 연동 (Claude API)
|
|
- [ ] 앱스토어/플레이스토어 배포 (EAS Build)
|
|
|
|
## 💡 웹에서도 확인되나요?
|
|
|
|
네. `npm run web` 실행 시 모든 화면을 브라우저에서 볼 수 있습니다.
|
|
단, 카메라(보험금 청구)/푸시알림 같은 네이티브 기능은 실기기/에뮬레이터에서 확인해야 합니다.
|