ANTTIME SWAP
포인트 토큰 교환 에어드롭 플랫폼
프로젝트 요약
담당 시작일
2024.06. -
포지션
프론트엔드
테크스택
Next.js
Tailwind
WAGMI
Gsap
Zustand
Tanstack Query
Github Action
Firebase Auth
Firebase Hosting
Suspensive
팀 구성
프론트
1
백엔드
1
PM
1
디자인
1
관련링크
Time 2 TokenSwap!
ANTTIME에서 쌓은 타임포인트를 ANT TOKEN으로 전환하세요. 토큰 전환량은 커뮤니티 기여도(채굴시간, 친구 초대 수) 및 어뷰징 여부를 반영하여 계산합니다. 내 점수를 조회해서 토큰 전환을 얼마할지 정해보세요.
맡은 역할
서버/클라이언트 컴포넌트 전략
SEO, 보안 여부를 고려
- • SEO 필요 여부에 따른 서버사이드 활용
- SEO에 민감한 데이터는 서버 컴포넌트에서 가져와 프리 렌더링
- 시기 별, 유저 권한 별 접근 가능 여부를 서버 컴포넌트에서 판단하여 브라우저에 노출시키지 않음
React18 Suspense 패턴
로딩/성공/에러 상태 컴포넌트 별 분리
- • Tanstack Query의 useSuspenseQuery와의 조합 활용
- Suspense로 Promise를 캐치하여 스켈레톤 및 로딩 컴포넌트를 표출. Error Boundary에 에러 컴포넌트를 물려 상태 별 컴포넌트가 분리되도록 유도.
- 순차적인 데이터 패칭이 필요한 경우 컴포넌트 레이어를 차등하여 Suspense 패턴 유지
- 클라이언트 사이드 내에서 패칭 보장이 필요한 요청의 경우, Suspensive 라이브러리의 ClientOnly 옵션 사용
Web3 지갑 트랜잭션
WAGMI를 사용한 Web3 지갑 연결 및 트랜잭션
- • 토큰스왑 신청 및 수령 과정에서 Web3 지갑 사용
- MetaMask와 WalletConnect 등 주요 지갑 연결 및 사용자 정보 가져오기
- 서버에서 유저의 토큰 신청량, 머클프루프 등을 받아 트랜잭션 발생
- 이더스캔에서 성공 여부를 스캔할 수 있도록 유도.
스코어 카운팅 애니메이션
GSAP을 활용한 복잡한 순차적 타이밍 애니메이션 구현
- • useContext를 사용하여 컴포넌트 간 애니메이션 타이밍 상태 공유
- React-Bits, React-Slot-Counter 등 리액트 기반 동적인 애니메이션 라이브러리 적극 활용
- 유저가 자신의 스코어가 올라가는 과정을 동적인 애니메이션으로 체험할 수 있도록 유도
Thanks for Reading목록으로 돌아가기