🎨 MyZubster NFT 대시보드를 구축한 방법 – React + TypeScript 여정

Tari NFT를 위한 백엔드 Rust 템플릿을 구축하고 이를 Docker화한 후, 다음 과제는 사용자 친화적인 인터페이스를 만드는 것이었습니다. 저는 블록체인 경험이 없는 사람이라도 누구나 사용할 수 있는 대시보드를 원했습니다.

그 결과물은 MyZubster NFT 대시보드입니다. 이는 Tari에서 NFT 컬렉션을 관리하기 위한 완전한 React + TypeScript 프론트엔드입니다.

이 글에서는 대시보드를 작동하게 만드는 아키텍처(Architecture), 디자인 결정, 그리고 주요 컴포넌트(Component)들에 대해 설명하겠습니다.

🧠 왜 React + TypeScript인가?

여러 가지 이유로 TypeScript를 사용한 React 19를 선택했습니다:

• 타입 안정성 (Type Safety): TypeScript는 컴파일 타임(Compile time)에 오류를 잡아내어 런타임(Runtime) 버그를 줄여줍니다.
• 컴포넌트 재사용성 (Component Reusability): React의 컴포넌트 모델은 복잡한 UI를 구축하고 유지 관리하기 쉽게 만듭니다.
• 풍부한 생태계 (Rich Ecosystem): Vite, ESLint, 그리고 방대한 커뮤니티 패키지 라이브러리가 존재합니다.
• 성능 (Performance): Vite의 빠른 HMR(Hot Module Replacement)은 개발을 즐겁게 만듭니다.

📁 아키텍처 개요 (Architecture Overview)

대시보드는 깔끔한 컴포넌트 기반 아키텍처를 따릅니다:
src/
├── components/
│ ├── ConnectWallet.tsx # 지갑 연결 UI
│ ├── CreateCollection.tsx # 새로운 NFT 컬렉션 생성
│ ├── MintNFT.tsx # NFT 민팅 (Mint)
│ └── NFTGallery.tsx # NFT 갤러리 표시
├── hooks/
│ └── useTariWallet.ts # 지갑 연결 로직
├── App.tsx # 메인 대시보드
└── App.css # 글로벌 스타일
text

🔐 ConnectWallet – 게이트웨이

지갑 연결 컴포넌트는 사용자가 가장 먼저 보게 되는 요소입니다:

tsx
const ConnectWallet: React.FC = () => {
...