expo-app-scaffold-mcp

expo-app-scaffold-mcp

Expo + React Native 앱을 FSD(Feature-Sliced Design) 템플릿 기반으로 빠르게 생성하는 MCP(Model Context Protocol) 서버입니다.

기능

• scaffold_app - 템플릿에서 새 Expo 앱 프로젝트 생성
• setup_store_config - App Store / Google Play 배포 설정 구성
• list_apps - ~/works/ 아래의 모든 Expo 앱 목록 조회

기술 스택 (템플릿 기준)

• Expo SDK 54 + React Native
• expo-router (파일 기반 라우팅)
• NativeWind v4 (Tailwind CSS)
• Feature-Sliced Design 아키텍처
• TypeScript strict 모드
• @tanstack/react-query, react-hook-form, zustand
• expo-secure-store, lottie-react-native, dayjs, axios

설치 및 빌드

cd /Users/seungmanchoi/works/expo-app-scaffold-mcp
npm install
npm run build

Claude Code에 MCP 서버 등록

~/.claude/settings.json 파일에 아래 내용을 추가합니다.

{
  "mcpServers": {
    "expo-app-scaffold": {
      "command": "node",
      "args": ["/Users/seungmanchoi/works/expo-app-scaffold-mcp/dist/index.js"]
    }
  }
}

사용 가능한 도구

scaffold_app

새 Expo 앱을 FSD 템플릿에서 스캐폴딩합니다.

파라미터:

| 이름 | 타입 | 필수 | 설명 | |------|------|------|------| | app_name | string | 필수 | 앱 표시 이름 (예: "나의 멋진 앱") | | slug | string | 필수 | URL 안전 슬러그 (예: "my-cool-app") | | bundle_id | string | 선택 | 번들 식별자. 기본값: com.seungmanchoi.{slug 하이픈 제거} | | theme_color | string | 선택 | 테마 색상 hex 코드. 기본값: "#6366f1" | | description | string | 선택 | 앱 설명. package.json에 추가됨 | | languages | string[] | 선택 | 지원 언어 목록. 기본값: ["ko", "en"] |

예시:

scaffold_app 도구를 사용해서 새 앱을 만들어줘:
- 앱 이름: 칼로리 트래커
- 슬러그: calorie-tracker
- 언어: 한국어, 영어, 일본어

동작:

1. /Users/seungmanchoi/works/react-native-fsd-template을 ~/works/{slug}/로 복사
2. app.json 업데이트: name, slug, bundleIdentifier, package, scheme
3. package.json 업데이트: name, description
4. eas.json 업데이트: production API URL
5. i18n 로케일 파일 생성: src/shared/config/i18n/
6. git 저장소 초기화 및 초기 커밋

---

setup_store_config

앱 스토어 및 구글 플레이 배포 설정을 구성합니다.

파라미터:

| 이름 | 타입 | 필수 | 설명 | |------|------|------|------| | project_path | string | 필수 | 프로젝트 경로 (절대 경로) | | platforms | string[] | 필수 | 플랫폼 목록: ["ios", "android"] 또는 개별 | | admob_ios_id | string | 선택 | AdMob iOS 앱 ID | | admob_android_id | string | 선택 | AdMob Android 앱 ID |

예시:

setup_store_config 도구로 /Users/seungmanchoi/works/calorie-tracker 앱의
iOS와 Android 배포 설정을 해줘

동작:

1. eas.json submit 섹션에 iOS/Android API 키 정보 추가
2. fastlane/ 디렉토리 생성: Appfile, Fastfile
3. ~/works/common/ 경로의 API 키 파일 참조 설정
4. AdMob ID가 제공된 경우 app.json에 플러그인 설정 추가

---

list_apps

~/works/ 디렉토리에서 Expo 앱 목록을 조회합니다.

파라미터: 없음

예시:

list_apps 도구로 내 Expo 앱 목록을 보여줘

반환 정보: 각 앱의 이름, 슬러그, 번들 ID, 버전, 경로

---

프로젝트 구조

expo-app-scaffold-mcp/
├── package.json
├── tsconfig.json
├── src/
│   ├── index.ts                    # MCP 서버 진입점 (stdio transport)
│   ├── tools/
│   │   ├── scaffold-app.ts         # scaffold_app 도구 구현
│   │   ├── setup-store-config.ts   # setup_store_config 도구 구현
│   │   └── list-apps.ts            # list_apps 도구 구현
│   └── utils/
│       └── template.ts             # 템플릿 복사/변환 유틸리티
└── README.md

개발

# 개발 모드 (파일 변경 감지)
npm run dev

# 빌드
npm run build

# 빌드 후 직접 실행
npm start

관련 경로

• 템플릿: /Users/seungmanchoi/works/react-native-fsd-template/
• 앱 저장 위치: /Users/seungmanchoi/works/{slug}/
• 공통 키 파일: /Users/seungmanchoi/works/common/
• iOS API Key: AuthKey_6FD6879KFW.p8
• Android 서비스 계정: works-488915-4f58ab8044c4.json