---
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` 참조