BitOracle

가상자산 데이터 분석 및 정보 공유 플랫폼

숭실대학교 컴퓨터학부 전공종합설계 1, 2 캡스톤 프로젝트

---

프로젝트 소개

BitOracle은 가상자산 시장의 주요 지표를 실시간으로 제공하고, GRU 기반 AI 모델로 비트코인 가격 동향을 예측하며, 커뮤니티와 포트폴리오 관리 기능을 통합한 가상자산 정보 플랫폼입니다.

---

주요 기능

메인 페이지

• 시장 지표 패널: 암호화폐 시가총액, 비트코인 도미넌스, 공포·탐욕 지수, 김치 프리미엄 실시간 표시
• 뉴스 슬라이더: 최신 가상자산 관련 뉴스를 슬라이드 형태로 제공
• 코인 리스트: 주요 코인 목록 및 24시간 가격 변화량 색상 구분 표시

AI 예측 차트

• GRU(Gated Recurrent Unit) 기반 모델(v14)로 비트코인 상승 확률 예측
• 매수/매도 시그널 배지 표시 (강력 매수 / 매수 우위 / 매도 우위 / 강력 매도)
• 기간별 조회: 1일 / 2주 / 1개월 / 6개월
• 실제 가격과 예측 확률을 겹쳐서 시각화

커뮤니티

• 게시글 작성, 조회, 상세 보기
• Toast UI 에디터 기반 리치 텍스트 작성
• 호재·악재 구분 기능 (모바일 UI 포함)

뉴스

• 가상자산 관련 최신 뉴스 목록 제공

포트폴리오

• 보유 코인 등록 및 수익률 자동 계산
• 평가손익, 수익률, 매수금액, 평가금액 표시
• 포트폴리오 구성 비중 차트 시각화
• WebSocket(STOMP)을 통한 실시간 현재가 업데이트
• 데스크톱 테이블 뷰 / 모바일 카드 뷰 반응형 지원

인증

• Google 소셜 로그인 (OAuth 2.0)
• JWT Access Token 기반 인증

---

기술 스택

구분	기술
Framework	React 17
Routing	React Router v6
차트	Recharts
에디터	Toast UI React Editor
실시간 통신	STOMP over WebSocket (SockJS)
HTTP 통신	Axios
인증	Google OAuth 2.0 (@react-oauth/google)
배포	Netlify

---

프로젝트 구조

src/
├── Mainpage/          # 메인 페이지 (지표 패널, 뉴스 슬라이더, AI 예측 차트, 코인 리스트)
├── CommunityPage/     # 커뮤니티 (목록, 게시글 상세, 글쓰기)
├── NewsPage/          # 뉴스 페이지
├── PortfolioPage/     # 포트폴리오 관리
├── api/               # Axios 인스턴스 및 API 설정
├── DummyData/         # 로컬 개발용 더미 데이터
├── Header.js          # 공통 헤더 (네비게이션, 로그인)
├── Footer.js          # 공통 푸터
└── App.js             # 라우팅 설정

---

시작하기

요구 사항

• Node.js 16 이상
• npm

설치 및 실행

# 의존성 설치
npm install

# 개발 서버 실행
npm start

로컬 환경(localhost)에서는 더미 데이터를 사용하여 백엔드 없이도 UI를 확인할 수 있습니다.

빌드

npm run build

---

아키텍처

REST API 및 WebSocket(STOMP)을 통해 백엔드 서버와 통신합니다. 시장 지표·포트폴리오 데이터는 WebSocket으로 실시간 업데이트되며, 가격·예측 데이터는 REST API로 조회합니다.

---

팀

숭실대학교 컴퓨터학부 전공종합설계 1, 2 (2025)