f29f525c77
- 37개 파일 IP → zioinfo.co.kr 치환 (소스/매뉴얼/설정/하네스) - Manager DrConsole/NetworkConsole/CsapConsole 빌드 + /var/www/manager/ 배포 - 테스트: Manager HTTP 200, ITSM 신규 API 7개 전체 200 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
85 lines
2.6 KiB
Markdown
85 lines
2.6 KiB
Markdown
---
|
|
name: rn-screen-dev
|
|
description: >
|
|
GUARDiA Messenger React Native 화면 구현 스킬. Expo SDK 51 + expo-router + TypeScript.
|
|
새 화면 추가, 기존 화면 수정, 컴포넌트 생성, API 연동 모두 담당.
|
|
트리거: 화면 구현, 컴포넌트 작성, 탭 추가, UI 수정, API 연동 요청 시 반드시 사용.
|
|
---
|
|
|
|
# GUARDiA Messenger 화면 개발 가이드
|
|
|
|
## 프로젝트 구조
|
|
|
|
```
|
|
C:\GUARDiA\app\
|
|
├── app/
|
|
│ ├── _layout.tsx ← 루트 레이아웃 (AuthContext 제공)
|
|
│ ├── (auth)/login.tsx ← 로그인
|
|
│ └── (tabs)/
|
|
│ ├── _layout.tsx ← 탭 네비게이터 (5개 탭)
|
|
│ ├── index.tsx ← 대시보드
|
|
│ ├── sr.tsx ← SR 목록·등록
|
|
│ ├── chat.tsx ← AI 챗봇
|
|
│ ├── notifications.tsx← 알림
|
|
│ └── settings.tsx ← 설정
|
|
├── components/
|
|
│ ├── common/ ← 공통 컴포넌트
|
|
│ └── layout/ ← 레이아웃 컴포넌트 (없으면 생성)
|
|
├── constants/Config.ts ← COLORS, API_BASE
|
|
├── hooks/useAuth.ts ← JWT 인증 (expo-secure-store)
|
|
└── services/api.ts ← axios 클라이언트
|
|
```
|
|
|
|
## 새 탭 화면 추가 패턴
|
|
|
|
```tsx
|
|
// app/(tabs)/새화면.tsx
|
|
import { View, Text, StyleSheet, ScrollView } from 'react-native'
|
|
import { COLORS } from '../../constants/Config'
|
|
|
|
export default function 새화면() {
|
|
return (
|
|
<ScrollView style={s.container}>
|
|
<Text>내용</Text>
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: COLORS.bg },
|
|
})
|
|
```
|
|
|
|
탭에 추가하려면 `app/(tabs)/_layout.tsx`에 `<Tabs.Screen>` 추가.
|
|
|
|
## API 연동 패턴
|
|
|
|
```tsx
|
|
import { useState, useEffect } from 'react'
|
|
import { guardiaApi } from '../../services/api'
|
|
|
|
const [data, setData] = useState<타입 | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
guardiaApi.get('/api/엔드포인트')
|
|
.then(r => setData(r.data))
|
|
.catch(() => {})
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
```
|
|
|
|
## 컴포넌트 재사용 원칙
|
|
|
|
이미 구현된 컴포넌트를 먼저 확인하고 재사용한다:
|
|
- 버튼: 인라인 `TouchableOpacity` 스타일 사용
|
|
- 리스트 아이템: `ScrollView` + `View` 조합
|
|
- 입력: `TextInput` with border
|
|
|
|
## 금기사항 (빌드 실패 원인)
|
|
- `expo-notifications` import 시 app.json plugin 없으면 빌드 실패
|
|
- `android/` 폴더 존재 시 Bare Workflow로 오인됨
|
|
- `babel.config.js`에 `expo-router/babel` 추가 금지
|
|
|
|
자세한 빌드 이슈: `references/build-issues.md` 참조
|