### Install and Set Up Lumir Design System

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Guides through the initial setup process for the Lumir Design System, including installing all project dependencies using pnpm and building the essential shared package, which is a prerequisite for other operations.

```bash
# 전체 의존성 설치 (pnpm 워크스페이스 사용)
pnpm install

# Shared 패키지 빌드 (필수!)
pnpm run build:shared
```

--------------------------------

### Lumir Design System New Developer Workflow

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Describes the initial steps for new developers to set up their environment and begin working with the Lumir Design System. This workflow includes installing dependencies, building the shared package, and running Storybook.

```bash
1. `pnpm install` - 의존성 설치
2. `pnpm run build:shared` - shared 빌드
3. `pnpm run storybook` - 스토리북 실행
```

--------------------------------

### Run Development Server for Lumir Design System

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/INSTALLATION_GUIDE.md

Command to start the development server for the Lumir Design System project.

```bash
npm run dev
```

--------------------------------

### GitHub Actions Workflow for NPM Publish

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/NPM_PUBLISH_GUIDE.md

A YAML configuration for a GitHub Actions workflow that automates publishing to NPM. It triggers on new tags, sets up Node.js, installs dependencies, builds packages, and publishes them using an NPM token.

```yaml
name: Publish to NPM

on:
  push:
    tags:
      - 'v*'

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          registry-url: 'https://registry.npmjs.org'
          
      - name: Install dependencies
        run: pnpm install
        
      - name: Build packages
        run: pnpm run build
        
      - name: Publish packages
        run: pnpm run publish:all
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

--------------------------------

### Reinstalling Node.js Dependencies

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/NPM_PUBLISH_GUIDE.md

Commands to remove existing node_modules directory and package-lock.json file, followed by a fresh installation of project dependencies using npm.

```bash
rm -rf node_modules package-lock.json
npm install
```

--------------------------------

### Run Storybook for Lumir Design System

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Explains how to launch the Storybook documentation server. This command automatically builds the shared package if needed and opens the Storybook interface in your browser for local development and component preview.

```bash
# 자동으로 shared 빌드 후 스토리북 실행
pnpm run storybook

# 브라우저에서 http://localhost:6006 열림
```

--------------------------------

### Lumir Design System Pre-Deployment Workflow

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Details the essential steps to prepare the Lumir Design System for deployment. This workflow ensures that the entire project is built correctly and that Storybook is also built for production, ready for hosting.

```bash
1. `pnpm run build` - 전체 빌드
2. `pnpm run storybook:build` - 스토리북 빌드
```

--------------------------------

### Lumir Design System Storybook Management Commands

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Provides a list of pnpm commands specifically for managing Storybook. These commands allow for optimized execution, building Storybook for deployment, and running it in a development mode with watch capabilities.

```bash
pnpm run storybook              # 최적화된 스토리북 실행
pnpm run storybook:build        # 배포용 스토리북 빌드
pnpm run storybook:dev          # 개발 모드 (watch 포함)
```

--------------------------------

### Verifying Files for NPM Deployment

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/NPM_PUBLISH_GUIDE.md

Commands to check which files will be included in the npm package, inspect the .npmignore file for exclusions, and review the files field in package.json to ensure correct package content.

```bash
npm pack --dry-run

cat .npmignore

grep -A 10 "\"files\"" package.json
```

--------------------------------

### Viewing NPM Package Version History

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/NPM_PUBLISH_GUIDE.md

Command to list all published versions of a specific npm package in JSON format, useful for tracking release history.

```bash
npm view @lumir/shared versions --json
```

--------------------------------

### Standard Changelog Markdown Template

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/NPM_PUBLISH_GUIDE.md

A markdown template for updating the CHANGELOG.md file, structured with sections for added, changed, fixed, and breaking changes for each release version.

```markdown
# Changelog

## [1.0.6] - 2024-01-XX

### Added
- SegmentButton 컴포넌트 추가
- System-02 지원 확장

### Changed  
- Button 컴포넌트 성능 개선
- TypeScript 타입 정의 개선

### Fixed
- Icon 컴포넌트 렌더링 이슈 수정
- CSS 스타일 우선순위 문제 해결

### Breaking Changes
- 없음
```

--------------------------------

### Lumir Design System Daily Development Workflow

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Outlines the recommended daily development process for active contributors. This workflow involves running the shared package in watch mode in a separate terminal and Storybook in another for continuous development and immediate feedback.

```bash
1. `pnpm run dev:shared` - shared watch 모드 (별도 터미널)
2. `pnpm run storybook` - 스토리북 실행 (별도 터미널)
```

--------------------------------

### Lumir Design System Build Commands

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Lists pnpm commands for building various parts of the Lumir Design System. These commands leverage Turbo for parallel processing and caching, enabling efficient builds for the entire project or specific packages like shared and systems.

```bash
pnpm run build                  # Turbo로 전체 빌드 (병렬)
pnpm run build:shared           # shared 패키지만 빌드
pnpm run build:systems          # system 패키지들만 빌드
pnpm run build:all              # storybook 제외 전체 빌드
pnpm run dev:shared             # shared watch 모드
```

--------------------------------

### Checking NPM Package Download Statistics

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/NPM_PUBLISH_GUIDE.md

Command to retrieve and display the download count for a specific npm package, providing insights into its usage.

```bash
npm view @lumir/shared downloads
```

--------------------------------

### Troubleshoot Version Conflicts in Lumir Design System Storybook

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Explains how to resolve Storybook version conflicts, particularly when the globally installed Storybook version might clash with the project's specified version. The solution involves navigating to the Storybook package and reinstalling dependencies to match its package.json.

```bash
# 스토리북 버전이 맞지 않는 경우
cd packages/storybook
pnpm install  # package.json 버전에 맞춰 재설치
```

--------------------------------

### Lumir Design System Project Directory Structure

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Illustrates the hierarchical file and directory structure of the Lumir Design System. It highlights key packages like 'shared' (foundation), 'system-01', 'system-02' (themes), and 'storybook' (documentation), along with root-level workspace configuration files.

```plaintext
lumir-design-system/
├── packages/
│   ├── shared/          # Foundation + Primitives (먼저 빌드 필요)
│   ├── system-01/       # Clean & Efficient 테마
│   ├── system-02/       # Modern & Friendly 테마
│   └── storybook/       # 문서화 (shared 의존성)
├── package.json         # 워크스페이스 루트
├── pnpm-workspace.yaml  # pnpm 워크스페이스 설정
└── pnpm-lock.yaml       # pnpm 락 파일
```

--------------------------------

### Troubleshoot Dependency Errors in Lumir Design System

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Outlines the process to fix dependency-related errors by first clearing the pnpm cache, then reinstalling all dependencies, and finally rebuilding the essential shared package to ensure consistency.

```bash
# 캐시 정리 후 재설치
pnpm run clean:deps
pnpm install
pnpm run build:shared
```

--------------------------------

### Rebuilding Project with pnpm

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/NPM_PUBLISH_GUIDE.md

Command to trigger a full rebuild of the project using the pnpm package manager, typically used after dependency changes or for a clean build.

```bash
pnpm run build
```

--------------------------------

### Clearing NPM Cache

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/NPM_PUBLISH_GUIDE.md

Command to force-clean the npm cache, which can resolve issues related to corrupted or outdated cached packages.

```bash
npm cache clean --force
```

--------------------------------

### Lumir Design System Dependency Management Commands

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Details pnpm commands for managing project dependencies effectively. These commands include options for a complete cleanup and reinstallation, clearing node_modules, and a thorough cache cleanup to resolve dependency issues.

```bash
pnpm run fresh:install          # 완전 정리 후 재설치
pnpm run clean                  # node_modules 정리
pnpm run clean:deps             # 캐시 포함 완전 정리
```

--------------------------------

### Toggle Lumir Design System Theme

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/INSTALLATION_GUIDE.md

Provides a TypeScript function to switch between 'light' and 'dark' themes by updating the 'data-theme' attribute on the HTML element. Includes an example of how to use it with a button.

```typescript
// 테마 전환 함수
const toggleTheme = () => {
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-theme');
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
  html.setAttribute('data-theme', newTheme);
};

// 사용법
<Button onClick={toggleTheme}>
  테마 전환
</Button>
```

--------------------------------

### Troubleshoot Storybook Infinite Loading in Lumir Design System

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/DEVELOPMENT_GUIDE.md

Provides steps to resolve Storybook infinite loading issues, which commonly occur if the shared package has not been built. The solution involves rebuilding the shared package and then restarting Storybook.

```bash
# shared 패키지가 빌드 안된 경우
pnpm run build:shared
cd packages/storybook
pnpm run storybook
```

--------------------------------

### Import Lumir Design System Components

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/INSTALLATION_GUIDE.md

Shows how to import core components from the `lumir-design-system-02` and `lumir-design-system-shared` packages.

```typescript
import { Button, TextDisplay, Card, Field } from "lumir-design-system-02";
import { Surface, Frame, Text, Icon } from "lumir-design-system-shared";
```

--------------------------------

### New Integrated Storybook Directory Structure

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/SYSTEM_THEME_GUIDE.md

Shows the proposed new Storybook directory structure, consolidating all system themes under a single 'Universal' directory for improved comparison and theme selection via toolbar.

```text
packages/storybook/stories/
├── 06-Universal/
│   ├── Badge.stories.tsx    ← 모든 시스템 테마 포함
│   ├── Button.stories.tsx   ← 툴바에서 테마 선택 가능
│   ├── Card.stories.tsx     ← 다크/라이트 모드 선택 가능
│   └── Checkbox.stories.tsx
```

--------------------------------

### Component Modification for Multi-System Support

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/SYSTEM_THEME_GUIDE.md

Demonstrates the correct way to adapt components for different design systems by only changing prop values, ensuring the underlying component structure remains consistent across systems.

```jsx
// ✅ 올바른 방법: props 값만 변경
// System-01
<Button 
  variant="outlined" 
  colorScheme="secondary" 
  size="md"
  borderRadius="sm"
/>

// System-02  
<Button 
  variant="filled" 
  colorScheme="primary" 
  size="lg"
  borderRadius="lg"
/>
```

--------------------------------

### Migrate Button Component to Lumir Design System

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/INSTALLATION_GUIDE.md

Compares a traditional HTML button implementation with its equivalent using the Lumir Design System's `Button` component, demonstrating how to apply design system props like `variant`, `colorScheme`, and `size`.

```typescript
<button
  onClick={() => setFloor(1)}
  style={{
    padding: '12px 24px',
    backgroundColor: floor === 1 ? '#8B5CF6' : '#F3F4F6',
    color: floor === 1 ? 'white' : '#374151',
    borderRadius: '8px',
    border: 'none',
    cursor: 'pointer'
  }}
>
  1층
</button>
```

```typescript
<Button
  variant={floor === 1 ? "filled" : "outlined"}
  colorScheme="primary"
  size="md"
  onClick={() => setFloor(1)}
>
  1층
</Button>
```

--------------------------------

### Existing Storybook Directory Structure

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/SYSTEM_THEME_GUIDE.md

Illustrates the previous Storybook directory structure where stories were separated by design system, leading to potential duplication and difficulty in cross-system comparison.

```text
packages/storybook/stories/
├── 04-System-01/
│   ├── Badge.stories.tsx
│   ├── Button.stories.tsx
│   ├── Card.stories.tsx
│   └── Checkbox.stories.tsx
├── 05-System-02/
│   ├── Badge.stories.tsx
│   ├── Button.stories.tsx
│   ├── Card.stories.tsx
│   └── Checkbox.stories.tsx
```

--------------------------------

### Verify Lumir Design System CSS in Browser

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/INSTALLATION_GUIDE.md

Instructions and CSS snippet to check if Lumir Design System tokens are correctly loaded and applied in the browser's developer tools, specifically looking at the `data-theme` attribute on the HTML tag.

```css
/* F12 > Elements > html 태그에서 확인 */
html[data-theme="light"] {
  --foundation-foundation-color-blue-light-50: #00a0e9;
  /* 629개 토큰이 정상 로드되었는지 확인 */
}
```

--------------------------------

### System-01 Professional Design Tokens

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/SYSTEM_THEME_GUIDE.md

Defines the core design tokens for System-01, characterized by professional and calm aesthetics, including specific color values and border radii.

```json
{
  "color": {
    "primary-1": { "value": "#374151" },   // 차분한 그레이
    "secondary-1": { "value": "#F9FAFB" }  // 밝은 그레이
  },
  "radius": {
    "sm": { "value": "2px" },             // 직각에 가까움
    "md": { "value": "4px" }
  }
}
```

--------------------------------

### System-02 Friendly Design Tokens

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/SYSTEM_THEME_GUIDE.md

Defines the core design tokens for System-02, characterized by friendly and bright aesthetics, including specific color values and larger border radii.

```json
{
  "color": {
    "primary-1": { "value": "#3B82F6" },   // 밝은 블루
    "secondary-1": { "value": "#FEF3C7" }  // 따뜻한 옐로우
  },
  "radius": {
    "sm": { "value": "6px" },             // 둥근 모서리
    "md": { "value": "12px" }
  }
}
```

--------------------------------

### Detect System Color Scheme for Lumir Design System

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/INSTALLATION_GUIDE.md

Automatically sets the 'data-theme' attribute based on the user's system color scheme preference (light/dark). Uses `window.matchMedia` and `useEffect` for dynamic updates.

```typescript
// 시스템 테마 자동 감지
useEffect(() => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  const handleChange = () => {
    document.documentElement.setAttribute(
      'data-theme', 
      mediaQuery.matches ? 'dark' : 'light'
    );
  };
  
  handleChange();
  mediaQuery.addEventListener('change', handleChange);
  
  return () => mediaQuery.removeEventListener('change', handleChange);
}, []);
```

--------------------------------

### Set data-theme Attribute in HTML

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/INSTALLATION_GUIDE.md

Illustrates the essential `data-theme` attribute that must be set on the HTML tag to activate Lumir Design System theme tokens, supporting 'light' and 'dark' modes.

```html
<html lang="ko" data-theme="light">
```

--------------------------------

### Correct CSS Import in Next.js layout.tsx

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/INSTALLATION_GUIDE.md

Shows the recommended method for importing Lumir Design System CSS files in a Next.js `layout.tsx` file, using package exports paths to avoid conflicts and ensure proper loading.

```typescript
// app/layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

// Lumir Design System CSS 임포트 (exports 경로 사용)
import "lumir-design-system-shared/foundation-tokens";
import "lumir-design-system-02/styles";
import "lumir-design-system-02/tokens";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko" data-theme="light">
      <head>
        <link rel="manifest" href="/manifest.json" />
      </head>
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  );
}
```

--------------------------------

### Incorrect CSS Import in Next.js globals.css

Source: https://github.com/hwang1401/lds.0.0.2/blob/main/docs/INSTALLATION_GUIDE.md

Demonstrates the wrong way to import Lumir Design System CSS files directly into `globals.css`, which can lead to conflicts and path errors.

```css
/* globals.css - 이렇게 하면 안됨 */
@import "lumir-design-system-shared/dist/styles.css";
@import "lumir-design-system-02/dist/styles.css";
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.