바다 App

콜포비아 극복을 위한 AI 기반 전화 훈련 서비스의 모바일 애플리케이션입니다.
React Native(Expo)와 TypeScript를 기반으로 개발했습니다.
사용자는 자가진단, 시나리오 훈련, 전화 하이라이트, 실전 워밍업 기능을 이용할 수 있습니다.

사용 스택

분야	기술
Framework	React Native, Expo
Language	TypeScript
Routing	Expo Router, React Navigation
Network	Axios, WebSocket
서버 데이터 관리	TanStack Query
Audio	expo-audio, expo-av, react-native-audio-api, react-native-audio-record
Form	React Hook Form
Styling	NativeWind, Tailwind CSS
Storage	AsyncStorage, Expo SecureStore
Push	React Native Firebase Messaging

오픈소스 패키지

구분	패키지
앱·웹 기반	react, react-native, expo, react-dom, react-native-web
라우팅·화면 전환	expo-router, @react-navigation/native, @react-navigation/bottom-tabs, @react-navigation/elements, react-native-screens
통신·서버 데이터	axios, @tanstack/react-query
음성 입력·재생	expo-audio, expo-av, react-native-audio-api, react-native-audio-record
입력 폼	react-hook-form
로컬 저장소	@react-native-async-storage/async-storage, expo-secure-store
푸시 알림	@react-native-firebase/app, @react-native-firebase/messaging
스타일	nativewind, tailwindcss, react-native-css-interop
제스처·애니메이션	react-native-gesture-handler, react-native-reanimated, react-native-worklets
이미지	expo-image, expo-image-picker, expo-image-manipulator
파일·리소스	expo-file-system, expo-document-picker, expo-asset
날짜·일정	date-fns, react-native-calendars, @react-native-community/datetimepicker
아이콘·SVG	@expo/vector-icons, expo-symbols, react-native-svg, react-native-svg-transformer
링크·브라우저	expo-linking, expo-web-browser
화면·입력 보조	react-native-safe-area-context, react-native-keyboard-aware-scroll-view
앱 UI	expo-font, expo-haptics, expo-splash-screen, expo-status-bar, expo-system-ui
암호화·식별자·토큰	expo-crypto, react-native-get-random-values, uuid, jwt-decode
개발·빌드	typescript, expo-dev-client, expo-build-properties, expo-constants, @expo/ngrok, babel-preset-expo
정적 검사·타입	eslint, eslint-config-expo, @types/react, @types/uuid
의존성 패치	patch-package, postinstall-postinstall

저장소 구조

App - 현재 저장소
React Native(Expo) 기반 모바일 애플리케이션입니다.
https://github.com/ChickenMayoDeopbab/BADA_APP

Fast API
바다의 AI 서버로 실시간 음성 인식(STT), LLM 기반 대화 생성, 음성 합성(TTS)과 같은 AI 전화 훈련 파이프라인을 담당합니다.
https://github.com/ChickenMayoDeopbab/BADA_FASTAPI_SERVER

Spring Server
백엔드 서버로 핵심 비즈니스 로직과 API를 담당합니다.
https://github.com/ChickenMayoDeopbab/BADA_SPRING_SERVER

iOS 로컬 아카이브 절차

ios/ 폴더는 git에 포함되지 않고 expo prebuild로 생성됩니다.
pull만 받고 예전 ios/로 아카이브하면 config plugin 변경(예: iOS 27 Scene 생명주기)이 빠진 채 제출되므로 아래 순서를 반드시 지켜주세요.

사전 준비

• 프로젝트 루트에 GoogleService-Info.plist (Firebase 콘솔에서 받은 파일)
• EXPO_PUBLIC_API_URL, EXPO_PUBLIC_AI_API_URL이 eas.json의 production 값과 같은지 확인

절차

1. 최신 코드 받기 및 의존성 설치

   git pull
   npm install

2. ios/ 다시 생성 및 점검 (기존 ios/를 삭제하고 다시 만든 뒤 ios:check까지 실행)

   npm run ios:prebuild

   ios:check가 실패하면 출력된 누락 항목을 확인하고 다시 실행합니다.
3. Xcode에서 ios/app.xcworkspace를 열고 빌드 번호를 App Store Connect의 마지막 빌드보다 크게 설정
4. Product > Archive
5. 아카이브 결과물에 Scene 구성이 들어갔는지 확인

   /usr/libexec/PlistBuddy -c 'Print :UIApplicationSceneManifest' \
     "<아카이브 경로>.xcarchive/Products/Applications/app.app/Info.plist"

   Does Not Exist가 출력되면 업로드하지 말고 2번부터 다시 진행합니다.
6. Organizer에서 업로드

---

Welcome to your Expo app 👋

This is an Expo project created with create-expo-app.

Get started

1. Install dependencies

   npm install

2. Start the app

   npx expo start

In the output, you'll find options to open the app in a

• development build
• Android emulator
• iOS simulator
• Expo Go, a limited sandbox for trying out app development with Expo

You can start developing by editing the files inside the app directory. This project uses file-based routing.

Get a fresh project

When you're ready, run:

npm run reset-project

This command will move the starter code to the app-example directory and create a blank app directory where you can start developing.

Learn more

To learn more about developing your project with Expo, look at the following resources:

• Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
• Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.

Join the community

Join our community of developers creating universal apps.

• Expo on GitHub: View our open source platform and contribute.
• Discord community: Chat with Expo users and ask questions.