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 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-TKLFCPRython
commit
de1e2263b6
76
.claude/agents/feature-developer.md
Normal file
76
.claude/agents/feature-developer.md
Normal file
@ -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` 에 구현 명세 기록
|
||||||
240
.claude/skills/new-features/SKILL.md
Normal file
240
.claude/skills/new-features/SKILL.md
Normal file
@ -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<DRDashboard | null>(null)
|
||||||
|
const [rtoRpo, setRtoRpo] = useState<RtoRpo | null>(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 (
|
||||||
|
<ScrollView>
|
||||||
|
{/* 시나리오별 PASS/FAIL 배지 */}
|
||||||
|
{/* RTO/RPO 목표 vs 실적 바 차트 */}
|
||||||
|
{/* 최근 테스트 이력 5건 */}
|
||||||
|
</ScrollView>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**타입 정의:**
|
||||||
|
```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 }) => (
|
||||||
|
<TouchableOpacity style={s.card}>
|
||||||
|
<View style={s.iconRow}>
|
||||||
|
<DeviceIcon type={device.device_type} />
|
||||||
|
<Text style={s.name}>{device.device_name}</Text>
|
||||||
|
{!device.last_backup_at && <Badge color="red" text="미백업" />}
|
||||||
|
</View>
|
||||||
|
<Text style={s.meta}>{device.vendor} · {device.location}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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 }) => (
|
||||||
|
<View style={s.gauge}>
|
||||||
|
<Text style={[s.rate, { color: GradeColor[grade as keyof typeof GradeColor] }]}>
|
||||||
|
{rate}%
|
||||||
|
</Text>
|
||||||
|
<Text style={[s.grade, { color: GradeColor[grade as keyof typeof GradeColor] }]}>
|
||||||
|
{grade}등급
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. 오프라인 모드 (`hooks/useOfflineCache.ts`)
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import * as SecureStore from 'expo-secure-store'
|
||||||
|
import NetInfo from '@react-native-community/netinfo' // 주의: EAS에서 자동 설치됨
|
||||||
|
|
||||||
|
export function useOfflineCache<T>(key: string, fetcher: () => Promise<T>) {
|
||||||
|
const [data, setData] = useState<T | null>(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<boolean> {
|
||||||
|
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<string, string> = {
|
||||||
|
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`에 `<Tabs.Screen>` 항목만 추가:
|
||||||
|
```tsx
|
||||||
|
<Tabs.Screen name="dr" options={{ title: 'DR', tabBarIcon: ... }} />
|
||||||
|
<Tabs.Screen name="network" options={{ title: '네트워크', tabBarIcon: ... }} />
|
||||||
|
<Tabs.Screen name="csap" options={{ title: 'CSAP', tabBarIcon: ... }} />
|
||||||
|
<Tabs.Screen name="kanban" options={{ title: 'Kanban', tabBarIcon: ... }} />
|
||||||
|
```
|
||||||
|
|
||||||
|
## 빌드 안전성 체크리스트
|
||||||
|
|
||||||
|
신규 기능 구현 후 반드시 확인:
|
||||||
|
- [ ] `@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` 참조 (필요 시 생성).
|
||||||
53
CLAUDE.md
Normal file
53
CLAUDE.md
Normal file
@ -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종 |
|
||||||
Loading…
Reference in New Issue
Block a user