gnui 1.2.19 → 1.2.21

package/styleguide/category/COMPONENT/MenuButton(js)/index.html

@@ -122,7 +122,7 @@
   
   <div class="aigis-module MenuButton">
     <h2 class="aigis-module__heading" id="MenuButton">MenuButton</h2>
-    <div class="aigis-module__filepath">/scss/controls/button.scss</div>
+    <div class="aigis-module__filepath">/scss/components/menubutton.scss</div>
     <div class="aigis-tags">
        
       <span class="gn-tag">v.0.1.0</span>
@@ -140,20 +140,70 @@
     </li>
   </ul>
 </div> -->
-  <h3 id="-">생성 옵션</h3>
+  <h3 id="-">기본 사용</h3>
+<div class="aigis-preview">
+  <div class="gn-menuButton">
+    <button type="button">
+        <span class="gn-icon is-small menuButton-icon">
+            <i class="fas fa-caret-down"></i>
+        </span>
+        <span class="menuButton-text">메뉴버튼</span>
+    </button>
+    <div class="menuButton-menus">
+        <ul>
+            <li class="menuButton-menu">
+                <span class="menuButton-menu-content">
+                    <span class="menuButton-menu-text">menu1</span>
+                </span>
+            </li>
+            <li class="menuButton-menu">
+                <span class="menuButton-menu-content">
+                    <span class="menuButton-menu-text">menu2</span>
+                </span>
+            </li>
+        </ul>
+    </div>
+</div></div>
+
+<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-menuButton<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-small menuButton-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-caret-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>menuButton-text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>메뉴버튼<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>menuButton-menus<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>menuButton-menu<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>menuButton-menu-content<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+          <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>menuButton-menu-text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>menu1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>menuButton-menu<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>menuButton-menu-content<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+          <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>menuButton-menu-text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>menu2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+</code></pre>
+<h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
 
-  <button name="new-button"></button>
-  <button name="new-button2"></button>
-  <button name="new-button-submenu">편집 메뉴</button>
+  <button class="new-button"></button>
+  <button class="new-menubutton-cols"></button>
+  <button class="new-button2"></button>
+  <button class="new-button-submenu">편집 메뉴</button>
 </div>
 
-<pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button-submenu<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>편집 메뉴<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+<pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-menubutton-cols<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button-submenu<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>편집 메뉴<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'menubutton'</span><span class="token punctuation" >,</span> {
-    target<span class="token punctuation" >:</span> <span class="token string" >'button[name=new-button]'</span><span class="token punctuation" >,</span> 
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-button'</span><span class="token punctuation" >,</span> 
     size<span class="token punctuation" >:</span> <span class="token string" >'normal'</span><span class="token punctuation" >,</span>
     textSets<span class="token punctuation" >:</span>{
       buttonText<span class="token punctuation" >:</span> <span class="token string" >'메뉴버튼'</span>
@@ -176,8 +226,33 @@
       value<span class="token punctuation" >:</span> <span class="token string" >'exit'</span>
     }<span class="token punctuation" >]</span><span class="token punctuation" >]</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  <span class="token operator" >/</span><span class="token operator" >/</span> 다중 컬럼 모드 생성 옵션
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'menubutton'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-menubutton-cols'</span><span class="token punctuation" >,</span>
+    size<span class="token punctuation" >:</span> <span class="token string" >'normal'</span><span class="token punctuation" >,</span>
+    textSets<span class="token punctuation" >:</span> {
+      buttonText<span class="token punctuation" >:</span> <span class="token string" >'다중 컬럼 메뉴'</span>
+    }<span class="token punctuation" >,</span>
+    onSelect<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>menu<span class="token punctuation" >)</span> {
+      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 메뉴는 '</span> <span class="token operator" >+</span> menu<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    }<span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+      {
+        value<span class="token punctuation" >:</span> <span class="token string" >'menu1'</span><span class="token punctuation" >,</span>
+        cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'item1'</span><span class="token punctuation" >,</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span> <span class="token string" >'상세정보1'</span><span class="token punctuation" >]</span>
+      }<span class="token punctuation" >,</span>
+      {
+        value<span class="token punctuation" >:</span> <span class="token string" >'menu2'</span><span class="token punctuation" >,</span>
+        cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'item2'</span><span class="token punctuation" >,</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span> <span class="token string" >'상세정보2'</span><span class="token punctuation" >]</span>
+      }<span class="token punctuation" >,</span>
+      {
+        value<span class="token punctuation" >:</span> <span class="token string" >'menu3'</span><span class="token punctuation" >,</span>
+        cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'item3'</span><span class="token punctuation" >,</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span> <span class="token string" >'상세정보3'</span><span class="token punctuation" >]</span>
+      }
+    <span class="token punctuation" >]</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
   Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'menubutton'</span><span class="token punctuation" >,</span> {
-    target<span class="token punctuation" >:</span> <span class="token string" >'button[name=new-button2]'</span><span class="token punctuation" >,</span> 
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-button2'</span><span class="token punctuation" >,</span> 
     style<span class="token punctuation" >:</span> <span class="token string" >'simple'</span><span class="token punctuation" >,</span>
     icon<span class="token punctuation" >:</span> <span class="token string" >'list'</span><span class="token punctuation" >,</span>
     data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
@@ -190,7 +265,7 @@
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
   <span class="token operator" >/</span><span class="token operator" >/</span> 서브메뉴 예시
   Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'menubutton'</span><span class="token punctuation" >,</span> {
-    target<span class="token punctuation" >:</span> <span class="token string" >'button[name=new-button-submenu]'</span><span class="token punctuation" >,</span>
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-button-submenu'</span><span class="token punctuation" >,</span>
     size<span class="token punctuation" >:</span> <span class="token string" >'normal'</span><span class="token punctuation" >,</span>
     textSets<span class="token punctuation" >:</span> {
       buttonText<span class="token punctuation" >:</span> <span class="token string" >'편집 메뉴'</span>
@@ -210,30 +285,103 @@
             value<span class="token punctuation" >:</span> <span class="token string" >'file-recent'</span><span class="token punctuation" >,</span>
             child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
               { text<span class="token punctuation" >:</span> <span class="token string" >'document.txt'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-recent-1'</span> }<span class="token punctuation" >,</span>
-              { text<span class="token punctuation" >:</span> <span class="token string" >'image.png'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-recent-2'</span> }
+              { text<span class="token punctuation" >:</span> <span class="token string" >'image.png'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-recent-2'</span> }<span class="token punctuation" >,</span>
+              { text<span class="token punctuation" >:</span> <span class="token string" >'project.json'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-recent-3'</span> }
             <span class="token punctuation" >]</span>
           }<span class="token punctuation" >,</span>
-          { text<span class="token punctuation" >:</span> <span class="token string" >'저장'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-save'</span><span class="token punctuation" >,</span> disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span> }<span class="token punctuation" >,</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'저장'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-save'</span> }<span class="token punctuation" >,</span>
           { text<span class="token punctuation" >:</span> <span class="token string" >'다른 이름으로 저장'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-saveas'</span> }
         <span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>
       {
         text<span class="token punctuation" >:</span> <span class="token string" >'편집'</span><span class="token punctuation" >,</span>
         value<span class="token punctuation" >:</span> <span class="token string" >'edit'</span><span class="token punctuation" >,</span>
-        actived<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
         child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
           { text<span class="token punctuation" >:</span> <span class="token string" >'실행 취소'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'edit-undo'</span> }<span class="token punctuation" >,</span>
-          { text<span class="token punctuation" >:</span> <span class="token string" >'다시 실행'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'edit-redo'</span> }
+          { text<span class="token punctuation" >:</span> <span class="token string" >'다시 실행'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'edit-redo'</span><span class="token punctuation" >,</span> actived<span class="token punctuation" >:</span> <span class="token boolean" >true</span> }<span class="token punctuation" >,</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'복사'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'edit-copy'</span> }<span class="token punctuation" >,</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'붙여넣기'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'edit-paste'</span> }
+        <span class="token punctuation" >]</span>
+      }<span class="token punctuation" >,</span>
+      {
+        text<span class="token punctuation" >:</span> <span class="token string" >'보기'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'view'</span><span class="token punctuation" >,</span>
+        child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+          {
+            text<span class="token punctuation" >:</span> <span class="token string" >'확대/축소'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'view-zoom'</span><span class="token punctuation" >,</span>
+            disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+            child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+              { text<span class="token punctuation" >:</span> <span class="token string" >'확대'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'view-zoom-in'</span> }<span class="token punctuation" >,</span>
+              { text<span class="token punctuation" >:</span> <span class="token string" >'축소'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'view-zoom-out'</span> }<span class="token punctuation" >,</span>
+              { text<span class="token punctuation" >:</span> <span class="token string" >'원본 크기'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'view-zoom-reset'</span> }
+            <span class="token punctuation" >]</span>
+          }<span class="token punctuation" >,</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'전체 화면'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'view-fullscreen'</span> }
         <span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>
       {
         text<span class="token punctuation" >:</span> <span class="token string" >'도움말'</span><span class="token punctuation" >,</span>
-        value<span class="token punctuation" >:</span> <span class="token string" >'help'</span><span class="token punctuation" >,</span>
-        disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'help'</span>
       }
     <span class="token punctuation" >]</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
-</code></pre><table class="gn-table is-full is-border">
+</code></pre><h3 id="-menubuttonitem-">데이터 모델 (MenuButtonItem)</h3>
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>필드</th>
+    <th>type</th>
+    <th>필수</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>value</td>
+      <td>string</td>
+      <td>Y</td>
+      <td>메뉴 값 (고유 값)</td>
+    </tr>
+    <tr>
+      <td>text</td>
+      <td>string</td>
+      <td>N</td>
+      <td>단일 컬럼 표시 텍스트</td>
+    </tr>
+    <tr>
+      <td>cols</td>
+      <td>string[]</td>
+      <td>N</td>
+      <td>다중 컬럼 표시 값 배열</td>
+    </tr>
+    <tr>
+      <td>html</td>
+      <td>string</td>
+      <td>N</td>
+      <td>HTML로 렌더링할 내용 (html이 있는 경우 text/cols 대신 사용, text가 있는 항목만 선택 가능)</td>
+    </tr>
+    <tr>
+      <td>child</td>
+      <td>MenuButtonItem[]</td>
+      <td>N</td>
+      <td>하위 메뉴 배열 (최대 2단계)</td>
+    </tr>
+    <tr>
+      <td>disabled</td>
+      <td>boolean</td>
+      <td>N</td>
+      <td>비활성화 여부</td>
+    </tr>
+    <tr>
+      <td>actived</td>
+      <td>boolean</td>
+      <td>N</td>
+      <td>활성화 상태 표시 여부</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
     <th>type</th>
@@ -286,9 +434,9 @@
     </tr>
     <tr>
       <td colspan="2">data</td>
-      <td>Array[{value, text, html, child, disabled, actived}]</td>
+      <td>MenuButtonItem[]</td>
       <td></td>
-      <td>메뉴 목록에 출력할 목록<br/>- value: 메뉴 값<br/>- text: 메뉴 텍스트<br/>- html: HTML로 렌더링할 내용<br/>- child: 하위 메뉴 배열 (최대 2단계)<br/>- disabled: 비활성화 여부 (boolean)<br/>- actived: 활성화 상태 표시 여부</td>
+      <td>메뉴 목록에 출력할 데이터 배열<br/>- MenuButtonItem 참조<br/><br/><strong>참고:</strong> 표시 우선순위는 html &gt; cols &gt; text 입니다. html 항목은 text가 있는 경우만 선택 가능하며, html이 있으면 cols는 무시됩니다. html이 있으면 하위 메뉴는 렌더링되지 않습니다.</td>
     </tr>
     <tr>
       <td colspan="2">disabled</td>
@@ -341,7 +489,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Message(js)/index.html

@@ -507,7 +507,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Modal(js)/index.html

@@ -206,10 +206,12 @@
 
   <button class="gn-button new-modal">Modal 예제보기</button>
   <button class="gn-button new-popup">Popup 예제보기</button>
+  <button class="gn-button new-modal-extra">Modal(Extra) 예제보기</button>
 </div>
 
 <pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button new-modal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Modal 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button new-popup<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Popup 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button new-modal-extra<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Modal(Extra) 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'button'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.new-modal'</span><span class="token punctuation" >,</span>
@@ -270,6 +272,23 @@
       }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
     }
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'button'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-modal-extra'</span><span class="token punctuation" >,</span>
+    onClick<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
+      Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'modal'</span><span class="token punctuation" >,</span> {
+        textSets<span class="token punctuation" >:</span> { title<span class="token punctuation" >:</span> <span class="token string" >'Extra Buttons Demo'</span> }<span class="token punctuation" >,</span>
+        hasCancel<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        height<span class="token punctuation" >:</span> <span class="token number" >400</span><span class="token punctuation" >,</span>
+        extraButtons<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+          { key<span class="token punctuation" >:</span> <span class="token string" >'edit-template'</span><span class="token punctuation" >,</span> label<span class="token punctuation" >:</span> <span class="token string" >'수정(템플릿만적용)'</span><span class="token punctuation" >,</span> className<span class="token punctuation" >:</span> <span class="token string" >'is-small is-primary'</span> }<span class="token punctuation" >,</span>
+          { key<span class="token punctuation" >:</span> <span class="token string" >'edit-bulk'</span><span class="token punctuation" >,</span> label<span class="token punctuation" >:</span> <span class="token string" >'수정(용도일괄적용)'</span><span class="token punctuation" >,</span> className<span class="token punctuation" >:</span> <span class="token string" >'is-small is-mono'</span> }
+        <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+        onExtra<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>actionKey<span class="token punctuation" >)</span> {
+          console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'extra clicked:'</span><span class="token punctuation" >,</span> actionKey<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+        }
+      }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    }
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -357,6 +376,12 @@
       <td>false</td>
       <td>취소버튼 출력 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">extraButtons</td>
+      <td>array</td>
+      <td>[]</td>
+      <td>푸터에 커스텀 버튼을 추가한다. 예) [&#123; key:&#39;apply&#39;, label:&#39;적용&#39;, className:&#39;is-small is-primary&#39; &#125;]</td>
+    </tr>
     <tr>
       <td colspan="2">contents</td>
       <td>string|HTMLElement</td>
@@ -427,6 +452,11 @@
       <td>void</td>
       <td>modal 창을 포커스한다.</td>
     </tr>
+    <tr>
+      <td>onExtra()</td>
+      <td>void</td>
+      <td>커스텀 버튼 클릭 시 수행될 이벤트. 매개변수로 actionKey를 전달한다.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -436,7 +466,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Pagination(js)/index.html

@@ -437,7 +437,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Panel/index.html

@@ -318,7 +318,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Progressbar(js)/index.html

@@ -305,7 +305,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Tab(js)/index.html

@@ -465,7 +465,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Tagcloud(js)/index.html

@@ -252,7 +252,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Tooltip(js)/index.html

@@ -404,7 +404,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>