Opensea 구현하기 / Clone Opensea.io project with team

Hello~ I'm Cucumber.

필요한 것 / Prerequisite

* Code Editor (Vscode)

* Opensea API Key

* Metamask Wallet / web3 package

* Basic Understanding of JS, React, Solidity

* Git

개발내용 

세계 최대 NFT 마켓플레이스 오픈씨(Opensea) 웹페이지를 구현하는 것을 팀 프로젝트로 진행.

먼저 디자인적인 요소들을 최대한 똑같이 구현하려고 했고, 그 이외에 메뉴에서는

자신이 어떤 NFT를 갖고 있는지 확인 가능하게하여 전송할 수 있는 기능도 구현하였고

당연히 지갑을 연결할 수 있는 요소도 넣어 NFT를 거래하는 오픈씨의 기능들을

돌아보며 web3.0 스러운 요소들을 다시 익히고 실제로 구현하도록 했다.

 

실제 Opensea의 웹

 

구현한 웹

---

많은 NFT의 거래가 이루어지는 만큼

다양한 토큰들을 확인할 수 있게 구현하고 싶었다.

 

opensea의 api에서 받아온 랜덤한 사진들

 

지갑을 연결할 수 있고 소유한

ERC20토큰들을 전송하는 파트

화질을 조금 내려서.. 깨진다..

 

소유한 NFT을 확인하고

다른 사람에게 전송까지.

---

회고



 

참 우여곡절이 많았던 시간이었다. 프로젝트 를 위해 주어진

시간은 약 5일은 빠듯하게 적게 느껴졌고,

모든 사람이 팀 작업을 처음 하는 입장에서

서로 같은 개발환경을 구축하고

깃을 활용해보는 것은 아주 개고생이었다.

 

팀장인 내가 메인 깃을 사용해야하는 것도 모르고

서로 먼저 작업한 코드를

다른 이들의 작업물을 풀하면서 진행하는 삽질을 ..

 

거의 하루이틀은 그렇게 개발환경 맞추고

깃 활용하는 법 찾느랴 시간을 많이 소요했다

 

그렇게 본 기능 구현을 위해 코드를 짜는데

각자 역할을 분담하는게 아닌

 

각자 기능구현을 위해 생각하여 혼자 짜보는 시간을

가지면서 먼저 해결하는 사람이 있으면 

따라오기 벅찬 팀원들을 이끌어주는 식으로 진행을 하였다.

 

개인적으로 나는 이런 방식이 팀 프로젝트에서는

정말 좋지 않다고 생각한다. 아마도

 

아마 이틀차부터 이런 생각을 바로잡았는데

이렇게 진행하다가는 아무것도 잡지 못할 것 같다는 생각에

각자 역할을 분담하기로 했다. 

 

그렇게 시작됐다 CSS 지옥

 

ERC721인 NFT에 대한 조회 구현을 맞춰놓은 후라

여기까지 정도면 기능 구현은

최소한으로 잘 구현했다고 생각해서

어찌보면 팀장으로써 못해서 모두가 꺼려했던

메인 페이지 구현을 담당했다.

 

이렇게 진지하게 열정을 쏟아서 

CSS작업을 하게 될 줄은 몰랐는데 .. 

 

중간중간에 구현하려고 했지만

아쉽게도 시간이 너무 오래걸릴 것 같아

해결하지 못한 문제들이 몇몇 있었는데

 

희미하게 있는 백그라운드

오픈씨 메인을 가보면 아주 미세하게

보이는 백그라운드가 있다.

 

이걸 구현하려고 시간을 되게

많이 잡아먹었는데, 

Opacity 를 넣어주거나 하면 그 위에

컴퍼넌트가 같이 적용되어버리는.. ㅠ

 

아무래도 이런 디테일을 잡는 것이

무척이나 중요하다고 생각하여

구현해보려고 힘썼으나

시간을 너무 잡아먹을 것 같아서 깔끔하게 포기 실패

 

이외에도 요소마다

Flex를 잡아주는데 헷갈리는 부분이 너무 많아서

만들어놓고 다시 비율 조정하고 이런

반복적인 작업을 하면서 깨닫게되는

실수들이 너무 많더라.

내가 너무 얕봤어 CSS.. 

 

아무래도 유저들이 제일 많이 보게되는

디자인적인 요소를 절대 놓치지 말아야하는

깨달음을 주는 프로젝트였다,,,

 

팀원들이 잘 진행해주고 별 탈없이

아주 열심히해줘서 아직도 너무 고맙다. 

내 한몸 바쳐 우리 팀원들이

빛날 수 있다면... ☆

다음에도 내가 기꺼이 희생할 수 있쒀!!

 

---

코드 구현

좀 더럽지만

 

GitHub - codestates/BEB_01_SolidiTeam