[TIL] 2023-06-30 DAY68

---

Project

GIT 주소
https://github.com/dowoo303/SOLIDITY
https://github.com/dowoo303/hardhat

---

오늘 배운것들

1. NFT mint & sale 페이지 만들기(temp폴더)

각종 팁

1. ts에서는 폴더명과 Link경로가 같아야하며, 폴더안에 page.tsx 파일을 생성하는것이 문법이다.

회고

---

💻 Solidity 코딩

✅ NFT mint & sale 페이지 만들기

git clone 주소 : git 받아오기
npm install

판매 페이지 만들어보기

🟥 코드

"use client";

import { SALE_NFT_ADDRESS, mintNftContract } from "@/lib/web3.config";
import { NextPage } from "next";
import { useContext, useEffect, useState } from "react";
import { AppContext } from "../layout";
import { redirect } from "next/navigation";
import NftCard from "@/components/NftCard";

const MyNft: NextPage = () => {
  const [tokenIds, setTokenIds] = useState<number[]>();
  const [saleStatus, setSaleStatus] = useState<boolean>();

  const { account } = useContext(AppContext);

  const getMyNfts = async () => {
    try {
      const response: bigint[] = await mintNftContract.methods
        .getAllNft(account)
        .call();

      // bigint 제거
      const tempArray = response.map((v) => {
        return Number(v);
      });

      setTokenIds(tempArray);
    } catch (error) {
      console.error(error);
    }
  };

  const getSaleStatus = async () => {
    try {
      const response: boolean = await mintNftContract.methods
        .isApprovedForAll(account, SALE_NFT_ADDRESS)
        .call();

      setSaleStatus(response);
      console.log(response);
    } catch (error) {
      console.error(error);
    }
  };

  const onClickSaleStatus = async () => {
    try {
      const response = await mintNftContract.methods
        .setApprovalForAll(SALE_NFT_ADDRESS, !saleStatus)
        .send({ from: account });

      if (Number(response.status) === 1) {
        setSaleStatus(!saleStatus);
      }
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    if (!account) {
      redirect("/");
    }

    getSaleStatus();
    getMyNfts();
  }, [account]);

  return (
    <div>
      <div className="mb-20">
        판매 상태 : {saleStatus ? "승인" : "거부"}{" "}
        <button
          onClick={onClickSaleStatus}
          className="border-2 border-black p-1"
        >
          판매상태변경
        </button>
      </div>
      {tokenIds?.reverse().map((v, i) => {
        return <NftCard key={i} tokenId={v} />;
      })}
    </div>
  );
};

export default MyNft;

---