npm - designbase-wp-library - Versions diffs - 0.6.0 → 0.7.0 - Mend

designbase-wp-library 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -1,196 +1,163 @@
 # DesignBase WordPress Library (DEWP)
-워드프레스 플러그인용 재사용 가능한 프론트엔드 라이브러리입니다.
+[![npm version](https://img.shields.io/npm/v/designbase-wp-library.svg)](https://www.npmjs.com/package/designbase-wp-library)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-> **DEWP** - DesignBase WordPress Library의 약자로, `mcp-` 접두사를 `dewp-`로 변경한 최신 버전입니다.
+워드프레스 플러그인 개발을 위한 재사용 가능한 프론트엔드 UI 라이브러리입니다.
+> **DEWP** = **D**esignBase W**o**rdPress Library
 ## ✨ 특징
-- **모듈화된 구조**: TypeScript로 작성된 컴포넌트 기반 아키텍처
-- **체계적인 SCSS**: 변수, 믹스인, 컴포넌트를 체계적으로 구성
-- **반응형 디자인**: 모바일 우선 접근법으로 모든 디바이스 지원
-- **접근성 고려**: WCAG 가이드라인을 준수하는 컴포넌트
-- **TypeScript 지원**: 완전한 타입 정의와 ES6+ 모듈 지원
-- **WordPress 최적화**: 플러그인 개발에 특화된 컴포넌트
+- 🎨 **THEME_GUIDE.md v0.1.16 기준** - 최신 디자인 토큰 시스템
+- 🌙 **자동 다크모드** - theme.css와 완벽 통합
+- 📱 **완전 반응형** - 모바일 우선 설계
+- ♿ **접근성 준수** - WCAG 가이드라인 적용
+- 🔧 **TypeScript 지원** - 완전한 타입 정의
+- 🚀 **CDN 지원** - unpkg, jsDelivr
+---
 ## 📦 설치
-### 기본 설치
+### NPM
 ```bash
 npm install designbase-wp-library
 ```
-### 추가 기능 (선택사항)
-#### npm 설치 방식
-```bash
-# 아이콘 시스템 사용시
-npm install @designbasekorea/icons-webfont
-# 테마 시스템 사용시
-npm install @designbasekorea/theme
-```
-#### CDN 방식 (권장)
+### CDN (권장)
 ```html
-<!-- 아이콘 시스템 -->
-<link rel="stylesheet" href="https://unpkg.com/@designbasekorea/icons-webfont@latest/dist/webfont/icons.css">
-<!-- 테마 시스템 -->
+<!-- 1. Theme System (필수) -->
 <link rel="stylesheet" href="https://unpkg.com/@designbasekorea/theme@latest/dist/css/theme.css">
-```
-> **💡 팁**: CDN 방식을 사용하면 자동으로 최신 버전이 적용되며, 별도 설치나 업데이트가 필요 없습니다!
-### 문서/데모 사이트
-- 최신 문서와 라이브 데모: [DEWP Docs & Examples](https://designbasekorea.github.io/designbase-wp-library/)
-### 로컬 테스트
-로컬에서 라이브러리를 테스트하려면:
-```bash
-# 1. 라이브러리 빌드
-npm run build
-# 2. 로컬 서버 실행
-python3 -m http.server 8000
-# 3. 브라우저에서 테스트
-# http://localhost:8000/test/local-test.html
-```
-> **💡 팁**: `test/` 폴더는 `.gitignore`에 포함되어 있어 Git에 커밋되지 않습니다.
-> **🔒 보안**: `src/` 폴더(소스 코드)도 `.gitignore`에 포함되어 있어 핵심 코드가 공개되지 않습니다.
-### CDN 사용
-#### 기본 DEWP 라이브러리
-```html
-<!-- CSS -->
-<link rel="stylesheet" href="https://unpkg.com/designbase-wp-library@latest/dist/css/dewp.min.css">
-<!-- JavaScript -->
-<script src="https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js"></script>
-```
-#### 아이콘 시스템 (선택사항)
-```html
-<!-- 아이콘 CSS -->
+<!-- 2. Icon System (필수) -->
 <link rel="stylesheet" href="https://unpkg.com/@designbasekorea/icons-webfont@latest/dist/webfont/icons.css">
-```
-#### 테마 시스템 (선택사항)
-```html
-<!-- 테마 CSS -->
-<link rel="stylesheet" href="https://unpkg.com/@designbasekorea/theme@latest/dist/css/theme.css">
-```
-#### 전체 패키지 (권장)
-```html
-<!-- 테마 시스템 -->
-<link rel="stylesheet" href="https://unpkg.com/@designbasekorea/theme@latest/dist/css/theme.css">
-<!-- 아이콘 시스템 -->
-<link rel="stylesheet" href="https://unpkg.com/@designbasekorea/icons-webfont@latest/dist/webfont/icons.css">
-<!-- DEWP 라이브러리 -->
+<!-- 3. DEWP Library -->
 <link rel="stylesheet" href="https://unpkg.com/designbase-wp-library@latest/dist/css/dewp.min.css">
 <script src="https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js"></script>
 ```
-## 🔗 빠른 시작 링크
+---
-- 문서/예제: https://designbasekorea.github.io/designbase-wp-library/
-- npm: `npm i designbase-wp-library@latest`
-- unpkg: `https://unpkg.com/designbase-wp-library@latest/dist/{css|js}/dewp.min.{css|js}`
-- jsDelivr: `https://cdn.jsdelivr.net/npm/designbase-wp-library@latest/dist/{css|js}/dewp.min.{css|js}`
+## 🚀 빠른 시작
-## 🎯 사용법
+### 기본 사용법
-### JavaScript 사용
-#### 브라우저에서 직접 사용
 ```html
-<script src="https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js"></script>
-<script>
-  // 전역 DEWP 객체 사용
-  window.DEWP.showToast('안녕하세요!', 'success', 3000, 'md');
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DEWP 라이브러리</title>
-  // 모달 표시
-  window.DEWP.showModal({ title: '알림', content: '모달이 표시됩니다!', size: 'md' });
-</script>
+  <!-- CDN -->
+  <link rel="stylesheet" href="https://unpkg.com/@designbasekorea/theme@latest/dist/css/theme.css">
+  <link rel="stylesheet" href="https://unpkg.com/@designbasekorea/icons-webfont@latest/dist/webfont/icons.css">
+  <link rel="stylesheet" href="https://unpkg.com/designbase-wp-library@latest/dist/css/dewp.min.css">
+</head>
+<body>
+  <!-- 버튼 -->
+  <button class="dewp-button dewp-button--primary">Primary Button</button>
+  <!-- 카드 -->
+  <div class="dewp-card">
+    <div class="dewp-card-header">카드 제목</div>
+    <div class="dewp-card-body">카드 내용</div>
+  </div>
+  <script src="https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js"></script>
+</body>
+</html>
 ```
-#### 모듈 번들러 사용
-```javascript
-import { showToast, showModal, showConfirmModal } from 'designbase-wp-library';
+---
-// 토스트 표시
-showToast('성공!', 'success');
+## 🧩 주요 컴포넌트
-// 모달 표시
-showModal({ title: '제목', content: '내용', size: 'lg' });
+### 1. 버튼 (Button)
+```html
+<!-- 기본 버튼 -->
+<button class="dewp-button dewp-button--primary">Primary</button>
+<button class="dewp-button dewp-button--secondary">Secondary</button>
+<button class="dewp-button dewp-button--tertiary">Tertiary</button>
-// 확인 모달
-showConfirmModal({ message: '정말 삭제하시겠습니까?' });
-```
+<!-- 상태별 버튼 -->
+<button class="dewp-button dewp-button--success">Success</button>
+<button class="dewp-button dewp-button--warning">Warning</button>
+<button class="dewp-button dewp-button--danger">Danger</button>
-### CSS 사용
+<!-- 크기 변형 -->
+<button class="dewp-button dewp-button--primary dewp-button--sm">Small</button>
+<button class="dewp-button dewp-button--primary dewp-button--lg">Large</button>
-```html
-<link rel="stylesheet" href="https://unpkg.com/designbase-wp-library@latest/dist/css/dewp.min.css">
+<!-- Outline 스타일 -->
+<button class="dewp-button dewp-button--outline-primary">Outline</button>
 ```
-## 🧩 컴포넌트
+### 2. 카드 (Card)
+```html
+<!-- 기본 카드 -->
+<div class="dewp-card">
+  <div class="dewp-card-header">카드 제목</div>
+  <div class="dewp-card-body">카드 내용입니다.</div>
+  <div class="dewp-card-footer">푸터 영역</div>
+</div>
-### 1. 토스트 알림 (Toast)
-```javascript
-// 기본 토스트
-window.DEWP.showToast('메시지', 'success', 3000, 'md');
-// 타입별 토스트 (크기 옵션 포함)
-window.DEWP.showSuccessToast('성공 메시지', 3000, 'lg');
-window.DEWP.showWarningToast('경고 메시지', 5000, 'sm');
-window.DEWP.showErrorToast('오류 메시지', 4000, 'md');
-window.DEWP.showInfoToast('정보 메시지', 3000, 'sm');
+<!-- 카드 변형 -->
+<div class="dewp-card dewp-card--outlined">Outlined</div>
+<div class="dewp-card dewp-card--elevated">Elevated</div>
+<div class="dewp-card dewp-card--hover">Hover Effect</div>
 ```
-### 2. 모달 (Modal)
+### 3. 모달 (Modal)
 ```javascript
 // 기본 모달
-window.DEWP.showModal({ title: '제목', content: '내용' });
+window.DEWP.showModal({
+  title: '모달 제목',
+  content: '모달 내용입니다.',
+  size: 'md' // sm, md, lg, xl
+});
 // 확인 모달
-window.DEWP.showConfirmModal({ message: '정말 삭제하시겠습니까?' });
+window.DEWP.showConfirmModal({
+  title: '확인',
+  message: '정말 삭제하시겠습니까?',
+  confirmText: '삭제',
+  cancelText: '취소',
+  onConfirm: () => console.log('삭제됨')
+});
+```
-// 모달 생성 및 제어
-const modalId = window.DEWP.createModal({ title: '제목', content: '내용' });
-window.DEWP.openModal(modalId);
-window.DEWP.closeModal(modalId);
+### 4. 토스트 (Toast)
+```javascript
+// 타입별 토스트
+window.DEWP.showSuccessToast('성공 메시지', 3000);
+window.DEWP.showErrorToast('오류 메시지', 3000);
+window.DEWP.showWarningToast('경고 메시지', 3000);
+window.DEWP.showInfoToast('정보 메시지', 3000);
+// 커스텀 토스트
+window.DEWP.showToast('메시지', 'success', 3000, 'lg');
 ```
-### 3. 드롭다운 (Dropdown)
+### 5. 드롭다운 (Dropdown)
 ```html
 <div class="dewp-dropdown">
-  <button class="dewp-dropdown-toggle">
-    선택하세요
-  </button>
+  <button class="dewp-dropdown-toggle">선택하세요</button>
   <div class="dewp-dropdown-menu">
-    <div class="dewp-dropdown-item" data-value="option1">옵션 1</div>
-    <div class="dewp-dropdown-item" data-value="option2">옵션 2</div>
+    <div class="dewp-dropdown-item" data-value="1">옵션 1</div>
+    <div class="dewp-dropdown-item" data-value="2">옵션 2</div>
   </div>
 </div>
 <script>
-// 드롭다운 자동 초기화 (전역)
-window.DEWP.autoInitializeDropdowns();
+  window.DEWP.autoInitializeDropdowns();
 </script>
 ```
-### 4. 탭 (Tabs)
+### 6. 탭 (Tabs)
 ```html
 <div class="dewp-tabs">
   <button class="dewp-tab-btn active" data-tab="tab1">탭 1</button>
@@ -203,250 +170,317 @@ window.DEWP.autoInitializeDropdowns();
 </div>
 <script>
-// 탭 초기화
-window.DEWP.initTabs();
-// 특정 탭 활성화
-window.DEWP.activateTab('tab2');
-// 활성 탭 정보 가져오기
-const activeTab = window.DEWP.getActiveTab('.dewp-tabs');
+  window.DEWP.initTabs();
 </script>
 ```
-### 5. 헤더 컴포넌트
-```html
-<div class="dewp-header">
-  <div class="dewp-header-content">
-    <h1 class="dewp-header-title">플러그인 설정</h1>
-    <p class="dewp-header-description">플러그인의 기본 설정을 관리할 수 있습니다.</p>
-  </div>
-  <div class="dewp-header-actions">
-    <button class="dewp-header-btn dewp-btn-primary">설정 저장</button>
-  </div>
-</div>
-```
-### 6. 섹션 컴포넌트
+### 7. 아코디언 (Accordion)
 ```html
-<div class="dewp-section">
-  <div class="dewp-section-header">
-    <div class="dewp-section-title-area">
-      <h3 class="dewp-section-title">일반 설정</h3>
-      <p class="dewp-section-description">플러그인의 기본 동작을 설정합니다.</p>
-    </div>
-    <div class="dewp-section-actions">
-      <button class="dewp-section-btn dewp-btn-primary">저장</button>
+<div class="dewp-accordion">
+  <div class="dewp-accordion-item">
+    <div class="dewp-accordion-header">
+      <span class="dewp-accordion-title">아코디언 제목 1</span>
+      <span class="dewp-accordion-icon">▼</span>
     </div>
-  </div>
-  <div class="dewp-section-content">
-    <!-- 폼 요소들 -->
+    <div class="dewp-accordion-content">아코디언 내용 1</div>
   </div>
 </div>
+<script>
+  window.DEWP.initAccordions();
+</script>
 ```
-### 7. Drawer 컴포넌트
+### 8. Drawer
 ```html
-<!-- 기본 Drawer 구조 -->
 <div class="dewp-drawer" id="my-drawer">
   <div class="dewp-drawer-header">
-    <h3 class="dewp-drawer-title">제목</h3>
-    <button class="dewp-drawer-close">
-      <svg viewBox="0 0 24 24">
-        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-      </svg>
-    </button>
+    <h3 class="dewp-drawer-title">Drawer 제목</h3>
+    <button class="dewp-drawer-close">×</button>
   </div>
   <div class="dewp-drawer-content">
-    <!-- Drawer 내용 -->
+    Drawer 내용
   </div>
 </div>
 <script>
-// Drawer 생성 및 제어
-const drawerId = window.DEWP.createDrawer({
-  target: '#my-drawer',
-  overlay: true,
-  closeOnEscape: true
-});
-window.DEWP.openDrawer(drawerId);
-window.DEWP.closeDrawer(drawerId);
-window.DEWP.toggleDrawer(drawerId);
+  const drawer = window.DEWP.createDrawer({
+    target: '#my-drawer',
+    overlay: true,
+    closeOnEscape: true
+  });
+  window.DEWP.openDrawer(drawer);
 </script>
 ```
-### 8. DOM 유틸리티
-```javascript
-// DOM 요소 선택
-const element = window.DEWP.qs('.my-class');
-const elements = window.DEWP.qsa('.my-class');
-// 클래스 조작
-window.DEWP.addClass(element, 'active');
-window.DEWP.removeClass(element, 'inactive');
-window.DEWP.toggleClass(element, 'visible');
-// 텍스트 및 HTML 설정
-window.DEWP.setText(element, '새로운 텍스트');
-window.DEWP.setHTML(element, '<strong>HTML</strong>');
-// 이벤트 처리
-window.DEWP.on(element, 'click', (e) => console.log('클릭됨'));
-window.DEWP.off(element, 'click');
-// DOM 상태 확인
-if (window.DEWP.isDOMReady()) {
-  // DOM이 준비됨
-}
-window.DEWP.onDOMReady(() => {
-  // DOM 로드 완료 후 실행
-});
-```
-## 🎨 SCSS 컴포넌트
-### 기본 컴포넌트
-#### 버튼
-```html
-<button class="dewp-btn dewp-btn-primary">Primary Button</button>
-<button class="dewp-btn dewp-btn-outline-secondary">Outline Button</button>
-<button class="dewp-btn dewp-btn-success dewp-btn-lg">Large Success Button</button>
-```
-#### 배지
-```html
-<span class="dewp-badge dewp-badge-primary">Primary</span>
-<span class="dewp-badge dewp-badge-success dewp-badge-pill">Success</span>
-<span class="dewp-badge dewp-badge-danger dewp-badge-ring">Danger</span>
-```
-#### 폼
+### 9. 폼 요소 (Forms)
 ```html
+<!-- 입력 필드 -->
 <div class="dewp-form-group">
   <label class="dewp-form-label">이름</label>
-  <input type="text" class="dewp-form-input" placeholder="이름을 입력하세요">
+  <input type="text" class="dewp-form-input" placeholder="이름 입력">
 </div>
+<!-- 체크박스 -->
+<div class="dewp-form-check dewp-form-checkbox">
+  <input type="checkbox" class="dewp-form-check-input" id="check1">
+  <label class="dewp-form-check-label" for="check1">동의합니다</label>
+</div>
+<!-- 라디오 버튼 -->
+<div class="dewp-form-check dewp-form-radio">
+  <input type="radio" class="dewp-form-check-input" name="radio" id="radio1">
+  <label class="dewp-form-check-label" for="radio1">옵션 1</label>
+</div>
+<!-- 토글 스위치 -->
+<label class="dewp-toggle-label">
+  <input type="checkbox" class="dewp-toggle-input">
+  <span class="dewp-toggle-slider"></span>
+  <span class="dewp-toggle-text">알림 받기</span>
+</label>
 ```
-#### 테이블
+### 10. 테이블 (Table)
 ```html
 <table class="dewp-table">
   <thead>
     <tr>
       <th>제목</th>
-      <th>설명</th>
+      <th>작성자</th>
+      <th>날짜</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>내용 1</td>
-      <td>설명 1</td>
+      <td>게시글 1</td>
+      <td>홍길동</td>
+      <td>2025-01-01</td>
     </tr>
   </tbody>
 </table>
 ```
-#### 페이지네이션
-```html
-<div class="dewp-pagination">
-  <div class="dewp-page-item">
-    <a href="#" class="dewp-page-link">1</a>
-  </div>
-  <div class="dewp-page-item active">
-    <a href="#" class="dewp-page-link">2</a>
-  </div>
-  <div class="dewp-page-item">
-    <a href="#" class="dewp-page-link">3</a>
-  </div>
-</div>
+---
+## 🎨 디자인 시스템
+### CSS 변수 (THEME_GUIDE.md v0.1.16 기준)
+#### Surface (배경)
+```css
+--db-surface-base           /* 기본 배경 */
+--db-surface-layer-1        /* 1단계 높이 */
+--db-surface-layer-2        /* 2단계 높이 */
 ```
-#### 토글
-```html
-<!-- 기본 토글 -->
-<label class="dewp-toggle-label">
-  <input type="checkbox" class="dewp-toggle-input">
-  <span class="dewp-toggle-slider"></span>
-  <span class="dewp-toggle-text">기본 토글</span>
-</label>
+#### Text (텍스트)
+```css
+--db-text-primary           /* 주요 텍스트 */
+--db-text-secondary         /* 보조 텍스트 */
+--db-text-tertiary          /* 부가 텍스트 */
+--db-text-link              /* 링크 텍스트 */
+--db-text-inverse-primary   /* 반전 텍스트 */
+```
-<!-- 크기 변형 -->
-<label class="dewp-toggle-label dewp-toggle-sm">
-  <input type="checkbox" class="dewp-toggle-input">
-  <span class="dewp-toggle-slider"></span>
-  <span class="dewp-toggle-text">작은 토글</span>
-</label>
+#### Border (테두리)
+```css
+--db-border-base            /* 기본 테두리 */
+--db-border-layer-1         /* 1단계 테두리 */
+--db-border-layer-2         /* 2단계 테두리 */
+```
-<label class="dewp-toggle-label dewp-toggle-lg">
-  <input type="checkbox" class="dewp-toggle-input">
-  <span class="dewp-toggle-slider"></span>
-  <span class="dewp-toggle-text">큰 토글</span>
-</label>
+#### Feedback (상태)
+```css
+--db-feedback-success-fg/bg /* 성공 */
+--db-feedback-warning-fg/bg /* 경고 */
+--db-feedback-error-fg/bg   /* 에러 */
+--db-feedback-info-fg/bg    /* 정보 */
+```
+#### Brand (브랜드)
+```css
+--db-brand-primary          /* 주요 브랜드 색상 */
+--db-brand-secondary        /* 보조 브랜드 색상 */
 ```
-#### 알림
+### 다크 모드
+다크 모드는 **자동으로 적용**됩니다:
 ```html
-<div class="dewp-notice dewp-notice-success">
-  <p>성공 메시지입니다.</p>
-</div>
+<!-- 다크 모드 활성화 -->
+<body data-theme="dark">
+  <!-- 모든 컴포넌트가 자동으로 다크 모드로 전환됩니다 -->
+</body>
-<div class="dewp-notice dewp-notice-warning">
-  <p>경고 메시지입니다.</p>
-</div>
+<script>
+  // JavaScript로 다크 모드 토글
+  const toggleDarkMode = () => {
+    const currentTheme = document.body.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    document.body.setAttribute('data-theme', newTheme);
+  };
+</script>
 ```
-<!-- 유틸리티 클래스 섹션은 문서 사이트에서 관리합니다. -->
-<!-- SCSS 커스터마이징 가이드는 문서 사이트로 이관했습니다. -->
+---
 ## 📱 반응형 브레이크포인트
-- **xs**: 0px 이상
-- **sm**: 576px 이상
-- **md**: 768px 이상
-- **lg**: 992px 이상
-- **xl**: 1200px 이상
-- **xxl**: 1400px 이상
+| 사이즈 | 최소 너비 |
+|--------|-----------|
+| xs | 0px |
+| sm | 576px |
+| md | 768px |
+| lg | 992px |
+| xl | 1200px |
+| xxl | 1400px |
+---
+## 🔧 개발
+### 빌드
+```bash
+# CSS + JS 빌드
+npm run build
+# CSS만 빌드
+npm run build:css
+# JS만 빌드
+npm run build:js
+```
+### 개발 모드 (Watch)
+```bash
+# CSS + JS 동시 감시
+npm run dev
+# CSS만 감시
+npm run dev:css
+# JS만 감시
+npm run dev:js
+```
-## 🔧 빌드 출력
+### 로컬 테스트
+```bash
+# 1. 빌드
+npm run build
+# 2. 서버 실행 (프로젝트 루트에서)
+python3 -m http.server 8001
+# 3. 브라우저에서 접속
+# http://localhost:8001/test/local-test.html
+```
+---
+## 📂 빌드 출력
 ```
 dist/
 ├── css/
-│   └── dewp.min.css     # 압축된 CSS (80.8kB)
+│   └── dewp.min.css        # 압축된 CSS (152.8 kB)
 └── js/
-    └── dewp.min.js      # 압축된 JavaScript (16.0kB)
+    └── dewp.min.js         # 압축된 JavaScript (40.7 kB)
 ```
-## 🚀 배포
+---
-### 프로덕션 빌드
-```bash
-npm run build:prod
-```
+## 🌐 CDN 링크
-### 배포 전 미리보기
-```bash
-npm run preview
+### unpkg
 ```
-### npm에 배포
-```bash
-npm run release
+https://unpkg.com/designbase-wp-library@latest/dist/css/dewp.min.css
+https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js
 ```
-### 수동 배포
-```bash
-npm run build:prod
-npm publish
+### jsDelivr
+```
+https://cdn.jsdelivr.net/npm/designbase-wp-library@latest/dist/css/dewp.min.css
+https://cdn.jsdelivr.net/npm/designbase-wp-library@latest/dist/js/dewp.min.js
 ```
-## 📄 라이선스
+---
+## 📚 문서
-이 프로젝트는 MIT License를 따릅니다. 재배포 시 원저작권 고지와 라이선스 전문을 반드시 포함해 주세요(출처 표기).
+자세한 사용법과 예제는 다음 링크에서 확인하세요:
+- 📖 **공식 문서**: https://designbasekorea.github.io/designbase-wp-library/
+- 🎨 **라이브 데모**: https://designbasekorea.github.io/designbase-wp-library/
+- 📦 **NPM**: https://www.npmjs.com/package/designbase-wp-library
+---
+## 🎯 전체 컴포넌트 목록
+### Layout
+- Header
+- Section
+- Sidebar
+- Card
+- List
+### Navigation
+- Tabs
+- Breadcrumb
+- Pagination
+- Dropdown
+### Forms
+- Input
+- Textarea
+- Select
+- Checkbox
+- Radio
+- Toggle
+- Stepper
+- Range Slider
+### Feedback
+- Toast
+- Modal
+- Notice
+- Badge
+- Spinner
+- Progress
+- Progress Step
+- Empty State
+### Interactive
+- Accordion
+- Drawer
+- Popover
+- Tooltip
+### Display
+- Table
+- Stat
+- Chip
+- Divider
+---
+## 🔄 버전 히스토리
+### v0.6.0 (최신)
+- 🎨 THEME_GUIDE.md v0.1.16 기준 전체 변수 시스템 통일
+- ✨ 새로운 변수 시스템 적용 (Surface, Border, Feedback, Interactive, Brand)
+- 🗑️ 하드코딩된 색상 및 수동 다크모드 제거
+- ♿ 접근성 개선
+### v0.5.6
+- 이전 안정 버전
+전체 변경 이력은 [CHANGELOG.md](./CHANGELOG.md)를 참조하세요.
+---
 ## 🤝 기여
@@ -456,14 +490,28 @@ npm publish
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
+---
+## 📄 라이선스
+이 프로젝트는 MIT License를 따릅니다.
+재배포 시 원저작권 고지와 라이선스 전문을 반드시 포함해 주세요.
+---
 ## 📞 지원
-문제가 있거나 질문이 있으시면 이슈를 생성해 주세요.
+- **이메일**: designbasekorea@gmail.com
+- **Issues**: [GitHub Issues](https://github.com/designbasekorea/designbase-wp-library/issues)
+---
+## 🔗 관련 프로젝트
-- 이메일: designbasekorea@gmail.com
+- [@designbasekorea/theme](https://www.npmjs.com/package/@designbasekorea/theme) - 디자인 토큰 시스템
+- [@designbasekorea/icons-webfont](https://www.npmjs.com/package/@designbasekorea/icons-webfont) - 아이콘 시스템
-## 🔗 관련 링크
+---
-- [npm 패키지](https://www.npmjs.com/package/designbase-wp-library)
-- [CDN (unpkg)](https://unpkg.com/designbase-wp-library@latest/)
-- [CDN (jsDelivr)](https://cdn.jsdelivr.net/npm/designbase-wp-library@latest/)
+**Made with ❤️ by DesignBase Korea**