프론트엔드 애플리케이션

CloudBank의 프런트엔드는 공유 패키지가 있는 다중 앱 단일 저장소로 구성됩니다. 각 애플리케이션은 고유한 사용자 대상을 대상으로 하며 해당 사용 사례에 최적화된 스택으로 구축됩니다.

애플리케이션 아키텍처

apps/web — 거래 UI

시장 탐색, 거래 배치, 포지션 관리를 위한 기본 사용자 대상 애플리케이션입니다.

Aspect	Technology
Framework	19 반응
빌드 도구	Vite
Routing	TanStack 라우터(파일 기반)
서버 상태	TanStack 쿼리
Blockchain	와그미 + 비엠
Styling	순풍 CSS

주요 특징

• 시장 발견 — 카테고리, 규모, 최신성별로 예측 시장을 탐색, 검색 및 필터링합니다.
• 거래 인터페이스 — 실시간 가격 차트와 함께 AMM을 통한 Buy/sell 결과 토큰 또는 주문장의 제한 주문.
• 포트폴리오 관리 — 오픈 포지션, 과거 거래, 실현 및 미실현 손익을 확인하세요.
• 지갑 연결 — wagmi 커넥터를 통해 MetaMask, WalletConnect 및 Coinbase Wallet을 지원합니다.

상태 관리

• 서버 상태는 전적으로 TanStack 쿼리를 통해 관리되며, 쿼리는 시장 ID, 사용자 주소 및 체인 ID을 기준으로 합니다. 오래된 재검증 중 데이터를 최신 상태로 유지하면서 응답성이 뛰어난 UI을 보장합니다.
• 로컬 상태는 모달 가시성, 선택된 시장 탭 및 거래 양식 입력과 같은 UI 관련 문제에 React Context를 사용합니다.

apps/admin — 관리자 패널

플랫폼 운영자가 시장, 사용자, 시스템 구성을 관리하기 위한 내부 도구입니다.

Aspect	Technology
Framework	19 반응
빌드 도구	Vite
UI 도서관	개미 디자인
Routing	TanStack 라우터

Capabilities

• 시장 수명 주기 관리(생성, 기능, 일시 중지, 취소)
• 사용자 계정 검토 및 조정.
• 추천 캠페인 생성 및 모니터링.
• 출금 요청 검토 대기열.
• 시스템 구성(비율 제한, 계약 화이트리스트, 일일 출금 한도).
• 관리 작업 기록에 대한 감사 로그 뷰어입니다.

apps/node-presale — 노드 판매

트래픽이 많은 출시 시나리오를 위해 설계된 CloudBank의 노드 판매 이벤트 전용 애플리케이션입니다.

Aspect	Technology
Framework	Next.js 16
Blockchain	wagmi
Internationalization	다음-intl(i18n)

Features

• 노드 등급 선택 및 구매 흐름.
• 실시간 재고 추적 및 카운트다운 타이머.
• 다국어 지원: 영어, 중국어 번체(zh-TW), 한국어(ko), 베트남어(vi).
• SEO 및 빠른 초기 로드를 위한 서버 측 렌더링.

apps/docs — 문서

기술 및 사용자 관련 문서를 제공하는 VitePress로 구축된 문서 사이트(이 사이트)입니다.

• 대화형 요소를 위한 Vue 구성 요소가 포함된 마크다운 기반 콘텐츠입니다.
• 아키텍처 시각화를 위한 기본 인어 다이어그램 지원.
• 푸시 시 자동 빌드를 통해 Cloudflare 페이지에 배포됩니다.

공유 패키지

packages/subgraph

하위 그래프 스키마에서 생성된 공유 GraphQL 쿼리 및 TypeScript 유형입니다. The Graph를 통해 온체인 데이터(시장, 거래, 포지션)를 가져오기 위해 GraphQL에서 주로 사용됩니다.

packages/contracts

Foundry 계약 아티팩트에서 자동 생성된 TypeScript 유형 및 ABI 정의. 다음을 제공합니다:

• 네트워크당 계약 주소를 입력합니다.
• viem의 ABI 및 wagmi 후크와 함께 사용하기 위한 ABI 상수입니다.
• 시장 매개변수, 주문 구조 및 이벤트 페이로드에 대한 공유 유형 정의.

다국어 지원

CloudBank은(는) 아시아 태평양 시장의 다국어 사용자 기반을 대상으로 합니다. 번역 전략은 앱에 따라 다릅니다.

Language	Code	Coverage
English	en	모든 앱
중국어 번체	zh-TW	노드-프리세일, 웹
Korean	ko	node-presale
Vietnamese	vi	node-presale

번역 파일은 각 애플리케이션과 함께 배치되며 빌드 시(Next.js) 또는 런타임(React i18n)에 로드됩니다.

지갑 통합

모든 블록체인 지원 앱은 wagmi를 기반으로 구축된 공통 지갑 연결 레이어를 공유합니다.

• MetaMask — 브라우저 확장 및 모바일 인앱 브라우저.
• WalletConnect — QR 코드 및 모바일 지갑용 딥링크 연결입니다.
• Coinbase 지갑 — Coinbase SDK을(를) 통해 직접 통합됩니다.

사용자가 지원되지 않는 네트워크에 연결하면 체인 전환이 자동으로 처리되어 BSC로 전환하라는 메시지가 표시됩니다.