NFT 현금 거래 플랫폼 Hippy

서비스 소개

NFT를 활용하여 소유권을 증명하고, 현금 거래를 통해 자산의 영역 확대할 수 있는 플랫폼
본 서비스는 우리은행에서 진행한 2021 프로젝트 블루아워 우리은행 온택트 해커톤에서 진행했습니다.

'Hippy'는 NFT를 현금으로 거래할 수 있도록 도와주는 플랫폼입니다.
기존 NFT 거래 시 이더리움, 클레이튼 등 NFT의 기반이 되는 코인 네트워크에 수수료를 지불해야 됐지만,
'Hippy'는 거래 시 발생되는 수수료를 미리 측정하여 이를 코인이 아닌 현금으로 거래할 수 있도록 도와줍니다!
현금 거래는 우리은행에서 제공하는 API를 활용하여 구현했습니다!

서비스 결과물

NFT 생성	NFT 판매

NFT 구매	계좌 등록

주요 기능

• NFT는 블록체인에 저장된 데이터 단위로 고유하면서 상호 교환 할 수 없는 토큰을 뜻합니다.
• NFT를 거래 시 해당 NFT 기반이 된 코인 수수료가 발생하기 때문에 무조건 코인을 사용해 거래해야 합니다. 이를 현금 거래가 가능하도록 서비스 해주는 플랫폼 입니다.
• NFT를 생성하고 거래할 수 있는 기능이 있습니다.
• NFT를 거래할 때 생기는 수수료를 예측하여 코인 거래가 아닌 현금 거래가 가능하도록 했습니다.

아키텍처

API 문서

Hippy API 문서

Skills

• React
• Redux, Redux-saga : 상태관리 툴입니다.
• react-rouoter : CSR 툴입니다.
• material ui : 2021년 4월 28일 기준 material ui의 알파버전입니다. sx라는 프로퍼티가 추가되어 쉽게 커스텀 스타일링을 해줄 수 있게 되었습니다.

프로젝트 구조

이 프로젝트는 MVP 패턴를 따르고 있습니다.

src  
├─ api/ : API 통신할때 쓰는 코드들입니다.  
├─ components/ : View를 담당하는 컴포넌트입니다.  
├─ container/ : Presenter를 담당하는 컴포넌트입니다. Redux의 상태 조회와 handle 함수를 정의하여 컴포넌트에게 넘겨줍니다.  
├─ lib/ : 코드의 중복을 줄여주는 유틸 함수가 정의되어 있습니다.  
├─ modules/ : Model기능을 담당하는 코드입니다. Reducer와 Saga들이 기능별로 구분되어 작성되어 있습니다.  
├─ pages/  
├─ App.jsx : 각 Route에 대한 페이지를 정의합니다.  
└─ index.js : 앱의 진입점입니다. Redux와 Redux-saga를 적용합니다.