Dynaram Frontend (Phase 1)

개요

Dynaram 프로젝트의 React Native (Expo) 프론트엔드 애플리케이션입니다. Phase 1 목표: 회원가입 → 알람 설정 → 시간 되면 폰에서 울림 검증

기술 스택

• React Native (Expo SDK 54)
• TypeScript
• React Navigation - 화면 전환
• React Native Paper - UI 컴포넌트
• Zustand - 상태 관리
• Axios - HTTP 클라이언트
• Expo Notifications - 푸시 알림
• Expo Speech - TTS (Text-to-Speech)

프로젝트 구조

frontend/
├── App.tsx                      # 앱 진입점, Navigation 및 Notification 설정
├── src/
│   ├── screens/                 # 화면 컴포넌트
│   │   ├── LoginScreen.tsx      # 로그인 화면
│   │   ├── RegisterScreen.tsx   # 회원가입 화면
│   │   └── AlarmScreen.tsx      # 알람 설정 화면
│   ├── navigation/              # Navigation 설정
│   │   └── AppNavigator.tsx     # 메인 네비게이터 (Auth/Main 분기)
│   ├── store/                   # Zustand 스토어
│   │   ├── authStore.ts         # 인증 상태 관리
│   │   └── alarmStore.ts        # 알람 상태 관리
│   ├── services/                # API 및 서비스 레이어
│   │   ├── authService.ts       # 인증 API (회원가입, 로그인)
│   │   ├── alarmService.ts      # 알람 API (조회, 시간 변경, ON/OFF)
│   │   ├── notificationService.ts  # Expo Push Notification 관리
│   │   └── alarmPlayer.ts       # 알람 재생 (TTS)
│   ├── types/                   # TypeScript 타입 정의
│   │   └── index.ts
│   └── constants/               # 상수 (API URL 등)
│       └── config.ts
└── assets/                      # 이미지, 사운드 등

설치 및 실행

1. 의존성 설치

yarn install

2. Backend 서비스 실행

Frontend 실행 전에 Backend 서비스들이 실행되어 있어야 합니다:

# 프로젝트 루트에서
cd ../infrastructure
docker-compose up -d

cd ../auth-service && ./gradlew bootRun          # 8081
cd ../alarm-setting-service && ./gradlew bootRun  # 8082
cd ../alarm-scheduler-service && ./gradlew bootRun # 8083
cd ../alarm-creation-service && ./gradlew bootRun  # 8084
cd ../notification-service && ./gradlew bootRun    # 8085

3. Frontend 실행

# iOS 시뮬레이터
yarn ios

# Android 에뮬레이터
yarn android

# 개발 서버 시작
yarn start

주요 기능

1. 회원가입/로그인

• 이메일/비밀번호 기반 인증
• JWT 토큰 발급 및 AsyncStorage 저장
• 자동 로그인 (토큰 유지)

2. 알람 설정

• 알람 조회 (없으면 자동 생성: 비활성화, 07:00)
• 알람 시간 변경 (HH:mm 형식)
• 알람 ON/OFF 토글

3. Push Notification

• Expo Push Token 자동 발급
• Push 수신 시 TTS 알람 재생
• Foreground/Background 모두 처리

환경 설정

API 서버 주소 변경

src/constants/config.ts에서 Backend 서버 주소를 변경할 수 있습니다:

// iOS 시뮬레이터
export const API_BASE_URL = 'http://localhost:8081';
export const ALARM_SERVICE_URL = 'http://localhost:8082';

// 실제 디바이스 (Mac IP 주소로 변경)
export const API_BASE_URL = 'http://192.168.x.x:8081';
export const ALARM_SERVICE_URL = 'http://192.168.x.x:8082';

Expo Push Token 설정 (중요!)

1. 앱 실행 후 콘솔에서 Push Token 확인

   앱 실행 시 콘솔에 다음과 같이 출력됩니다:

   ============================================================
   📱 EXPO PUSH TOKEN:
   ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]
   ============================================================
   
   👉 Copy this token and paste it into:
      notification-service/src/main/resources/application.yml
      expo.push-token: "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]"
   ============================================================
   

2. Backend에 Token 설정

   cd ../notification-service/src/main/resources
   vi application.yml

   expo:
     push-token: "ExponentPushToken[여기에_토큰_붙여넣기]"

3. notification-service 재시작

   cd ../notification-service
   ./gradlew bootRun

Phase 1 사용 흐름

1. 회원가입

   • 앱 실행 → 회원가입 버튼 클릭
   • 이메일/비밀번호 입력 → 가입하기
   • 자동 로그인 후 알람 화면으로 이동

2. 알람 설정

   • 알람 시간 변경 (예: 08:30)
   • 알람 ON

3. 알람 울림 테스트

   • Backend alarm-scheduler-service가 설정 시간에 이벤트 발행
   • notification-service가 Expo Push API 호출
   • Frontend가 Push 수신 후 TTS로 "{시간} 알람입니다" 재생

Phase 1 제약사항

• 단일 디바이스만 지원 (Push Token 하드코딩)
• TTS만 지원 (알람 사운드 파일 없음, Phase 2에서 추가 예정)
• iOS 시뮬레이터에서는 Push 알림 제한 (실제 디바이스 권장)

Phase 2 개선 사항 (예정)

• 알람 사운드 파일 추가 (소리 + TTS)
• Push Token DB 저장 (멀티 디바이스 지원)
• 날씨/버스 정보 기반 스마트 알람 멘트
• 알람 히스토리
• 다크 모드
• UI/UX 개선

트러블슈팅

iOS 시뮬레이터에서 Push가 안 옵니다

iOS 시뮬레이터는 Push Notification이 제한적입니다. 실제 iPhone 디바이스에서 테스트하세요.

Backend 연결이 안 됩니다

1. Backend 서비스들이 실행 중인지 확인
2. src/constants/config.ts의 API URL이 맞는지 확인
3. 실제 디바이스에서는 localhost 대신 Mac IP 주소 사용

TTS가 재생되지 않습니다

1. 디바이스 볼륨 확인
2. Expo Go 앱 권한 확인 (마이크, 알림 등)
3. 콘솔에서 에러 메시지 확인

개발 팁

빌드 확인

yarn tsc --noEmit  # TypeScript 타입 체크

로컬 테스트용 Push 알림 발송 (선택)

AlarmScreen에 테스트 버튼을 추가하면 로컬에서 Push를 테스트할 수 있습니다:

import { notificationService } from '../services/notificationService';

// 5초 후 로컬 알림 발송
await notificationService.scheduleLocalNotification(
  'Dynaram 알람',
  '07:00 알람입니다',
  5
);

참고 문서

• Expo Documentation
• React Navigation
• React Native Paper
• Expo Notifications

라이센스

MIT