1.nft/collections의 page

import SearchBar from "@app/_components/searchBar";
import React from "react";
import Title from "@app/_components/itemTitle";
import ItemTableWrap from "@app/_components/itemTable";
import CollectionTableTitle from "./_contents/TableTitle";
import { Iitem } from "./interface";
import CollectionItemWrap from "./_contents/ItemWrap";
const NFTTable = () => {
  const tempDataArr: Iitem[] = Array.from({ length: 20 }, () => ({
    number: '0',
    collection: "img",
    type: "ERC721",
    name: "asdasdasdasdasdlanslkdnaskjdaskn",
    volume: "203",
    change: "24",
    minPrice: "0.2",
    maxPrice: "20",
    sales: "5",
    transfers: "54,398",
    owners: "6,000",
    totalAssets: "0",
  }));

  return (
    <div className="bg-mainBackGroundColor min-h-screen ">
      {/* <SearchBar />
      <NFTContainer /> */}
      <Title title="NFT List" />
      <ItemTableWrap>
        <CollectionItemWrap itemDataArr={tempDataArr} />
      </ItemTableWrap>
    </div>
  );
};

export default NFTTable;

• 컴포넌트는 nft아이템을 담는 ItemTableWrap과 nft의 row 하나인 CollectionItem테이블이 있다.
• 본 페이지에서는 server component이므로 fetch로 데이터를 받아와 props로 보낼 예정이다.

2. CollectionItemWrap 컴포넌트

import React from "react";
import { IitemProps } from "../interface";
import CollectionItem from "./Item";
import CollectionTableTitle from "./TableTitle";

const CollectionItemWrap: React.FC<IitemProps> = ({ itemDataArr }) => {
  return (
    <>
      <CollectionTableTitle />
      {itemDataArr.map(
        (
          {
            change,
            collection,
            maxPrice,
            minPrice,
            name,
            owners,
            sales,
            totalAssets,
            transfers,
            volume,
            type,
          },
          index
        ) => (
          <CollectionItem
            key={index}
            number={index.toString()}
            change={change}
            collection={collection}
            maxPrice={maxPrice}
            minPrice={minPrice}
            name={name}
            owners={owners}
            sales={sales}
            totalAssets={totalAssets}
            transfers={transfers}
            volume={volume}
            type={type}
          />
        )
      )}
    </>
  );
};

export default CollectionItemWrap;

• CollectionItemWrap 컴포넌트는 nftList를 담았다. page에서 받은 데이터를 본 컴포넌트에서 map함수로 리스트를 return 한다.

3.CollectionItem 컴포넌트

import React from "react";
import { Iitem } from "../interface";

const CollectionItem: React.FC<Iitem> = ({
  number,
  change,
  collection,
  maxPrice,
  minPrice,
  name,
  owners,
  sales,
  totalAssets,
  transfers,
  volume,
  type,
}) => {
  return (
    <ul className="flex w-[350%] h-16 border-b border-gray">
      <li className="flex justify-center items-center   w-[3%]">{number}</li>
      <li className="flex justify-center items-center   w-[5%]">
        {" "}
        {collection}
      </li>
      {/* 바로 밑에 li 태그 세로로 중앙 정렬 */}
      <li
        className="h-16  w-[10%] truncate"
        style={{
          lineHeight: "4rem",
        }}
      >
        {name}
      </li>
      <li className="flex justify-center items-center   w-[12%]"> {type}</li>
      <li className="flex justify-center items-center    w-[10%]"> {volume}</li>
      <li className="flex justify-center items-center     w-[9%]"> {change}</li>
      <li className="flex justify-center items-center    w-[8%]">
        {" "}
        {minPrice}
      </li>
      <li className="flex justify-center items-center    w-[8%]">{maxPrice}</li>
      <li className="flex justify-center items-center    w-[10%]"> {sales}</li>
      <li className="flex justify-center items-center    w-[10%]">
        {" "}
        {transfers}
      </li>
      <li className="flex justify-center items-center    w-[10%]"> {owners}</li>
      <li className="flex justify-center items-center    w-[10%]">
        {" "}
        {totalAssets}
      </li>
    </ul>
  );
};

export default CollectionItem;

• 구조분해 할당으로 각 데이터를 받아와 사용자에게 보여준다.

4. 진행상황

디렉토리 구조 최적화 및 tailwind.config 때문에 컴포넌트 작성이 수월하지 못 했지만 이제부턴 공통 컴포넌트 제작 및 키컬러가 정해져 원활하게 코드진행이 가능할 것 같다.