PROJECT 1 NFT 마켓플레이스

개요

NFT 거래소 중 1등의 점유율을 차지하고 있는 Opensea를 참고하여 NFT 거래소를 구현했다.

프로젝트 기획과 관리는 노션 템플릿을 이용했고, 아침마다 회의를 해서 개발 방향을 의논하고, 저녁에 코드리뷰하는 방식으로 진행했다.

위의 사진과 같이 당일에 진행한 개발내용을 팀원이 이해할 수 있게 개발일지를 작성하였다. 개발하는 과정에서 버그가 발생하면 디스코드를 이용해 의논을 하였고, 해결된 버그는 버그리포트를 작성하여서 관리하였다.

🐵 Software Requirement

• 기술 스택
  • Client: React
  • Server : Express, WEB3, Solidity
  • Database : MySql, IPFS
  • 스마트 컨트랙트 배포 : Truffle, ropsten testnet
• 주요 기능
  • 메타마스크 지갑 연결
  • ERC-721. 1155 컨트랙트 배포 NFT 민팅기능 구현
  • IPFS 연결 및 호출 기능 제작
  • 마켓에 NFT 조회 및 상세정보 페이지, NFT 구매 기능 구현
  • 지갑에 소유중인 NFT 조회 및 상세정보 페이지, NFT 판매 기능 구현
  • React Router 기능 구현

🔥컴포넌트 구조

🔥세부 기능

App.js

• nav 컴포넌트 라우터기능 : Nav 메뉴 탭에서 라우터 기능을 제공합니다
  
• 메타마스크 연결 기능 제공 : 지갑연결이 필요한 기능은 모두 지갑연결이 되어있는지 확인하고, 지갑연결이 되어있지 않다면 WEB3 를 이용하여 메타마스크 지갑 연결을 요청합니다.
  

Explore.js

• IPFS 연결 NFT 조회 및 상세정보 제공 : Explore 컴포넌트에 판매등록된 NFT의 메타데이터를 IPFS와 DB에 요청합니다.
• NFT 구매 기능 제공 : 자신이 소유한 NFT를 다른 계정으로 전송합니다. 자신의 계정은 판매한 NFT의 price 만큼 잔액이 증액되고 구매자의 계정은 price만큼 잔액이 차감됩니다.

Create.js

• NFT 민팅 기능, IPFS 연결 이미지 업로드, ERC-721 컨트랙트 배포 : 사용자가 NFT 메타데이터를 기입하고 생성할 시 컨트랙트를 배포 NFT생성, 이미지는 IPFS에 저장하고 해당 NFT의 메타데이터는 DB에 저장합니다.

Mypage.js

• 지갑 계정에 소유중인 NFT 조회, IPFS 에서 이미지 호출 : 해당 계정이 소유중인 NFT의 메타데이터를 DB에 요청하고, DB에 요청한 IPFS URI를 통하여 IPFS 에서 이미지를 불러옵니다.
• NFT 판매 기능 제공 : 사용자가 판매등록할 NFT의 소유권을 온체인 상에서 변경하고, DB에 변경된 메타데이터를 업데이트 합니다.