기술 스택 : Next.js, vue.js, TypeScript, Redux Toolkit, ether.js, Axios, Chakra UI
1. Wallet 연결 및 로그인 개발
1-1. ether.js와 Axios를 사용하여 Wallet (MetaMask, FaceWallet) 연결
- Face 객체를 초기화하는 과정에서 오류가 발생하여 싱글톤 패턴을 사용하여 객체 인스턴스를 한 번만 생성하고, 이를 전역적으로 공유하여 사용할 수 있도록 했습니다.
1-2. Axios instance를 활용하여 accessToken 및 RefreshToken 관리
- 프로젝트 초기엔 axios interceptors를 사용하여 에러 관리 및 RefreshToken 관리를 수월하게 할 수 있는 방법을 발견하게 되어 더욱 더 편리하게 error 처리가 가능해졌습니다.
2. 인벤토리 페이지 개발
2-1. items 관심사 분리 및 리빌 기능 개발
-ether.js를 사용하여 지갑 연결 및 트랜잭션 진행을 하였습니다. MetaMask와 FaceWallet를 지원하도록 구현하였고, MetaMask를 연결한 경우, 현재 연결된 계정의 주소와 네트워크를 확인하여 해당 정보가 예상과 일치하는지를 확인하였습니다.
3. DAO 페이지 개발
3-1. DAO 페이지 UI 및 투표, 결과 확인 기능 개발
- 전체 투표수를 합산한 후, 각 투표 수에 해당하는 막대의 width를 계산하여 표시하였습니다. 또한, 최다 득표 수인 것은 다른 색을 주어 그래프를 만들었습니다. 이를 통해, 사용자가 투표 결과를 한눈에 파악할 수 있도록 하였습니다.
3-2 DAO 포인트 변환 기능 개발
- 트랜잭션이 종료된 것처럼 보이지만, 실제로는 인벤토리에 캐릭터가 남아있는 상황이 발생했습니다. 이를 최소화하기 위해 탈중화 인벤토리에 소모한 캐릭터가 남아있는지 확인하는 API를 만들고, 프론트엔드에서 로컬 스토리지에 선택한 캐릭터들을 저장하여 비교하는 방식을 도입했습니다.
4. 기타 개발 사항
- RANK 페이지 개발, GUILD 페이지 개발, 협력사 connect 페이지 개발, profile 및 setting 페이지 개발, 유지보수 및 핫픽스
더보기