첫 프로젝트 진행기(2)-NFT 거래소 OpenSea를 클론코딩

프로젝트 진행

문제는 아직 코린이었던 제게 페이지 하나 구현하는 것조차 버거운 사실..
그러나 여기서 손놓고 있을 수 없죠.

(2)어떻게든 코딩!!

상세페이지에서 구현해야 하는 것들은

Detail 부분에서
NFT 이미지/컨트랙트 주소/토큰 아이디/토큰 발행 방식/블록체인 종류를 보여주는 것,

Description 부분에서 NFT의 상세 설명을 띄워주고

Properties 부분에서 생성한 사람이 지정한 특징들을 나열해주는 것이었습니다.

(3)팀원들과 함께 작성한 컴포넌트

detail 페이지의 컴포넌트 구조

팀원들과 함께 작성한 detail 페이지의 주된 컴포넌트

//description.js
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
   /* border: 0.5px solid ; */
   border-radius: 10px;
   padding-left: 20px;
   margin-top: 10px;
   margin-bottom: 100px;

   font-family: Poppins, sans-serif;
   font-size: 25px;
`;
const Text = styled.div`
   padding-left: 20px;
   margin-top: 10px;
   margin-bottom: 10px;

   font-family: sans-serif;
   font-size: 20px;
`;

function Description({ description = "" }) {
    return (
        <Wrapper>
            <Text>{description}</Text>
        </Wrapper>
    )
}
export default Description;

---

//details.js
import Text from './Text'

function Detail({ nftInfo }) {
    const contractAddress = nftInfo.contract.slice(0, 6)+'…'+nftInfo.contract.slice(nftInfo.contract.length-3, nftInfo.contract.length-1);
    return (
        <>
            <Text leftData={'Contract Address'} rightData={contractAddress}></Text>
            <Text leftData={'Token ID'} rightData={nftInfo.tokenId}></Text>
            <Text leftData={'Token Standard'} rightData={nftInfo.standard}></Text>
            <Text leftData={'Blockchain'} rightData={nftInfo.network}></Text>
            <Text leftData={'Creator Fees'} rightData={`${Math.floor(Math.random() * 100)}%`}></Text>
        </>
    )
}

export default Detail;

---

//properties.js
import styled from 'styled-components';

const dummyData = [
    {
        trait_type: "background",
        value: "white"
    },
    {
        trait_type: "background",
        value: "white"
    },
    {
        trait_type: "background",
        value: "white"
    }, {
        trait_type: "background",
        value: "white"
    }, {
        trait_type: "background",
        value: "white"
    }
]

const Wrapper = styled.div`
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: scroll;
    /* width: 600px; */
`;

const TraitWrapper = styled.div`
    display: block;
    background-color: rgba(21, 178, 229, 0.06);
    border-radius: 6px;
    border: 1px solid rgb(21, 178, 229);
    padding: 10px;
    text-align: center;
    margin: 5px;
    width: 150px;
    height: 50px;
`;

const TraitType = styled.p`
    color: rgb(21, 178, 229);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    margin: 5px;
`;

const TraitValue = styled.p`
margin: 5px;
  
`;

function Properties({properties=[]}) {
    return (
        <Wrapper>
            {properties.map((property, index) => (
                <TraitWrapper key={index}>
                    <TraitType>{property.trait_type}</TraitType>
                    <TraitValue>{property.value}</TraitValue>
                </TraitWrapper>
            ))}
        </Wrapper>
    )
}

export default Properties;

프로젝트 완성

깃허브 주소

Opensea 클론코딩 전체 내용 github 주소

회고

1. Opensea를 클론코딩하는 프로젝트였지만 상당부분 다른 팀원들의 도움을 받아 진행해서 백엔드파트와 컨트랙트 쪽은 거의 다루지 못한 점이 아쉬웠습니다. 특히 react 사용하는 부분에 있어 아직도 미흡하다는 점을 뼈저리게 깨달았습니다. 다른 프로젝트를 진행할 때까지 더욱 공부를 심도있게 진행해서 학습을 원할하게 진행하고자 노력해야겠습니다.

2. 직접 코딩한 점은 아니지만 다른 팀원께서 개개인의 파일들을 한 파일로 모아서 조립(?)하는 모습을 보고 '아 코딩하는 맛이 이거구나!'를 느꼈습니다. 프로젝트 후반으로 갈수록 각 파일들을 합치고 에러를 잡아내는 것이 중요하다는 것을 알게되었습니다.