ISAAC Frontend

ISAAC은 연세대학교 구성원이 흩어진 학교 행정 정보, 학과별 공지, 키워드 알림, AI 조교 답변을 한 앱에서 빠르게 확인하도록 돕는 모바일 서비스입니다.

이 저장소는 그중 React Native 앱, AI 조교 채팅 화면, 공지/알림 화면, 인증/푸시 연동, RAG SSE 스트리밍 클라이언트를 담고 있습니다.

문제

해결

앱

AI 조교	학과별 공지	키워드 알림

프론트엔드 구조

React Native App
  ├─ Auth
  │   ├─ social / guest login
  │   ├─ token refresh
  │   └─ withdrawal
  │
  ├─ Home
  │   ├─ bookmarked notice sources
  │   └─ latest notices by department/source
  │
  ├─ Notice
  │   ├─ all notices
  │   ├─ notice detail and file viewer
  │   ├─ source bookmarks
  │   └─ keyword notifications
  │
  ├─ AI Assistant
  │   ├─ chat room/history UI
  │   ├─ RAG request payload
  │   └─ SSE stream rendering
  │
  └─ Firebase
      ├─ FCM device token registration
      └─ push notification handling

RAG 연동 흐름

Frontend
  ├─ reads saved chat history from app backend
  ├─ sends message + histories + search_method to RAG API
  └─ renders SSE events from RAG API

RAG API
  ├─ MESSAGE: streamed answer chunks
  ├─ URL: source URL
  ├─ CHAT_ROOM_INFO: saved chat room metadata
  └─ ELAPSED_TIME: answer generation time

주요 기능

• src/features/AI/Models/ISAAC.js: RAG 서버 POST /api/chat SSE 요청 및 스트리밍 응답 처리
• src/features/AI/View: AI 조교 채팅, 이전 대화, 열린 채팅방 화면
• src/features/Home: 홈 화면, 북마크한 공지 source, 최신 공지 조회
• src/features/Notice: 전체 공지, 공지 상세, 파일 열람, 키워드 알림, 북마크 관리
• src/features/Auth: 게스트 로그인, 소셜 로그인, 토큰 재발급, 회원 탈퇴
• src/features/FireBase: FCM 메시징, 디바이스 토큰 등록, 알림 처리
• src/navigation: 인증/홈/공지/AI/마이페이지 네비게이션
• src/utils/api.js: Axios 인스턴스, access token 만료 시 refresh token 재발급 및 요청 재시도
• src/utils/Storage.js: 로컬 토큰/사용자 상태 저장

실행

npm install
npm start

Android:

npm run android

iOS:

bundle install
cd ios
bundle exec pod install
cd ..
npm run ios

Web:

npm run web

Production web build:

npm run build:web

환경 변수

네이티브 앱은 react-native-dotenv, 웹은 process.env를 통해 환경 변수를 읽습니다.

SERVER_BASE_URL=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
IOS_CLIENT_ID=
REDIRECT_URI_DEVELOPMENT=
REDIRECT_URI_PRODUCTION=
OPENAI_API_KEY=
NODE_ENV=

주요 API 연동

AI 조교

POST https://ai-isaac.com/api/chat

• 인증: Authorization: Bearer <accessToken>
• 요청: histories, chat_room_id, message, search_method, user_id
• 응답: text/event-stream
• 주요 이벤트: MESSAGE, URL, CHAT_ROOM_INFO, ELAPSED_TIME

앱 백엔드

• POST /api/v1/auth/guest-login: 게스트 로그인
• POST /api/v1/auth/login: 소셜 로그인
• POST /api/v1/auth/refresh: 토큰 재발급
• GET /api/v1/chat: 채팅방 목록 조회
• GET /api/v1/chat/{chatRoomId}/messages: 채팅 메시지 조회
• GET /api/v1/notices: source별 공지 조회
• GET /api/v2/notices/bookmarks: 북마크한 공지 source 조회
• PUT /api/v2/notices/bookmarks: 공지 source 북마크 업데이트
• GET /api/v1/notifications: 키워드/FCM 알림 조회
• PATCH /api/v1/notifications/{id}/read: 알림 읽음 처리

링크

Instagram	Demo Video	Google Play	App Store

IR