Dashcipe

Dashcipe Docs

Dashcipe 무료 리소스 활용 문서

Dashcipe는 무료 대시보드 레퍼런스 플랫폼입니다. 레시피로 무엇을 만들지 결정하고, Starter Kit과 프롬프트로 구현을 시작하세요.

Workflow

무료 리소스 활용 순서

  1. 업종별 레시피를 열고 비즈니스 질문을 먼저 확인합니다.
  2. KPI 이유, 대체 지표, 실패 신호를 읽습니다.
  3. 코드나 프롬프트를 복사하기 전에 라이브 미리보기를 확인합니다.
  4. Starter Kit이 있으면 다운로드하고, 없으면 다음 공개 후보로 요청합니다.

Starter Kit

ZIP에 포함된 것

  1. overview.html, detail.html, settings.html로 브라우저에서 빠르게 미리봅니다.
  2. src/page.tsx, src/components, src/data/sample-data.ts를 Next.js App Router 프로젝트에 복사합니다.
  3. data/schema.json, tokens.json, Figma SVG, preview SVG, README, license, changelog, QA, support 문서를 포함합니다.

Install

Next.js 소스 적용

  1. 대표 레시피 상세 페이지에서 ZIP을 다운로드합니다.
  2. src/page.tsx와 src/components를 App Router 프로젝트에 복사합니다.
  3. tokens.json 값을 Tailwind theme 또는 CSS 변수로 매핑합니다.

Data

샘플 데이터 교체

  1. 첫 연동에서는 metrics, trend, segments, tableRows, alerts, states 구조를 유지합니다.
  2. data/schema.json을 백엔드 응답과 대시보드 UI 사이의 계약으로 사용합니다.
  3. KPI 카드, 차트, 테이블을 검증하기 쉽도록 데이터 그룹을 하나씩 교체합니다.

QA

실서비스 적용 전 점검

  1. desktop, tablet, mobile breakpoint를 확인합니다.
  2. empty, loading, error 상태가 통합 과정에서도 남아 있는지 확인합니다.
  3. 품질 기준 페이지를 적용 전 체크리스트로 사용합니다.

License

무료 리소스 라이선스

  1. 무료 번들은 개인/상업 프로젝트에 사용할 수 있습니다.
  2. 원본 Dashcipe 번들 파일을 재판매하거나 재배포할 수 없습니다.
  3. 내부 프로젝트 사본에는 LICENSE.md를 함께 보관합니다.