Github Repository: https://github.com/haejeonghy/beb-04-first-Seanapse

발단

BEB 1차 프로젝트 주제는 NFT거래 플랫폼인 오픈씨(https://opensea.io/)의 클론 코딩이었다.
팀 명으로 언더더씨, 김씨, 어벤져씨 등이 있었으나 시냅스에서 착안하여 씨냅스로 정해졌다.

일정

일정은 2022년 6월 13일부터 6월 17일까지로,
13일은 기획, 14~15일은 개발, 16일은 배포 및 마무리, 17일은 블로깅을 진행했다.

요구사항 정리

기획 단계에서 오픈씨에서 제공하는 기능을 분석하고 정리했다.

사용자는 nft를 생성할 수 있다
사용자는 nft를 저장할 수 있다
사용자는 nft를 구매할 수 있다
사용자는 nft를 판매할 수 있다
	token uri에 들어갈 내용을 프론트에서 입력
사용자는 메타마스크 지갑을 연동하여 가입할 수 있다
사용자는 판매할 품목을 나열할 수 있다
사용자는 경매 또는 고정 가격에 대한 입찰가를 선택할 수 있다
풀랫폼은 구매 금액에 대해 수수료를 부과한다 
사용자는 판매되는 nft의 정보 목록을 조회할 수 있다
사용자는 카테고리로 nft를 조회할 수 있다
사용자는 자신의 거래 내역을 조회할 수 있다
사용자는 고정된 가격 혹은 경매로 nft를 구매할 수 있다

하지만 프로젝트 기간 중 순수하게 기능만 개발할 수 있는 시간이 짧아 전부 구현할 수는 없었다.
그래서 이 중 씨냅스에서 발행한 NFT 목록 조회, NFT 발행, 연동한 지갑 주인의 NFT 조회, NFT 상세 정보 조회 기능을 구현하기로 결정했다.

기술 스택

• 언어: Javascript, Solidity
• 프론트엔드: React
• 버전 관리: Git, Github
• 배포 관리: Github Page

설계

처음 기획을 시작했을 땐 클라이언트, 서버, DB로 구성하여 발행한 NFT 정보를 DB에 저장하고, 조회할 때 걸리는 시간을 줄이려고 기획했다.
하지만 서버의 역할이 불분명해 전부 클라이언트에서 처리하기로 했다.
팀 인원이 총 4 명이라 홈 화면, 마이 페이지 화면, 상세 정보 화면, 등록 화면으로 나눠 사다리타기로 결정했다.
나는 마이 페이지 화면을 맡았다.
그리고

홈 화면에 들어왔을 때 씨냅스 컨트랙트 address로 발행된 NFT 리스트를 조회하고, App.js에서 state로 관리한다.
Mypage 페이지로 들어갔을 때 App.js에서 관리하는 NFT 리스트를 가져와 NFT owner가 연동된 지갑의 address와 같은 NFT만 남기고 필터링한다.