[프로젝트] Opensea 클론코딩

팀원들과 Opensea 클론 코딩 프로젝트를 진행했다. 일단은 블록체인과 프론트만 구현을 해서 Opensea를 구현하기로 했다. Opensea에서 제공하는 무료 API를 활용해서 이더리움 테스트넷인 Rinkeby에 존재하는 NFT들을 조회할 수 있고 각 Collection 및 NFT들에 대한 상세정보도 API로 제공하기 때문에 사용했다. 그러나 무료 API는 API 키 없이도 사용할 수 있는 장점이 있지만 모든 기능을 사용할 수 없기 때문에 Opensea의 모든 부분을 구현할 수는 없었다. 일단 우리가 중점으로 둔 기능들은 다음과 같다.

 

• 현재 Rinkeby 네트워크에 존재하는 NFT들 리스트로 출력
• 각 NFT에 대한 상세정보 페이지 출력
• NFT 민팅 기능
• NFT 판매 목록에 등록
• NFT 구매 기능

https://github.com/JJakDDo/beb-03-Degens-Drop​

https://degens-drop.herokuapp.com/

Degens Drop

스마트 컨트랙트

스마트 컨트랙트로 구현한 것은 두 가지이다. 첫째는 NFT를 민팅할 수 있는 컨트랙트이고 두 번째는 거래소 기능을 가진 컨트랙트이다. 

NFT 민팅

openzeppelin을 활용해서 ERC721을 민팅하는 컨트랙트를 쉽게 구현할 수 있었다.

거래소 컨트랙트

NFT 판매 목록들을 따로 서버에 저장하지 않고 온 체인에 모든 것을 기록하기로 정했기 때문에 현재 판매 중인 NFT들을 저장할 수 있는 mapping과 struct를 사용했다.

struct NftOnSale {
  uint256 id;
  address payable seller;
  address NFTaddress;
  uint256 tokenId;
  uint256 price;
  bool sold;
}

mapping(uint256 => NftOnSale) public onSales;

만약 유저가 NFT를 판매하고 싶다고 하면 mapping인 onSales에 해당 NFT에 대한 정보들이 저장된다. 그리고 구매할 때는 거래소 컨트랙트에서 대신 transfer를 해준다.

프론트엔드

프론트엔드는 리액트를 활용해서 구현했다. 그리고 짧은 시간 내에 프로젝트를 완성해야 했기 때문에 템플릿을 사용해서 UI를 구현했다. 블록체인과 인터렉션을 하기 위해서 가장 많이 사용되는 web3.js를 사용했다.

메인 페이지

메인 페이지에는 현재 Rinkeby 네트워크에서 발행된 NFT들을 Opensea API를 사용해서 조회한 뒤 출력하는 방식으로 구현했다.

 

상세페이지

페이지에 노출되는 NFT들을 클릭하게 되면 해당 NFT의 상세페이지로 이동한다. 상세정보 또한 Opensea API를 사용해서 조회한 뒤 출력하는 방식으로 구현했다.

 

민팅

NFT 민팅을 할 때 필요한 것이 토큰 uri이다. 우리는 이미지 파일 또는 메타데이터를 모두 ipfs에 업로드하기로 결정했다. 그래서 ipfs에 업로드하기 위해 ipfs-http-client 모듈을 사용했다. 일단은 이미지 파일을 먼저 ipfs에 업로드해서 경로를 받아왔다. 그다음에 이름, 설명, 이미지 파일 링크를 JSON 형태로 만든 다음 ipfs에 업로드했다. 이것을 NFT를 민팅할 때 토큰 uri로 전달해주었다. 

 

그리고 한 가지 중요한 것이 우리가 구현한 방식은 거래소 컨트랙트가 대신 NFT를 transfer 해주기 때문에, 민팅한 NFT에 대한 transfer 권한을 거래소 컨트랙트가 가지고 있어야 한다. 그래서 만약 처음으로 우리 웹페이지를 통해 민팅을 하는 경우라면 트랜잭션을 2번 보내게 된다. 첫 번째는 NFT를 민팅하기 위해서이고, 두 번째는 해당 NFT에 대한 권한을 거래소에게 주기 위한 setApprovalForAll 함수를 호출하는 트랜잭션이다.

 

마이페이지

마이페이지는 현재 로그인한 지갑 주소가 보유하고 있는 NFT들을 출력하는 페이지이다.

 

판매 및 구매

자신이 보유한 NFT의 상세페이지에 들어가면 Sell 버튼이 노출된다. 이 버튼을 클릭하면 해당 NFT가 원하는 가격에 거래서 컨트랙트에 저장이 된다. 그리고 마켓 페이지에 현재 거래소 컨트랙트에 저장된 판매 중인 NFT들이 출력된다.

 

여기서 원하는 NFT의 상세페이지에 들어가서 Buy 버튼을 클릭하게 되면 NFT를 구매하게 된다.

 

구매할 때는 상세페이지에 Buy 버튼이 노출된다.

자신의 NFT 상세페이지에 들어가면 sell 버튼이 노출된다.

짧은 시간이었지만 팀원들과 함께 진행하는 프로젝트여서 더욱 뜻깊은 시간이었다. 스마트 컨트랙트를 구현하는 것은 공부를 더 해야 할 것 같은 느낌을 받았다. 우리가 컨트랙트를 테스트하기 위해 매번 테스트넷에 배포를 하고 안 되는 부분은 수정하고 또 배포하기를 반복했지만 다음에는 test 스크립트를 직접 짜서 배포하기 전에 테스트를 미리 해보는 방식으로 업무의 효율을 높이면 좋겠다는 생각을 했다.