@mega_ui/react

v1.1.0

Published

18 days ago

Composable React components for company web applications.

0High
0Medium
0Low

dr-coton

react ui components design-system data-grid charts rich-text-editor pdf-viewer typescript

Mega UI

회사 웹을 컴포넌트 조합으로 만드는 React UI 라이브러리입니다. React 19.2+ · TypeScript · SCSS · Vite. 요청 목록 150종과 실무 조합 컴포넌트를 제공하며, 색·치수·타입 스케일은 Mega UI가 정한 디자인 토큰을 따릅니다. Tailwind, CSS-in-JS, 별도 상태 관리, 모노레포 도구를 사용하지 않습니다.

실행

Node.js 22.12 이상이 필요합니다. Node 22 LTS 환경을 권장합니다.

npm ci
npm run dev

터미널에 표시된 주소에서 기존·확장 컴포넌트 카탈로그와 화면 예제(금융·계정·업무·커머스·AI 등, 상단 메뉴 "화면 예제"), 그리고 소스 코드를 확인합니다. 현재 개수는 사이트에서 확인할 수 있습니다.

실무 상태·조합 카탈로그에서 저장 실패·재시도, 페이지 이탈 확인, 일부 일괄 작업 실패, 원격 선택과 차트 상태를 확인할 수 있습니다. 개발 서버의 /readiness.html은 브라우저 회귀 검사를 실행합니다. 수정된 API와 검증 방법을 참고하세요.

npm run lint:ux     # UX 라이팅 금지 표현 검사 (문맥 검토는 별도)
npm run check       # 타입, 포맷, 빌드 결과 테스트, 문서 사이트 빌드
npm run build       # dist/: ESM + 타입 선언 + styles.css
npm run build:docs  # site/: 정적 예제 사이트 + AI 문서
npm run preview    # 빌드한 예제 사이트 확인
npm run format
npm pack           # 실제 소비 프로젝트에서 검증할 로컬 패키지

다른 프로젝트에서 사용

React 19와 ESM 번들러(Vite, Next.js 등)가 필요합니다. 모든 모듈에 'use client'가 붙어 있어 Next.js App Router에서 그대로 쓸 수 있습니다.

npm install @mega_ui/react

import { Button, Card, Container, Heading, Stack, Text } from '@mega_ui/react';
import '@mega_ui/react/styles.css'; // 앱 진입점에서 한 번만

export function Welcome() {
  return (
    <Container size="md">
      <Card>
        <Stack gap={4}>
          <Heading level={1}>우리 팀의 워크스페이스</Heading>
          <Text tone="muted">같은 언어로 더 빠르게 만듭니다.</Text>
          <Button>시작하기</Button>
        </Stack>
      </Card>
    </Container>
  );
}

기본 서체는 Pretendard입니다. 폰트 파일은 번들하지 않으므로 소비 앱에서 직접 불러오세요. 불러오는 방법은 시작하기의 폰트 절에 있습니다.

설치가 끌어오는 런타임 의존성은 React뿐입니다. 무거운 엔진(react-data-grid, echarts, @tiptap/*, pdfjs-dist)은 각각 하나의 서브경로에만 붙어 있고 선택적 peer dependency이므로, 그 서브경로를 쓰는 프로젝트만 설치합니다. 서브경로별로 필요한 패키지는 시작하기의 표에 있습니다. 전문 그리드는 @mega_ui/react/data-grid와 @mega_ui/react/data-grid.css로 별도 로드합니다. QR 인코딩용 qrcode-generator는 번들에 포함하며, 쓰지 않으면 트리셰이킹으로 빠집니다. ESM만 제공하며, React 19.2 이상을 지원합니다. React 18과 CommonJS는 현재 지원 대상으로 검증하지 않았습니다.

새 컴포넌트의 디자인 규칙과 자동 검사 범위는 디자인 계약에 있습니다.

구조와 선택

src/components/     레이아웃, 타이포그래피, 컨트롤, 표면, 패턴, 내비게이션, 오버레이, 데이터
src/styles/         SCSS 파트와 CSS 변수 토큰
examples/           실제 컴포넌트를 사용하는 Vite 예제 사이트
docs/               사람과 AI가 함께 읽는 Markdown 문서
tests/              빌드 산출물에 대한 Node 기본 테스트

SCSS + CSS 변수: SCSS로 스타일을 분리하고, --mega-* 변수로 브랜드와 테마를 변경합니다. 소비 앱에 Sass 설치는 필요 없습니다.
단일 패키지: 현재는 라이브러리와 문서 사이트만 있어 npm 하나로 관리합니다. 독립 배포 단위가 생기면 workspace를 도입합니다.
조합 우선: 레이아웃 → 기본 컴포넌트 → 반복 패턴 → 화면 예제로 확장합니다. 모든 화면을 하나의 거대한 설정 객체로 표현하지 않습니다.
브라우저 기본 동작: 폼은 네이티브 요소, 모달은 네이티브 <dialog>의 showModal()을 사용합니다. AutoComplete는 native datalist, Combobox는 제어 가능한 listbox를 사용하며 Menu와 Popover는 viewport 경계에 맞춰 위치를 보정합니다.
문서 우선 AI 지원: llms.txt는 문서 인덱스이며 MCP 서버가 아닙니다. 현재 가이드로 사용법을 전달하고, 실제 검색/조회 수요가 생기면 같은 문서를 제공하는 MCP를 추가합니다.

문서

기존 동일 이름 36종을 유지하고, 기존 구현 19종을 새 이름으로 재사용했으며, 95종을 구현·조합했습니다. Spreadsheet 수식 엔진, 반복 일정, Gantt 의존성 계산, 파일 전송 서버·AI 백엔드는 포함하지 않습니다. MCP 서버와 스크린 리더 전수 검증은 후속 과제입니다.

빌드 설정 참고: Vite library mode, Sass CSS 변수와 Sass 변수의 차이.

토큰·치수 사다리는 디자인 방향에 정리했습니다.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Mega UI

실행

다른 프로젝트에서 사용

구조와 선택

문서