프로젝트 소개

Ludo-Base는 Base 네트워크 상에 구축된 탈중앙화 Ludo 게임 경험으로, Farcaster 대응을 위해 설계된 Next.js 16 애플리케이션입니다. 이 프로젝트는 글래스모피즘 대시보드 인터페이스와 온체인 지갑 연결, 멀티플레이어 룸 플로우를 결합했습니다. 주요 기능 - 게임 로비: 필(pill) 스타일의 섹션 헤더, 가로형 게임 모드 선택, 매치 타입(1v1, 2v2, 4P), 숫자 입력 및 스테퍼 컨트롤과 퀵 셀렉트 칩이 포함된 참가비 베팅 영역, 그리고 QUICK MATCH 및 WITH FRIENDS 호출 버튼으로 구성된 설정 플로우를 제공합니다. - 게임플레이: app/components/Board.tsx에서 핵심 Ludo 보드를 구현하며, app/components/SnakesBoard.tsx는 뱀과 사다리 변형 버전을 제공합니다. - 멀티플레이어: PeerJS와 hooks/TeamUpContext.tsx를 통해 친구와 함께 플레이하기 위한 룸 호스트/참가 상태를 관리합니다. - 데이터 유지: lib/matchRecorder.ts에 Supabase 기반의 매치 결과 유지 헬퍼가 포함되어 있습니다. - 지갑 및 온체인: Wagmi와 Coinbase OnchainKit을 통해 Base 네트워크를 위한 지갑 통합을 제공합니다. 기술 스택 Next.js 16 (App Router), React 19, TypeScript 5, Tailwind CSS 4, Framer Motion, Wagmi + Coinbase OnchainKit, Supabase 및 PeerJS. UI 방향성 시각적 방향은 다크 터미널 글래스 표면을 기반으로 하며, 포커스 및 활성 상태에는 시안 색상(#00E5FF) 액센트를 사용합니다. 배경은 숯색/흑연 그라데이션(#0B0F14 ~ #141A22)에 미세한 텍스처 노이즈를 추가하고, 보조 텍스트에는 고정폭 글꼴을 사용합니다. 또한 README에는 절대 경로 기반의 저장소 파일 경로, PascalCase 리액트 컴포넌트 파일명, 모바일과 데스크톱 간에 일관되게 유지되는 짧고 행동 중심적인 인터페이스 문구에 대한 컨벤션이 기록되어 있습니다. 로컬 실행 방법 Node.js 20+ 및 npm이 필요합니다. npm install로 의존성을 설치한 후 npm run dev로 개발 서버를 시작하면 http://localhost:3000에서 앱이 실행됩니다. 프로덕션 빌드는 npm run build 후 npm start를 사용하며, npm run lint를 통해 린팅이 가능합니다. 지갑/네트워크, Supabase, Farcaster/Neynar 통합을 위한 값이 포함된 .env.local 파일을 생성해야 합니다. 상태 및 주의사항 README에 따르면 2026년 3월 기준 현재 상태이며, 최근 변경 로그는 로비 레이아웃 및 패딩 일치, 베팅 컨트롤 스타일링, 매치 타입 상태 및 테마/푸터 조정에 집중되어 있습니다. 백엔드 연결이 확장되는 동안 일부 패널은 여전히 플레이스홀더 또는 모의 데이터를 사용하며, TeamUp 및 매치 유지 플로우는 재연결 및 예외 케이스에 대한 지속적인 강화가 필요합니다. 저장소에는 게임 디자인 문서와 시각적 에셋 가이드가 포함되어 있습니다.