Install

패키지 매니저를 사용하여 Jayh Design System을 프로젝트에 설치하세요. 프레임워크에 상관없이 동작합니다.

Install Jayh Design System in your project using a package manager. It works regardless of framework.

Package Manager Install

선호하는 패키지 매니저를 사용하여 설치할 수 있습니다.

You can install using your preferred package manager.

npm

npm install @jayh/web

Bun

bun add @jayh/web

Yarn

yarn add @jayh/web

pnpm

pnpm add @jayh/web

CSS Import

번들러를 사용하는 경우 CSS를 직접 import할 수 있습니다. 또는 HTML link 태그를 사용하세요.

If you use a bundler, you can import CSS directly. Alternatively, use an HTML link tag.

번들러에서 Import

Import from Bundler

Vite, Webpack 등의 번들러를 사용하는 프로젝트에서는 CSS 파일을 직접 import합니다.

In projects using bundlers like Vite or Webpack, import the CSS file directly.

CSS

@import '@jayh/web';

HTML Link 태그

HTML Link Tag

번들러 없이 사용하는 경우 link 태그로 CSS를 불러옵니다.

When using without a bundler, load CSS via a link tag.

HTML

<link rel="stylesheet" href="node_modules/@jayh/web/dist/jayh.css">

Token CSS

디자인 토큰 CSS 변수를 포함하려면 토큰 파일도 함께 불러옵니다.

To include design token CSS variables, also load the token file.

HTML

<link rel="stylesheet" href="node_modules/@jayh/tokens/build/web/tokens.css">

Dark Theme

다크 테마를 지원하려면 다크 테마 토큰 파일을 추가합니다. <html data-theme="dark">로 전환됩니다.

To support dark theme, add the dark theme token file. Switch with <html data-theme="dark">.

HTML

<link rel="stylesheet" href="node_modules/@jayh/tokens/build/web/tokens.dark.css">

Optional JS

Jayh의 모든 시각적 스타일링은 JS 없이 동작합니다. JS는 인터랙티브 동작(dialog, tabs, alert, theme toggle)만 담당합니다.

All visual styling in Jayh works without JS. JS only handles interactive behavior (dialog, tabs, alert, theme toggle).

ES Module Import

JavaScript

import { initJayh } from '@jayh/web/js';

Script 태그

Script Tag

HTML

<script type="module" src="node_modules/@jayh/web/dist/jayh-js.js"></script>

JS가 제공하는 기능

Features Provided by JS

Dialog 열기/닫기 동작 (showModal(), close()) Open/close behavior (showModal(), close())

Tabs 탭 전환 및 패널 표시/숨김 Tab switching and panel show/hide

Alert 알림 닫기(dismiss) 동작 Alert dismiss behavior

Theme 라이트/다크 테마 토글 Light/dark theme toggle

참고: 모든 시각적 스타일링은 JS 없이도 정상적으로 표시됩니다. JS는 순수하게 인터랙션만 처리합니다.

Note: All visual styling renders correctly without JS. JS purely handles interactions.

Framework Integration

Jayh는 프레임워크에 의존하지 않습니다. 어떤 환경에서든 CSS를 import하면 바로 사용할 수 있습니다.

Jayh has no framework dependency. Simply import the CSS in any environment and start using it.

React

App.jsx (또는 App.tsx)에서 CSS를 import합니다.

Import CSS in App.jsx (or App.tsx).

App.jsx

import '@jayh/tokens/build/web/tokens.css';
import '@jayh/tokens/build/web/tokens.dark.css';
import '@jayh/web/dist/jayh.css';

function App() {
  return (
    <div className="jayh-container">
      <button className="jayh-btn" data-variant="primary">Click me</button>
    </div>
  );
}

Vue

main.js에서 CSS를 import합니다.

Import CSS in main.js.

main.js

import '@jayh/tokens/build/web/tokens.css';
import '@jayh/tokens/build/web/tokens.dark.css';
import '@jayh/web/dist/jayh.css';

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Svelte

+layout.svelte에서 CSS를 import합니다.

Import CSS in +layout.svelte.

+layout.svelte

<script>
  import '@jayh/tokens/build/web/tokens.css';
  import '@jayh/tokens/build/web/tokens.dark.css';
  import '@jayh/web/dist/jayh.css';
</script>

<slot />

Plain HTML

HTML 파일에 link 태그로 직접 추가합니다.

Add directly to your HTML file using link tags.

HTML

<!DOCTYPE html>
<html lang="ko" data-theme="light">
<head>
  <link rel="stylesheet" href="node_modules/@jayh/tokens/build/web/tokens.css">
  <link rel="stylesheet" href="node_modules/@jayh/tokens/build/web/tokens.dark.css">
  <link rel="stylesheet" href="node_modules/@jayh/web/dist/jayh.css">
</head>
<body>
  <div class="jayh-container">
    <button class="jayh-btn" data-variant="primary">Click me</button>
  </div>
  <script type="module" src="node_modules/@jayh/web/dist/jayh-js.js"></script>
</body>
</html>