Release v0.5.1 · ersione/ersione-design-system

Ersione Design System의 첫 GitHub 릴리스입니다. 초기 토큰부터 v0.5.1까지 구현한 기능을 한 번에 정리합니다. 여러 프로젝트에서 같은 메뉴·입력·색상·수치 표현을 사용할 수 있도록 만든 공유 패키지입니다.

포함 기능

디자인 토큰·테마: 블루/오렌지 브랜드 × 라이트/다크 테마, 타이포그래피·간격·모서리·선·상태 토큰. CSS 변수와 JSON으로 제공합니다.
컬러 팔레트: blue / teal / orange / purple / rose / gray. 각 색은 숫자·강조용 기본색, 배지용 연한 tint, 넓은 영역용 더 옅은 subtle을 제공합니다. 인원·급여·포켓몬 형태 같은 데이터 의미는 소비 프로젝트에서 매핑합니다.
공통 메뉴: Navigation / NavigationLink, SM/MD/LG, 선택적 아이콘, 현재 메뉴 표시와 키보드 포커스. 라우터 링크는 as로 연결합니다.
수치·데이터 표현: DataHighlight / HighlightPanel / DataPanel / DataBadge. 크기·단위·보조 변화율·자료 없음 상태와 옅은 배경 위 숫자 강조 패턴을 제공합니다.
기본 UI: Button, Input, Select, Textarea, Checkbox, Radio, Switch, Badge, Alert, Tabs, Dialog, Toast, Progress, Skeleton, Accordion, Pagination, Card, Metric, MetricPanel, Table / TableContainer.
상호작용: 탭 키보드 이동, Dialog 초기 포커스·포커스 순환·Escape·닫은 뒤 포커스 복귀, 로딩 중 중복 제출 방지, 폼·페이지 경계 처리. Select는 지원 브라우저에서 펼친 목록까지 테마를 적용하고 비지원 환경에서는 네이티브 picker를 유지합니다.
차트 테마: readChartTheme / observeChartTheme으로 팔레트·폰트·선·그리드·범례·툴팁 설정을 읽고 테마 변경을 감지합니다. Canvas 크기 변경으로 차트를 불필요하게 다시 만들지 않습니다. 차트 라이브러리와 데이터 계산은 소비 앱이 담당합니다.
React와 정적 사용: React 19 컴포넌트·JavaScript·TypeScript 선언, 바닐라 HTML/Vue에서 함께 쓰는 CSS·토큰, Ersione 심볼을 제공합니다.

설치와 시작

Node.js 20.11 이상이 필요하며 공개 GitHub 저장소에서 설치합니다. React 컴포넌트를 사용할 때는 React 19가 필요합니다.

npm install github:ersione/ersione-design-system#v0.5.1

import '@ersione/design-system/styles.css';
import { Navigation, NavigationLink, DataPanel, DataBadge, DataHighlight } from '@ersione/design-system/react';

<div className="eds-theme" data-brand="blue" data-dark="false">
  <Navigation aria-label="주 메뉴">
    <NavigationLink href="/" active>개요</NavigationLink>
    <NavigationLink href="/settings">설정</NavigationLink>
  </Navigation>
  <DataPanel tone="teal">
    <DataBadge tone="teal">신규 취득 <DataHighlight tone="teal" unit="명">156</DataHighlight></DataBadge>
  </DataPanel>
</div>

Git 설치 시 prepare가 JavaScript와 타입 선언을 빌드합니다. GitHub 릴리스이며 npm 레지스트리에는 게시하지 않았습니다. 이미 v0.5.1을 설치한 Company Lens·PogoAtlas는 이번 릴리스 등록만으로 다시 설치할 필요가 없습니다.

예시·문서

검증과 제공 범위

v0.5.1에서 SSR·폼·컴포넌트 계약 9개, Chromium 시나리오 14개, 네 테마의 색상 대비와 정적 산출물을 검증했습니다. 브라우저 검사에는 320/390/1280px, 메뉴·탭·모달·폼·수치 배지와 공개 예제가 포함됩니다.

React 외의 Vue 전용 컴포넌트 래퍼와 바닐라 JavaScript 컨트롤러는 아직 제공하지 않습니다. 폰트 로딩·전역 reset·라우팅·도메인별 색상 매핑은 소비 앱이 담당합니다. Figma 파일은 초기 디자인 자료이며 코드와 자동 동기화되지 않습니다. Firefox/Safari 및 전체 스크린리더 검증은 완료 범위가 아닙니다.

기존 amber 이름은 제거되었으며 orange를 사용합니다. data-people/salary/flow 등 기존 데이터 역할 별칭은 유지되지만 새 코드에는 이름 기반 팔레트를 권장합니다.

릴리스는 기존 **v0.5.1 태그(85b7275)**에 연결합니다. 이후 main의 변경은 문서 보완이며 태그와 패키지 코드는 이동하지 않습니다. 다음 릴리스부터는 이 릴리스 이후의 사용자에게 의미 있는 변경과 업데이트 방법을 기록합니다.

Navigation Menu

Repository navigation

v0.5.1

Choose a tag to compare

Sorry, something went wrong.