NFT Dapp 개발 연습 #7(레이아웃 및 카드페이지 작성)

- 말 그대로 레이아웃을 구성해 볼 것이다.

 

- 우선 componets 아래 Layout.tsx를 만들고 코드를 작성한다.

- App.tsx에 코드를 작성하고

 

- routes 디렉토리에 my-slime.tsx 만들고 작성한다.

 

- 실행해보니 정상적으로 my-slime 페이지가 새로 생겼다.

 

 

- 이제 Layout을 마저 작성하자.

- 클릭하면 링크로 넘어가는 식의 페이지 레이아웃을 완성했다.

 

 

- 이제 가지고있는 슬라임카드의 이미지가 보이도록 카드 페이지를 작성할 것이다.

import React, {FC, useEffect, useState} from "react";

import { Grid } from "@chakra-ui/react";

import { mintSlimeTokenContract } from "../web3Config";

import SlimeCard from "../components/SlimeCard";

interface MySlimeProps {

    account: string;

}

const MySlime: FC<MySlimeProps> = ({account}) => {

   

    const [slimeCardArray, setSlimeCardArray] = useState<string[]>();

    const getSlimeTokens = async () => {

        try {

            const balanceLength = await mintSlimeTokenContract.methods

            .balanceOf(account)

            .call();

           

            const tempSlimeCardArray = [];

            // balanceLength를 10진수로 변형 후 for문을 돌려서 가지고있는 카드의 타입을 배열에 저장

            for(let i = 0; i < parseInt(balanceLength, 10); i++) {

                const slimeTokenId = await mintSlimeTokenContract.methods

                .tokenOfOwnerByIndex(account, i)

                .call();

                const slimeType = await mintSlimeTokenContract.methods

                .slimeTypes(slimeTokenId)

                .call();

                tempSlimeCardArray.push(slimeType);

            }

            setSlimeCardArray(tempSlimeCardArray);

        }

        catch (error) {

            console.error(error);

        }

    };

    useEffect(() => {

        if(!account) return;

        getSlimeTokens();

    }, [account]);

    useEffect(() => {

        console.log(slimeCardArray);

    }, [slimeCardArray]);

    // templateColumn으로 한 줄에 4개씩 카드를 출력

    // slimeCardArray가 존재하면 map을 이용하여 슬라임 카드를 하나씩 리턴

    return (

        <Grid templateColumns="repeat(4, 1fr)" gap={8}>

        {slimeCardArray &&

          slimeCardArray.map((v, i) => {

            return <SlimeCard key={i} slimeType={v} />;

          })}

      </Grid>

    );

};

export default MySlime;

 

 

- 작성을 완료하고 마이페이지를 가면 지금까지 민팅했던 카드들을 볼 수 있다.