Beaverworks Table Order Design System

테이블오더 React Native 제품을 근거로 재구성한 독립 디자인시스템입니다. 백오피스, 운영관리 3.0, 키오스크 디자인시스템의 토큰 계층·Storybook 문서 규격·검수 철학을 유지하되, TO의 1920×1200 가로형 화면, 매장 테마, 글자 크기 모드, 디지털메뉴, BF 고대비 경험을 서로 독립된 축으로 모델링합니다.

공개 분모는 token page 7개, component 33개, pattern 6개, template 7개입니다. 제품의 SVG 232개와 raster 67개도 Icon/Image catalog에서 전수 확인할 수 있습니다.

Package installation

npm install @sungbinhwang-beaverworksinc/design-system-to@beta \
  @emotion/react @emotion/styled react react-dom

컴포넌트와 토큰은 같은 패키지 진입점에서 가져옵니다. 앱 루트에서 생성된 토큰 CSS를 한 번 주입하고, 매장 테마·글자 크기·BF 대비는 서로 독립된 data-* 속성으로 선택합니다.

import {
  Button,
  generateToStylesheet,
} from '@sungbinhwang-beaverworksinc/design-system-to';

const tokenStyles = generateToStylesheet();

export function App() {
  return (
    <>
      <style>{tokenStyles}</style>
      <main
        data-to-theme="general"
        data-to-font-scale="1"
        data-to-bf-contrast="normal"
      >
        <Button>주문하기</Button>
      </main>
    </>
  );
}

Local Storybook

npm install
npm run storybook:install
npm run storybook

개발 서버 기본 주소는 http://localhost:3100/to/입니다. 배포용 정적 산출물은 npm run storybook:build로 storybook/dist에 생성하고, 로컬 미리보기는 npm --prefix storybook run preview 실행 후 http://localhost:3002/to/에서 확인합니다.

Verification

npm run verify
npm run qa:text-contrast
npm run build
node scripts/smoke-package-interop.mjs

계획과 근거는 docs/00-master-plan.md, 성공지표와 게이트는 docs/07-quality-gates.md를 기준으로 합니다. 최신 route·상호작용·computed-style· 접촉 시트 증거는 artifacts/verification에 저장됩니다.