데브허브 | DEVHUB | Build an AMAZING 8-Bit Dashboard! (Next.js, v0, Shadcn, 8bitcn)Build an AMAZING 8-Bit Dashboard! (Next.js, v0, Shadcn, 8bitcn)
- Next.js, V0, Shadcn, 8bitcn을 활용하여 레트로 8비트 스타일의 대시보드를 구축하는 과정을 시연합니다. 🎮
- Vercel의 V0를 사용하여 사이드바, 통계, 제품 테이블을 포함하는 Shadcn 기반의 대시보드 페이지를 신속하게 생성합니다. 🚀
- 아바타, 버튼, 입력, 배지, 카드, 드롭다운 메뉴, 테이블 등 필요한 Shadcn UI 컴포넌트들을 프로젝트에 추가하고 설정합니다. 🧩
- 8비트 스타일을 구현하기 위해 8bitcn 라이브러리의 해당 컴포넌트(예: 8bitCard, 8bitButton)를 설치하고 기존 Shadcn 컴포넌트를 대체합니다. 👾
- Google Fonts의 'Press Start 2P' 폰트를 전역적으로 적용하여 대시보드의 모든 텍스트를 픽셀화된 8비트 스타일로 변환합니다. 🔠
- 입력 필드의 불필요한 스타일을 제거하고, 테이블에
borderless 변형을 적용하는 등 8비트 미학에 맞게 UI 요소를 세밀하게 조정합니다. ✨
next-themes 라이브러리를 사용하여 대시보드에 라이트/다크 모드 전환 기능을 추가하고, 8비트 스타일에서도 멋지게 작동함을 보여줍니다. 🌙
- 8bitcn 프로젝트에 대한 기여(GitHub 이슈, Discord 채널)를 장려하며, 오픈소스 협업의 중요성을 강조합니다. 🤝
- 완성된 프로젝트 코드는 공개 GitHub 저장소에서 언제든지 접근할 수 있도록 제공됩니다. 💾