NFT 마켓플레이스 구축

1. NFT 마켓플레이스란?

MetaMask로 지갑을 연결하고, 나의 NFT를 경매 형식으로 판매, 입찰, 즉시 구매할 수 있는 기능이 있습니다.

---

2. 준비물

• Metamask 지갑
• Kaia Testnet (카이로스 테스트넷 사용)
• 테스트용 NFT (배포 완료된 상태)
• React 개발환경 (CRA)
• Hardhat (스마트컨트랙트 작성 및 배포)
• Github 레포지토리

---

3.NFT Marketplace 스마트컨트랙트 주요 기능

• NFT 판매 등록 / 취소 (경매 시작가, 즉시 구매가, 경매 기간)
• 경매 입찰 / 즉시 구매
• 경매 종료 시 NFT 전송 / 환불
• 수수료(판매 금액의 10%) 수령 기능

---

4. React 프론트엔드 구축 

📂 컴포넌트 구조

• WalletConnect.jsx 메타마스크 연결
• ListNFTForm.jsx 판매 등록 폼
• NFTList.jsx 판매중인 NFT 목록
• NFTCard.jsx NFT 개별 카드 + 입찰 / 즉시구매 / 수령 버튼 MarketplaceFees.jsx
• 수수료 현황 및 출금 버튼 /App.js

⚙️ 주요 라이브러리

npm install ethers wagmi viem @tanstack/react-query

---

5. 기능 설명 

(1) 지갑 연결 

wagmi 라이브러리로 카이로스 네트워크 연결, 지갑 연결 / 해제 기능.

(2) NFT 판매 등록

• Token ID, 최소 입찰가, 즉시 구매가 입력
• 15분 자동 종료 경매

(3) 경매 기능

• 입찰가가 기존보다 높아야 함
• 즉시 구매가는 경매 종료 + 자동 수령 처리
• 종료 시 판매자는 금액 수령, 수수료는 따로 쌓임

(4) NFT 목록 조회

• 판매 중인 모든 NFT 리스트
• 이미지, 현재 입찰가, 즉시 구매가, 남은 시간 표기
• 경매 종료 시 어두운 처리 (blur)

(5) 수수료 수령

• 오너만 가능
• 누적된 수수료 수령 버튼

 

 

---

6. 마무리 팁

https://choseolmin.github.io/nft-marketplace-frontend/

• ipfs:// → https://ipfs.io/ipfs/ 변환 필요
• 상태 업데이트는 이벤트 리스너가 없어서 리프레시 필요

---