프리랜스
우즈베키스탄 가상화폐 거래소
웹소켓을 활용하여 실시간으로 코인 시세를 확인할 수 있으며, 사용자가 등록한 카드로 코인 거래가 가능한 암호화폐 거래 플랫폼입니다.
기간
2025.01 ~ 2025.04
역할
풀스택 개발 (프론트엔드 중심)
팀 규모
5
기술 스택
ReactTypeScriptViteZustandReact Queryi18nextstyled-componentsTradingViewFirebase AuthWebSocket
프로젝트 상세 소개
UZ Exchange는 우즈베키스탄 시장을 타겟으로 한 암호화폐 거래 플랫폼입니다. 실시간 OrderBook, 차트, 거래 기능을 제공하며, 3개 언어(영어, 우즈벡어, 러시아어)를 지원합니다. KYC 인증, OTP 2FA, 소셜 로그인 등 금융 서비스 수준의 보안 기능을 구현했습니다.
주요 기능
- 실시간 OrderBook, Ticker, Trade 데이터 (WebSocket)
- TradingView 전문 금융 차트 연동
- 암호화폐/법정화폐 입출금
- 소셜 로그인 (Google, Apple, OneID)
- OTP 2FA, KYC 인증
- 3개 언어 지원 (영어, 우즈벡어, 러시아어)
담당 업무
입출금 시스템
- •Sum(법정화폐) 입출금 전체 플로우 구현 (UI, API 연동, 유효성 검사)
- •입출금 input 유효성 체크 및 min/max API 연동
- •available balance 계산 로직 (balance - pending_withdrawal_amount)
- •입금/출금 거절 페이지 및 펜딩 화면 구현
- •모바일 메뉴창에 출금 관련 버튼 추가
다국어 시스템
- •러시아어(RU), 우즈베키스탄어(UZ) 언어팩 추가 및 형식 정리
- •FAQ, 공지사항 등 콘텐츠 언어별 API 연동
- •모바일에서 언어 선택 시 즉시 적용되도록 수정
- •푸터 언어별 링크 분기 처리
메인 페이지 & 공지 시스템
- •메인 화면 공지사항(Notice) 배너 구현 및 애니메이션 처리
- •팝업창 구현 (오늘 다시보지 않기 로직, 로컬스토리지 만료일 관리)
- •메인 테이블 정렬 기능 구현 및 버그 수정 (정렬과 검색 동시 동작)
- •메인 모바일 화면 코인 이미지 추가
마이페이지 (자산 관리)
- •Overview 정렬 기능 구현 (UZS 상단 고정, 검색/필터 동시 동작)
- •Overview/Spot 테이블 PnL 컬럼 추가 및 필터 기능
- •가격 표시 천단위 콤마 포맷팅 적용
- •Spot 파일 분리 및 컴포넌트 리팩토링
GNB & 공통 UI
- •GNB 메뉴 구조 수정 및 불필요한 메뉴 삭제
- •글로벌 푸터 모달창 추가 및 페이지 이동 링크 설정
- •에러창 overlay 바탕 화면 클릭 시 자동 닫힘 방지
- •버튼 중복 클릭 방지 로직 구현
인증 & 보안 분기 처리
- •KYC 인증 분기 처리 (미인증 시 Security 페이지로 이동)
- •KYC/OneID 미인증 시 헤더 아이콘 Unverified 표시
- •OneID 로그인 플로우 복구 및 연동
- •보안 화면 Manage 버튼 상태별 스타일 처리
에러 핸들링 & 캐싱
- •React Query 캐싱 문제 해결 (로그아웃 시 모든 캐싱 내역 삭제)
- •Card List 캐싱 문제 해결
- •Decimal undefined 에러 해결
- •컴포넌트별 로딩 상태 분리 처리
반응형 & 모바일 UI
- •거래(Trade) 화면 전체 반응형 작업
- •보안 페이지 모바일 버튼 크기 조정
- •모바일 모달창 애니메이션 버그 수정
- •Deposit Crypto 모바일 버전 UX 개선 (코인/네트워크 선택 플로우)
프로젝트 구조
src/