Day : 27~30
React Day : 17~20

NFT web page clone

Clone Page

: https://konkrit.io/collection/0x8e45963aa5dec4681406818f14495acb4fae65ad

코드 구성

• pages : main, detail
• components : Header, Intro, NftCard, Nfts

---

• 페이지 구성 및 이동

// page구성 코드 ( 버튼 클릭시 스타일 지정)
const pageComp = () => {
    let pageArray = [];
    for (let i = 0; i < page; i++) {
      pageArray.push(
        <button
          key={i}
          className={`hover:text-white ${
            i + 1 === selectedPage ? "text-white" : "text-gray-400"
          }`}
          onClick={onClickPage(i + 1)} >
          {i + 1} 페이지
        </button>
      );
    }
    return pageArray;
  };

//버튼 클릭시 p인자를 참조하여 page를 설정하고, Nft를 가지고 오도록 함 (p=i+1)
  const onClickPage = (p) => () => {
  setSelectedPage(p);
  getNfts(p);
}; 

• toLocaleString()
  : 숫자를 문자로 바꿀 때 사용
  : 화폐단위 표시할 때 ; 0,000로 표기 됨
  ex) {(v.price / 1000).toLocaleString()}K₩

---

결과

개인 Project 결과물

Web : https://nft-page-sheep.vercel.app/
github : https://github.com/hyeongga/NftPage-Sheep.git