TradingAgents/frontend

Trading Agents Frontend

React + TypeScript로 구현된 Trading Agents 프론트엔드입니다.

주요 기능

• 사용자 인증: 회원가입, 로그인, JWT 토큰 관리
• 분석 관리: 주식 분석 요청, 진행 상황 추적, 결과 조회
• 실시간 업데이트: WebSocket을 통한 실시간 분석 진행 상황 업데이트
• 반응형 디자인: 모바일 및 데스크톱 지원

기술 스택

• React 18: 메인 프론트엔드 프레임워크
• TypeScript: 타입 안정성
• React Router: 라우팅
• Styled Components: CSS-in-JS 스타일링
• React Hook Form: 폼 관리
• Yup: 폼 유효성 검사
• React Query: 서버 상태 관리
• Axios: HTTP 클라이언트
• React Hot Toast: 토스트 알림

프로젝트 구조

src/
├── components/           # 재사용 가능한 컴포넌트
│   ├── auth/            # 인증 관련 컴포넌트
│   ├── analysis/        # 분석 관련 컴포넌트
│   └── common/          # 공통 컴포넌트
├── contexts/            # React Context
├── hooks/               # 커스텀 훅
├── pages/               # 페이지 컴포넌트
├── services/            # API 서비스
├── types/               # TypeScript 타입 정의
└── utils/               # 유틸리티 함수

설치 및 실행

1. 의존성 설치:

npm install

2. 환경 변수 설정:

cp .env.example .env

3. 개발 서버 실행:

npm start

4. 프로덕션 빌드:

npm run build

환경 변수

• REACT_APP_API_URL: 백엔드 API 서버 URL
• REACT_APP_WS_URL: WebSocket 서버 URL

주요 컴포넌트

인증 관련

• LoginForm: 로그인 폼
• RegisterForm: 회원가입 폼
• AuthContext: 인증 상태 관리

분석 관련

• AnalysisForm: 새 분석 요청 폼
• AnalysisList: 분석 세션 목록
• AnalysisResult: 분석 결과 표시

공통

• Layout: 공통 레이아웃
• ProtectedRoute: 인증된 사용자만 접근 가능한 라우트

API 연동

백엔드와의 통신을 위해 다음 서비스들을 사용합니다:

• AuthService: 인증 관련 API
• AnalysisService: 분석 관련 API
• WebSocket 연결을 통한 실시간 업데이트