feat: 보험케어 앱 초기 구축 (React Native + Expo)
- 14개 핵심 기능 화면 구현 (진단/점수/청구/가족/AI판정 등) - 하단 탭 5개 (홈/내보험/보험금/상담/마이) — 시그널플래너/보맵 참고 - 공용 컴포넌트, 테마 시스템, Zustand 전역 스토어 - Android/iOS/Web 크로스플랫폼 지원 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chpark
+16
@@ -0,0 +1,16 @@
|
|||||||
|
node_modules/
|
||||||
|
.expo/
|
||||||
|
.expo-shared/
|
||||||
|
dist/
|
||||||
|
web-build/
|
||||||
|
npm-debug.*
|
||||||
|
*.jks
|
||||||
|
*.p8
|
||||||
|
*.p12
|
||||||
|
*.key
|
||||||
|
*.mobileprovision
|
||||||
|
*.orig.*
|
||||||
|
.DS_Store
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
*.log
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StatusBar } from 'expo-status-bar';
|
||||||
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||||
|
import { NavigationContainer } from '@react-navigation/native';
|
||||||
|
import RootNavigator from './src/navigation/RootNavigator';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<SafeAreaProvider>
|
||||||
|
<NavigationContainer>
|
||||||
|
<StatusBar style="dark" />
|
||||||
|
<RootNavigator />
|
||||||
|
</NavigationContainer>
|
||||||
|
</SafeAreaProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
# 보험케어 (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` 실행 시 모든 화면을 브라우저에서 볼 수 있습니다.
|
||||||
|
단, 카메라(보험금 청구)/푸시알림 같은 네이티브 기능은 실기기/에뮬레이터에서 확인해야 합니다.
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
{
|
||||||
|
"expo": {
|
||||||
|
"name": "보험케어",
|
||||||
|
"slug": "insurance-care",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"orientation": "portrait",
|
||||||
|
"userInterfaceStyle": "light",
|
||||||
|
"splash": {
|
||||||
|
"resizeMode": "contain",
|
||||||
|
"backgroundColor": "#3B82F6"
|
||||||
|
},
|
||||||
|
"assetBundlePatterns": ["**/*"],
|
||||||
|
"ios": {
|
||||||
|
"supportsTablet": true,
|
||||||
|
"bundleIdentifier": "com.insurancecare.app",
|
||||||
|
"infoPlist": {
|
||||||
|
"NSCameraUsageDescription": "보험금 청구를 위한 영수증/진단서 촬영에 카메라가 사용됩니다.",
|
||||||
|
"NSPhotoLibraryUsageDescription": "보험금 청구 서류 첨부를 위해 사진 접근이 필요합니다."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"android": {
|
||||||
|
"package": "com.insurancecare.app",
|
||||||
|
"permissions": [
|
||||||
|
"CAMERA",
|
||||||
|
"READ_EXTERNAL_STORAGE",
|
||||||
|
"WRITE_EXTERNAL_STORAGE",
|
||||||
|
"POST_NOTIFICATIONS"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"bundler": "metro"
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
[
|
||||||
|
"expo-image-picker",
|
||||||
|
{
|
||||||
|
"cameraPermission": "보험금 청구 시 영수증/진단서 촬영을 위해 카메라를 사용합니다.",
|
||||||
|
"photosPermission": "보험금 청구 서류 첨부를 위해 사진 접근이 필요합니다."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"expo-notifications"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
module.exports = function (api) {
|
||||||
|
api.cache(true);
|
||||||
|
return {
|
||||||
|
presets: ['babel-preset-expo'],
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
'module-resolver',
|
||||||
|
{
|
||||||
|
root: ['./'],
|
||||||
|
alias: {
|
||||||
|
'@': './src',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'react-native-reanimated/plugin',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
Generated
+14704
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,44 @@
|
|||||||
|
{
|
||||||
|
"name": "insurance-care",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "node_modules/expo/AppEntry.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "expo start",
|
||||||
|
"android": "expo start --android",
|
||||||
|
"ios": "expo start --ios",
|
||||||
|
"web": "expo start --web"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@expo/metro-runtime": "~3.2.1",
|
||||||
|
"@expo/vector-icons": "^14.0.2",
|
||||||
|
"@react-native-async-storage/async-storage": "1.23.1",
|
||||||
|
"@react-navigation/bottom-tabs": "^6.5.20",
|
||||||
|
"@react-navigation/native": "^6.1.17",
|
||||||
|
"@react-navigation/native-stack": "^6.9.26",
|
||||||
|
"expo": "~51.0.0",
|
||||||
|
"expo-device": "~6.0.2",
|
||||||
|
"expo-font": "^55.0.6",
|
||||||
|
"expo-image-picker": "~15.0.5",
|
||||||
|
"expo-linear-gradient": "~13.0.2",
|
||||||
|
"expo-notifications": "~0.28.0",
|
||||||
|
"expo-status-bar": "~1.12.1",
|
||||||
|
"react": "18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-native": "0.74.3",
|
||||||
|
"react-native-chart-kit": "^6.12.0",
|
||||||
|
"react-native-gesture-handler": "~2.16.1",
|
||||||
|
"react-native-reanimated": "~3.10.1",
|
||||||
|
"react-native-safe-area-context": "4.10.5",
|
||||||
|
"react-native-screens": "3.31.1",
|
||||||
|
"react-native-svg": "15.2.0",
|
||||||
|
"react-native-web": "^0.19.13",
|
||||||
|
"zustand": "^4.5.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.24.0",
|
||||||
|
"@types/react": "~18.2.45",
|
||||||
|
"babel-plugin-module-resolver": "^5.0.2",
|
||||||
|
"typescript": "~5.3.3"
|
||||||
|
},
|
||||||
|
"private": true
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet, ViewStyle } from 'react-native';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Tone = 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
label: string;
|
||||||
|
tone?: Tone;
|
||||||
|
style?: ViewStyle;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Badge({ label, tone = 'primary', style }: Props) {
|
||||||
|
const { bg, color } = toneMap[tone];
|
||||||
|
return (
|
||||||
|
<View style={[styles.base, { backgroundColor: bg }, style]}>
|
||||||
|
<Text style={[styles.label, { color }]}>{label}</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const toneMap: Record<Tone, { bg: string; color: string }> = {
|
||||||
|
primary: { bg: colors.primaryLight, color: colors.primaryDark },
|
||||||
|
success: { bg: colors.secondaryLight, color: colors.secondary },
|
||||||
|
warning: { bg: colors.warningLight, color: colors.warning },
|
||||||
|
danger: { bg: colors.dangerLight, color: colors.danger },
|
||||||
|
neutral: { bg: colors.surfaceAlt, color: colors.textSecondary },
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
base: {
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 4,
|
||||||
|
borderRadius: radius.pill,
|
||||||
|
alignSelf: 'flex-start',
|
||||||
|
},
|
||||||
|
label: { ...typography.small, fontWeight: '700' },
|
||||||
|
});
|
||||||
@@ -0,0 +1,110 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Text, StyleSheet, TouchableOpacity, ViewStyle, ActivityIndicator } from 'react-native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Variant = 'primary' | 'secondary' | 'outline' | 'kakao' | 'ghost' | 'danger';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
title: string;
|
||||||
|
onPress?: () => void;
|
||||||
|
variant?: Variant;
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
disabled?: boolean;
|
||||||
|
loading?: boolean;
|
||||||
|
style?: ViewStyle | ViewStyle[];
|
||||||
|
fullWidth?: boolean;
|
||||||
|
leftIcon?: React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Button({
|
||||||
|
title,
|
||||||
|
onPress,
|
||||||
|
variant = 'primary',
|
||||||
|
size = 'md',
|
||||||
|
disabled,
|
||||||
|
loading,
|
||||||
|
style,
|
||||||
|
fullWidth,
|
||||||
|
leftIcon,
|
||||||
|
}: Props) {
|
||||||
|
const height = size === 'sm' ? 38 : size === 'lg' ? 56 : 48;
|
||||||
|
const fontSize = size === 'sm' ? 14 : size === 'lg' ? 17 : 15;
|
||||||
|
|
||||||
|
const baseStyle: ViewStyle = {
|
||||||
|
height,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
paddingHorizontal: spacing.xl,
|
||||||
|
flexDirection: 'row',
|
||||||
|
opacity: disabled ? 0.5 : 1,
|
||||||
|
...(fullWidth ? { alignSelf: 'stretch' } : {}),
|
||||||
|
};
|
||||||
|
|
||||||
|
const content = (
|
||||||
|
<>
|
||||||
|
{loading ? (
|
||||||
|
<ActivityIndicator color={variant === 'outline' || variant === 'ghost' ? colors.primary : '#FFF'} />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{leftIcon ? <Text style={{ marginRight: 6 }}>{leftIcon}</Text> : null}
|
||||||
|
<Text style={[getTextStyle(variant), { fontSize }]}>{title}</Text>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (variant === 'primary') {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity activeOpacity={0.85} onPress={onPress} disabled={disabled || loading} style={[baseStyle, style]}>
|
||||||
|
<LinearGradient
|
||||||
|
colors={colors.gradient.primary}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 1, y: 1 }}
|
||||||
|
style={StyleSheet.absoluteFill as ViewStyle}
|
||||||
|
/>
|
||||||
|
{content}
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const variantStyle: ViewStyle =
|
||||||
|
variant === 'secondary'
|
||||||
|
? { backgroundColor: colors.surfaceAlt }
|
||||||
|
: variant === 'outline'
|
||||||
|
? { backgroundColor: colors.surface, borderWidth: 1.5, borderColor: colors.primary }
|
||||||
|
: variant === 'kakao'
|
||||||
|
? { backgroundColor: colors.kakao }
|
||||||
|
: variant === 'danger'
|
||||||
|
? { backgroundColor: colors.danger }
|
||||||
|
: { backgroundColor: 'transparent' };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
activeOpacity={0.85}
|
||||||
|
onPress={onPress}
|
||||||
|
disabled={disabled || loading}
|
||||||
|
style={[baseStyle, variantStyle, style]}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTextStyle(variant: Variant) {
|
||||||
|
const base = { ...typography.button, fontWeight: '700' as const };
|
||||||
|
switch (variant) {
|
||||||
|
case 'primary':
|
||||||
|
case 'danger':
|
||||||
|
return { ...base, color: '#FFF' };
|
||||||
|
case 'secondary':
|
||||||
|
return { ...base, color: colors.text };
|
||||||
|
case 'outline':
|
||||||
|
case 'ghost':
|
||||||
|
return { ...base, color: colors.primary };
|
||||||
|
case 'kakao':
|
||||||
|
return { ...base, color: colors.kakaoText };
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, StyleSheet, ViewProps, ViewStyle, TouchableOpacity } from 'react-native';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, shadow, spacing } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Props = ViewProps & {
|
||||||
|
style?: ViewStyle | ViewStyle[];
|
||||||
|
onPress?: () => void;
|
||||||
|
variant?: 'default' | 'flat' | 'outlined';
|
||||||
|
padding?: keyof typeof spacing | number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Card({ children, style, onPress, variant = 'default', padding = 'lg', ...rest }: Props) {
|
||||||
|
const padValue = typeof padding === 'number' ? padding : spacing[padding];
|
||||||
|
const boxStyle = [
|
||||||
|
styles.base,
|
||||||
|
variant === 'default' && styles.default,
|
||||||
|
variant === 'flat' && styles.flat,
|
||||||
|
variant === 'outlined' && styles.outlined,
|
||||||
|
{ padding: padValue },
|
||||||
|
style,
|
||||||
|
];
|
||||||
|
|
||||||
|
if (onPress) {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity activeOpacity={0.85} onPress={onPress} style={boxStyle} {...rest}>
|
||||||
|
{children}
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<View style={boxStyle} {...rest}>
|
||||||
|
{children}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
base: {
|
||||||
|
backgroundColor: colors.surface,
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
},
|
||||||
|
default: {
|
||||||
|
...shadow.md,
|
||||||
|
},
|
||||||
|
flat: {
|
||||||
|
backgroundColor: colors.surfaceAlt,
|
||||||
|
},
|
||||||
|
outlined: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
title: string;
|
||||||
|
subtitle?: string;
|
||||||
|
showBack?: boolean;
|
||||||
|
right?: React.ReactNode;
|
||||||
|
style?: ViewStyle;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Header({ title, subtitle, showBack = true, right, style }: Props) {
|
||||||
|
const navigation = useNavigation();
|
||||||
|
return (
|
||||||
|
<View style={[styles.wrap, style]}>
|
||||||
|
<View style={styles.left}>
|
||||||
|
{showBack ? (
|
||||||
|
<TouchableOpacity onPress={() => navigation.goBack()} hitSlop={12}>
|
||||||
|
<Ionicons name="chevron-back" size={26} color={colors.text} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
<View style={styles.center}>
|
||||||
|
<Text style={styles.title} numberOfLines={1}>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
{subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
|
||||||
|
</View>
|
||||||
|
<View style={styles.right}>{right}</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
wrap: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: spacing.lg,
|
||||||
|
paddingVertical: spacing.md,
|
||||||
|
backgroundColor: colors.surface,
|
||||||
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
|
borderBottomColor: colors.border,
|
||||||
|
},
|
||||||
|
left: { width: 40, alignItems: 'flex-start' },
|
||||||
|
right: { width: 40, alignItems: 'flex-end' },
|
||||||
|
center: { flex: 1, alignItems: 'center' },
|
||||||
|
title: { ...typography.title, color: colors.text },
|
||||||
|
subtitle: { ...typography.small, color: colors.textSecondary, marginTop: 2 },
|
||||||
|
});
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
icon: keyof typeof Ionicons.glyphMap;
|
||||||
|
label: string;
|
||||||
|
onPress?: () => void;
|
||||||
|
color?: string;
|
||||||
|
bg?: string;
|
||||||
|
badge?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function IconTile({ icon, label, onPress, color = colors.primary, bg = colors.primaryLight, badge }: Props) {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity activeOpacity={0.8} onPress={onPress} style={styles.wrap}>
|
||||||
|
<View style={[styles.iconBox, { backgroundColor: bg }]}>
|
||||||
|
<Ionicons name={icon} size={24} color={color} />
|
||||||
|
{badge ? (
|
||||||
|
<View style={styles.badge}>
|
||||||
|
<Text style={styles.badgeText}>{badge}</Text>
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
<Text style={styles.label} numberOfLines={2}>
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
wrap: {
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '25%',
|
||||||
|
paddingVertical: spacing.sm,
|
||||||
|
},
|
||||||
|
iconBox: {
|
||||||
|
width: 56,
|
||||||
|
height: 56,
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginBottom: 8,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
...typography.small,
|
||||||
|
color: colors.text,
|
||||||
|
textAlign: 'center',
|
||||||
|
fontWeight: '500',
|
||||||
|
paddingHorizontal: 4,
|
||||||
|
},
|
||||||
|
badge: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: -4,
|
||||||
|
right: -4,
|
||||||
|
backgroundColor: colors.danger,
|
||||||
|
borderRadius: 10,
|
||||||
|
paddingHorizontal: 6,
|
||||||
|
paddingVertical: 2,
|
||||||
|
minWidth: 18,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
badgeText: { color: '#FFF', fontSize: 10, fontWeight: '700' },
|
||||||
|
});
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, StyleSheet } from 'react-native';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
value: number; // 0-100
|
||||||
|
height?: number;
|
||||||
|
color?: string;
|
||||||
|
track?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ProgressBar({ value, height = 8, color = colors.primary, track = colors.surfaceAlt }: Props) {
|
||||||
|
const pct = Math.max(0, Math.min(100, value));
|
||||||
|
return (
|
||||||
|
<View style={[styles.track, { height, backgroundColor: track }]}>
|
||||||
|
<View style={[styles.fill, { width: `${pct}%`, backgroundColor: color }]} />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
track: {
|
||||||
|
width: '100%',
|
||||||
|
borderRadius: radius.pill,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
height: '100%',
|
||||||
|
borderRadius: radius.pill,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import Svg, { Circle } from 'react-native-svg';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
value: number; // 0-100
|
||||||
|
size?: number;
|
||||||
|
label?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ScoreGauge({ value, size = 180, label = '내 보험 점수' }: Props) {
|
||||||
|
const stroke = 14;
|
||||||
|
const radius = (size - stroke) / 2;
|
||||||
|
const circ = 2 * Math.PI * radius;
|
||||||
|
const pct = Math.max(0, Math.min(100, value));
|
||||||
|
const dash = circ * (pct / 100);
|
||||||
|
const color = pct >= 80 ? colors.success : pct >= 60 ? colors.accent : colors.danger;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
|
||||||
|
<Svg width={size} height={size}>
|
||||||
|
<Circle cx={size / 2} cy={size / 2} r={radius} stroke={colors.surfaceAlt} strokeWidth={stroke} fill="none" />
|
||||||
|
<Circle
|
||||||
|
cx={size / 2}
|
||||||
|
cy={size / 2}
|
||||||
|
r={radius}
|
||||||
|
stroke={color}
|
||||||
|
strokeWidth={stroke}
|
||||||
|
fill="none"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeDasharray={`${dash}, ${circ}`}
|
||||||
|
transform={`rotate(-90 ${size / 2} ${size / 2})`}
|
||||||
|
/>
|
||||||
|
</Svg>
|
||||||
|
<View style={styles.center}>
|
||||||
|
<Text style={styles.label}>{label}</Text>
|
||||||
|
<Text style={[styles.value, { color }]}>{pct}</Text>
|
||||||
|
<Text style={styles.unit}>/ 100점</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
center: {
|
||||||
|
position: 'absolute',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
label: { ...typography.caption, color: colors.textSecondary },
|
||||||
|
value: { fontSize: 48, fontWeight: '800', marginTop: 2 },
|
||||||
|
unit: { ...typography.small, color: colors.textTertiary },
|
||||||
|
});
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ScrollView, View, StyleSheet, ViewStyle, ScrollViewProps, StatusBar } from 'react-native';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
|
||||||
|
type Props = ScrollViewProps & {
|
||||||
|
children: React.ReactNode;
|
||||||
|
scroll?: boolean;
|
||||||
|
style?: ViewStyle;
|
||||||
|
contentStyle?: ViewStyle;
|
||||||
|
background?: string;
|
||||||
|
edges?: Array<'top' | 'right' | 'bottom' | 'left'>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ScreenContainer({
|
||||||
|
children,
|
||||||
|
scroll = true,
|
||||||
|
style,
|
||||||
|
contentStyle,
|
||||||
|
background = colors.background,
|
||||||
|
edges = ['top', 'left', 'right'],
|
||||||
|
...rest
|
||||||
|
}: Props) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={[styles.safe, { backgroundColor: background }, style]} edges={edges}>
|
||||||
|
<StatusBar barStyle="dark-content" />
|
||||||
|
{scroll ? (
|
||||||
|
<ScrollView
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
contentContainerStyle={[{ paddingBottom: 40 }, contentStyle]}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ScrollView>
|
||||||
|
) : (
|
||||||
|
<View style={[{ flex: 1 }, contentStyle]}>{children}</View>
|
||||||
|
)}
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1 },
|
||||||
|
});
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet, ViewStyle } from 'react-native';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
title?: string;
|
||||||
|
subtitle?: string;
|
||||||
|
right?: React.ReactNode;
|
||||||
|
children: React.ReactNode;
|
||||||
|
style?: ViewStyle;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Section({ title, subtitle, right, children, style }: Props) {
|
||||||
|
return (
|
||||||
|
<View style={[styles.wrap, style]}>
|
||||||
|
{(title || right) && (
|
||||||
|
<View style={styles.head}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
{title ? <Text style={styles.title}>{title}</Text> : null}
|
||||||
|
{subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
|
||||||
|
</View>
|
||||||
|
{right}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
<View>{children}</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
wrap: {
|
||||||
|
marginTop: spacing.xl,
|
||||||
|
paddingHorizontal: spacing.lg,
|
||||||
|
},
|
||||||
|
head: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: spacing.md,
|
||||||
|
},
|
||||||
|
title: { ...typography.h3, color: colors.text },
|
||||||
|
subtitle: { ...typography.caption, color: colors.textSecondary, marginTop: 2 },
|
||||||
|
});
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
hint?: string;
|
||||||
|
tone?: 'default' | 'success' | 'warning' | 'danger';
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function StatRow({ label, value, hint, tone = 'default' }: Props) {
|
||||||
|
const toneColor =
|
||||||
|
tone === 'success' ? colors.success : tone === 'warning' ? colors.warning : tone === 'danger' ? colors.danger : colors.text;
|
||||||
|
return (
|
||||||
|
<View style={styles.row}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={styles.label}>{label}</Text>
|
||||||
|
{hint ? <Text style={styles.hint}>{hint}</Text> : null}
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.value, { color: toneColor }]}>{value}</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
row: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: spacing.md,
|
||||||
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
|
borderBottomColor: colors.border,
|
||||||
|
},
|
||||||
|
label: { ...typography.body, color: colors.text },
|
||||||
|
hint: { ...typography.small, color: colors.textSecondary, marginTop: 2 },
|
||||||
|
value: { ...typography.bodyBold, color: colors.text },
|
||||||
|
});
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
export type DiseaseMatch = {
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
keywords: string[];
|
||||||
|
category: '암' | '뇌혈관' | '심장' | '근골격' | '호흡기' | '소화기' | '피부' | '여성' | '기타';
|
||||||
|
coverage: Array<{ policy: string; amount: string; note?: string }>;
|
||||||
|
tips?: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const diseaseDB: DiseaseMatch[] = [
|
||||||
|
{
|
||||||
|
code: 'D34',
|
||||||
|
name: '갑상선 양성 신생물 (결절)',
|
||||||
|
keywords: ['갑상선', '결절', '갑상선 결절', '목 혹'],
|
||||||
|
category: '기타',
|
||||||
|
coverage: [
|
||||||
|
{ policy: '암보험 소액암 진단비', amount: '300~1,000만원', note: '경계성 종양 조건 확인 필요' },
|
||||||
|
{ policy: '실손의료비', amount: '검사비/조직검사 청구 가능' },
|
||||||
|
],
|
||||||
|
tips: ['조직검사 결과지(병리조직검사 보고서) 반드시 수령', '암 진단비는 C73 코드로 변경 시 전액 지급'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'C50',
|
||||||
|
name: '유방암',
|
||||||
|
keywords: ['유방암', '유방', '유방 종양'],
|
||||||
|
category: '암',
|
||||||
|
coverage: [
|
||||||
|
{ policy: '일반암 진단비', amount: '3,000~5,000만원' },
|
||||||
|
{ policy: '여성특정질병 특약', amount: '여성암 추가 가산' },
|
||||||
|
{ policy: '실손', amount: '항암치료/MRI 전액 청구' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'C73',
|
||||||
|
name: '갑상선암',
|
||||||
|
keywords: ['갑상선암'],
|
||||||
|
category: '암',
|
||||||
|
coverage: [{ policy: '소액암(유사암) 진단비', amount: '가입금액의 10~20%' }],
|
||||||
|
tips: ['대부분 소액암으로 분류 — 일반암 진단비 전액 지급 불가'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'S93',
|
||||||
|
name: '발목 염좌',
|
||||||
|
keywords: ['발목', '삠', '염좌', '접질림'],
|
||||||
|
category: '근골격',
|
||||||
|
coverage: [
|
||||||
|
{ policy: '실손의료비', amount: '진료비/물리치료비 전액' },
|
||||||
|
{ policy: '상해보험', amount: '통원일당 1~5만원' },
|
||||||
|
],
|
||||||
|
tips: ['6개월 이상 치료 시 후유장해 평가 가능'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'I63',
|
||||||
|
name: '뇌경색 (뇌졸중)',
|
||||||
|
keywords: ['뇌경색', '뇌졸중', '뇌혈관'],
|
||||||
|
category: '뇌혈관',
|
||||||
|
coverage: [
|
||||||
|
{ policy: '뇌혈관질환 진단비', amount: '2,000~5,000만원' },
|
||||||
|
{ policy: '뇌졸중 진단비', amount: '1,000만원' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'I21',
|
||||||
|
name: '급성 심근경색',
|
||||||
|
keywords: ['심근경색', '심장마비'],
|
||||||
|
category: '심장',
|
||||||
|
coverage: [{ policy: '허혈성심장질환 진단비', amount: '2,000~5,000만원' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'K29',
|
||||||
|
name: '위염 / 역류성 식도염',
|
||||||
|
keywords: ['위염', '식도염', '역류성'],
|
||||||
|
category: '소화기',
|
||||||
|
coverage: [{ policy: '실손', amount: '진료비/약제비 청구 가능' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'L70',
|
||||||
|
name: '여드름',
|
||||||
|
keywords: ['여드름', '트러블'],
|
||||||
|
category: '피부',
|
||||||
|
coverage: [{ policy: '실손 제외 (미용 목적)', amount: '보장 불가' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'N80',
|
||||||
|
name: '자궁내막증',
|
||||||
|
keywords: ['자궁내막증'],
|
||||||
|
category: '여성',
|
||||||
|
coverage: [
|
||||||
|
{ policy: '여성특정질병', amount: '100~500만원' },
|
||||||
|
{ policy: '실손', amount: '진료/수술비 청구' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'J00',
|
||||||
|
name: '감기 / 상기도 감염',
|
||||||
|
keywords: ['감기', '기침', '콧물'],
|
||||||
|
category: '호흡기',
|
||||||
|
coverage: [{ policy: '실손 통원', amount: '1회 1만원 공제 후 80%' }],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function searchDisease(query: string): DiseaseMatch[] {
|
||||||
|
const q = query.trim().toLowerCase();
|
||||||
|
if (!q) return [];
|
||||||
|
return diseaseDB.filter(
|
||||||
|
(d) =>
|
||||||
|
d.name.toLowerCase().includes(q) ||
|
||||||
|
d.code.toLowerCase().includes(q) ||
|
||||||
|
d.keywords.some((k) => k.toLowerCase().includes(q))
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
export type SilsonGen = 1 | 2 | 3 | 4 | 5;
|
||||||
|
|
||||||
|
export type SilsonGenInfo = {
|
||||||
|
generation: SilsonGen;
|
||||||
|
label: string;
|
||||||
|
period: string;
|
||||||
|
pros: string[];
|
||||||
|
cons: string[];
|
||||||
|
selfPay: string;
|
||||||
|
renewCycle: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const silsonGenTable: SilsonGenInfo[] = [
|
||||||
|
{
|
||||||
|
generation: 1,
|
||||||
|
label: '1세대 (구 실손)',
|
||||||
|
period: '~2009.09',
|
||||||
|
pros: ['자기부담금 0%', '보장 범위 가장 넓음'],
|
||||||
|
cons: ['보험료 인상률 매우 높음', '신규 가입 불가'],
|
||||||
|
selfPay: '0%',
|
||||||
|
renewCycle: '3~5년',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
generation: 2,
|
||||||
|
label: '2세대 (표준화 실손)',
|
||||||
|
period: '2009.10 ~ 2017.03',
|
||||||
|
pros: ['보장 범위 넓음', '자기부담 10%'],
|
||||||
|
cons: ['보험료 갱신 시 인상률 높음', '도수치료 제한'],
|
||||||
|
selfPay: '10%',
|
||||||
|
renewCycle: '1년',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
generation: 3,
|
||||||
|
label: '3세대 (착한 실손)',
|
||||||
|
period: '2017.04 ~ 2021.06',
|
||||||
|
pros: ['보험료 저렴', '기본형/특약 분리'],
|
||||||
|
cons: ['비급여 3대 특약 분리', '보장 축소'],
|
||||||
|
selfPay: '10~20%',
|
||||||
|
renewCycle: '1년',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
generation: 4,
|
||||||
|
label: '4세대 실손',
|
||||||
|
period: '2021.07 ~ 2024.12',
|
||||||
|
pros: ['보험료 가장 저렴', '비급여 할인/할증'],
|
||||||
|
cons: ['자기부담금 상승', '비급여 사용 시 보험료 인상'],
|
||||||
|
selfPay: '급여 20% / 비급여 30%',
|
||||||
|
renewCycle: '1년',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
generation: 5,
|
||||||
|
label: '5세대 실손',
|
||||||
|
period: '2025.01 ~',
|
||||||
|
pros: ['4세대 대비 월 보험료 최대 70% 절감'],
|
||||||
|
cons: ['보장 축소 (도수/비급여 주사/MRI 제한)', '전환 시 복귀 불가'],
|
||||||
|
selfPay: '급여 20% / 비급여 50%',
|
||||||
|
renewCycle: '1년',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function identifyGenFromDate(joinDate: string): SilsonGen {
|
||||||
|
const d = new Date(joinDate);
|
||||||
|
if (d < new Date('2009-10-01')) return 1;
|
||||||
|
if (d < new Date('2017-04-01')) return 2;
|
||||||
|
if (d < new Date('2021-07-01')) return 3;
|
||||||
|
if (d < new Date('2025-01-01')) return 4;
|
||||||
|
return 5;
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import HomeScreen from '@/screens/HomeScreen';
|
||||||
|
import MyInsuranceScreen from '@/screens/MyInsuranceScreen';
|
||||||
|
import ClaimHubScreen from '@/screens/ClaimHubScreen';
|
||||||
|
import ConsultHubScreen from '@/screens/ConsultHubScreen';
|
||||||
|
import MyPageScreen from '@/screens/MyPageScreen';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
|
||||||
|
const Tab = createBottomTabNavigator();
|
||||||
|
|
||||||
|
export default function BottomTabs() {
|
||||||
|
return (
|
||||||
|
<Tab.Navigator
|
||||||
|
screenOptions={({ route }) => ({
|
||||||
|
headerShown: false,
|
||||||
|
tabBarActiveTintColor: colors.primary,
|
||||||
|
tabBarInactiveTintColor: colors.textTertiary,
|
||||||
|
tabBarStyle: {
|
||||||
|
height: 62,
|
||||||
|
paddingBottom: 8,
|
||||||
|
paddingTop: 6,
|
||||||
|
borderTopColor: colors.border,
|
||||||
|
},
|
||||||
|
tabBarLabelStyle: { fontSize: 11, fontWeight: '600' },
|
||||||
|
tabBarIcon: ({ color, size, focused }) => {
|
||||||
|
const icon: Record<string, keyof typeof Ionicons.glyphMap> = {
|
||||||
|
Home: focused ? 'home' : 'home-outline',
|
||||||
|
MyInsurance: focused ? 'shield-checkmark' : 'shield-checkmark-outline',
|
||||||
|
ClaimHub: focused ? 'receipt' : 'receipt-outline',
|
||||||
|
ConsultHub: focused ? 'chatbubbles' : 'chatbubbles-outline',
|
||||||
|
MyPage: focused ? 'person' : 'person-outline',
|
||||||
|
};
|
||||||
|
return <Ionicons name={icon[route.name]} size={size} color={color} />;
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: '홈' }} />
|
||||||
|
<Tab.Screen name="MyInsurance" component={MyInsuranceScreen} options={{ tabBarLabel: '내 보험' }} />
|
||||||
|
<Tab.Screen name="ClaimHub" component={ClaimHubScreen} options={{ tabBarLabel: '보험금' }} />
|
||||||
|
<Tab.Screen name="ConsultHub" component={ConsultHubScreen} options={{ tabBarLabel: '상담' }} />
|
||||||
|
<Tab.Screen name="MyPage" component={MyPageScreen} options={{ tabBarLabel: '마이' }} />
|
||||||
|
</Tab.Navigator>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||||
|
import BottomTabs from './BottomTabs';
|
||||||
|
import DiagnosisScreen from '@/screens/DiagnosisScreen';
|
||||||
|
import AnalysisScreen from '@/screens/AnalysisScreen';
|
||||||
|
import ScoreScreen from '@/screens/ScoreScreen';
|
||||||
|
import ConsultScreen from '@/screens/ConsultScreen';
|
||||||
|
import HiddenMoneyScreen from '@/screens/HiddenMoneyScreen';
|
||||||
|
import DiseaseCodeScreen from '@/screens/DiseaseCodeScreen';
|
||||||
|
import ClaimScreen from '@/screens/ClaimScreen';
|
||||||
|
import HealthCheckScreen from '@/screens/HealthCheckScreen';
|
||||||
|
import FamilyScreen from '@/screens/FamilyScreen';
|
||||||
|
import HospitalChecklistScreen from '@/screens/HospitalChecklistScreen';
|
||||||
|
import AIJudgeScreen from '@/screens/AIJudgeScreen';
|
||||||
|
import PremiumDietScreen from '@/screens/PremiumDietScreen';
|
||||||
|
import SilsonGenScreen from '@/screens/SilsonGenScreen';
|
||||||
|
import NotificationScreen from '@/screens/NotificationScreen';
|
||||||
|
|
||||||
|
export type RootStackParamList = {
|
||||||
|
Tabs: undefined;
|
||||||
|
Diagnosis: undefined;
|
||||||
|
Analysis: undefined;
|
||||||
|
Score: undefined;
|
||||||
|
Consult: undefined;
|
||||||
|
HiddenMoney: undefined;
|
||||||
|
DiseaseCode: undefined;
|
||||||
|
Claim: undefined;
|
||||||
|
HealthCheck: undefined;
|
||||||
|
Family: undefined;
|
||||||
|
HospitalChecklist: undefined;
|
||||||
|
AIJudge: undefined;
|
||||||
|
PremiumDiet: undefined;
|
||||||
|
SilsonGen: undefined;
|
||||||
|
Notifications: undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Stack = createNativeStackNavigator<RootStackParamList>();
|
||||||
|
|
||||||
|
export default function RootNavigator() {
|
||||||
|
return (
|
||||||
|
<Stack.Navigator screenOptions={{ headerShown: false }}>
|
||||||
|
<Stack.Screen name="Tabs" component={BottomTabs} />
|
||||||
|
<Stack.Screen name="Diagnosis" component={DiagnosisScreen} />
|
||||||
|
<Stack.Screen name="Analysis" component={AnalysisScreen} />
|
||||||
|
<Stack.Screen name="Score" component={ScoreScreen} />
|
||||||
|
<Stack.Screen name="Consult" component={ConsultScreen} />
|
||||||
|
<Stack.Screen name="HiddenMoney" component={HiddenMoneyScreen} />
|
||||||
|
<Stack.Screen name="DiseaseCode" component={DiseaseCodeScreen} />
|
||||||
|
<Stack.Screen name="Claim" component={ClaimScreen} />
|
||||||
|
<Stack.Screen name="HealthCheck" component={HealthCheckScreen} />
|
||||||
|
<Stack.Screen name="Family" component={FamilyScreen} />
|
||||||
|
<Stack.Screen name="HospitalChecklist" component={HospitalChecklistScreen} />
|
||||||
|
<Stack.Screen name="AIJudge" component={AIJudgeScreen} />
|
||||||
|
<Stack.Screen name="PremiumDiet" component={PremiumDietScreen} />
|
||||||
|
<Stack.Screen name="SilsonGen" component={SilsonGenScreen} />
|
||||||
|
<Stack.Screen name="Notifications" component={NotificationScreen} />
|
||||||
|
</Stack.Navigator>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,250 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Msg = { role: 'user' | 'ai'; text: string; verdict?: Verdict };
|
||||||
|
|
||||||
|
type Verdict = {
|
||||||
|
available: boolean;
|
||||||
|
policies: Array<{ name: string; desc: string }>;
|
||||||
|
docs: string[];
|
||||||
|
estimated: string;
|
||||||
|
caution?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const samples = [
|
||||||
|
'어제 계단에서 넘어져서 발목 삐었어요',
|
||||||
|
'감기로 병원 다녀왔는데 청구 되나요?',
|
||||||
|
'대장내시경에서 용종 2개 제거했어요',
|
||||||
|
'어깨가 아파서 도수치료 5회 받았습니다',
|
||||||
|
];
|
||||||
|
|
||||||
|
function judge(input: string): Verdict {
|
||||||
|
const q = input.toLowerCase();
|
||||||
|
if (q.includes('발목') || q.includes('삐') || q.includes('넘어')) {
|
||||||
|
return {
|
||||||
|
available: true,
|
||||||
|
policies: [
|
||||||
|
{ name: '실손의료비', desc: '정형외과 진료비 청구 가능' },
|
||||||
|
{ name: '상해보험 통원일당', desc: '1일 1~5만원 (가입 금액 따라)' },
|
||||||
|
],
|
||||||
|
docs: ['정형외과 영수증', '진단서 (S93 발목 염좌)'],
|
||||||
|
estimated: '5~15만원',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (q.includes('감기')) {
|
||||||
|
return {
|
||||||
|
available: true,
|
||||||
|
policies: [{ name: '실손 통원의료비', desc: '1회 1만원 공제 후 80% 보장' }],
|
||||||
|
docs: ['병원 영수증', '처방전'],
|
||||||
|
estimated: '2~4만원',
|
||||||
|
caution: '실손 외래 통원 건당 자기부담금(의원 1만원, 종합병원 2만원) 공제',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (q.includes('용종')) {
|
||||||
|
return {
|
||||||
|
available: true,
|
||||||
|
policies: [
|
||||||
|
{ name: '실손의료비', desc: '내시경/제거 시술비 청구' },
|
||||||
|
{ name: '수술비 특약', desc: '1종 수술 해당 - 10~50만원' },
|
||||||
|
],
|
||||||
|
docs: ['수술확인서 (용종절제술)', '세부내역서', '조직검사 결과지'],
|
||||||
|
estimated: '15~50만원',
|
||||||
|
caution: '조직검사 결과 악성으로 판정 시 암진단비 별도 청구 가능',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (q.includes('도수치료')) {
|
||||||
|
return {
|
||||||
|
available: true,
|
||||||
|
policies: [{ name: '실손 비급여 특약', desc: '도수치료 1회 25만원 한도' }],
|
||||||
|
docs: ['병원 영수증 (세부내역서 포함)', '의사 소견서'],
|
||||||
|
estimated: '회당 3~25만원 (실손 세대별 상이)',
|
||||||
|
caution: '4세대 이후 연 10회 또는 50만원 한도 제한',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
available: false,
|
||||||
|
policies: [],
|
||||||
|
docs: [],
|
||||||
|
estimated: '-',
|
||||||
|
caution: '더 구체적인 증상/시술명을 알려주시면 정확히 판정해 드릴 수 있어요.',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AIJudgeScreen() {
|
||||||
|
const [msgs, setMsgs] = useState<Msg[]>([
|
||||||
|
{ role: 'ai', text: '안녕하세요! 보험금 청구 가능 여부를 AI가 판정해 드려요. 증상이나 시술명을 편하게 말씀해 주세요.' },
|
||||||
|
]);
|
||||||
|
const [input, setInput] = useState('');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const send = (text: string) => {
|
||||||
|
if (!text.trim()) return;
|
||||||
|
setMsgs((m) => [...m, { role: 'user', text }]);
|
||||||
|
setInput('');
|
||||||
|
setLoading(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
const v = judge(text);
|
||||||
|
setMsgs((m) => [
|
||||||
|
...m,
|
||||||
|
{
|
||||||
|
role: 'ai',
|
||||||
|
text: v.available ? '✅ 청구 가능합니다! 아래 내용 참고해 주세요.' : 'ℹ️ 더 자세한 정보가 필요해요.',
|
||||||
|
verdict: v,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setLoading(false);
|
||||||
|
}, 1100);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="AI 보험금 판정" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<LinearGradient colors={['#8B5CF6', '#7C3AED']} style={styles.hero}>
|
||||||
|
<Ionicons name="sparkles" size={32} color="#FFF" />
|
||||||
|
<Text style={styles.heroTitle}>🤖 AI가 즉시 판정</Text>
|
||||||
|
<Text style={styles.heroSub}>증상만 말해도 보장 여부 확인!</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
|
||||||
|
<View style={{ marginTop: 16 }}>
|
||||||
|
{msgs.map((m, i) => (
|
||||||
|
<View key={i} style={[styles.msg, m.role === 'user' ? styles.msgUser : styles.msgAI]}>
|
||||||
|
<Text style={{ color: m.role === 'user' ? '#FFF' : colors.text, ...typography.body }}>{m.text}</Text>
|
||||||
|
{m.verdict && <VerdictCard v={m.verdict} />}
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
{loading && (
|
||||||
|
<View style={[styles.msg, styles.msgAI]}>
|
||||||
|
<ActivityIndicator color={colors.primary} />
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Section title="예시 질문">
|
||||||
|
<View style={{ gap: 8 }}>
|
||||||
|
{samples.map((s) => (
|
||||||
|
<TouchableOpacity key={s} style={styles.sample} onPress={() => send(s)}>
|
||||||
|
<Ionicons name="chatbubble-outline" size={16} color={colors.primary} />
|
||||||
|
<Text style={{ marginLeft: 8, ...typography.body, color: colors.text } as any}>{s}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Card style={{ marginTop: 16 }}>
|
||||||
|
<View style={styles.inputRow}>
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
placeholder="증상이나 시술명을 입력하세요"
|
||||||
|
value={input}
|
||||||
|
onChangeText={setInput}
|
||||||
|
placeholderTextColor={colors.textTertiary}
|
||||||
|
multiline
|
||||||
|
/>
|
||||||
|
<TouchableOpacity style={styles.sendBtn} onPress={() => send(input)}>
|
||||||
|
<Ionicons name="arrow-up" size={20} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Text style={styles.disclaimer}>
|
||||||
|
※ AI 판정은 참고용이며 실제 보장 여부는 개인 가입 약관에 따라 다를 수 있습니다
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View style={{ height: 24 }} />
|
||||||
|
<Button title="실제 청구하러 가기" onPress={() => {}} />
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function VerdictCard({ v }: { v: Verdict }) {
|
||||||
|
if (!v.available) {
|
||||||
|
return (
|
||||||
|
<Card padding="md" style={{ marginTop: 12, backgroundColor: colors.surface }}>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary } as any}>{v.caution}</Text>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Card padding="md" style={{ marginTop: 12, backgroundColor: colors.surface }}>
|
||||||
|
<Badge label="청구 가능" tone="success" />
|
||||||
|
<View style={{ marginTop: 10 }}>
|
||||||
|
<Text style={styles.section}>💰 해당 보험</Text>
|
||||||
|
{v.policies.map((p, i) => (
|
||||||
|
<Text key={i} style={styles.item}>
|
||||||
|
• {p.name} — {p.desc}
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<View style={{ marginTop: 10 }}>
|
||||||
|
<Text style={styles.section}>📋 필요 서류</Text>
|
||||||
|
{v.docs.map((d, i) => (
|
||||||
|
<Text key={i} style={styles.item}>
|
||||||
|
• {d}
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<View style={{ marginTop: 10 }}>
|
||||||
|
<Text style={styles.section}>💵 예상 수령액</Text>
|
||||||
|
<Text style={{ ...typography.title as any, color: colors.success, marginTop: 4 }}>{v.estimated}</Text>
|
||||||
|
</View>
|
||||||
|
{v.caution && (
|
||||||
|
<View style={{ marginTop: 10, padding: 10, backgroundColor: colors.warningLight, borderRadius: 8 }}>
|
||||||
|
<Text style={{ ...typography.small, color: colors.warning } as any}>⚠️ {v.caution}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
hero: { padding: 24, borderRadius: radius.xl, alignItems: 'center' },
|
||||||
|
heroTitle: { color: '#FFF', fontSize: 20, fontWeight: '800', marginTop: 10 },
|
||||||
|
heroSub: { color: 'rgba(255,255,255,0.9)', fontSize: 13, marginTop: 4 },
|
||||||
|
msg: {
|
||||||
|
padding: 14,
|
||||||
|
borderRadius: 16,
|
||||||
|
marginBottom: 8,
|
||||||
|
maxWidth: '88%',
|
||||||
|
},
|
||||||
|
msgAI: { backgroundColor: colors.surfaceAlt, alignSelf: 'flex-start' },
|
||||||
|
msgUser: { backgroundColor: colors.primary, alignSelf: 'flex-end' },
|
||||||
|
sample: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: colors.primaryLight,
|
||||||
|
padding: 12,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
},
|
||||||
|
inputRow: { flexDirection: 'row', alignItems: 'flex-end' },
|
||||||
|
input: {
|
||||||
|
flex: 1,
|
||||||
|
fontSize: 15,
|
||||||
|
maxHeight: 80,
|
||||||
|
color: colors.text,
|
||||||
|
paddingVertical: 8,
|
||||||
|
},
|
||||||
|
sendBtn: {
|
||||||
|
width: 36,
|
||||||
|
height: 36,
|
||||||
|
borderRadius: 18,
|
||||||
|
backgroundColor: colors.primary,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginLeft: 8,
|
||||||
|
},
|
||||||
|
section: { ...typography.caption, color: colors.textSecondary, fontWeight: '700' },
|
||||||
|
item: { ...typography.body, marginTop: 4, color: colors.text },
|
||||||
|
disclaimer: { ...typography.small, color: colors.textTertiary, marginTop: 8, textAlign: 'center' },
|
||||||
|
});
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
|
||||||
|
import { BarChart } from 'react-native-chart-kit';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
const screenWidth = Dimensions.get('window').width;
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
'20대': { prem: 18, must: ['실손', '상해'], rec: ['암 (가족력)'], avgCoverage: '2,000만원' },
|
||||||
|
'30대': { prem: 28, must: ['실손', '암', '종신'], rec: ['여성특화', '치아'], avgCoverage: '5,000만원' },
|
||||||
|
'40대': { prem: 38, must: ['실손', '암', '뇌/심장', '종신'], rec: ['간병', '치매'], avgCoverage: '1억원' },
|
||||||
|
'50대': { prem: 52, must: ['실손', '암', '뇌/심장', '간병'], rec: ['치매', '유병자'], avgCoverage: '1.5억원' },
|
||||||
|
'60대+': { prem: 48, must: ['유병자 실손', '간병', '치매'], rec: ['상조'], avgCoverage: '1억원' },
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
const ages = ['20대', '30대', '40대', '50대', '60대+'] as const;
|
||||||
|
const genders = ['여성', '남성'] as const;
|
||||||
|
|
||||||
|
export default function AnalysisScreen() {
|
||||||
|
const [age, setAge] = useState<(typeof ages)[number]>('30대');
|
||||||
|
const [gender, setGender] = useState<(typeof genders)[number]>('여성');
|
||||||
|
const info = data[age];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="연령별 분석" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.bodyBold as any}>같은 연령대를 비교해 보세요</Text>
|
||||||
|
<View style={{ flexDirection: 'row', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
|
||||||
|
{ages.map((a) => (
|
||||||
|
<TouchableOpacity key={a} style={[styles.pill, age === a && styles.pillActive]} onPress={() => setAge(a)}>
|
||||||
|
<Text style={[styles.pillText, age === a && styles.pillTextActive]}>{a}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<View style={{ flexDirection: 'row', gap: 6, marginTop: 8 }}>
|
||||||
|
{genders.map((g) => (
|
||||||
|
<TouchableOpacity key={g} style={[styles.pill, gender === g && styles.pillActive]} onPress={() => setGender(g)}>
|
||||||
|
<Text style={[styles.pillText, gender === g && styles.pillTextActive]}>{g}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card style={{ marginTop: 12 }}>
|
||||||
|
<Text style={typography.caption as any}>📊 당신과 비슷한 {age} {gender}은?</Text>
|
||||||
|
<Text style={[typography.h1 as any, { color: colors.primary, marginTop: 6 }]}>
|
||||||
|
평균 월 {info.prem}만원
|
||||||
|
</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary } as any}>
|
||||||
|
평균 총 보장금액 {info.avgCoverage}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View style={{ marginTop: 16 }}>
|
||||||
|
<Text style={styles.sub}>필수 가입 보험</Text>
|
||||||
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 6 }}>
|
||||||
|
{info.must.map((m) => (
|
||||||
|
<Badge key={m} label={m} tone="primary" />
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={{ marginTop: 12 }}>
|
||||||
|
<Text style={styles.sub}>추천 보장</Text>
|
||||||
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 6 }}>
|
||||||
|
{info.rec.map((m) => (
|
||||||
|
<Badge key={m} label={m} tone="success" />
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Section title="연령별 평균 월 보험료">
|
||||||
|
<Card padding="md">
|
||||||
|
<BarChart
|
||||||
|
data={{
|
||||||
|
labels: ages as unknown as string[],
|
||||||
|
datasets: [{ data: ages.map((a) => data[a].prem) }],
|
||||||
|
}}
|
||||||
|
width={screenWidth - spacing.lg * 2 - spacing.md * 2}
|
||||||
|
height={220}
|
||||||
|
yAxisLabel=""
|
||||||
|
yAxisSuffix="만"
|
||||||
|
fromZero
|
||||||
|
chartConfig={{
|
||||||
|
backgroundGradientFrom: '#FFF',
|
||||||
|
backgroundGradientTo: '#FFF',
|
||||||
|
decimalPlaces: 0,
|
||||||
|
color: (o = 1) => `rgba(59, 130, 246, ${o})`,
|
||||||
|
labelColor: (o = 1) => `rgba(107, 114, 128, ${o})`,
|
||||||
|
propsForBackgroundLines: { stroke: colors.border, strokeDasharray: '3,3' },
|
||||||
|
barPercentage: 0.6,
|
||||||
|
}}
|
||||||
|
style={{ borderRadius: radius.md, marginLeft: -10 }}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="💡 이런 점을 확인해 보세요">
|
||||||
|
{[
|
||||||
|
'내 월 보험료가 평균보다 30% 이상 높다면 다이어트 진단 필요',
|
||||||
|
'평균보다 보장금액이 낮다면 보장 공백이 있을 수 있음',
|
||||||
|
'필수 보험이 미가입이라면 우선순위로 점검',
|
||||||
|
].map((tip, i) => (
|
||||||
|
<Card key={i} style={{ marginBottom: 8 }}>
|
||||||
|
<Text style={typography.body as any}>• {tip}</Text>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
pill: {
|
||||||
|
paddingHorizontal: 14,
|
||||||
|
paddingVertical: 8,
|
||||||
|
borderRadius: radius.pill,
|
||||||
|
backgroundColor: colors.surfaceAlt,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
pillActive: { backgroundColor: colors.primary, borderColor: colors.primary },
|
||||||
|
pillText: { color: colors.text, fontSize: 13, fontWeight: '500' },
|
||||||
|
pillTextActive: { color: '#FFF', fontWeight: '700' },
|
||||||
|
sub: { ...typography.caption, color: colors.textSecondary, fontWeight: '600' },
|
||||||
|
});
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import { useAppStore } from '@/store/useAppStore';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing, typography } from '@/theme/typography';
|
||||||
|
import type { RootStackParamList } from '@/navigation/RootNavigator';
|
||||||
|
|
||||||
|
type Nav = NativeStackNavigationProp<RootStackParamList>;
|
||||||
|
|
||||||
|
export default function ClaimHubScreen() {
|
||||||
|
const nav = useNavigation<Nav>();
|
||||||
|
const claims = useAppStore((s) => s.claims);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="보험금" showBack={false} />
|
||||||
|
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<Text style={styles.h1}>📸 보험금, 앱에서 바로 청구</Text>
|
||||||
|
<Text style={styles.dim}>영수증과 진단서 사진만 있으면 끝</Text>
|
||||||
|
<View style={{ marginTop: 16, gap: 8 }}>
|
||||||
|
<Button title="보험금 청구하기" onPress={() => nav.navigate('Claim')} />
|
||||||
|
<Button title="AI 보험금 판정 받기" variant="outline" onPress={() => nav.navigate('AIJudge')} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Section title="진행 상태">
|
||||||
|
{claims.map((c) => (
|
||||||
|
<Card key={c.id} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row' }}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Badge
|
||||||
|
label={c.status}
|
||||||
|
tone={
|
||||||
|
c.status === '지급완료' ? 'success' : c.status === '심사' ? 'primary' : c.status === '서류보완' ? 'warning' : 'neutral'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Text style={[typography.bodyBold as any, { marginTop: 6 }]}>{c.title}</Text>
|
||||||
|
<Text style={styles.dim}>{c.date}</Text>
|
||||||
|
</View>
|
||||||
|
{c.amount ? <Text style={styles.amt}>{c.amount.toLocaleString()}원</Text> : null}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="보험금 관련 바로가기">
|
||||||
|
<View style={{ gap: 8 }}>
|
||||||
|
<Card onPress={() => nav.navigate('HiddenMoney')}>
|
||||||
|
<View style={styles.row}>
|
||||||
|
<Ionicons name="cash" size={22} color={colors.success} />
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>숨은 보험금 조회</Text>
|
||||||
|
<Text style={styles.dim}>못 받은 보험금 찾기</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={20} color={colors.textTertiary} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
<Card onPress={() => nav.navigate('DiseaseCode')}>
|
||||||
|
<View style={styles.row}>
|
||||||
|
<Ionicons name="search" size={22} color={colors.accent} />
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>질병코드로 보장 확인</Text>
|
||||||
|
<Text style={styles.dim}>"내 질병이 보장되나요?"</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={20} color={colors.textTertiary} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
<Card onPress={() => nav.navigate('HospitalChecklist')}>
|
||||||
|
<View style={styles.row}>
|
||||||
|
<Ionicons name="medkit" size={22} color="#14B8A6" />
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>병원 가기 전 체크리스트</Text>
|
||||||
|
<Text style={styles.dim}>서류 빠뜨리면 청구 불가!</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={20} color={colors.textTertiary} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</View>
|
||||||
|
</Section>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
h1: { ...typography.h3, color: colors.text },
|
||||||
|
dim: { ...typography.caption, color: colors.textSecondary, marginTop: 4 },
|
||||||
|
amt: { ...typography.title, color: colors.text, alignSelf: 'center' },
|
||||||
|
row: { flexDirection: 'row', alignItems: 'center' },
|
||||||
|
});
|
||||||
@@ -0,0 +1,197 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TouchableOpacity, Image, Alert } from 'react-native';
|
||||||
|
import * as ImagePicker from 'expo-image-picker';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type DocType = 'receipt' | 'diagnosis' | 'detail';
|
||||||
|
|
||||||
|
const docLabels: Record<DocType, { title: string; desc: string; icon: keyof typeof Ionicons.glyphMap }> = {
|
||||||
|
receipt: { title: '영수증', desc: '진료비 영수증 원본', icon: 'receipt' },
|
||||||
|
diagnosis: { title: '진단서', desc: '병원 발급 진단서', icon: 'document-text' },
|
||||||
|
detail: { title: '세부내역서', desc: '비급여 항목 포함', icon: 'list' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{ step: 1, label: '서류 준비', desc: '영수증/진단서 촬영' },
|
||||||
|
{ step: 2, label: '정보 입력', desc: '병원명·진료일자' },
|
||||||
|
{ step: 3, label: '자동 전송', desc: '보험사로 즉시 전달' },
|
||||||
|
{ step: 4, label: '진행 상태', desc: '실시간 확인' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ClaimScreen() {
|
||||||
|
const [docs, setDocs] = useState<Record<DocType, string | null>>({
|
||||||
|
receipt: null,
|
||||||
|
diagnosis: null,
|
||||||
|
detail: null,
|
||||||
|
});
|
||||||
|
const [hospital, setHospital] = useState('');
|
||||||
|
const [visitDate, setVisitDate] = useState('');
|
||||||
|
|
||||||
|
const pick = async (type: DocType) => {
|
||||||
|
const res = await ImagePicker.launchImageLibraryAsync({
|
||||||
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||||
|
quality: 0.7,
|
||||||
|
});
|
||||||
|
if (!res.canceled && res.assets[0]) {
|
||||||
|
setDocs({ ...docs, [type]: res.assets[0].uri });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const capture = async (type: DocType) => {
|
||||||
|
const perm = await ImagePicker.requestCameraPermissionsAsync();
|
||||||
|
if (!perm.granted) {
|
||||||
|
Alert.alert('카메라 권한이 필요합니다.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const res = await ImagePicker.launchCameraAsync({ quality: 0.7 });
|
||||||
|
if (!res.canceled && res.assets[0]) {
|
||||||
|
setDocs({ ...docs, [type]: res.assets[0].uri });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
if (!docs.receipt) {
|
||||||
|
Alert.alert('영수증은 필수입니다.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Alert.alert('청구 접수 완료', '보험사에서 심사 후 3~7영업일 내 지급됩니다.');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="보험금 청구" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.bodyBold as any}>📸 앱에서 바로 청구</Text>
|
||||||
|
<View style={{ marginTop: 12, gap: 10 }}>
|
||||||
|
{steps.map((s) => (
|
||||||
|
<View key={s.step} style={styles.stepRow}>
|
||||||
|
<View style={styles.stepCircle}>
|
||||||
|
<Text style={styles.stepNum}>{s.step}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>{s.label}</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary } as any}>{s.desc}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Section title="서류 업로드">
|
||||||
|
{(Object.keys(docLabels) as DocType[]).map((t) => {
|
||||||
|
const info = docLabels[t];
|
||||||
|
const uri = docs[t];
|
||||||
|
return (
|
||||||
|
<Card key={t} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={styles.docIcon}>
|
||||||
|
<Ionicons name={info.icon} size={22} color={colors.primary} />
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Text style={typography.bodyBold as any}>{info.title}</Text>
|
||||||
|
{t === 'receipt' && <Badge label="필수" tone="danger" style={{ marginLeft: 6 }} />}
|
||||||
|
</View>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary } as any}>{info.desc}</Text>
|
||||||
|
</View>
|
||||||
|
{uri ? (
|
||||||
|
<TouchableOpacity onPress={() => setDocs({ ...docs, [t]: null })}>
|
||||||
|
<Image source={{ uri }} style={styles.thumb} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
) : (
|
||||||
|
<View style={{ flexDirection: 'row', gap: 6 }}>
|
||||||
|
<TouchableOpacity style={styles.smallBtn} onPress={() => capture(t)}>
|
||||||
|
<Ionicons name="camera" size={18} color={colors.primary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.smallBtn} onPress={() => pick(t)}>
|
||||||
|
<Ionicons name="image" size={18} color={colors.primary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="청구 정보">
|
||||||
|
<Card>
|
||||||
|
<Text style={styles.label}>병원명</Text>
|
||||||
|
<Text style={styles.inputView}>{hospital || '병원명 입력'}</Text>
|
||||||
|
<View style={{ flexDirection: 'row', gap: 6, flexWrap: 'wrap', marginTop: 4 }}>
|
||||||
|
{['강남세브란스', '서울아산병원', '삼성의료원', '고려대병원'].map((h) => (
|
||||||
|
<TouchableOpacity key={h} style={styles.pill} onPress={() => setHospital(h)}>
|
||||||
|
<Text style={styles.pillText}>{h}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.label, { marginTop: 12 }]}>진료일자</Text>
|
||||||
|
<Text style={styles.inputView}>{visitDate || '2026-04-22'}</Text>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<View style={{ paddingTop: 16, gap: 8 }}>
|
||||||
|
<Button title="보험금 청구하기" size="lg" onPress={submit} />
|
||||||
|
<Button title="AI 판정으로 예상 금액 확인" variant="outline" onPress={() => {}} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
stepRow: { flexDirection: 'row', alignItems: 'center' },
|
||||||
|
stepCircle: {
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
borderRadius: 16,
|
||||||
|
backgroundColor: colors.primary,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginRight: 12,
|
||||||
|
},
|
||||||
|
stepNum: { color: '#FFF', fontWeight: '700' },
|
||||||
|
docIcon: {
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
borderRadius: 22,
|
||||||
|
backgroundColor: colors.primaryLight,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
thumb: { width: 50, height: 50, borderRadius: 8 },
|
||||||
|
smallBtn: {
|
||||||
|
width: 38,
|
||||||
|
height: 38,
|
||||||
|
borderRadius: 19,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.primary,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
label: { ...typography.caption, color: colors.textSecondary, fontWeight: '600' },
|
||||||
|
inputView: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
padding: 14,
|
||||||
|
marginTop: 6,
|
||||||
|
color: colors.text,
|
||||||
|
},
|
||||||
|
pill: {
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 6,
|
||||||
|
borderRadius: radius.pill,
|
||||||
|
backgroundColor: colors.surfaceAlt,
|
||||||
|
},
|
||||||
|
pillText: { ...typography.small, color: colors.text },
|
||||||
|
});
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing, typography } from '@/theme/typography';
|
||||||
|
import type { RootStackParamList } from '@/navigation/RootNavigator';
|
||||||
|
|
||||||
|
type Nav = NativeStackNavigationProp<RootStackParamList>;
|
||||||
|
|
||||||
|
const planners = [
|
||||||
|
{ name: '김보험', title: '수석 설계사', career: '경력 15년', tag: '실손 전문', rating: 4.9 },
|
||||||
|
{ name: '이담당', title: '전문 설계사', career: '경력 8년', tag: '암보험 전문', rating: 4.8 },
|
||||||
|
{ name: '최매니저', title: '여성보험 전문', career: '경력 12년', tag: '여성보험', rating: 4.9 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ConsultHubScreen() {
|
||||||
|
const nav = useNavigation<Nav>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="상담" showBack={false} />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<Text style={styles.h2}>💬 전문 설계사 1:1 상담</Text>
|
||||||
|
<Text style={styles.dim}>내 상황에 맞는 최적 상담을 무료로</Text>
|
||||||
|
<View style={{ marginTop: 16, gap: 8 }}>
|
||||||
|
<Button title="카카오톡 상담" variant="kakao" leftIcon={<Ionicons name="chatbubble" size={16} color="#191600" />} onPress={() => nav.navigate('Consult')} />
|
||||||
|
<Button title="전화 상담 예약" variant="primary" leftIcon={<Ionicons name="call" size={16} color="#FFF" />} onPress={() => nav.navigate('Consult')} />
|
||||||
|
<Button title="방문 상담 신청" variant="outline" onPress={() => nav.navigate('Consult')} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Section title="추천 설계사">
|
||||||
|
{planners.map((p) => (
|
||||||
|
<Card key={p.name} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={styles.avatar}>
|
||||||
|
<Ionicons name="person" size={28} color={colors.primary} />
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Text style={typography.title as any}>{p.name}</Text>
|
||||||
|
<Text style={[styles.dim, { marginLeft: 6 }]}>{p.title}</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.dim}>
|
||||||
|
{p.career} · {p.tag}
|
||||||
|
</Text>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 4 }}>
|
||||||
|
<Ionicons name="star" size={14} color="#F59E0B" />
|
||||||
|
<Text style={[styles.dim, { marginLeft: 4 }]}>{p.rating}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Button title="상담" size="sm" onPress={() => nav.navigate('Consult')} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="AI 상담 도우미">
|
||||||
|
<Card onPress={() => nav.navigate('AIJudge')}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={[styles.avatar, { backgroundColor: '#EDE9FE' }]}>
|
||||||
|
<Ionicons name="sparkles" size={24} color="#8B5CF6" />
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>AI 보험금 판정</Text>
|
||||||
|
<Text style={styles.dim}>증상만 말하면 보장 여부 즉시 확인</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={20} color={colors.textTertiary} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
h2: { ...typography.h3, color: colors.text },
|
||||||
|
dim: { ...typography.caption, color: colors.textSecondary, marginTop: 4 },
|
||||||
|
avatar: {
|
||||||
|
width: 52,
|
||||||
|
height: 52,
|
||||||
|
borderRadius: 26,
|
||||||
|
backgroundColor: colors.primaryLight,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,157 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TextInput, TouchableOpacity, Linking, Alert } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
const times = ['오전 10시', '오전 11시', '오후 2시', '오후 3시', '오후 4시', '오후 5시'];
|
||||||
|
|
||||||
|
export default function ConsultScreen() {
|
||||||
|
const [method, setMethod] = useState<'kakao' | 'phone' | 'visit'>('kakao');
|
||||||
|
const [phone, setPhone] = useState('');
|
||||||
|
const [date, setDate] = useState('');
|
||||||
|
const [time, setTime] = useState('');
|
||||||
|
const [memo, setMemo] = useState('');
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
const label = method === 'kakao' ? '카카오톡' : method === 'phone' ? '전화' : '방문';
|
||||||
|
Alert.alert(`${label} 상담 접수 완료`, '전문 설계사가 곧 연락드립니다.');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="전문가 상담" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.bodyBold as any}>상담 방식 선택</Text>
|
||||||
|
<View style={{ flexDirection: 'row', gap: 8, marginTop: 12 }}>
|
||||||
|
{(
|
||||||
|
[
|
||||||
|
{ k: 'kakao', label: '카카오톡', icon: 'chatbubble' },
|
||||||
|
{ k: 'phone', label: '전화', icon: 'call' },
|
||||||
|
{ k: 'visit', label: '방문', icon: 'home' },
|
||||||
|
] as const
|
||||||
|
).map((m) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={m.k}
|
||||||
|
style={[styles.methodBox, method === m.k && styles.methodBoxActive]}
|
||||||
|
onPress={() => setMethod(m.k)}
|
||||||
|
>
|
||||||
|
<Ionicons name={m.icon as any} size={24} color={method === m.k ? '#FFF' : colors.text} />
|
||||||
|
<Text style={[styles.methodText, method === m.k && { color: '#FFF' }]}>{m.label}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{method !== 'kakao' && (
|
||||||
|
<Card style={{ marginTop: 12 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>예약 정보</Text>
|
||||||
|
<Text style={[styles.label, { marginTop: 12 }]}>연락처</Text>
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
placeholder="010-0000-0000"
|
||||||
|
value={phone}
|
||||||
|
onChangeText={setPhone}
|
||||||
|
keyboardType="phone-pad"
|
||||||
|
/>
|
||||||
|
<Text style={[styles.label, { marginTop: 12 }]}>희망 일자</Text>
|
||||||
|
<TextInput style={styles.input} placeholder="YYYY-MM-DD" value={date} onChangeText={setDate} />
|
||||||
|
<Text style={[styles.label, { marginTop: 12 }]}>희망 시간</Text>
|
||||||
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
|
||||||
|
{times.map((t) => (
|
||||||
|
<TouchableOpacity key={t} style={[styles.pill, time === t && styles.pillActive]} onPress={() => setTime(t)}>
|
||||||
|
<Text style={[styles.pillText, time === t && styles.pillTextActive]}>{t}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.label, { marginTop: 12 }]}>상담 내용</Text>
|
||||||
|
<TextInput
|
||||||
|
style={[styles.input, { minHeight: 80, textAlignVertical: 'top' }]}
|
||||||
|
placeholder="상담받고 싶은 내용을 적어주세요"
|
||||||
|
multiline
|
||||||
|
value={memo}
|
||||||
|
onChangeText={setMemo}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{method === 'kakao' && (
|
||||||
|
<Card style={{ marginTop: 12 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>카카오톡 상담 안내</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 6 } as any}>
|
||||||
|
카카오톡 채널 '보험케어'와 연결되어 설계사와 실시간 대화할 수 있어요.
|
||||||
|
</Text>
|
||||||
|
<View style={{ marginTop: 12 }}>
|
||||||
|
<Button
|
||||||
|
title="카카오톡 채널 열기"
|
||||||
|
variant="kakao"
|
||||||
|
leftIcon={<Ionicons name="chatbubble" size={16} color="#191600" />}
|
||||||
|
onPress={() =>
|
||||||
|
Linking.openURL('https://pf.kakao.com/').catch(() => Alert.alert('카카오톡이 설치되지 않았습니다.'))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Section title="상담 시 유의사항">
|
||||||
|
<Card padding="md">
|
||||||
|
{[
|
||||||
|
'본인이 가입한 보험 증권을 준비해 주세요',
|
||||||
|
'개인정보는 안전하게 암호화되어 전달됩니다',
|
||||||
|
'상담은 가입 권유가 아닌 점검 목적이 원칙입니다',
|
||||||
|
].map((t, i) => (
|
||||||
|
<Text key={i} style={[typography.body as any, { marginVertical: 4 }]}>
|
||||||
|
• {t}
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<View style={{ paddingTop: 16 }}>
|
||||||
|
<Button title={method === 'kakao' ? '카카오톡으로 상담하기' : '상담 예약하기'} size="lg" onPress={submit} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
methodBox: {
|
||||||
|
flex: 1,
|
||||||
|
paddingVertical: 18,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
borderWidth: 1.5,
|
||||||
|
borderColor: colors.border,
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: colors.surface,
|
||||||
|
},
|
||||||
|
methodBoxActive: { backgroundColor: colors.primary, borderColor: colors.primary },
|
||||||
|
methodText: { marginTop: 6, fontSize: 13, fontWeight: '600', color: colors.text },
|
||||||
|
label: { ...typography.caption, color: colors.textSecondary, fontWeight: '600' },
|
||||||
|
input: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
padding: 12,
|
||||||
|
fontSize: 14,
|
||||||
|
marginTop: 6,
|
||||||
|
},
|
||||||
|
pill: {
|
||||||
|
paddingHorizontal: 14,
|
||||||
|
paddingVertical: 8,
|
||||||
|
borderRadius: radius.pill,
|
||||||
|
backgroundColor: colors.surfaceAlt,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
pillActive: { backgroundColor: colors.primary, borderColor: colors.primary },
|
||||||
|
pillText: { color: colors.text, fontSize: 13 },
|
||||||
|
pillTextActive: { color: '#FFF', fontWeight: '700' },
|
||||||
|
});
|
||||||
@@ -0,0 +1,247 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import ProgressBar from '@/components/ProgressBar';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
import type { RootStackParamList } from '@/navigation/RootNavigator';
|
||||||
|
|
||||||
|
type Nav = NativeStackNavigationProp<RootStackParamList>;
|
||||||
|
|
||||||
|
type Step = 'intro' | 'basic' | 'questions' | 'result';
|
||||||
|
|
||||||
|
const questions = [
|
||||||
|
{ key: 'smoke', q: '흡연을 하시나요?', options: ['비흡연', '흡연'] },
|
||||||
|
{ key: 'hospital', q: '최근 1년간 병원 입원 경험?', options: ['없음', '1~2회', '3회 이상'] },
|
||||||
|
{ key: 'family', q: '가족력(암/뇌/심장)이 있나요?', options: ['없음', '있음'] },
|
||||||
|
{ key: 'exercise', q: '주 운동 횟수는?', options: ['거의 안함', '주 1~2회', '주 3회 이상'] },
|
||||||
|
{ key: 'current', q: '현재 가입된 보험 개수?', options: ['없음', '1~2개', '3개 이상'] },
|
||||||
|
{ key: 'budget', q: '월 보험료 희망 예산?', options: ['10만원 이하', '10~30만원', '30만원 이상'] },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function DiagnosisScreen() {
|
||||||
|
const nav = useNavigation<Nav>();
|
||||||
|
const [step, setStep] = useState<Step>('intro');
|
||||||
|
const [age, setAge] = useState('34');
|
||||||
|
const [gender, setGender] = useState<'남' | '여'>('남');
|
||||||
|
const [job, setJob] = useState('사무직');
|
||||||
|
const [qIdx, setQIdx] = useState(0);
|
||||||
|
const [answers, setAnswers] = useState<Record<string, string>>({});
|
||||||
|
|
||||||
|
const progress = step === 'intro' ? 0 : step === 'basic' ? 25 : step === 'questions' ? 25 + (qIdx / questions.length) * 50 : 100;
|
||||||
|
|
||||||
|
if (step === 'intro') {
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="3초 보험 진단" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<LinearGradient colors={colors.gradient.primary} style={styles.intro}>
|
||||||
|
<Ionicons name="flash" size={48} color="#FFF" />
|
||||||
|
<Text style={styles.introTitle}>당신에게 맞는 보험, 3초면 OK</Text>
|
||||||
|
<Text style={styles.introSub}>
|
||||||
|
몇 가지 질문만 답하면{'\n'}AI가 맞춤 보험을 찾아드려요
|
||||||
|
</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
|
||||||
|
<Card style={{ marginTop: 16 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>이렇게 진행돼요</Text>
|
||||||
|
<View style={{ marginTop: 12, gap: 10 }}>
|
||||||
|
{['기본 정보 입력 (나이/성별/직업)', '5~10개 맞춤 질문 응답', 'AI 분석 (3초)', '맞춤 보험 추천 & 점수 확인'].map(
|
||||||
|
(s, i) => (
|
||||||
|
<View key={i} style={styles.stepRow}>
|
||||||
|
<View style={styles.stepCircle}>
|
||||||
|
<Text style={styles.stepNum}>{i + 1}</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={{ flex: 1, ...typography.body, color: colors.text } as any}>{s}</Text>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<View style={{ marginTop: 20 }}>
|
||||||
|
<Button title="진단 시작하기" size="lg" onPress={() => setStep('basic')} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (step === 'basic') {
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="기본 정보" subtitle="1/3 단계" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<ProgressBar value={progress} />
|
||||||
|
<Card style={{ marginTop: 16 }}>
|
||||||
|
<Text style={styles.label}>나이</Text>
|
||||||
|
<TextInput style={styles.input} value={age} onChangeText={setAge} keyboardType="number-pad" />
|
||||||
|
<Text style={[styles.label, { marginTop: 16 }]}>성별</Text>
|
||||||
|
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||||
|
{(['남', '여'] as const).map((g) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={g}
|
||||||
|
style={[styles.pill, gender === g && styles.pillActive]}
|
||||||
|
onPress={() => setGender(g)}
|
||||||
|
>
|
||||||
|
<Text style={[styles.pillText, gender === g && styles.pillTextActive]}>{g}성</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.label, { marginTop: 16 }]}>직업</Text>
|
||||||
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
|
||||||
|
{['사무직', '생산직', '전문직', '학생', '주부', '기타'].map((j) => (
|
||||||
|
<TouchableOpacity key={j} style={[styles.pill, job === j && styles.pillActive]} onPress={() => setJob(j)}>
|
||||||
|
<Text style={[styles.pillText, job === j && styles.pillTextActive]}>{j}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
<View style={{ marginTop: 20 }}>
|
||||||
|
<Button title="다음" size="lg" onPress={() => setStep('questions')} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (step === 'questions') {
|
||||||
|
const q = questions[qIdx];
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="맞춤 질문" subtitle={`${qIdx + 1}/${questions.length}`} />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<ProgressBar value={progress} />
|
||||||
|
<Card style={{ marginTop: 16 }}>
|
||||||
|
<Badge label={`질문 ${qIdx + 1}`} tone="primary" />
|
||||||
|
<Text style={[typography.h3 as any, { marginTop: 10 }]}>{q.q}</Text>
|
||||||
|
<View style={{ marginTop: 16, gap: 10 }}>
|
||||||
|
{q.options.map((opt) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={opt}
|
||||||
|
style={styles.optionBox}
|
||||||
|
onPress={() => {
|
||||||
|
setAnswers({ ...answers, [q.key]: opt });
|
||||||
|
if (qIdx < questions.length - 1) setQIdx(qIdx + 1);
|
||||||
|
else setStep('result');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={styles.optionText}>{opt}</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
{qIdx > 0 && (
|
||||||
|
<View style={{ marginTop: 16 }}>
|
||||||
|
<Button title="이전" variant="outline" onPress={() => setQIdx(qIdx - 1)} />
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// result
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="진단 결과" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<LinearGradient colors={colors.gradient.success} style={styles.resultHero}>
|
||||||
|
<Ionicons name="checkmark-circle" size={48} color="#FFF" />
|
||||||
|
<Text style={styles.resultTitle}>진단 완료!</Text>
|
||||||
|
<Text style={styles.resultSub}>
|
||||||
|
{age}세 {gender}성 {job} 기준 분석
|
||||||
|
</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
|
||||||
|
<Section title="🎯 추천 보험">
|
||||||
|
{[
|
||||||
|
{ name: '4세대 실손의료비', reason: '기본 의료비 보장 필수', priority: '필수' },
|
||||||
|
{ name: '종합암보험', reason: '가족력 있어 진단비 강화 필요', priority: '필수' },
|
||||||
|
{ name: '상해보험', reason: '운전/활동량 기반 추천', priority: '권장' },
|
||||||
|
{ name: '치아보험', reason: '30대 관리 시점', priority: '선택' },
|
||||||
|
].map((r) => (
|
||||||
|
<Card key={r.name} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Badge
|
||||||
|
label={r.priority}
|
||||||
|
tone={r.priority === '필수' ? 'danger' : r.priority === '권장' ? 'warning' : 'primary'}
|
||||||
|
/>
|
||||||
|
<Text style={[typography.bodyBold as any, { marginTop: 6 }]}>{r.name}</Text>
|
||||||
|
<Text style={styles.dim}>{r.reason}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<View style={{ padding: spacing.lg, gap: 8 }}>
|
||||||
|
<Button title="내 점수 상세보기" onPress={() => nav.replace('Score')} />
|
||||||
|
<Button title="전문가 상담 받기" variant="outline" onPress={() => nav.replace('Consult')} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
intro: { padding: 24, borderRadius: radius.xl, alignItems: 'center' },
|
||||||
|
introTitle: { color: '#FFF', fontSize: 22, fontWeight: '800', marginTop: 14 },
|
||||||
|
introSub: { color: 'rgba(255,255,255,0.9)', fontSize: 14, textAlign: 'center', marginTop: 8, lineHeight: 20 },
|
||||||
|
stepRow: { flexDirection: 'row', alignItems: 'center' },
|
||||||
|
stepCircle: {
|
||||||
|
width: 28,
|
||||||
|
height: 28,
|
||||||
|
borderRadius: 14,
|
||||||
|
backgroundColor: colors.primaryLight,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginRight: 10,
|
||||||
|
},
|
||||||
|
stepNum: { color: colors.primary, fontWeight: '700', fontSize: 13 },
|
||||||
|
label: { ...typography.caption, color: colors.textSecondary, marginBottom: 8, fontWeight: '600' },
|
||||||
|
input: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
padding: 14,
|
||||||
|
fontSize: 16,
|
||||||
|
color: colors.text,
|
||||||
|
},
|
||||||
|
pill: {
|
||||||
|
paddingHorizontal: 18,
|
||||||
|
paddingVertical: 10,
|
||||||
|
borderRadius: radius.pill,
|
||||||
|
backgroundColor: colors.surfaceAlt,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
pillActive: { backgroundColor: colors.primary, borderColor: colors.primary },
|
||||||
|
pillText: { color: colors.text, fontWeight: '500' },
|
||||||
|
pillTextActive: { color: '#FFF', fontWeight: '700' },
|
||||||
|
optionBox: {
|
||||||
|
padding: 16,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
borderWidth: 1.5,
|
||||||
|
borderColor: colors.border,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
},
|
||||||
|
optionText: { ...typography.body, color: colors.text, fontWeight: '600' },
|
||||||
|
resultHero: { padding: 24, borderRadius: radius.xl, alignItems: 'center' },
|
||||||
|
resultTitle: { color: '#FFF', fontSize: 24, fontWeight: '800', marginTop: 10 },
|
||||||
|
resultSub: { color: 'rgba(255,255,255,0.9)', marginTop: 4 },
|
||||||
|
dim: { ...typography.caption, color: colors.textSecondary, marginTop: 4 },
|
||||||
|
});
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import React, { useState, useMemo } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TextInput } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { searchDisease, diseaseDB } from '@/data/diseaseCodes';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
export default function DiseaseCodeScreen() {
|
||||||
|
const [query, setQuery] = useState('');
|
||||||
|
const results = useMemo(() => (query ? searchDisease(query) : diseaseDB.slice(0, 4)), [query]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="질병코드 조회" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.bodyBold as any}>🏥 질병명으로 보장 내역 확인</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 4 } as any}>
|
||||||
|
예) "갑상선 결절", "발목 삐었을 때", "유방암"
|
||||||
|
</Text>
|
||||||
|
<View style={styles.searchBox}>
|
||||||
|
<Ionicons name="search" size={18} color={colors.textSecondary} />
|
||||||
|
<TextInput
|
||||||
|
style={styles.search}
|
||||||
|
value={query}
|
||||||
|
onChangeText={setQuery}
|
||||||
|
placeholder="질병명을 입력하세요"
|
||||||
|
placeholderTextColor={colors.textTertiary}
|
||||||
|
returnKeyType="search"
|
||||||
|
/>
|
||||||
|
{query.length > 0 && (
|
||||||
|
<Ionicons name="close-circle" size={18} color={colors.textTertiary} onPress={() => setQuery('')} />
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Section title={query ? `"${query}" 검색 결과 (${results.length}건)` : '자주 찾는 질병'}>
|
||||||
|
{results.length === 0 && (
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.body as any}>검색 결과가 없습니다. 다른 키워드로 시도해 보세요.</Text>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
{results.map((d) => (
|
||||||
|
<Card key={d.code} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 8 }}>
|
||||||
|
<Badge label={d.code} tone="neutral" />
|
||||||
|
<Badge label={d.category} tone="primary" style={{ marginLeft: 6 }} />
|
||||||
|
</View>
|
||||||
|
<Text style={typography.h3 as any}>{d.name}</Text>
|
||||||
|
<View style={styles.sep} />
|
||||||
|
<Text style={styles.label}>💰 예상 보장</Text>
|
||||||
|
<View style={{ gap: 6, marginTop: 6 }}>
|
||||||
|
{d.coverage.map((c, i) => (
|
||||||
|
<View key={i} style={styles.coverRow}>
|
||||||
|
<Ionicons name="shield-checkmark" size={16} color={colors.primary} />
|
||||||
|
<View style={{ flex: 1, marginLeft: 8 }}>
|
||||||
|
<Text style={{ ...typography.body as any, fontWeight: '600' }}>{c.policy}</Text>
|
||||||
|
<Text style={styles.cov}>{c.amount}</Text>
|
||||||
|
{c.note && <Text style={styles.note}>※ {c.note}</Text>}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
{d.tips && d.tips.length > 0 && (
|
||||||
|
<>
|
||||||
|
<View style={styles.sep} />
|
||||||
|
<Text style={styles.label}>📌 TIP</Text>
|
||||||
|
{d.tips.map((t, i) => (
|
||||||
|
<Text key={i} style={[styles.tip]}>
|
||||||
|
• {t}
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
searchBox: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 6,
|
||||||
|
marginTop: 12,
|
||||||
|
},
|
||||||
|
search: { flex: 1, marginLeft: 8, fontSize: 15, paddingVertical: 8 },
|
||||||
|
label: { ...typography.caption, color: colors.textSecondary, fontWeight: '700' },
|
||||||
|
sep: { height: 1, backgroundColor: colors.border, marginVertical: 10 },
|
||||||
|
coverRow: { flexDirection: 'row', alignItems: 'flex-start' },
|
||||||
|
cov: { ...typography.caption, color: colors.primary, fontWeight: '700', marginTop: 2 },
|
||||||
|
note: { ...typography.small, color: colors.warning, marginTop: 2 },
|
||||||
|
tip: { ...typography.body, color: colors.text, marginTop: 4 },
|
||||||
|
});
|
||||||
@@ -0,0 +1,139 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import ProgressBar from '@/components/ProgressBar';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import { useAppStore, FamilyMember } from '@/store/useAppStore';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
const relationIcon: Record<FamilyMember['relation'], keyof typeof Ionicons.glyphMap> = {
|
||||||
|
본인: 'person',
|
||||||
|
배우자: 'heart',
|
||||||
|
자녀: 'happy',
|
||||||
|
부모: 'people',
|
||||||
|
형제: 'people-outline',
|
||||||
|
};
|
||||||
|
|
||||||
|
const essentialMap: Record<string, string[]> = {
|
||||||
|
본인: ['실손', '암', '상해'],
|
||||||
|
배우자: ['실손', '암', '여성'],
|
||||||
|
자녀: ['어린이'],
|
||||||
|
부모: ['실손', '간병'],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function FamilyScreen() {
|
||||||
|
const family = useAppStore((s) => s.family);
|
||||||
|
|
||||||
|
const analyze = (m: FamilyMember) => {
|
||||||
|
const required = essentialMap[m.relation] ?? [];
|
||||||
|
const have = new Set(m.policies.map((p) => p.type));
|
||||||
|
const missing = required.filter((r) => !have.has(r as any));
|
||||||
|
const covered = required.length - missing.length;
|
||||||
|
const score = required.length === 0 ? 100 : Math.round((covered / required.length) * 100);
|
||||||
|
return { required, missing, covered, score };
|
||||||
|
};
|
||||||
|
|
||||||
|
const avgScore = Math.round(family.reduce((a, m) => a + analyze(m).score, 0) / family.length);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="가족 보험" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.caption as any}>👨👩👧 우리 가족 총 보장 점수</Text>
|
||||||
|
<Text style={{ ...typography.h1 as any, color: colors.primary, marginTop: 6 }}>{avgScore}점</Text>
|
||||||
|
<View style={{ height: 10 }} />
|
||||||
|
<ProgressBar value={avgScore} />
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 8 } as any}>
|
||||||
|
가족 {family.length}명 평균 기준
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Section title="가족 구성원">
|
||||||
|
{family.map((m) => {
|
||||||
|
const a = analyze(m);
|
||||||
|
return (
|
||||||
|
<Card key={m.id} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={styles.avatar}>
|
||||||
|
<Ionicons name={relationIcon[m.relation]} size={26} color={colors.primary} />
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Text style={typography.bodyBold as any}>{m.name}</Text>
|
||||||
|
<Badge label={m.relation} tone="primary" style={{ marginLeft: 6 }} />
|
||||||
|
</View>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary } as any}>
|
||||||
|
{m.age}세 · {m.gender}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={{ ...typography.h3 as any, color: scoreColor(a.score) }}>{a.score}점</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.sep} />
|
||||||
|
<View style={{ gap: 6 }}>
|
||||||
|
{m.policies.map((p) => (
|
||||||
|
<View key={p.id} style={styles.policyRow}>
|
||||||
|
<Ionicons name="checkmark-circle" size={16} color={colors.success} />
|
||||||
|
<Text style={{ ...typography.body, marginLeft: 6, flex: 1 } as any} numberOfLines={1}>
|
||||||
|
{p.type} · {p.name}
|
||||||
|
</Text>
|
||||||
|
<Text style={{ ...typography.small, color: colors.textSecondary } as any}>
|
||||||
|
{(p.coverage / 10000).toLocaleString()}만
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
{a.missing.map((miss) => (
|
||||||
|
<View key={miss} style={styles.policyRow}>
|
||||||
|
<Ionicons name="close-circle" size={16} color={colors.danger} />
|
||||||
|
<Text style={{ ...typography.body, marginLeft: 6, color: colors.danger, flex: 1 } as any}>
|
||||||
|
{miss} 미가입 ⚠️
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="💡 가족 보험 TIP">
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.body as any}>
|
||||||
|
• 자녀는 어릴수록 어린이보험 가입 유리{'\n'}
|
||||||
|
• 65세 이상은 유병자/간편 실손 검토{'\n'}
|
||||||
|
• 부부 동시 가입 시 할인 혜택 있는 상품 다수
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<View style={{ paddingTop: 16 }}>
|
||||||
|
<Button title="가족 구성원 추가" variant="outline" />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function scoreColor(s: number) {
|
||||||
|
return s >= 80 ? colors.success : s >= 60 ? colors.warning : colors.danger;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
avatar: {
|
||||||
|
width: 48,
|
||||||
|
height: 48,
|
||||||
|
borderRadius: 24,
|
||||||
|
backgroundColor: colors.primaryLight,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
sep: { height: 1, backgroundColor: colors.border, marginVertical: 12 },
|
||||||
|
policyRow: { flexDirection: 'row', alignItems: 'center' },
|
||||||
|
});
|
||||||
@@ -0,0 +1,127 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Metric = { key: string; label: string; value: string; normal: string; status: 'good' | 'warn' | 'bad' };
|
||||||
|
|
||||||
|
export default function HealthCheckScreen() {
|
||||||
|
const [metrics, setMetrics] = useState<Metric[]>([
|
||||||
|
{ key: 'bp', label: '혈압', value: '145/92', normal: '120/80 이하', status: 'bad' },
|
||||||
|
{ key: 'chol', label: '총콜레스테롤', value: '245', normal: '200 이하', status: 'warn' },
|
||||||
|
{ key: 'bs', label: '공복혈당', value: '102', normal: '100 이하', status: 'warn' },
|
||||||
|
{ key: 'bmi', label: 'BMI', value: '27.3', normal: '23 이하', status: 'warn' },
|
||||||
|
{ key: 'polyp', label: '대장 용종', value: '발견', normal: '없음', status: 'bad' },
|
||||||
|
{ key: 'liver', label: '간수치', value: '정상', normal: '정상', status: 'good' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const recommendations = [
|
||||||
|
{
|
||||||
|
trigger: '혈압 높음',
|
||||||
|
insurance: '뇌혈관질환 진단비',
|
||||||
|
reason: '고혈압은 뇌졸중/뇌경색 위험 3배 증가',
|
||||||
|
priority: '긴급',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
trigger: '콜레스테롤 높음',
|
||||||
|
insurance: '허혈성심장질환 특약',
|
||||||
|
reason: '심근경색 위험 2배 증가',
|
||||||
|
priority: '권장',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
trigger: '대장 용종 발견',
|
||||||
|
insurance: '암보험 점검 필요',
|
||||||
|
reason: '대장암 예방 차원에서 진단비 확인',
|
||||||
|
priority: '긴급',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
trigger: 'BMI 높음',
|
||||||
|
insurance: '당뇨 진단비 특약',
|
||||||
|
reason: '당뇨/대사증후군 발병 가능성',
|
||||||
|
priority: '권장',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="건강검진 분석" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Ionicons name="fitness" size={28} color={colors.danger} />
|
||||||
|
<Text style={{ ...typography.h3, marginLeft: 10 } as any}>내 건강 상태</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 4 } as any}>
|
||||||
|
최근 건강검진 결과를 기반으로 부족한 보험을 찾아드려요
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View style={{ marginTop: 16, gap: 10 }}>
|
||||||
|
{metrics.map((m) => (
|
||||||
|
<View key={m.key} style={styles.metricRow}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>{m.label}</Text>
|
||||||
|
<Text style={{ ...typography.small, color: colors.textSecondary } as any}>정상: {m.normal}</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={{ ...typography.title as any, color: statusColor(m.status), marginRight: 8 }}>
|
||||||
|
{m.value}
|
||||||
|
</Text>
|
||||||
|
<Badge
|
||||||
|
label={m.status === 'good' ? '정상' : m.status === 'warn' ? '주의' : '위험'}
|
||||||
|
tone={m.status === 'good' ? 'success' : m.status === 'warn' ? 'warning' : 'danger'}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Section title="🩺 검진 결과 기반 추천">
|
||||||
|
{recommendations.map((r, i) => (
|
||||||
|
<Card key={i} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 6 }}>
|
||||||
|
<Badge label={r.priority} tone={r.priority === '긴급' ? 'danger' : 'warning'} />
|
||||||
|
<Text style={{ ...typography.caption, marginLeft: 8, color: colors.textSecondary } as any}>
|
||||||
|
{r.trigger}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={typography.h3 as any}>{r.insurance}</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 4 } as any}>
|
||||||
|
{r.reason}
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="📝 검진 이력 관리">
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.body as any}>
|
||||||
|
건강검진 결과를 사진/PDF로 업로드하면 자동 분석해 드려요.
|
||||||
|
</Text>
|
||||||
|
<View style={{ height: 12 }} />
|
||||||
|
<Button title="검진 결과 업로드" variant="outline" />
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusColor(s: 'good' | 'warn' | 'bad') {
|
||||||
|
return s === 'good' ? colors.success : s === 'warn' ? colors.warning : colors.danger;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
metricRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: 10,
|
||||||
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
|
borderBottomColor: colors.border,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,130 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { useAppStore } from '@/store/useAppStore';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
export default function HiddenMoneyScreen() {
|
||||||
|
const hidden = useAppStore((s) => s.hiddenMoney);
|
||||||
|
const [state, setState] = useState<'idle' | 'loading' | 'result'>('idle');
|
||||||
|
|
||||||
|
const total = hidden.unclaimed + hidden.dormant;
|
||||||
|
|
||||||
|
const startSearch = () => {
|
||||||
|
setState('loading');
|
||||||
|
setTimeout(() => setState('result'), 1800);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="숨은 보험금 조회" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<LinearGradient colors={colors.gradient.success} style={styles.hero}>
|
||||||
|
<Ionicons name="cash" size={44} color="#FFF" />
|
||||||
|
<Text style={styles.heroTitle}>못 받은 보험금, 찾아드려요</Text>
|
||||||
|
<Text style={styles.heroSub}>
|
||||||
|
주민등록번호만 있으면 전 보험사 한번에 조회
|
||||||
|
</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
|
||||||
|
{state === 'idle' && (
|
||||||
|
<>
|
||||||
|
<Card style={{ marginTop: 16 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>📋 조회 대상</Text>
|
||||||
|
<View style={{ marginTop: 8, gap: 6 }}>
|
||||||
|
{['미청구 보험금 (만기/중도/사고)', '휴면 보험금 (3년 이상 미수령)', '실효 계약 환급금'].map((x) => (
|
||||||
|
<View key={x} style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Ionicons name="checkmark-circle" size={16} color={colors.success} />
|
||||||
|
<Text style={[typography.body as any, { marginLeft: 6 }]}>{x}</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
<View style={{ marginTop: 20 }}>
|
||||||
|
<Button title="숨은보험금 조회하기" size="lg" onPress={startSearch} />
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.dim, { textAlign: 'center', marginTop: 8 }]}>
|
||||||
|
· 무료 · 보험개발원 통합 조회
|
||||||
|
</Text>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{state === 'loading' && (
|
||||||
|
<Card style={{ marginTop: 16, alignItems: 'center', padding: 40 }}>
|
||||||
|
<ActivityIndicator size="large" color={colors.primary} />
|
||||||
|
<Text style={{ ...typography.bodyBold, marginTop: 16 } as any}>전 보험사 조회 중...</Text>
|
||||||
|
<Text style={[styles.dim, { marginTop: 6 }]}>약 3초 소요됩니다</Text>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{state === 'result' && (
|
||||||
|
<>
|
||||||
|
<Card style={{ marginTop: 16 }}>
|
||||||
|
<Badge label="조회 완료" tone="success" />
|
||||||
|
<Text style={{ ...typography.h1 as any, color: colors.success, marginTop: 8 }}>
|
||||||
|
총 {total.toLocaleString()}원
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.dim}>
|
||||||
|
미청구 {hidden.unclaimed.toLocaleString()}원 + 휴면 {hidden.dormant.toLocaleString()}원
|
||||||
|
</Text>
|
||||||
|
<View style={{ height: 12 }} />
|
||||||
|
<Button title="지금 바로 청구하기" onPress={() => {}} />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Section title="발견된 보험금 내역">
|
||||||
|
{hidden.items.map((it, i) => (
|
||||||
|
<Card key={i} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={styles.iconBox}>
|
||||||
|
<Ionicons name="business" size={20} color={colors.primary} />
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>{it.insurer}</Text>
|
||||||
|
<Text style={styles.dim}>{it.type}</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={[typography.title as any, { color: colors.success }]}>
|
||||||
|
{it.amount.toLocaleString()}원
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="📌 이런 것도 있어요">
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.body as any}>
|
||||||
|
• 사망/장해/입원 등 청구 누락 보험금도 조회 가능{'\n'}
|
||||||
|
• 배우자/자녀 명의 보험금은 별도 조회 필요{'\n'}
|
||||||
|
• 휴면 보험금은 소멸시효 10년 이내만 수령 가능
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
hero: { padding: 24, borderRadius: radius.xl, alignItems: 'center' },
|
||||||
|
heroTitle: { color: '#FFF', fontSize: 22, fontWeight: '800', marginTop: 12 },
|
||||||
|
heroSub: { color: 'rgba(255,255,255,0.9)', fontSize: 13, textAlign: 'center', marginTop: 6 },
|
||||||
|
dim: { ...typography.caption, color: colors.textSecondary, marginTop: 4 },
|
||||||
|
iconBox: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 20,
|
||||||
|
backgroundColor: colors.primaryLight,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,228 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import IconTile from '@/components/IconTile';
|
||||||
|
import ProgressBar from '@/components/ProgressBar';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, shadow, spacing, typography } from '@/theme/typography';
|
||||||
|
import { useAppStore } from '@/store/useAppStore';
|
||||||
|
import type { RootStackParamList } from '@/navigation/RootNavigator';
|
||||||
|
|
||||||
|
type Nav = NativeStackNavigationProp<RootStackParamList>;
|
||||||
|
|
||||||
|
export default function HomeScreen() {
|
||||||
|
const nav = useNavigation<Nav>();
|
||||||
|
const profile = useAppStore((s) => s.profile);
|
||||||
|
const score = useAppStore((s) => s.score);
|
||||||
|
const hiddenMoney = useAppStore((s) => s.hiddenMoney);
|
||||||
|
const notifications = useAppStore((s) => s.notifications);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe} edges={['top']}>
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 32 }}>
|
||||||
|
<View style={styles.topBar}>
|
||||||
|
<View>
|
||||||
|
<Text style={styles.brand}>보험케어</Text>
|
||||||
|
<Text style={styles.brandSub}>내 보험, 한눈에</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.topIcons}>
|
||||||
|
<Ionicons
|
||||||
|
name="notifications-outline"
|
||||||
|
size={24}
|
||||||
|
color={colors.text}
|
||||||
|
onPress={() => nav.navigate('Notifications')}
|
||||||
|
/>
|
||||||
|
<View style={styles.dot} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<LinearGradient
|
||||||
|
colors={colors.gradient.primary}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 1, y: 1 }}
|
||||||
|
style={styles.hero}
|
||||||
|
>
|
||||||
|
<Text style={styles.heroHello}>{profile.name}님, 안녕하세요 👋</Text>
|
||||||
|
<View style={styles.heroRow}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={styles.heroLabel}>내 보험 점수</Text>
|
||||||
|
<Text style={styles.heroScore}>
|
||||||
|
{score.total}
|
||||||
|
<Text style={styles.heroScoreUnit}> /100</Text>
|
||||||
|
</Text>
|
||||||
|
<View style={{ height: 10 }} />
|
||||||
|
<ProgressBar value={score.total} color="#FFF" track="rgba(255,255,255,0.3)" height={6} />
|
||||||
|
</View>
|
||||||
|
<View style={styles.heroBadge}>
|
||||||
|
<Ionicons name="shield-checkmark" size={36} color="#FFF" />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.heroActions}>
|
||||||
|
<TouchableOpacity style={styles.heroAction} activeOpacity={0.8} onPress={() => nav.navigate('Score')}>
|
||||||
|
<Text style={styles.heroActionText}>상세 점수 보기</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={16} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</LinearGradient>
|
||||||
|
|
||||||
|
<Section title="3초 진단" subtitle="질문 몇 개로 내 보험 상태 체크">
|
||||||
|
<Card onPress={() => nav.navigate('Diagnosis')} padding="lg">
|
||||||
|
<View style={styles.rowBetween}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Badge label="무료 · 3초 완료" tone="primary" />
|
||||||
|
<Text style={[typography.title as any, { marginTop: 10 }]}>당신에게 맞는 보험 진단</Text>
|
||||||
|
<Text style={styles.dim}>나이/성별/직업 기반 맞춤 분석</Text>
|
||||||
|
</View>
|
||||||
|
<LinearGradient colors={colors.gradient.primary} style={styles.diagIcon}>
|
||||||
|
<Ionicons name="flash" size={28} color="#FFF" />
|
||||||
|
</LinearGradient>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="주요 기능" subtitle="모든 보험 관리를 한 곳에서">
|
||||||
|
<Card padding="md">
|
||||||
|
<View style={styles.grid}>
|
||||||
|
<IconTile icon="stats-chart" label="점수" color="#8B5CF6" bg="#EDE9FE" onPress={() => nav.navigate('Score')} />
|
||||||
|
<IconTile icon="people" label="연령별 분석" color="#EC4899" bg="#FCE7F3" onPress={() => nav.navigate('Analysis')} />
|
||||||
|
<IconTile icon="cash" label="숨은보험금" color="#10B981" bg={colors.secondaryLight} badge="47만" onPress={() => nav.navigate('HiddenMoney')} />
|
||||||
|
<IconTile icon="search" label="질병코드" color="#F59E0B" bg={colors.accentLight} onPress={() => nav.navigate('DiseaseCode')} />
|
||||||
|
<IconTile icon="receipt" label="보험금 청구" color={colors.primary} bg={colors.primaryLight} onPress={() => nav.navigate('Claim')} />
|
||||||
|
<IconTile icon="fitness" label="건강검진 분석" color="#EF4444" bg={colors.dangerLight} onPress={() => nav.navigate('HealthCheck')} />
|
||||||
|
<IconTile icon="home" label="가족 보험" color="#6366F1" bg="#E0E7FF" onPress={() => nav.navigate('Family')} />
|
||||||
|
<IconTile icon="medkit" label="병원 체크" color="#14B8A6" bg="#CCFBF1" onPress={() => nav.navigate('HospitalChecklist')} />
|
||||||
|
<IconTile icon="sparkles" label="AI 판정" color="#8B5CF6" bg="#EDE9FE" badge="AI" onPress={() => nav.navigate('AIJudge')} />
|
||||||
|
<IconTile icon="trending-down" label="보험료 다이어트" color="#F97316" bg={colors.warningLight} onPress={() => nav.navigate('PremiumDiet')} />
|
||||||
|
<IconTile icon="shield-half" label="실손 세대" color="#0EA5E9" bg="#E0F2FE" onPress={() => nav.navigate('SilsonGen')} />
|
||||||
|
<IconTile icon="alarm" label="만기 알림" color="#DC2626" bg={colors.dangerLight} onPress={() => nav.navigate('Notifications')} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="💰 숨은 보험금 알림">
|
||||||
|
<Card onPress={() => nav.navigate('HiddenMoney')}>
|
||||||
|
<View style={styles.rowBetween}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Badge label="못 받은 보험금 발견" tone="success" />
|
||||||
|
<Text style={[typography.h2 as any, { marginTop: 8, color: colors.success }]}>
|
||||||
|
{(hiddenMoney.unclaimed + hiddenMoney.dormant).toLocaleString()}원
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.dim}>미청구 {hiddenMoney.unclaimed.toLocaleString()}원 + 휴면 {hiddenMoney.dormant.toLocaleString()}원</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={22} color={colors.textTertiary} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="🔔 다가오는 알림">
|
||||||
|
{notifications.map((n) => (
|
||||||
|
<Card key={n.id} style={{ marginBottom: 10 }} onPress={() => nav.navigate('Notifications')}>
|
||||||
|
<View style={styles.rowBetween}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Badge
|
||||||
|
label={n.tone === 'danger' ? '긴급' : n.tone === 'warn' ? '알림' : '안내'}
|
||||||
|
tone={n.tone === 'danger' ? 'danger' : n.tone === 'warn' ? 'warning' : 'primary'}
|
||||||
|
/>
|
||||||
|
<Text style={[typography.bodyBold as any, { marginTop: 6 }]}>{n.title}</Text>
|
||||||
|
<Text style={styles.dim}>{n.body}</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={20} color={colors.textTertiary} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="💬 빠른 상담">
|
||||||
|
<View style={{ flexDirection: 'row', gap: 10 }}>
|
||||||
|
<Card style={{ flex: 1 }} onPress={() => nav.navigate('Consult')}>
|
||||||
|
<Ionicons name="chatbubble-ellipses" size={28} color={colors.primary} />
|
||||||
|
<Text style={[typography.bodyBold as any, { marginTop: 10 }]}>카카오 상담</Text>
|
||||||
|
<Text style={styles.dim}>평일 9~18시</Text>
|
||||||
|
</Card>
|
||||||
|
<Card style={{ flex: 1 }} onPress={() => nav.navigate('Consult')}>
|
||||||
|
<Ionicons name="call" size={28} color={colors.secondary} />
|
||||||
|
<Text style={[typography.bodyBold as any, { marginTop: 10 }]}>전화 예약</Text>
|
||||||
|
<Text style={styles.dim}>전문 설계사 연결</Text>
|
||||||
|
</Card>
|
||||||
|
</View>
|
||||||
|
</Section>
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.background },
|
||||||
|
topBar: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: spacing.lg,
|
||||||
|
paddingVertical: spacing.md,
|
||||||
|
},
|
||||||
|
brand: { fontSize: 22, fontWeight: '800', color: colors.primary },
|
||||||
|
brandSub: { ...typography.caption, color: colors.textSecondary },
|
||||||
|
topIcons: { flexDirection: 'row', alignItems: 'center' },
|
||||||
|
dot: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: 4,
|
||||||
|
backgroundColor: colors.danger,
|
||||||
|
},
|
||||||
|
hero: {
|
||||||
|
marginHorizontal: spacing.lg,
|
||||||
|
borderRadius: radius.xl,
|
||||||
|
padding: spacing.xl,
|
||||||
|
...shadow.md,
|
||||||
|
},
|
||||||
|
heroHello: { color: 'rgba(255,255,255,0.9)', fontSize: 14, fontWeight: '500' },
|
||||||
|
heroRow: { flexDirection: 'row', alignItems: 'center', marginTop: 12 },
|
||||||
|
heroLabel: { color: 'rgba(255,255,255,0.8)', fontSize: 13 },
|
||||||
|
heroScore: { color: '#FFF', fontSize: 42, fontWeight: '800', lineHeight: 50 },
|
||||||
|
heroScoreUnit: { color: 'rgba(255,255,255,0.7)', fontSize: 18, fontWeight: '600' },
|
||||||
|
heroBadge: {
|
||||||
|
width: 64,
|
||||||
|
height: 64,
|
||||||
|
borderRadius: 32,
|
||||||
|
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
heroActions: {
|
||||||
|
marginTop: 16,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
},
|
||||||
|
heroAction: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||||
|
paddingHorizontal: 14,
|
||||||
|
paddingVertical: 8,
|
||||||
|
borderRadius: radius.pill,
|
||||||
|
},
|
||||||
|
heroActionText: { color: '#FFF', fontWeight: '600', fontSize: 13, marginRight: 4 },
|
||||||
|
rowBetween: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
|
||||||
|
dim: { ...typography.caption, color: colors.textSecondary, marginTop: 4 },
|
||||||
|
diagIcon: {
|
||||||
|
width: 56,
|
||||||
|
height: 56,
|
||||||
|
borderRadius: 28,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,150 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TouchableOpacity, Share } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type CheckItem = {
|
||||||
|
id: string;
|
||||||
|
text: string;
|
||||||
|
detail?: string;
|
||||||
|
critical?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const items: CheckItem[] = [
|
||||||
|
{ id: '1', text: '진단서 꼭 받으세요', detail: '청구 필수 서류 (질병분류코드 포함)', critical: true },
|
||||||
|
{ id: '2', text: '영수증 원본 보관', detail: '분실 시 재발급 수수료 발생', critical: true },
|
||||||
|
{ id: '3', text: '진료비 세부내역서 요청', detail: '비급여 항목 청구 시 필수' },
|
||||||
|
{ id: '4', text: 'MRI/CT는 의사 소견서 필요', detail: '실손 청구 시 의학적 필요성 증명' },
|
||||||
|
{ id: '5', text: '도수치료는 1회 3만원 이상만 청구 가능', detail: '3세대 이후 실손 기준' },
|
||||||
|
{ id: '6', text: '실손 청구 기한: 3년 이내', detail: '소멸시효 주의' },
|
||||||
|
{ id: '7', text: '수술받으면 수술명/코드 확인', detail: '수술비 특약 청구 시 코드 필수' },
|
||||||
|
{ id: '8', text: '입원일수 미리 체크', detail: '입원일당 특약 확인' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const tipsByVisit = {
|
||||||
|
외래: ['진료비 영수증', '진단서 (1일 치료 1장 이상 필요 시)', '세부내역서'],
|
||||||
|
입원: ['입퇴원 확인서', '진단서', '진료비 세부내역서', '수술 받은 경우 수술확인서'],
|
||||||
|
검사: ['검사 결과지', '의사 소견서', '영수증 세부내역서'],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function HospitalChecklistScreen() {
|
||||||
|
const [checked, setChecked] = useState<Record<string, boolean>>({});
|
||||||
|
const [visitType, setVisitType] = useState<keyof typeof tipsByVisit>('외래');
|
||||||
|
|
||||||
|
const doneCount = Object.values(checked).filter(Boolean).length;
|
||||||
|
|
||||||
|
const share = async () => {
|
||||||
|
const text = items.map((it) => `${checked[it.id] ? '✅' : '⬜'} ${it.text}`).join('\n');
|
||||||
|
await Share.share({ message: `[병원 가기 전 체크리스트]\n\n${text}` });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="병원 가기 전 체크리스트" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.bodyBold as any}>🏥 병원 가시나요?</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 4 } as any}>
|
||||||
|
이 체크리스트 하나면 보험금 청구 걱정 끝
|
||||||
|
</Text>
|
||||||
|
<View style={{ marginTop: 12, flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Text style={{ ...typography.h2 as any, color: colors.primary }}>
|
||||||
|
{doneCount}/{items.length}
|
||||||
|
</Text>
|
||||||
|
<Text style={{ ...typography.body, marginLeft: 8, color: colors.textSecondary } as any}>항목 체크 완료</Text>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Section title="방문 유형 선택">
|
||||||
|
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||||
|
{(Object.keys(tipsByVisit) as Array<keyof typeof tipsByVisit>).map((t) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={t}
|
||||||
|
style={[styles.typeBox, visitType === t && styles.typeBoxActive]}
|
||||||
|
onPress={() => setVisitType(t)}
|
||||||
|
>
|
||||||
|
<Text style={[styles.typeText, visitType === t && { color: '#FFF' }]}>{t}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<Card style={{ marginTop: 12 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>📋 {visitType} 진료 시 필요 서류</Text>
|
||||||
|
<View style={{ marginTop: 8 }}>
|
||||||
|
{tipsByVisit[visitType].map((t, i) => (
|
||||||
|
<Text key={i} style={{ ...typography.body, marginVertical: 2 } as any}>
|
||||||
|
• {t}
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="체크리스트">
|
||||||
|
{items.map((it) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={it.id}
|
||||||
|
onPress={() => setChecked({ ...checked, [it.id]: !checked[it.id] })}
|
||||||
|
activeOpacity={0.8}
|
||||||
|
>
|
||||||
|
<Card style={{ marginBottom: 8 }}>
|
||||||
|
<View style={{ flexDirection: 'row' }}>
|
||||||
|
<View style={[styles.checkbox, checked[it.id] && styles.checkboxActive]}>
|
||||||
|
{checked[it.id] && <Ionicons name="checkmark" size={16} color="#FFF" />}
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
typography.bodyBold as any,
|
||||||
|
checked[it.id] && { textDecorationLine: 'line-through', color: colors.textTertiary },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{it.text}
|
||||||
|
</Text>
|
||||||
|
{it.critical && <Badge label="필수" tone="danger" style={{ marginLeft: 6 }} />}
|
||||||
|
</View>
|
||||||
|
{it.detail && <Text style={styles.detail}>{it.detail}</Text>}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<View style={{ paddingTop: 12 }}>
|
||||||
|
<Button title="체크리스트 공유하기" variant="outline" onPress={share} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
typeBox: {
|
||||||
|
flex: 1,
|
||||||
|
paddingVertical: 12,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
backgroundColor: colors.surfaceAlt,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
typeBoxActive: { backgroundColor: colors.primary },
|
||||||
|
typeText: { color: colors.text, fontWeight: '600' },
|
||||||
|
checkbox: {
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
borderRadius: 12,
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: colors.border,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
checkboxActive: { backgroundColor: colors.primary, borderColor: colors.primary },
|
||||||
|
detail: { ...typography.caption, color: colors.textSecondary, marginTop: 2 },
|
||||||
|
});
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import { useAppStore } from '@/store/useAppStore';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing, typography } from '@/theme/typography';
|
||||||
|
import type { RootStackParamList } from '@/navigation/RootNavigator';
|
||||||
|
|
||||||
|
type Nav = NativeStackNavigationProp<RootStackParamList>;
|
||||||
|
|
||||||
|
export default function MyInsuranceScreen() {
|
||||||
|
const nav = useNavigation<Nav>();
|
||||||
|
const family = useAppStore((s) => s.family);
|
||||||
|
const profile = useAppStore((s) => s.profile);
|
||||||
|
const me = family.find((m) => m.relation === '본인');
|
||||||
|
const totalMonthly = me?.policies.reduce((a, p) => a + p.monthlyPremium, 0) ?? 0;
|
||||||
|
const totalCoverage = me?.policies.reduce((a, p) => a + p.coverage, 0) ?? 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="내 보험" showBack={false} />
|
||||||
|
<Card style={{ margin: spacing.lg }}>
|
||||||
|
<Text style={styles.label}>이달 납입 보험료</Text>
|
||||||
|
<Text style={styles.big}>{totalMonthly.toLocaleString()}원</Text>
|
||||||
|
<View style={styles.divider} />
|
||||||
|
<View style={{ flexDirection: 'row' }}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={styles.label}>총 보장금액</Text>
|
||||||
|
<Text style={styles.mid}>{(totalCoverage / 10000).toLocaleString()}만원</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={styles.label}>가입 보험</Text>
|
||||||
|
<Text style={styles.mid}>{me?.policies.length ?? 0}건</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Section title="내 보험 목록">
|
||||||
|
{me?.policies.map((p) => (
|
||||||
|
<Card key={p.id} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={styles.icon}>
|
||||||
|
<Ionicons name="shield-checkmark" size={22} color={colors.primary} />
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
|
||||||
|
<Badge label={p.type} tone="primary" />
|
||||||
|
<Text style={styles.insurer}>{p.insurer}</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.name}>{p.name}</Text>
|
||||||
|
<Text style={styles.dim}>
|
||||||
|
월 {p.monthlyPremium.toLocaleString()}원 · 보장 {(p.coverage / 10000).toLocaleString()}만원
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={20} color={colors.textTertiary} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="바로가기">
|
||||||
|
<View style={{ gap: 8 }}>
|
||||||
|
<Button title="내 보험 점수 상세보기" onPress={() => nav.navigate('Score')} />
|
||||||
|
<Button title="보험료 다이어트 진단" variant="outline" onPress={() => nav.navigate('PremiumDiet')} />
|
||||||
|
<Button title="실손 세대 판별" variant="outline" onPress={() => nav.navigate('SilsonGen')} />
|
||||||
|
<Button title="가족 보험 한눈에 보기" variant="outline" onPress={() => nav.navigate('Family')} />
|
||||||
|
</View>
|
||||||
|
</Section>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
label: { ...typography.caption, color: colors.textSecondary },
|
||||||
|
big: { fontSize: 32, fontWeight: '800', color: colors.text, marginTop: 4 },
|
||||||
|
mid: { fontSize: 18, fontWeight: '700', color: colors.text, marginTop: 4 },
|
||||||
|
divider: { height: 1, backgroundColor: colors.border, marginVertical: 16 },
|
||||||
|
icon: {
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
borderRadius: 22,
|
||||||
|
backgroundColor: colors.primaryLight,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
insurer: { ...typography.caption, color: colors.textSecondary },
|
||||||
|
name: { ...typography.bodyBold, color: colors.text, marginTop: 2 },
|
||||||
|
dim: { ...typography.caption, color: colors.textSecondary, marginTop: 2 },
|
||||||
|
});
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { useAppStore } from '@/store/useAppStore';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing, typography } from '@/theme/typography';
|
||||||
|
import type { RootStackParamList } from '@/navigation/RootNavigator';
|
||||||
|
|
||||||
|
type Nav = NativeStackNavigationProp<RootStackParamList>;
|
||||||
|
|
||||||
|
const menu = [
|
||||||
|
{ icon: 'person-circle', label: '개인정보 수정', route: undefined },
|
||||||
|
{ icon: 'shield-checkmark', label: '내 보험', route: 'MyInsurance' },
|
||||||
|
{ icon: 'people', label: '가족 보험', route: 'Family' },
|
||||||
|
{ icon: 'fitness', label: '건강검진 분석', route: 'HealthCheck' },
|
||||||
|
{ icon: 'notifications', label: '만기/갱신 알림 설정', route: 'Notifications' },
|
||||||
|
{ icon: 'lock-closed', label: '개인정보 처리방침', route: undefined },
|
||||||
|
{ icon: 'document-text', label: '이용약관', route: undefined },
|
||||||
|
{ icon: 'help-circle', label: '고객센터', route: 'Consult' },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export default function MyPageScreen() {
|
||||||
|
const nav = useNavigation<Nav>();
|
||||||
|
const profile = useAppStore((s) => s.profile);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="마이" showBack={false} />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={styles.avatar}>
|
||||||
|
<Ionicons name="person" size={32} color={colors.primary} />
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 14 }}>
|
||||||
|
<Text style={typography.h3 as any}>{profile.name}님</Text>
|
||||||
|
<Text style={styles.dim}>
|
||||||
|
{profile.age}세 · {profile.gender} · {profile.job}
|
||||||
|
</Text>
|
||||||
|
<View style={{ marginTop: 6 }}>
|
||||||
|
<Badge label={`보험점수 ${profile.score}점`} tone="primary" />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Section title="설정">
|
||||||
|
{menu.map((m) => (
|
||||||
|
<Card
|
||||||
|
key={m.label}
|
||||||
|
style={{ marginBottom: 8 }}
|
||||||
|
onPress={() => (m.route ? nav.navigate(m.route as any) : null)}
|
||||||
|
>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Ionicons name={m.icon as any} size={22} color={colors.textSecondary} />
|
||||||
|
<Text style={[typography.body as any, { flex: 1, marginLeft: 12 }]}>{m.label}</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<View style={{ alignItems: 'center', marginTop: 24 }}>
|
||||||
|
<Text style={styles.dim}>보험케어 v1.0.0</Text>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
avatar: {
|
||||||
|
width: 64,
|
||||||
|
height: 64,
|
||||||
|
borderRadius: 32,
|
||||||
|
backgroundColor: colors.primaryLight,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
dim: { ...typography.caption, color: colors.textSecondary, marginTop: 4 },
|
||||||
|
});
|
||||||
@@ -0,0 +1,154 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, Switch, TouchableOpacity } from 'react-native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { useAppStore } from '@/store/useAppStore';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
const upcomingItems = [
|
||||||
|
{ date: '11/15', title: '실손보험 갱신', detail: '보험료 7% 인상 예정 (12만원 → 12.8만원)', days: 22, severity: 'high' },
|
||||||
|
{ date: '11/28', title: '자녀 어린이보험 만기', detail: '연장 여부 결정 필요', days: 35, severity: 'mid' },
|
||||||
|
{ date: '12/03', title: '자동차보험 갱신', detail: '할인 조건 체크', days: 40, severity: 'low' },
|
||||||
|
{ date: '12/22', title: '종신보험 납입완료', detail: '20년 납입 완납 예정', days: 59, severity: 'low' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function NotificationScreen() {
|
||||||
|
const [kakaoOn, setKakaoOn] = useState(true);
|
||||||
|
const [pushOn, setPushOn] = useState(true);
|
||||||
|
const [smsOn, setSmsOn] = useState(false);
|
||||||
|
const [timings, setTimings] = useState({ oneMonth: true, oneWeek: true, today: true, afterRenew: true });
|
||||||
|
const notifications = useAppStore((s) => s.notifications);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="만기 · 갱신 알림" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<LinearGradient colors={['#DC2626', '#F97316']} style={styles.hero}>
|
||||||
|
<Ionicons name="alarm" size={40} color="#FFF" />
|
||||||
|
<Text style={styles.heroTitle}>🔔 중요한 순간 놓치지 마세요</Text>
|
||||||
|
<Text style={styles.heroSub}>카카오톡 알림톡으로 자동 발송</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
|
||||||
|
<Section title="📅 이번달 알림">
|
||||||
|
{upcomingItems.map((it, i) => (
|
||||||
|
<Card key={i} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={[styles.dateBox, { backgroundColor: severityColor(it.severity, 'bg') }]}>
|
||||||
|
<Text style={{ color: severityColor(it.severity, 'fg'), fontWeight: '800' }}>{it.date}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Badge
|
||||||
|
label={`D-${it.days}`}
|
||||||
|
tone={it.severity === 'high' ? 'danger' : it.severity === 'mid' ? 'warning' : 'primary'}
|
||||||
|
/>
|
||||||
|
{it.severity === 'high' && <Text style={{ marginLeft: 6, fontSize: 16 }}>🚨</Text>}
|
||||||
|
</View>
|
||||||
|
<Text style={{ ...typography.bodyBold as any, marginTop: 4 }}>{it.title}</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 2 } as any}>
|
||||||
|
{it.detail}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="지난 알림">
|
||||||
|
{notifications.map((n) => (
|
||||||
|
<Card key={n.id} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>{n.title}</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 2 } as any}>
|
||||||
|
{n.body}
|
||||||
|
</Text>
|
||||||
|
<Text style={{ ...typography.small, color: colors.textTertiary, marginTop: 4 } as any}>{n.date}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="💬 알림톡 발송 시점">
|
||||||
|
<Card>
|
||||||
|
{[
|
||||||
|
{ key: 'oneMonth', label: '만기 1개월 전', icon: 'calendar' },
|
||||||
|
{ key: 'oneWeek', label: '만기 1주일 전', icon: 'calendar-outline' },
|
||||||
|
{ key: 'today', label: '만기 당일', icon: 'alert' },
|
||||||
|
{ key: 'afterRenew', label: '갱신 후 결과 안내', icon: 'checkmark-done' },
|
||||||
|
].map((s) => (
|
||||||
|
<View key={s.key} style={styles.switchRow}>
|
||||||
|
<Ionicons name={s.icon as any} size={20} color={colors.textSecondary} />
|
||||||
|
<Text style={{ ...typography.body as any, flex: 1, marginLeft: 10 }}>{s.label}</Text>
|
||||||
|
<Switch
|
||||||
|
value={(timings as any)[s.key]}
|
||||||
|
onValueChange={(v) => setTimings({ ...timings, [s.key]: v })}
|
||||||
|
trackColor={{ false: colors.border, true: colors.primary }}
|
||||||
|
thumbColor="#FFF"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="📱 알림 수신 방법">
|
||||||
|
<Card>
|
||||||
|
<View style={styles.switchRow}>
|
||||||
|
<Ionicons name="chatbubble" size={20} color="#F5B300" />
|
||||||
|
<Text style={{ ...typography.body as any, flex: 1, marginLeft: 10 }}>카카오 알림톡</Text>
|
||||||
|
<Switch value={kakaoOn} onValueChange={setKakaoOn} trackColor={{ false: colors.border, true: colors.primary }} thumbColor="#FFF" />
|
||||||
|
</View>
|
||||||
|
<View style={styles.switchRow}>
|
||||||
|
<Ionicons name="notifications" size={20} color={colors.primary} />
|
||||||
|
<Text style={{ ...typography.body as any, flex: 1, marginLeft: 10 }}>앱 푸시 알림</Text>
|
||||||
|
<Switch value={pushOn} onValueChange={setPushOn} trackColor={{ false: colors.border, true: colors.primary }} thumbColor="#FFF" />
|
||||||
|
</View>
|
||||||
|
<View style={styles.switchRow}>
|
||||||
|
<Ionicons name="mail" size={20} color={colors.textSecondary} />
|
||||||
|
<Text style={{ ...typography.body as any, flex: 1, marginLeft: 10 }}>SMS 문자</Text>
|
||||||
|
<Switch value={smsOn} onValueChange={setSmsOn} trackColor={{ false: colors.border, true: colors.primary }} thumbColor="#FFF" />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<View style={{ paddingTop: 16 }}>
|
||||||
|
<Button title="알림 설정 저장" size="lg" onPress={() => {}} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function severityColor(s: string, kind: 'bg' | 'fg') {
|
||||||
|
if (s === 'high') return kind === 'bg' ? colors.dangerLight : colors.danger;
|
||||||
|
if (s === 'mid') return kind === 'bg' ? colors.warningLight : colors.warning;
|
||||||
|
return kind === 'bg' ? colors.primaryLight : colors.primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
hero: { padding: 24, borderRadius: radius.xl, alignItems: 'center' },
|
||||||
|
heroTitle: { color: '#FFF', fontSize: 20, fontWeight: '800', marginTop: 10 },
|
||||||
|
heroSub: { color: 'rgba(255,255,255,0.9)', fontSize: 13, marginTop: 4 },
|
||||||
|
dateBox: {
|
||||||
|
width: 64,
|
||||||
|
height: 64,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
switchRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: 10,
|
||||||
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
|
borderBottomColor: colors.border,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,125 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
const currentPremium = 472000;
|
||||||
|
const optimizedPremium = 318000;
|
||||||
|
const monthSaving = currentPremium - optimizedPremium;
|
||||||
|
const yearSaving = monthSaving * 12;
|
||||||
|
|
||||||
|
const duplications = [
|
||||||
|
{ title: '실손 + 단체실손 중복', severity: 'high', detail: '회사 단체실손 있음 → 개인 실손은 중복 보장 안됨', save: 32000 },
|
||||||
|
{ title: '암진단비 과다 (3건 가입)', severity: 'mid', detail: '진단비 9,000만원은 과다 보장. 5,000만원으로 조정 권장', save: 42000 },
|
||||||
|
{ title: '치아 + 실손 보장 중복', severity: 'low', detail: '스케일링/충치 치료 항목 중복', save: 15000 },
|
||||||
|
{ title: '저축성 보험 사업비 과다', severity: 'mid', detail: '10년 납입 기준 사업비 비율 13% → 7% 상품으로 변경 가능', save: 65000 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function PremiumDietScreen() {
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="보험료 다이어트" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<LinearGradient colors={colors.gradient.warning} style={styles.hero}>
|
||||||
|
<Ionicons name="trending-down" size={40} color="#FFF" />
|
||||||
|
<Text style={styles.heroTitle}>💸 내 보험료 다이어트</Text>
|
||||||
|
<Text style={styles.heroSub}>중복·과다 보장만 정리해도 월 15만원 절약</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
|
||||||
|
<Card style={{ marginTop: 16 }}>
|
||||||
|
<Text style={typography.caption as any}>현재 월 보험료</Text>
|
||||||
|
<Text style={{ ...typography.h2 as any, color: colors.text, marginTop: 4 }}>
|
||||||
|
{currentPremium.toLocaleString()}원
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View style={styles.arrow}>
|
||||||
|
<Ionicons name="arrow-down" size={24} color={colors.success} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text style={typography.caption as any}>다이어트 후 보험료</Text>
|
||||||
|
<Text style={{ ...typography.h2 as any, color: colors.success, marginTop: 4 }}>
|
||||||
|
{optimizedPremium.toLocaleString()}원
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View style={styles.resultBox}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={styles.resultLabel}>월 절감액</Text>
|
||||||
|
<Text style={styles.resultAmt}>{monthSaving.toLocaleString()}원</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.divider} />
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={styles.resultLabel}>연간 절약</Text>
|
||||||
|
<Text style={[styles.resultAmt, { color: colors.accent }]}>{yearSaving.toLocaleString()}원</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Section title="✂️ 발견된 중복·과다 보장">
|
||||||
|
{duplications.map((d, i) => (
|
||||||
|
<Card key={i} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Badge
|
||||||
|
label={d.severity === 'high' ? '즉시 조정' : d.severity === 'mid' ? '조정 권장' : '검토'}
|
||||||
|
tone={d.severity === 'high' ? 'danger' : d.severity === 'mid' ? 'warning' : 'primary'}
|
||||||
|
/>
|
||||||
|
<Text style={{ ...typography.bodyBold as any, marginTop: 6 }}>{d.title}</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 4 } as any}>
|
||||||
|
{d.detail}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ alignItems: 'flex-end', marginLeft: 10 }}>
|
||||||
|
<Text style={{ ...typography.small, color: colors.textSecondary } as any}>월 절감</Text>
|
||||||
|
<Text style={{ ...typography.title as any, color: colors.success }}>
|
||||||
|
-{d.save.toLocaleString()}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="💡 다이어트 팁">
|
||||||
|
<Card>
|
||||||
|
<Text style={typography.body as any}>
|
||||||
|
• 회사 단체실손 있으면 개인 실손 중지 신청 가능 (1~3년 단위){'\n'}
|
||||||
|
• 암 진단비는 가구 소득의 1~2배 수준이 적정{'\n'}
|
||||||
|
• 사업비 높은 저축성은 리모델링 또는 해지 검토{'\n'}
|
||||||
|
• 65세 이상 납입 종신은 실손 + 간병 조합이 유리
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<View style={{ paddingTop: 16, gap: 8 }}>
|
||||||
|
<Button title="최적화 상담 받기" size="lg" onPress={() => {}} />
|
||||||
|
<Button title="리모델링 시뮬레이션" variant="outline" onPress={() => {}} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
hero: { padding: 24, borderRadius: radius.xl, alignItems: 'center' },
|
||||||
|
heroTitle: { color: '#FFF', fontSize: 22, fontWeight: '800', marginTop: 10 },
|
||||||
|
heroSub: { color: 'rgba(255,255,255,0.9)', fontSize: 13, marginTop: 6 },
|
||||||
|
arrow: { alignItems: 'center', marginVertical: 12 },
|
||||||
|
resultBox: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
marginTop: 16,
|
||||||
|
padding: 14,
|
||||||
|
backgroundColor: colors.secondaryLight,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
},
|
||||||
|
resultLabel: { ...typography.small, color: colors.textSecondary, fontWeight: '600' },
|
||||||
|
resultAmt: { fontSize: 18, fontWeight: '800', color: colors.success, marginTop: 2 },
|
||||||
|
divider: { width: 1, backgroundColor: colors.border },
|
||||||
|
});
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import ScoreGauge from '@/components/ScoreGauge';
|
||||||
|
import ProgressBar from '@/components/ProgressBar';
|
||||||
|
import { useAppStore } from '@/store/useAppStore';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing, typography } from '@/theme/typography';
|
||||||
|
import type { RootStackParamList } from '@/navigation/RootNavigator';
|
||||||
|
|
||||||
|
type Nav = NativeStackNavigationProp<RootStackParamList>;
|
||||||
|
|
||||||
|
const statusMap = {
|
||||||
|
good: { icon: 'checkmark-circle', color: colors.success, label: '양호' },
|
||||||
|
warn: { icon: 'alert-circle', color: colors.warning, label: '부족' },
|
||||||
|
bad: { icon: 'close-circle', color: colors.danger, label: '취약' },
|
||||||
|
none: { icon: 'remove-circle', color: colors.textTertiary, label: '미가입' },
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export default function ScoreScreen() {
|
||||||
|
const nav = useNavigation<Nav>();
|
||||||
|
const score = useAppStore((s) => s.score);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="내 보험 점수" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card padding="xl">
|
||||||
|
<View style={{ alignItems: 'center' }}>
|
||||||
|
<ScoreGauge value={score.total} size={200} />
|
||||||
|
</View>
|
||||||
|
<View style={{ marginTop: 16, padding: 14, backgroundColor: colors.primaryLight, borderRadius: 12 }}>
|
||||||
|
<Text style={{ color: colors.primaryDark, fontWeight: '700' }}>
|
||||||
|
💡 상위 15% 수준이에요. 몇 가지 보완하면 90점 이상 가능!
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Section title="항목별 점수">
|
||||||
|
{score.breakdown.map((b) => {
|
||||||
|
const s = statusMap[b.status];
|
||||||
|
return (
|
||||||
|
<Card key={b.label} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Ionicons name={s.icon as any} size={22} color={s.color} />
|
||||||
|
<Text style={[typography.bodyBold as any, { marginLeft: 8, flex: 1 }]}>{b.label}</Text>
|
||||||
|
<Text style={{ color: s.color, fontWeight: '700' }}>{s.label}</Text>
|
||||||
|
<Text style={{ ...typography.title as any, marginLeft: 10 }}>{b.value}점</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ marginTop: 10 }}>
|
||||||
|
<ProgressBar value={b.value} color={s.color} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="⚡ 점수 올리는 법">
|
||||||
|
{[
|
||||||
|
{ title: '간병보험 가입', desc: '60대 이후 필수. +15점', route: 'Consult' },
|
||||||
|
{ title: '종신보험 보장 강화', desc: '자녀 자산 상속 대비. +10점', route: 'Consult' },
|
||||||
|
{ title: '치아보험 추가', desc: '중년기 치과 비용 대비. +5점', route: 'Consult' },
|
||||||
|
].map((a) => (
|
||||||
|
<Card key={a.title} style={{ marginBottom: 10 }} onPress={() => nav.navigate(a.route as any)}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>{a.title}</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary } as any}>{a.desc}</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={20} color={colors.textTertiary} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<View style={{ paddingHorizontal: 0, paddingTop: 8, gap: 8 }}>
|
||||||
|
<Button title="맞춤 상담 받기" onPress={() => nav.navigate('Consult')} />
|
||||||
|
<Button title="보험료 다이어트 진단" variant="outline" onPress={() => nav.navigate('PremiumDiet')} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({});
|
||||||
@@ -0,0 +1,191 @@
|
|||||||
|
import React, { useState, useMemo } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import ScreenContainer from '@/components/ScreenContainer';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Section from '@/components/Section';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Badge from '@/components/Badge';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { radius, spacing, typography } from '@/theme/typography';
|
||||||
|
import { silsonGenTable, identifyGenFromDate, SilsonGen } from '@/data/silsonGen';
|
||||||
|
|
||||||
|
export default function SilsonGenScreen() {
|
||||||
|
const [joinDate, setJoinDate] = useState('2015-06-10');
|
||||||
|
const detectedGen: SilsonGen | null = useMemo(() => {
|
||||||
|
try {
|
||||||
|
const d = new Date(joinDate);
|
||||||
|
if (Number.isNaN(d.getTime())) return null;
|
||||||
|
return identifyGenFromDate(joinDate);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}, [joinDate]);
|
||||||
|
|
||||||
|
const info = detectedGen ? silsonGenTable.find((s) => s.generation === detectedGen)! : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScreenContainer>
|
||||||
|
<Header title="실손 세대 판별" />
|
||||||
|
<View style={{ padding: spacing.lg }}>
|
||||||
|
<Card>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<Ionicons name="shield-half" size={28} color="#0EA5E9" />
|
||||||
|
<Text style={{ ...typography.h3, marginLeft: 10 } as any}>내 실손은 몇 세대?</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 4 } as any}>
|
||||||
|
실손보험 가입일만 있으면 자동 판별
|
||||||
|
</Text>
|
||||||
|
<Text style={[styles.label, { marginTop: 16 }]}>실손 가입일자</Text>
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
value={joinDate}
|
||||||
|
onChangeText={setJoinDate}
|
||||||
|
placeholder="YYYY-MM-DD"
|
||||||
|
placeholderTextColor={colors.textTertiary}
|
||||||
|
/>
|
||||||
|
<View style={{ flexDirection: 'row', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
|
||||||
|
{[
|
||||||
|
{ label: '2008년 이전', date: '2008-05-01' },
|
||||||
|
{ label: '2012년', date: '2012-06-15' },
|
||||||
|
{ label: '2018년', date: '2018-08-20' },
|
||||||
|
{ label: '2022년', date: '2022-03-10' },
|
||||||
|
{ label: '2025년 이후', date: '2025-06-01' },
|
||||||
|
].map((p) => (
|
||||||
|
<TouchableOpacity key={p.date} style={styles.pill} onPress={() => setJoinDate(p.date)}>
|
||||||
|
<Text style={styles.pillText}>{p.label}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{info && (
|
||||||
|
<Card style={{ marginTop: 16 }}>
|
||||||
|
<Badge label="자동 판별 결과" tone="primary" />
|
||||||
|
<Text style={{ ...typography.h2 as any, marginTop: 10 }}>📌 {info.label}</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary } as any}>{info.period}</Text>
|
||||||
|
|
||||||
|
<View style={styles.stats}>
|
||||||
|
<View style={styles.stat}>
|
||||||
|
<Text style={styles.statLabel}>자기부담금</Text>
|
||||||
|
<Text style={styles.statValue}>{info.selfPay}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.statDivider} />
|
||||||
|
<View style={styles.stat}>
|
||||||
|
<Text style={styles.statLabel}>갱신 주기</Text>
|
||||||
|
<Text style={styles.statValue}>{info.renewCycle}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{ marginTop: 14 }}>
|
||||||
|
<Text style={styles.sub}>✅ 장점</Text>
|
||||||
|
{info.pros.map((p, i) => (
|
||||||
|
<Text key={i} style={{ ...typography.body, marginTop: 4, color: colors.text } as any}>
|
||||||
|
• {p}
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<View style={{ marginTop: 12 }}>
|
||||||
|
<Text style={styles.sub}>⚠️ 단점</Text>
|
||||||
|
{info.cons.map((p, i) => (
|
||||||
|
<Text key={i} style={{ ...typography.body, marginTop: 4, color: colors.text } as any}>
|
||||||
|
• {p}
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{info && info.generation !== 5 && (
|
||||||
|
<Section title="💡 5세대 전환 유불리 진단">
|
||||||
|
<Card>
|
||||||
|
<View style={{ flexDirection: 'row', gap: 12 }}>
|
||||||
|
<View style={{ flex: 1, padding: 14, backgroundColor: colors.primaryLight, borderRadius: radius.md }}>
|
||||||
|
<Text style={{ ...typography.small, color: colors.textSecondary } as any}>현재 월 보험료</Text>
|
||||||
|
<Text style={{ ...typography.h3 as any, color: colors.primary, marginTop: 4 }}>12만원</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, padding: 14, backgroundColor: colors.secondaryLight, borderRadius: radius.md }}>
|
||||||
|
<Text style={{ ...typography.small, color: colors.textSecondary } as any}>5세대 전환 시</Text>
|
||||||
|
<Text style={{ ...typography.h3 as any, color: colors.success, marginTop: 4 }}>4만원</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text style={{ ...typography.bodyBold, marginTop: 12, color: colors.success } as any}>
|
||||||
|
→ 월 8만원 절감 가능
|
||||||
|
</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary, marginTop: 6 } as any}>
|
||||||
|
단, 도수치료/비급여주사 연 한도 축소, 복귀 불가 주의
|
||||||
|
</Text>
|
||||||
|
<View style={{ marginTop: 12 }}>
|
||||||
|
<Button title="전환 상담 받기" variant="outline" onPress={() => {}} />
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Section title="📚 실손 세대 비교표">
|
||||||
|
{silsonGenTable.map((s) => (
|
||||||
|
<Card key={s.generation} style={{ marginBottom: 10 }}>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||||
|
<View style={styles.genBox}>
|
||||||
|
<Text style={styles.genText}>{s.generation}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1, marginLeft: 12 }}>
|
||||||
|
<Text style={typography.bodyBold as any}>{s.label}</Text>
|
||||||
|
<Text style={{ ...typography.caption, color: colors.textSecondary } as any}>{s.period}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ alignItems: 'flex-end' }}>
|
||||||
|
<Text style={{ ...typography.small, color: colors.textSecondary } as any}>자기부담</Text>
|
||||||
|
<Text style={{ ...typography.bodyBold as any }}>{s.selfPay}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
</View>
|
||||||
|
</ScreenContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
label: { ...typography.caption, color: colors.textSecondary, fontWeight: '600' },
|
||||||
|
input: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
padding: 14,
|
||||||
|
marginTop: 6,
|
||||||
|
fontSize: 16,
|
||||||
|
color: colors.text,
|
||||||
|
},
|
||||||
|
pill: {
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 6,
|
||||||
|
borderRadius: radius.pill,
|
||||||
|
backgroundColor: colors.surfaceAlt,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
pillText: { ...typography.small, color: colors.text },
|
||||||
|
stats: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
marginTop: 16,
|
||||||
|
padding: 14,
|
||||||
|
backgroundColor: colors.surfaceAlt,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
},
|
||||||
|
stat: { flex: 1 },
|
||||||
|
statDivider: { width: 1, backgroundColor: colors.border, marginHorizontal: 12 },
|
||||||
|
statLabel: { ...typography.small, color: colors.textSecondary },
|
||||||
|
statValue: { ...typography.bodyBold, color: colors.text, marginTop: 4 },
|
||||||
|
sub: { ...typography.caption, color: colors.textSecondary, fontWeight: '700' },
|
||||||
|
genBox: {
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
borderRadius: 22,
|
||||||
|
backgroundColor: colors.primaryLight,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
genText: { color: colors.primary, fontWeight: '800', fontSize: 20 },
|
||||||
|
});
|
||||||
@@ -0,0 +1,172 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
|
||||||
|
export type Policy = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
insurer: string;
|
||||||
|
type: '실손' | '암' | '종신' | '상해' | '어린이' | '간병' | '여성' | '치아' | '운전자' | '자동차';
|
||||||
|
monthlyPremium: number;
|
||||||
|
coverage: number;
|
||||||
|
joinDate: string;
|
||||||
|
maturityDate?: string;
|
||||||
|
isGroup?: boolean;
|
||||||
|
silsonGeneration?: 1 | 2 | 3 | 4 | 5;
|
||||||
|
renewalDate?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type FamilyMember = {
|
||||||
|
id: string;
|
||||||
|
relation: '본인' | '배우자' | '자녀' | '부모' | '형제';
|
||||||
|
name: string;
|
||||||
|
age: number;
|
||||||
|
gender: '남' | '여';
|
||||||
|
policies: Policy[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Profile = {
|
||||||
|
name: string;
|
||||||
|
age: number;
|
||||||
|
gender: '남' | '여';
|
||||||
|
job: string;
|
||||||
|
monthlyPremium: number;
|
||||||
|
score: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type AppState = {
|
||||||
|
profile: Profile;
|
||||||
|
family: FamilyMember[];
|
||||||
|
score: { total: number; breakdown: Array<{ label: string; value: number; status: 'good' | 'warn' | 'bad' | 'none' }> };
|
||||||
|
hiddenMoney: { unclaimed: number; dormant: number; items: Array<{ insurer: string; type: string; amount: number }> };
|
||||||
|
claims: Array<{ id: string; title: string; status: '접수' | '심사' | '지급완료' | '서류보완'; date: string; amount?: number }>;
|
||||||
|
notifications: Array<{ id: string; title: string; body: string; date: string; tone: 'info' | 'warn' | 'danger' }>;
|
||||||
|
setProfile: (p: Partial<Profile>) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useAppStore = create<AppState>((set) => ({
|
||||||
|
profile: {
|
||||||
|
name: '박철현',
|
||||||
|
age: 34,
|
||||||
|
gender: '남',
|
||||||
|
job: '사무직',
|
||||||
|
monthlyPremium: 472000,
|
||||||
|
score: 82,
|
||||||
|
},
|
||||||
|
family: [
|
||||||
|
{
|
||||||
|
id: 'me',
|
||||||
|
relation: '본인',
|
||||||
|
name: '박철현',
|
||||||
|
age: 34,
|
||||||
|
gender: '남',
|
||||||
|
policies: [
|
||||||
|
{
|
||||||
|
id: 'p1',
|
||||||
|
name: '4세대 실손의료비',
|
||||||
|
insurer: '삼성생명',
|
||||||
|
type: '실손',
|
||||||
|
monthlyPremium: 32000,
|
||||||
|
coverage: 50000000,
|
||||||
|
joinDate: '2021-07-01',
|
||||||
|
renewalDate: '2026-07-01',
|
||||||
|
silsonGeneration: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'p2',
|
||||||
|
name: '종합암보험',
|
||||||
|
insurer: '현대해상',
|
||||||
|
type: '암',
|
||||||
|
monthlyPremium: 58000,
|
||||||
|
coverage: 50000000,
|
||||||
|
joinDate: '2019-03-15',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'sp',
|
||||||
|
relation: '배우자',
|
||||||
|
name: '김지영',
|
||||||
|
age: 32,
|
||||||
|
gender: '여',
|
||||||
|
policies: [
|
||||||
|
{
|
||||||
|
id: 'p3',
|
||||||
|
name: '4세대 실손의료비',
|
||||||
|
insurer: 'KB손해',
|
||||||
|
type: '실손',
|
||||||
|
monthlyPremium: 28000,
|
||||||
|
coverage: 50000000,
|
||||||
|
joinDate: '2022-01-10',
|
||||||
|
silsonGeneration: 4,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'ch',
|
||||||
|
relation: '자녀',
|
||||||
|
name: '박서연',
|
||||||
|
age: 6,
|
||||||
|
gender: '여',
|
||||||
|
policies: [
|
||||||
|
{
|
||||||
|
id: 'p4',
|
||||||
|
name: '어린이보험',
|
||||||
|
insurer: '메리츠',
|
||||||
|
type: '어린이',
|
||||||
|
monthlyPremium: 45000,
|
||||||
|
coverage: 30000000,
|
||||||
|
joinDate: '2020-05-20',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'pa',
|
||||||
|
relation: '부모',
|
||||||
|
name: '박영수',
|
||||||
|
age: 68,
|
||||||
|
gender: '남',
|
||||||
|
policies: [
|
||||||
|
{
|
||||||
|
id: 'p5',
|
||||||
|
name: '1세대 실손의료비',
|
||||||
|
insurer: '동부화재',
|
||||||
|
type: '실손',
|
||||||
|
monthlyPremium: 95000,
|
||||||
|
coverage: 30000000,
|
||||||
|
joinDate: '2008-06-12',
|
||||||
|
silsonGeneration: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
score: {
|
||||||
|
total: 82,
|
||||||
|
breakdown: [
|
||||||
|
{ label: '실손보험', value: 95, status: 'good' },
|
||||||
|
{ label: '암보험', value: 90, status: 'good' },
|
||||||
|
{ label: '종신보험', value: 60, status: 'warn' },
|
||||||
|
{ label: '간병보험', value: 0, status: 'none' },
|
||||||
|
{ label: '상해보험', value: 80, status: 'good' },
|
||||||
|
{ label: '치아보험', value: 40, status: 'bad' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
hiddenMoney: {
|
||||||
|
unclaimed: 470000,
|
||||||
|
dormant: 120000,
|
||||||
|
items: [
|
||||||
|
{ insurer: '삼성생명', type: '만기환급금', amount: 320000 },
|
||||||
|
{ insurer: '교보생명', type: '중도보험금', amount: 150000 },
|
||||||
|
{ insurer: '한화손해', type: '휴면보험금', amount: 120000 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
claims: [
|
||||||
|
{ id: 'c1', title: '감기 통원 진료비', status: '지급완료', date: '2026-03-11', amount: 38000 },
|
||||||
|
{ id: 'c2', title: '발목 염좌 정형외과', status: '심사', date: '2026-04-18', amount: 120000 },
|
||||||
|
{ id: 'c3', title: '건강검진 위내시경', status: '서류보완', date: '2026-04-20' },
|
||||||
|
],
|
||||||
|
notifications: [
|
||||||
|
{ id: 'n1', title: '실손보험 갱신 예정', body: '11/15 갱신 - 7% 인상 예정 (12만원 → 12.8만원)', date: '2026-04-25', tone: 'warn' },
|
||||||
|
{ id: 'n2', title: '자녀 어린이보험 만기', body: '11/28 만기 - 연장 여부 결정 필요', date: '2026-04-28', tone: 'info' },
|
||||||
|
{ id: 'n3', title: '숨은보험금 47만원 발견', body: '미청구 보험금 조회 결과 확인', date: '2026-04-15', tone: 'danger' },
|
||||||
|
],
|
||||||
|
setProfile: (p) => set((s) => ({ profile: { ...s.profile, ...p } })),
|
||||||
|
}));
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
export const colors = {
|
||||||
|
primary: '#3B82F6',
|
||||||
|
primaryDark: '#2563EB',
|
||||||
|
primaryLight: '#DBEAFE',
|
||||||
|
secondary: '#10B981',
|
||||||
|
secondaryLight: '#D1FAE5',
|
||||||
|
accent: '#F59E0B',
|
||||||
|
accentLight: '#FEF3C7',
|
||||||
|
danger: '#EF4444',
|
||||||
|
dangerLight: '#FEE2E2',
|
||||||
|
warning: '#F97316',
|
||||||
|
warningLight: '#FFEDD5',
|
||||||
|
|
||||||
|
text: '#111827',
|
||||||
|
textSecondary: '#6B7280',
|
||||||
|
textTertiary: '#9CA3AF',
|
||||||
|
|
||||||
|
background: '#F9FAFB',
|
||||||
|
surface: '#FFFFFF',
|
||||||
|
surfaceAlt: '#F3F4F6',
|
||||||
|
border: '#E5E7EB',
|
||||||
|
borderDark: '#D1D5DB',
|
||||||
|
|
||||||
|
success: '#10B981',
|
||||||
|
info: '#3B82F6',
|
||||||
|
|
||||||
|
kakao: '#FEE500',
|
||||||
|
kakaoText: '#191600',
|
||||||
|
|
||||||
|
gradient: {
|
||||||
|
primary: ['#3B82F6', '#2563EB'] as [string, string],
|
||||||
|
success: ['#10B981', '#059669'] as [string, string],
|
||||||
|
warning: ['#F59E0B', '#D97706'] as [string, string],
|
||||||
|
danger: ['#EF4444', '#DC2626'] as [string, string],
|
||||||
|
purple: ['#8B5CF6', '#7C3AED'] as [string, string],
|
||||||
|
pink: ['#EC4899', '#DB2777'] as [string, string],
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { TextStyle } from 'react-native';
|
||||||
|
|
||||||
|
export const typography: Record<string, TextStyle> = {
|
||||||
|
h1: { fontSize: 28, fontWeight: '800', lineHeight: 36 },
|
||||||
|
h2: { fontSize: 22, fontWeight: '700', lineHeight: 30 },
|
||||||
|
h3: { fontSize: 18, fontWeight: '700', lineHeight: 26 },
|
||||||
|
title: { fontSize: 16, fontWeight: '700', lineHeight: 24 },
|
||||||
|
body: { fontSize: 15, fontWeight: '400', lineHeight: 22 },
|
||||||
|
bodyBold: { fontSize: 15, fontWeight: '600', lineHeight: 22 },
|
||||||
|
caption: { fontSize: 13, fontWeight: '400', lineHeight: 18 },
|
||||||
|
small: { fontSize: 12, fontWeight: '400', lineHeight: 16 },
|
||||||
|
button: { fontSize: 16, fontWeight: '700', lineHeight: 24 },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const spacing = {
|
||||||
|
xs: 4,
|
||||||
|
sm: 8,
|
||||||
|
md: 12,
|
||||||
|
lg: 16,
|
||||||
|
xl: 20,
|
||||||
|
xxl: 24,
|
||||||
|
xxxl: 32,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const radius = {
|
||||||
|
sm: 6,
|
||||||
|
md: 10,
|
||||||
|
lg: 14,
|
||||||
|
xl: 18,
|
||||||
|
pill: 999,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const shadow = {
|
||||||
|
sm: {
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.05,
|
||||||
|
shadowRadius: 2,
|
||||||
|
elevation: 1,
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 2 },
|
||||||
|
shadowOpacity: 0.08,
|
||||||
|
shadowRadius: 6,
|
||||||
|
elevation: 3,
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 4 },
|
||||||
|
shadowOpacity: 0.12,
|
||||||
|
shadowRadius: 12,
|
||||||
|
elevation: 6,
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"extends": "expo/tsconfig.base",
|
||||||
|
"compilerOptions": {
|
||||||
|
"strict": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["**/*.ts", "**/*.tsx"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user