guardia-messenger/.claude/skills/rn-screen-dev/SKILL.md

name	description
rn-screen-dev	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 클라이언트

새 탭 화면 추가 패턴

// 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 연동 패턴

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