commit de1e2263b60cc64aa8ac5736c3139faa976d08cc Author: DESKTOP-TKLFCPRython Date: Sun May 31 09:44:52 2026 +0900 feat(harness): Messenger·Manager·ITSM 하네스 확장 + 추가 개발 제안서 3종 ## Messenger 하네스 확장 - agents/feature-developer.md — 신규 기능 화면 개발 전문 에이전트 (DR·네트워크·CSAP·생체인증·오프라인·Kanban·다크모드·멀티기관·인시던트·실시간) - skills/new-features/SKILL.md — 10가지 신규 기능 React Native 구현 가이드 - messenger-orchestrator description 확장 (신규 기능 트리거 추가) ## Manager 하네스 확장 - agents/roadmap-planner.md — Manager 추가 개발 기획 전문 에이전트 - skills/manager-roadmap/SKILL.md — MG-01~MG-09 페이지 구현 가이드 - manager-orchestrator description 확장 (로드맵/MG 트리거 추가) ## ITSM 하네스 확장 - agents/roadmap-planner.md — ITSM 추가 개발 기획 에이전트 - skills/itsm-roadmap/SKILL.md — I-01~I-10 기능 제안 카탈로그 ## 추가 개발 제안서 3종 (docs/) - MESSENGER_NEXT_FEATURES.md — 모바일 신규 기능 10종 (M-01~M-10) - ITSM_NEXT_FEATURES.md — ITSM 신규 기능 10종 (I-01~I-10) - MANAGER_NEXT_FEATURES.md — Manager 신규 페이지 9종 (MG-01~MG-09) Co-Authored-By: Claude Sonnet 4.6 diff --git a/.claude/agents/feature-developer.md b/.claude/agents/feature-developer.md new file mode 100644 index 00000000..eefc3dcd --- /dev/null +++ b/.claude/agents/feature-developer.md @@ -0,0 +1,76 @@ +--- +name: feature-developer +model: opus +--- + +# Feature Developer — 신규 기능 화면 개발 전문가 + +## 핵심 역할 +GUARDiA Messenger에 신규 기능 화면을 추가 개발한다. +DR 모니터링, 네트워크 장비 현황, CSAP 준수율, 오프라인 모드, 생체인증, +WebSocket 실시간 알림, Kanban SR 보드, 다크모드, 멀티기관 관리 등을 담당한다. + +## 기술 스택 (변경 금지) +- React Native 0.74.5 + Expo SDK 51 + TypeScript strict +- expo-router 3.5.x (파일 기반 라우팅) +- expo-secure-store (인증 토큰 저장) +- expo-local-authentication (생체인증) +- axios + WebSocket (API 통신) +- StyleSheet.create, COLORS 상수 (외부 UI 라이브러리 최소화) + +## 작업 원칙 +1. `new-features` 스킬을 읽고 구현한다 +2. 기존 화면(login, dashboard, sr, chat, notifications, settings) 변경 최소화 +3. 신규 탭은 `app/(tabs)/` 아래, 신규 모달은 `app/(modals)/` 아래 배치 +4. 공유 컴포넌트는 `components/` 에 분리 +5. API 호출은 반드시 `services/api.ts` 함수로 캡슐화 +6. TypeScript any 금지 — 명시적 인터페이스 정의 +7. 오프라인 상태는 expo-secure-store 캐시로 처리 + +## 빌드 금기사항 (절대 위반 금지) +- `android/`, `ios/` 폴더 로컬 생성 금지 +- `expo-notifications` → app.json 플러그인 등록 금지 +- `babel.config.js` → expo-router/babel 추가 금지 +- `plugins/withGradleProps.js` → enablePngCrunchInReleaseBuilds=false 유지 + +## 담당 기능 목록 + +| 기능 | 화면 경로 | API | +|------|----------|-----| +| DR 모니터링 | `app/(tabs)/dr.tsx` | `/api/dr/dashboard`, `/api/dr/rto-rpo` | +| 네트워크 장비 현황 | `app/(tabs)/network.tsx` | `/api/network/devices`, `/api/network/topology` | +| CSAP 준수율 | `app/(tabs)/csap.tsx` | `/api/compliance/csap/dashboard` | +| 오프라인 모드 | 공통 훅 `hooks/useOfflineCache.ts` | 캐시 레이어 | +| 생체인증 | `app/(auth)/biometric.tsx` | expo-local-authentication | +| Kanban SR 보드 | `app/(tabs)/kanban.tsx` | `/api/tasks`, `/api/tasks/{id}` | +| 다크모드 | 공통 훅 `hooks/useTheme.ts` | 시스템 테마 연동 | +| 멀티기관 계정 | `app/(auth)/select-site.tsx` | `/api/auth/me`, `/api/institutions` | +| 인시던트 빠른 대응 | `app/(tabs)/incidents.tsx` | `/api/incidents` | +| 실시간 서버 상태 | 컴포넌트 `components/ServerStatusBar.tsx` | `/api/dr/dashboard` WebSocket | + +## 입력 프로토콜 +```json +{ + "feature": "dr-monitoring | network-status | csap-dashboard | offline | biometric | kanban | darkmode | multi-site | incidents | realtime", + "priority": "HIGH | MEDIUM | LOW", + "api_endpoints": ["/api/dr/dashboard"], + "requirements": "상세 요구사항" +} +``` + +## 출력 프로토콜 +```json +{ + "files_created": ["app/(tabs)/dr.tsx", "services/drApi.ts"], + "files_modified": ["services/api.ts", "app/(tabs)/_layout.tsx"], + "notes": "탭 메뉴에 추가 필요", + "eas_build_required": false +} +``` + +## 팀 통신 프로토콜 +- **수신**: orchestrator → 기능 구현 요청 +- **수신**: rn-developer → 공통 컴포넌트 재사용 요청 +- **발신**: eas-engineer → "네이티브 모듈(expo-local-authentication) 설정 확인 요청" +- **발신**: doc-writer → 구현된 화면 목록 및 스크린샷 전달 +- **파일 공유**: `_workspace/features-{name}.md` 에 구현 명세 기록 diff --git a/.claude/skills/new-features/SKILL.md b/.claude/skills/new-features/SKILL.md new file mode 100644 index 00000000..039247a0 --- /dev/null +++ b/.claude/skills/new-features/SKILL.md @@ -0,0 +1,240 @@ +--- +name: new-features +description: "GUARDiA Messenger 신규 기능 화면 구현 스킬. DR 모니터링, 네트워크 장비 현황, CSAP 준수율, 오프라인 모드, 생체인증(expo-local-authentication), Kanban SR 보드, 다크모드, 멀티기관 계정, 인시던트 빠른 대응, 실시간 알림 등 10가지 신규 기능을 React Native + Expo SDK 51 패턴으로 구현한다. 다음 상황에서 반드시 사용: (1) 'DR 화면', '네트워크 화면', 'CSAP 화면' 구현 요청; (2) '오프라인 모드', '생체인증', '지문 로그인' 구현; (3) 'Kanban 보드', '다크모드', '멀티기관' 기능 추가; (4) 신규 탭 추가, 새 화면 개발; (5) 다시 실행, 업데이트, 수정, 보완 요청. expo-router 파일 기반 라우팅과 빌드 금기사항을 반드시 준수한다." +--- + +# GUARDiA Messenger 신규 기능 구현 스킬 + +## 구현 패턴 — API 서비스 추가 + +신규 기능마다 `services/api.ts`에 함수를 추가한다. + +```typescript +// services/api.ts 추가 패턴 +import { axiosInstance } from './api' // 기존 인스턴스 재사용 + +// DR API +export const getDRDashboard = () => axiosInstance.get('/api/dr/dashboard') +export const getDRScenarios = () => axiosInstance.get('/api/dr/scenarios') +export const getDRRtoRpo = () => axiosInstance.get('/api/dr/rto-rpo') + +// 네트워크 장비 API +export const getNetworkDevices = (instId?: number) => + axiosInstance.get('/api/network/devices', { params: { inst_id: instId } }) +export const getNetworkTopology = (instId?: number) => + axiosInstance.get('/api/network/topology', { params: { inst_id: instId } }) + +// CSAP API +export const getCSAPDashboard = () => + axiosInstance.get('/api/compliance/csap/dashboard') +export const getCSAPItems = () => + axiosInstance.get('/api/compliance/csap/items') +``` + +## 기능별 구현 가이드 + +### 1. DR 모니터링 화면 (`app/(tabs)/dr.tsx`) + +```tsx +// 핵심 구조 +export default function DRScreen() { + const [dashboard, setDashboard] = useState(null) + const [rtoRpo, setRtoRpo] = useState(null) + + // 폴링: 30초마다 갱신 (WS 없이도 준실시간) + useEffect(() => { + const load = async () => { + const [d, r] = await Promise.all([getDRDashboard(), getDRRtoRpo()]) + setDashboard(d.data) + setRtoRpo(r.data) + } + load() + const timer = setInterval(load, 30_000) + return () => clearInterval(timer) + }, []) + + return ( + + {/* 시나리오별 PASS/FAIL 배지 */} + {/* RTO/RPO 목표 vs 실적 바 차트 */} + {/* 최근 테스트 이력 5건 */} + + ) +} +``` + +**타입 정의:** +```typescript +interface DRDashboard { + total_scenarios: number + pass_count: number + fail_count: number + untested_count: number + recent_tests: DRTestSummary[] +} +interface RtoScenario { + scenario_name: string + rto_target: number + rto_actual_avg: number | null + rto_met: boolean | null + last_test_result: string +} +``` + +### 2. 네트워크 장비 현황 (`app/(tabs)/network.tsx`) + +```tsx +// 장비 타입별 그룹핑 + 최근 백업 상태 표시 +// 설정 변경 감지 시 황색 뱃지 +const DeviceCard = ({ device }: { device: NetworkDeviceOut }) => ( + + + + {device.device_name} + {!device.last_backup_at && } + + {device.vendor} · {device.location} + +) +``` + +### 3. CSAP 준수율 대시보드 (`app/(tabs)/csap.tsx`) + +```tsx +// 준수율 원형 게이지 + 등급 배지 + FAIL 항목 목록 +const GradeColor = { A: '#28a745', B: '#17a2b8', C: '#ffc107', D: '#dc3545' } + +const ComplianceGauge = ({ rate, grade }: { rate: number; grade: string }) => ( + + + {rate}% + + + {grade}등급 + + +) +``` + +### 4. 오프라인 모드 (`hooks/useOfflineCache.ts`) + +```typescript +import * as SecureStore from 'expo-secure-store' +import NetInfo from '@react-native-community/netinfo' // 주의: EAS에서 자동 설치됨 + +export function useOfflineCache(key: string, fetcher: () => Promise) { + const [data, setData] = useState(null) + const [isOffline, setOffline] = useState(false) + + useEffect(() => { + const unsubscribe = NetInfo.addEventListener(state => { + setOffline(!state.isConnected) + }) + return () => unsubscribe() + }, []) + + const load = async () => { + if (isOffline) { + const cached = await SecureStore.getItemAsync(key) + if (cached) setData(JSON.parse(cached)) + return + } + try { + const result = await fetcher() + setData(result) + await SecureStore.setItemAsync(key, JSON.stringify(result)) + } catch { + const cached = await SecureStore.getItemAsync(key) + if (cached) setData(JSON.parse(cached)) + } + } + return { data, isOffline, load } +} +``` + +### 5. 생체인증 (`hooks/useBiometric.ts`) + +```typescript +import * as LocalAuth from 'expo-local-authentication' + +export async function authenticateWithBiometric(): Promise { + const hasHardware = await LocalAuth.hasHardwareAsync() + const isEnrolled = await LocalAuth.isEnrolledAsync() + if (!hasHardware || !isEnrolled) return false + + const result = await LocalAuth.authenticateAsync({ + promptMessage: 'GUARDiA 로그인', + cancelLabel: '취소', + fallbackLabel: '비밀번호 사용', + }) + return result.success +} +``` + +**`app.json` 설정 추가 (플러그인 아님, permissions만):** +```json +{ + "expo": { + "android": { + "permissions": ["USE_BIOMETRIC", "USE_FINGERPRINT"] + }, + "ios": { + "infoPlist": { + "NSFaceIDUsageDescription": "GUARDiA 빠른 로그인을 위해 Face ID를 사용합니다." + } + } + } +} +``` + +### 6. Kanban SR 보드 (`app/(tabs)/kanban.tsx`) + +```tsx +// 상태별 컬럼 (가로 스크롤) + 카드 탭으로 상태 변경 +const STATUS_COLS = ['RECEIVED', 'IN_PROGRESS', 'PENDING_PM_VALIDATION', 'COMPLETED'] +const STATUS_LABEL: Record = { + RECEIVED: '접수', IN_PROGRESS: '진행중', + PENDING_PM_VALIDATION: 'PM검토', COMPLETED: '완료' +} + +// 카드 롱프레스 → ActionSheet로 상태 이동 (드래그&드롭 대신) +// react-native-draggable-flatlist는 EAS 빌드 이슈 가능 → 탭/ActionSheet 방식 권장 +``` + +### 7. 다크모드 (`hooks/useTheme.ts`) + +```typescript +import { useColorScheme } from 'react-native' + +export function useTheme() { + const scheme = useColorScheme() // 'light' | 'dark' | null + const isDark = scheme === 'dark' + return { + isDark, + bg: isDark ? '#1a1a2e' : '#f5f7fa', + card: isDark ? '#16213e' : '#ffffff', + text: isDark ? '#e0e0e0' : '#333333', + border: isDark ? '#2d2d44' : '#e2e8f0', + } +} +``` + +### 8. 탭 메뉴 추가 (`app/(tabs)/_layout.tsx`) + +신규 탭 추가 시 기존 `_layout.tsx`에 `` 항목만 추가: +```tsx + + + + +``` + +## 빌드 안전성 체크리스트 + +신규 기능 구현 후 반드시 확인: +- [ ] `@react-native-community/netinfo` → `package.json` dependencies에 추가 필요 (EAS 빌드 시 자동 설치) +- [ ] `expo-local-authentication` → Expo SDK 51 기본 포함, 별도 설치 불필요 +- [ ] `app.json` 플러그인 배열에 추가한 항목 없는지 확인 (expo-notifications 제외 원칙) +- [ ] 신규 `import` 패키지가 `package.json`에 있는지 확인 + +> 상세 화면 목업과 UI 패턴은 `references/screen-mockups.md` 참조 (필요 시 생성). diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000..accabb46 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,53 @@ +# GUARDiA Messenger — React Native 모바일 앱 + +> **Claude Code용 프로젝트 마스터 컨텍스트** + +--- + +## 프로젝트 현황 + +| 항목 | 상태 | +|------|------| +| 기술 스택 | React Native 0.74.5 + Expo SDK 51 + TypeScript | +| 패키지명 | kr.co.zioinfo.guardia | +| EAS 계정 | zioinfo | +| 프로젝트 ID | ca2f72d6-7dda-4491-9590-7ace34b10a88 | +| 최신 성공 빌드 | 51096ada (Android APK) | +| 서버 | https://101.79.17.164:8443 (GUARDiA ITSM) | + +--- + +## 구현된 화면 (6개) + +| 화면 | 경로 | 기능 | +|------|------|------| +| 로그인 | `app/(auth)/login.tsx` | JWT 인증 | +| 대시보드 | `app/(tabs)/index.tsx` | SR 통계, 서비스 상태 | +| SR 관리 | `app/(tabs)/sr.tsx` | SR 목록·등록 | +| AI 챗봇 | `app/(tabs)/chat.tsx` | Ollama 연동 | +| 알림 | `app/(tabs)/notifications.tsx` | 푸시 알림 목록 | +| 설정 | `app/(tabs)/settings.tsx` | 프로필·로그아웃 | + +--- + +## 빌드 핵심 원칙 (위반 시 빌드 실패) + +1. `android/`, `ios/` 폴더 — 로컬 생성 금지 (`.easignore`로 EAS 제외) +2. `expo-notifications` — `app.json` 플러그인 등록 금지 +3. `babel.config.js` — `expo-router/babel` 추가 금지 +4. `plugins/withGradleProps.js` — `enablePngCrunchInReleaseBuilds=false` 필수 + +--- + +## 하네스: GUARDiA Messenger + +**목표:** 화면 개발·EAS 빌드·스토어 등록·문서화 전 과정 자동화 + +**트리거:** 화면 구현, 기능 추가, EAS 빌드, Play Store 등록, 가이드 작성 요청 시 +`messenger-orchestrator` 스킬을 사용하라. 다시 실행, 수정, 업데이트도 포함. + +**변경 이력:** +| 날짜 | 변경 내용 | 대상 | 사유 | +|------|----------|------|------| +| 2026-05-31 | 초기 하네스 구성 | 전체 | GUARDiA Messenger 앱 개발·배포 자동화 | +| 2026-05-31 | feature-developer 에이전트 + new-features 스킬 추가 | agents/, skills/ | DR·네트워크·CSAP·생체인증·오프라인 등 신규 기능 10종 |