gnui 1.0.7 → 1.1.1

package/styleguide/tag/v.0.1.0/index.html

@@ -49,7 +49,7 @@
   window.Gn = window.gnui;
 
   Gn.ready(function(){
-    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MenuButton(js),CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/Textarea,ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
+    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Time(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MenuButton(js),CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
     var jsComps = ''.split(',');
     delete leftMenu.Utils;
     Gn.util.append('.left-menu', renderTree(leftMenu));
@@ -118,7 +118,7 @@
         Alert
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\alert.scss
+        /scss/components/alert.scss
       </div>
       <div class="aigis-tags">
         
@@ -410,7 +410,7 @@
         Bignumber
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\bignumber.scss
+        /scss/components/bignumber.scss
       </div>
       <div class="aigis-tags">
         
@@ -554,7 +554,7 @@
         Breadcrumb
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\breadcrumb.scss
+        /scss/components/breadcrumb.scss
       </div>
       <div class="aigis-tags">
         
@@ -753,7 +753,7 @@
         Calendar
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\calendar.scss
+        /scss/components/calendar.scss
       </div>
       <div class="aigis-tags">
         
@@ -798,12 +798,11 @@
   }<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" >'calendar'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.new-calendar1'</span><span class="token punctuation" >,</span>
-    value<span class="token punctuation" >:</span> <span class="token string" >'2021-04-01 12:08:31'</span><span class="token punctuation" >,</span>
     onSelect<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>v<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> v<span class="token punctuation" >)</span>
     }<span class="token punctuation" >,</span>
     dateType<span class="token punctuation" >:</span> <span class="token string" >'datetime'</span><span class="token punctuation" >,</span>
-    max<span class="token punctuation" >:</span> <span class="token string" >'-1d'</span><span class="token punctuation" >,</span>
+    max<span class="token punctuation" >:</span> <span class="token string" >'1M'</span><span class="token punctuation" >,</span>
     min<span class="token punctuation" >:</span> <span class="token string" >'-1M'</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><table class="gn-table is-full is-border">
@@ -858,13 +857,128 @@
   </tbody>
 </table>
 
+    </div>
+    <div class="aigis-module Time">
+      <h2 class="aigis-module__heading" id="Time">
+        Time
+      </h2>
+      <div class="aigis-module__filepath">
+        /scss/components/calendar.scss
+      </div>
+      <div class="aigis-tags">
+        
+          
+            <span class="gn-tag">v.0.1.0</span>
+          
+        
+          
+            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+          
+        
+      </div>
+      
+        <!--   <div id="ComponentTab">
+    <ul>
+      <li><a href="#styleguide">Style</a></li>
+      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
+    </ul>
+  </div> -->
+      
+      <h3 id="-">생성 옵션</h3>
+<div class="aigis-preview">
+
+<div class="new-time"></div>
+<div class="new-time2"></div>
+</div>
+
+<pre><code class="language-ejs"><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>new-time<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>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 attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-time2<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>div</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" >'time'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-time'</span><span class="token punctuation" >,</span>
+    onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>time<span class="token punctuation" >)</span>{
+      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>time<span class="token punctuation" >)</span>
+    }<span class="token punctuation" >,</span>
+    value<span class="token punctuation" >:</span> <span class="token string" >'22:33:44'</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" >'time'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-time2'</span><span class="token punctuation" >,</span>
+    timeFormat<span class="token punctuation" >:</span> <span class="token string" >'hh:mm'</span><span class="token punctuation" >,</span>
+    onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>time<span class="token punctuation" >)</span>{
+      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>time<span class="token punctuation" >)</span>
+    }<span class="token punctuation" >,</span>
+    value<span class="token punctuation" >:</span> <span class="token string" >'6:2'</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>
+    <th>type</th>
+    <th>default</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2">target</td>
+      <td>string</td>
+      <td></td>
+      <td>time 생성 타겟</td>
+    </tr>
+    <tr>
+      <td colspan="2">value</td>
+      <td>string</td>
+      <td>now</td>
+      <td>초기 시간 값</td>
+    </tr>
+    <tr>
+      <td colspan="2">timeFormat</td>
+      <td>string</td>
+      <td>hh:mm:ss</td>
+      <td>시간 형식 (hh:mm:ss, hh:mm)</td>
+    </tr>
+    <tr>
+      <td colspan="2">hasControls</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>시간 셋팅 버튼(00:00, 23:59) 출력여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">onChange</td>
+      <td>function(value)</td>
+      <td></td>
+      <td>시간 변경 시 발생 이벤트</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="-">메소드</h3>
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>name</th>
+    <th>return</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>setTime(time: string)</td>
+      <td>void</td>
+      <td>시간 값을 변경한다.</td>
+    </tr>
+    <tr>
+      <td>getTime()</td>
+      <td>string</td>
+      <td>설정된 시간 값을 반환한다.</td>
+    </tr>
+  </tbody>
+</table>
+
     </div>
     <div class="aigis-module Card">
       <h2 class="aigis-module__heading" id="Card">
         Card
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\card.scss
+        /scss/components/card.scss
       </div>
       <div class="aigis-tags">
         
@@ -923,7 +1037,7 @@
         Chart
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\chart.scss
+        /scss/components/chart.scss
       </div>
       <div class="aigis-tags">
         
@@ -1352,7 +1466,7 @@
         Datagrid
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\datagrid.scss
+        /scss/components/datagrid.scss
       </div>
       <div class="aigis-tags">
         
@@ -1768,7 +1882,7 @@
         Dropdown
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\dropdown.scss
+        /scss/components/dropdown.scss
       </div>
       <div class="aigis-tags">
         
@@ -2485,24 +2599,32 @@
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown1'</span><span class="token punctuation" >,</span>
     className<span class="token punctuation" >:</span> <span class="token string" >'is-top'</span><span class="token punctuation" >,</span>
-    width<span class="token punctuation" >:</span> <span class="token string" >'100px'</span><span class="token punctuation" >,</span>
-    value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span>
+    onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >,</span> values<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> val <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span>
+    }<span class="token punctuation" >,</span>
+    width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span><span class="token punctuation" >,</span>
+    value<span class="token punctuation" >:</span> <span class="token string" >'item2,item5'</span><span class="token punctuation" >,</span>
+    type<span class="token punctuation" >:</span> <span class="token string" >'opened'</span><span class="token punctuation" >,</span>
+    multiple<span class="token punctuation" >:</span> <span class="token boolean" >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" >'item1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span> }<span class="token punctuation" >,</span>
       { value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목2'</span> }<span class="token punctuation" >,</span>
       { value<span class="token punctuation" >:</span> <span class="token string" >'item3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span> }<span class="token punctuation" >,</span>
       { value<span class="token punctuation" >:</span> <span class="token string" >'item4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목4'</span> }<span class="token punctuation" >,</span>
-      { value<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목5'</span> }
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목5'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item6'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목6'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item7'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목7'</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" >'dropdown'</span><span class="token punctuation" >,</span> {
-    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown2'</span><span class="token punctuation" >,</span> 
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown2'</span><span class="token punctuation" >,</span>
     onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<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> txt <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span>
     }<span class="token punctuation" >,</span>
     textSets<span class="token punctuation" >:</span> {
       selectText<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" >'item2'</span><span class="token punctuation" >,</span>
     hasSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
     color<span class="token punctuation" >:</span> <span class="token string" >'danger'</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
@@ -2514,7 +2636,7 @@
       { value<span class="token punctuation" >:</span> <span class="token string" >'item3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span> }<span class="token punctuation" >,</span>
       { value<span class="token punctuation" >:</span> <span class="token string" >'item4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목4'</span> }<span class="token punctuation" >,</span>
       { value<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목5'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;p>&lt;strong>text&lt;/strong>가 있는 항목은 선택 시 &lt;u>text&lt;/u>로 대체됩니다.&lt;/p>'</span> }<span class="token punctuation" >,</span>
-      { value<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;p>&lt;strong>text&lt;/strong>가 없는 항목은 &lt;u>선택&lt;/u>할 수 없습니다.&lt;/p>'</span> }
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item6'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;p>&lt;strong>text&lt;/strong>가 없는 항목은 &lt;u>선택&lt;/u>할 수 없습니다.&lt;/p>'</span> }
     <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
     width<span class="token punctuation" >:</span> <span class="token number" >150</span><span class="token punctuation" >,</span>
     scrollHeight<span class="token punctuation" >:</span> <span class="token number" >100</span>
@@ -2601,6 +2723,12 @@
       <td>false</td>
       <td>항목 검색기능 사용여부</td>
     </tr>
+    <tr>
+      <td colspan="2">multiple</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>다중선택 가능 여부</td>
+    </tr>
     <tr>
       <td colspan="2">disabled</td>
       <td>boolean</td>
@@ -2608,7 +2736,7 @@
       <td>Disable 여부</td>
     </tr>
     <tr>
-      <td colspan="2">onChange(value, text)</td>
+      <td colspan="2">onChange(value, text, values)</td>
       <td>function</td>
       <td></td>
       <td>선택값 변경 시 발생 이벤트</td>
@@ -2658,7 +2786,7 @@
         Growl
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\growl.scss
+        /scss/components/growl.scss
       </div>
       <div class="aigis-tags">
         
@@ -2817,7 +2945,7 @@
         JsonView
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\jsonview.scss
+        /scss/components/jsonview.scss
       </div>
       <div class="aigis-tags">
         
@@ -2892,6 +3020,11 @@
         }
       }<span class="token punctuation" >,</span>
       datas<span class="token punctuation" >:</span> {
+        <span class="token variable" >$ref</span><span class="token punctuation" >:</span> <span class="token string" >'#/$defs/Datas'</span>
+      }
+    }<span class="token punctuation" >,</span>
+    <span class="token variable" >$defs</span><span class="token punctuation" >:</span> {
+      Datas<span class="token punctuation" >:</span>  {
         Type<span class="token punctuation" >:</span> <span class="token string" >"array"</span><span class="token punctuation" >,</span>
         Disp<span class="token punctuation" >:</span> <span class="token string" >"추가 데이터 정보"</span><span class="token punctuation" >,</span>
         Items<span class="token punctuation" >:</span> {
@@ -2903,7 +3036,7 @@
               RefURL<span class="token punctuation" >:</span> <span class="token string" >'https://search.naver.com/search.naver?query={{parent.field2}}'</span>
             }<span class="token punctuation" >,</span>
             field2<span class="token punctuation" >:</span> {
-              Type<span class="token punctuation" >:</span> <span class="token string" >"integer"</span>
+              Type<span class="token punctuation" >:</span> <span class="token string" >"number"</span>
             }<span class="token punctuation" >,</span>
             datas<span class="token punctuation" >:</span> {
               Type<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >"array"</span><span class="token punctuation" >,</span><span class="token string" >"string"</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
@@ -2921,7 +3054,7 @@
                 }
               }
             }
-          }  
+          }
         }
       }
     }<span class="token punctuation" >,</span>
@@ -3083,7 +3216,8 @@
         <pre>
 {
   &quot;Type&quot;: &quot;string&quot;,
-  &quot;RefURL&quot;: &quot;<a href="http://www.genians.com&quot;" title="null">http://www.genians.com&quot;</a>
+  &quot;RefURL&quot;: &quot;<a href="http://www.genians.com&quot;" title="null">http://www.genians.com&quot;</a>,
+  &quot;Target&quot;: &quot;_blank&quot;
 }
         </pre>
       </td>
@@ -3324,7 +3458,7 @@
         &quot;Disp&quot;: &#39;물품명&#39;,
         &quot;Description&quot;: &quot;product name&quot;
       },
-      &#39;data-number&#39;: {
+      &quot;data-number&quot;: {
         &quot;Type&quot;: &#39;number&#39;,
         &quot;Disp&quot;: &#39;재고&#39;
       }
@@ -3374,7 +3508,7 @@
     </tr>
     <tr>
       <td>$</td>
-      <td>전체 데이터 루트를 나타낸다.<br/>루트로부터 <a href="https://github.com/dchester/jsonpath#jsonpath-syntax" target="_blank">jsonpath 문법<span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a>을 사용할 수 있다.</td>
+      <td>전체 데이터 루트를 나타낸다.<br/>루트로부터 <a href="https://github.com/dchester/jsonpath#jsonpath-syntax" target="_blank">jsonpath 문법<span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a>을 사용할 수 있다.<br/>*property key에 특수문자가 포함되는 경우 $[&#39;property-key&#39;] 와 같이 사용한다.</td>
     </tr>
     <tr>
       <td>parent</td>
@@ -3384,13 +3518,134 @@
 </table>
 
 
+<h3 id="jsonpath-key-">jsonpath key 사용</h3>
+<ul>
+<li>object properties의 key 값으로 jsonpath를 사용할 수 있다.<h3 id="defs-ref-">defs - ref 사용</h3>
+</li>
+<li>schema에 미리 정의된 defs 객체를 ref로 지정하는 경우, 해당 데이터는 [more] 형태로 출력된다.</li>
+</ul>
+<p><table class="gn-table is-full is-border">
+  <thead>
+    <th>schema</th>
+    <th>data</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <pre>
+{
+  Type: &quot;array&quot;,
+  Items: {
+    Type: &quot;object&quot;,
+    Properties: {
+      &#39;$.COLLECTOR._id&#39;: {
+        Type: &quot;string&quot;,
+        Disp: &quot;인스턴스ID&quot;
+      },
+      &#39;$.COLLECTOR._type&#39;: {
+        Type: &quot;string&quot;,
+        Disp: &quot;타입&quot;
+      },
+      &#39;$.COLLECTOR.nodes.obj2&#39;: {
+        Type: &quot;number&quot;,
+        Disp: &quot;No&quot;
+      },
+      &#39;$.COLLECTOR.datas.datas&#39;: {
+        $ref: &#39;#/$defs/Datas&#39;
+      }
+    }
+  },
+  $defs: {
+    Datas: {
+      Type: &quot;array&quot;,
+      Disp: &quot;Datas&quot;,
+      Items: {
+        Type: &quot;object&quot;,
+        Properties: {
+          field1: {
+            Type: &quot;string&quot;,
+            Disp: &#39;필드1&#39;
+          },
+          field2: {
+            Type: &quot;number&quot;,
+            Disp: &#39;필드2&#39;
+          },
+          field3: {
+            Type: &quot;string&quot;,
+            Disp: &#39;필드3&#39;
+          }
+        }
+      }
+    }
+  }
+}
+        </pre>
+      </td>
+      <td>
+        <pre>
+[{
+  COLLECTOR: {
+    _id: &#39;data-1-id&#39;,
+    _type: &#39;collector&#39;,
+    test1: 0,
+    test2: 0,
+    nodes: {
+      obj1: &#39;&#39;,
+      obj2: 0
+    },
+    datas: {
+      field1: &#39;data-1&#39;,
+      field2: 0,
+      datas: [{
+        field1: &#39;data-1&#39;,
+        field2: 0,
+        field3: &#39;data-1&#39;
+      }, {
+        field1: &#39;data-1&#39;,
+        field2: 0,
+        field3: &#39;data-1&#39;
+      }]
+    }
+  }
+}, {
+  COLLECTOR: {
+    _id: &#39;data-2-id&#39;,
+    _type: &#39;collector&#39;,
+    test1: 1,
+    test2: 1,
+    nodes: {
+      obj1: &#39;&#39;,
+      obj2: 1
+    },
+    datas: {
+      field1: &#39;data-2&#39;,
+      field2: 1,
+      datas: [{
+        field1: &#39;data-2&#39;,
+        field2: 1,
+        field3: &#39;data-2&#39;
+      },{
+        field1: &#39;data-2&#39;,
+        field2: 1,
+        field3: &#39;data-2&#39;
+      }]
+    }
+  }
+}]
+        </pre>
+      </td>
+    </tr>
+  </tbody>
+</table></p>
+<div class="path-key"></div>
+
     </div>
     <div class="aigis-module Message">
       <h2 class="aigis-module__heading" id="Message">
         Message
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\message.scss
+        /scss/components/message.scss
       </div>
       <div class="aigis-tags">
         
@@ -3652,7 +3907,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Modal
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\modal.scss
+        /scss/components/modal.scss
       </div>
       <div class="aigis-tags">
         
@@ -3686,14 +3941,18 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     <div class="modal-content" style="width: 550px">
         <div class="modal-header">
             <h3>Modal Title</h3>
-            <span class="gn-icon is-close btnCloseModal">
-                <i class="fas fa-times"></i>
-            </span>
+            <div class="modal-control">
+                <span class="gn-icon is-close btnCloseModal">
+                    <i class="fas fa-times"></i>
+                </span>
+            </div>
         </div>
         <div class="modal-body">
-            <p>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.</p>
-            <p>Eu pariatur exercitation commodo amet occaecat non magna ea. Laboris reprehenderit nostrud labore anim Lorem Lorem quis. Tempor officia dolor enim incididunt ut cupidatat sunt.</p>
-            <p>Incididunt ipsum nostrud quis qui esse est aute anim velit aliqua ipsum. Ipsum mollit nulla ipsum Lorem cillum laboris. Proident nostrud magna consequat elit duis culpa deserunt voluptate. Ullamco commodo ad ea nostrud. Qui ullamco tempor non est adipisicing duis ullamco id ex. Nostrud fugiat mollit commodo veniam id et labore cillum adipisicing adipisicing qui dolor.</p>
+            <div class="modal-body-content">
+                <p>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.</p>
+                <p>Eu pariatur exercitation commodo amet occaecat non magna ea. Laboris reprehenderit nostrud labore anim Lorem Lorem quis. Tempor officia dolor enim incididunt ut cupidatat sunt.</p>
+                <p>Incididunt ipsum nostrud quis qui esse est aute anim velit aliqua ipsum. Ipsum mollit nulla ipsum Lorem cillum laboris. Proident nostrud magna consequat elit duis culpa deserunt voluptate. Ullamco commodo ad ea nostrud. Qui ullamco tempor non est adipisicing duis ullamco id ex. Nostrud fugiat mollit commodo veniam id et labore cillum adipisicing adipisicing qui dolor.</p>
+            </div>
         </div>
         <div class="modal-footer has-text-center">
             <button type="button" class="gn-button">확인</button>
@@ -3710,14 +3969,18 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   <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>modal-content<span class="token punctuation" >"</span></span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >550</span>px</span><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>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>modal-header<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>h3</span><span class="token punctuation" >></span></span>Modal Title<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>h3</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-close btnCloseModal<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-times<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>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>modal-control<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-close btnCloseModal<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-times<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>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>
     <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>modal-body<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>p</span><span class="token punctuation" >></span></span>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Eu pariatur exercitation commodo amet occaecat non magna ea. Laboris reprehenderit nostrud labore anim Lorem Lorem quis. Tempor officia dolor enim incididunt ut cupidatat sunt.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Incididunt ipsum nostrud quis qui esse est aute anim velit aliqua ipsum. Ipsum mollit nulla ipsum Lorem cillum laboris. Proident nostrud magna consequat elit duis culpa deserunt voluptate. Ullamco commodo ad ea nostrud. Qui ullamco tempor non est adipisicing duis ullamco id ex. Nostrud fugiat mollit commodo veniam id et labore cillum adipisicing adipisicing qui dolor.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</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>modal-body-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>p</span><span class="token punctuation" >></span></span>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Eu pariatur exercitation commodo amet occaecat non magna ea. Laboris reprehenderit nostrud labore anim Lorem Lorem quis. Tempor officia dolor enim incididunt ut cupidatat sunt.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Incididunt ipsum nostrud quis qui esse est aute anim velit aliqua ipsum. Ipsum mollit nulla ipsum Lorem cillum laboris. Proident nostrud magna consequat elit duis culpa deserunt voluptate. Ullamco commodo ad ea nostrud. Qui ullamco tempor non est adipisicing duis ullamco id ex. Nostrud fugiat mollit commodo veniam id et labore cillum adipisicing adipisicing qui dolor.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</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>
     <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>modal-footer has-text-center<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 attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-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>
@@ -3860,7 +4123,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td colspan="2">onClose</td>
       <td>function</td>
       <td></td>
-      <td>팝업 닫을 때 발생이벤트</td>
+      <td>팝업 닫을 때 발생 이벤트</td>
     </tr>
     <tr>
       <td colspan="2">onConfirm</td>
@@ -3868,6 +4131,30 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>확인버튼 클릭 시 수행될 이벤트</td>
     </tr>
+    <tr>
+      <td colspan="2">autoShow</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>컴포넌트 생성 시 자동 표시</td>
+    </tr>
+    <tr>
+      <td colspan="2">autoDestroy</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>modal 창 닫을 때 컴포넌트 제거 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">resizable</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>컨텐츠 영역 리사이징 가능여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">minimized</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>팝업창 최소화 기능 사용여부</td>
+    </tr>
   </tbody>
 </table>
 
@@ -3884,7 +4171,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     <tr>
       <td>close()</td>
       <td>void</td>
-      <td>모달창을 닫는다.</td>
+      <td>modal 창을 닫는다.</td>
+    </tr>
+    <tr>
+      <td>show()</td>
+      <td>void</td>
+      <td>modal 창을 표시한다.</td>
     </tr>
   </tbody>
 </table>
@@ -3896,7 +4188,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Pagination
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\pagination.scss
+        /scss/components/pagination.scss
       </div>
       <div class="aigis-tags">
         
@@ -4119,7 +4411,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Panel
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\panel.scss
+        /scss/components/panel.scss
       </div>
       <div class="aigis-tags">
         
@@ -4299,7 +4591,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Picklist
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\picklist.scss
+        /scss/components/picklist.scss
       </div>
       <div class="aigis-tags">
         
@@ -4771,6 +5063,19 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>target 항목 배열</td>
     </tr>
+    <tr>
+      <td rowspan="2">textSets</td>
+      <td>sourceCaption</td>
+      <td>string</td>
+      <td></td>
+      <td>source 항목 캡션</td>
+    </tr>
+    <tr>
+      <td>targetCaption</td>
+      <td>string</td>
+      <td></td>
+      <td>target 항목 캡션</td>
+    </tr>
     <tr>
       <td colspan="2">orderable</td>
       <td>string, boolean</td>
@@ -4789,6 +5094,42 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>150</td>
       <td>선택항목 영역의 높이</td>
     </tr>
+    <tr>
+      <td colspan="2">hasSourceSearch</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>source 항목 검색기능 활성화 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">hasTargetSearch</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>target 항목 검색기능 활성화 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">onChange</td>
+      <td>function(source, target)</td>
+      <td></td>
+      <td>컴포넌트 값 변경 시 발생 이벤트</td>
+    </tr>
+    <tr>
+      <td colspan="2">onChange</td>
+      <td>function(source, target)</td>
+      <td></td>
+      <td>컴포넌트 값 변경 시 발생 이벤트</td>
+    </tr>
+    <tr>
+      <td colspan="2">onSort</td>
+      <td>function(source, target)</td>
+      <td></td>
+      <td>항목 정렬 시 발생 이벤트</td>
+    </tr>
+    <tr>
+      <td colspan="2">onTransfre</td>
+      <td>function(source, target)</td>
+      <td></td>
+      <td>source, target 간 이동 시 발생 이벤트</td>
+    </tr>
   </tbody>
 </table>
 
@@ -4820,7 +5161,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Progressbar
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\progressbar.scss
+        /scss/components/progressbar.scss
       </div>
       <div class="aigis-tags">
         
@@ -5007,7 +5348,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Tab
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\tab.scss
+        /scss/components/tab.scss
       </div>
       <div class="aigis-tags">
         
@@ -5322,7 +5663,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Tagcloud
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\tagcloud.scss
+        /scss/components/tagcloud.scss
       </div>
       <div class="aigis-tags">
         
@@ -5454,7 +5795,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Tooltip
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\tooltip.scss
+        /scss/components/tooltip.scss
       </div>
       <div class="aigis-tags">
         
@@ -5642,7 +5983,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Tree
       </h2>
       <div class="aigis-module__filepath">
-        /scss\components\tree.scss
+        /scss/components/tree.scss
       </div>
       <div class="aigis-tags">
         
@@ -5782,7 +6123,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <br><b>selected</b>: true 인 경우 체크박스 체크된 상태로 표시
       <br><b>opened</b>: true 인 경우 하위항목이 열린상태로 표시
       <br><b>actived</b>: true 인 경우 선택된 상태로 표시
-      <br><b>icon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) HTMLElement String
+      <br><b>icon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) HTMLElement String 을 통해 사용자 정의 아이콘으로 변경
       <br><b>hideIcon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) 아이콘 숨김 처리</td></td>
     </tr>
     <tr>
@@ -5884,11 +6225,16 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>void</td>
       <td>index번째(0~n) child 데이터를 축소한다. </td>
     </tr>
+    <tr>
+      <td>collapseAll()</td>
+      <td>void</td>
+      <td>열려있는 child 데이터를 축소한다. </td>
+    </tr>
     <tr>
       <td>getChecked(withStatus: Boolean = false)</td>
       <td>array</td>
-      <td>체크박스가 있는 경우(hasCheck: true) 체크된 데이터를 리턴한다</td>
-      <td>withStatus 옵션을 true로 사용하는 경우 리턴 item.__status 에 그 아이템에 대한 상태값을 포함한다</td>
+      <td>체크박스가 있는 경우(hasCheck: true) 체크된 데이터를 리턴한다
+      <br>withStatus 옵션을 true로 사용하는 경우 리턴 item.__status 에 그 아이템에 대한 상태값을 포함한다</td>
     </tr>
     <tr>
       <td>getItemIndex(item: HTMLElement)</td>
@@ -5909,7 +6255,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Button
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\button.scss
+        /scss/controls/button.scss
       </div>
       <div class="aigis-tags">
         
@@ -6220,7 +6566,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         MenuButton
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\button.scss
+        /scss/controls/button.scss
       </div>
       <div class="aigis-tags">
         
@@ -6348,7 +6694,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         SelectButton
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\button.scss
+        /scss/controls/button.scss
       </div>
       <div class="aigis-tags">
         
@@ -6455,7 +6801,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Checkbox
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\checkbox.scss
+        /scss/controls/checkbox.scss
       </div>
       <div class="aigis-tags">
         
@@ -6524,7 +6870,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Colorpicker
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\colorpicker.scss
+        /scss/controls/colorpicker.scss
       </div>
       <div class="aigis-tags">
         
@@ -6604,7 +6950,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Datepicker
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\datepicker.scss
+        /scss/controls/datepicker.scss
       </div>
       <div class="aigis-tags">
         
@@ -6735,7 +7081,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         File
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\file.scss
+        /scss/controls/file.scss
       </div>
       <div class="aigis-tags">
         
@@ -6922,7 +7268,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Control
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\form.scss
+        /scss/controls/form.scss
       </div>
       <div class="aigis-tags">
         
@@ -7024,7 +7370,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Plain
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\form.scss
+        /scss/controls/form.scss
       </div>
       <div class="aigis-tags">
         
@@ -7092,7 +7438,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Field
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\form.scss
+        /scss/controls/form.scss
       </div>
       <div class="aigis-tags">
         
@@ -7221,7 +7567,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Input
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\input.scss
+        /scss/controls/input.scss
       </div>
       <div class="aigis-tags">
         
@@ -7426,7 +7772,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         Textarea
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\input.scss
+        /scss/controls/input.scss
       </div>
       <div class="aigis-tags">
         
@@ -7486,7 +7832,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         MultiText
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\multitext.scss
+        /scss/controls/multitext.scss
       </div>
       <div class="aigis-tags">
         
@@ -7585,6 +7931,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>524288</td>
       <td>최대 입력 글자길이</td>
     </tr>
+    <tr>
+      <td colspan="2">onChange(value)</td>
+      <td>function</td>
+      <td></td>
+      <td>값 변경 시 발생 이벤트</td>
+    </tr>
   </tbody>
 </table>
 
@@ -7598,19 +7950,9 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
   </thead>
   <tbody>
     <tr>
-      <td>change(date)</td>
-      <td>void</td>
-      <td>날짜 값을 변경한다.</td>
-    </tr>
-    <tr>
-      <td>getDate()</td>
+      <td>getValue()</td>
       <td>String</td>
-      <td>날짜 값을 문자열로 반환한다. </td>
-    </tr>
-    <tr>
-      <td>getTime()</td>
-      <td>Date</td>
-      <td>날짜 값을 타임스탬프 형식으로 반환한다.</td>
+      <td>값을 반환한다. </td>
     </tr>
   </tbody>
 </table>
@@ -7621,7 +7963,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Radio
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\radio.scss
+        /scss/controls/radio.scss
       </div>
       <div class="aigis-tags">
         
@@ -7693,7 +8035,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Select
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\select.scss
+        /scss/controls/select.scss
       </div>
       <div class="aigis-tags">
         
@@ -8006,7 +8348,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Slider
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\slider.scss
+        /scss/controls/slider.scss
       </div>
       <div class="aigis-tags">
         
@@ -8070,7 +8412,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Switch
       </h2>
       <div class="aigis-module__filepath">
-        /scss\controls\switch.scss
+        /scss/controls/switch.scss
       </div>
       <div class="aigis-tags">
         
@@ -8268,13 +8610,367 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
 </table>
 
 
+    </div>
+    <div class="aigis-module SyntaxInput">
+      <h2 class="aigis-module__heading" id="SyntaxInput">
+        SyntaxInput
+      </h2>
+      <div class="aigis-module__filepath">
+        /scss/controls/syntaxinput.scss
+      </div>
+      <div class="aigis-tags">
+        
+          
+            <span class="gn-tag">v.0.1.0</span>
+          
+        
+          
+            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+          
+        
+      </div>
+      
+        <!--   <div id="ComponentTab">
+    <ul>
+      <li><a href="#styleguide">Style</a></li>
+      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
+    </ul>
+  </div> -->
+      
+      <h3 id="-">생성 옵션</h3>
+<div class="aigis-preview">
+
+  <p><input type="text" class="syntaxInput" /></p>
+  <p><input type="text" class="syntaxInput2" /></p>
+  <p><input type="text" class="syntaxInput3" /></p>
+</div>
+
+<pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>text<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>syntaxInput<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>p</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>text<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>syntaxInput2<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>p</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>text<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>syntaxInput3<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>p</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" >'syntaxinput'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.syntaxInput'</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" >'syntaxinput'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.syntaxInput2'</span><span class="token punctuation" >,</span>
+    multiple<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+    usetab<span class="token punctuation" >:</span> <span class="token boolean" >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" >'syntaxinput'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.syntaxInput3'</span><span class="token punctuation" >,</span>
+    type<span class="token punctuation" >:</span> <span class="token string" >'custom'</span><span class="token punctuation" >,</span>
+    patterns<span class="token punctuation" >:</span> {
+      constant<span class="token punctuation" >:</span> {
+        pattern<span class="token punctuation" >:</span> <span class="token operator" >/</span>\w<span class="token operator" >+</span><span class="token punctuation" >:</span><span class="token operator" >?</span><span class="token punctuation" >(</span><span class="token operator" >?</span><span class="token operator" >=</span>\<span class="token operator" >/</span><span class="token punctuation" >)</span><span class="token operator" >/</span>gm
+      }<span class="token punctuation" >,</span>
+      keyword<span class="token punctuation" >:</span> {
+        pattern<span class="token punctuation" >:</span> <span class="token operator" >/</span><span class="token punctuation" >[</span><span class="token operator" >^</span><span class="token operator" >/</span><span class="token punctuation" >]</span><span class="token operator" >*</span>$<span class="token operator" >/</span>gm
+      }
+    }
+  }<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>
+    <th>type</th>
+    <th>default</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2">target</td>
+      <td>string</td>
+      <td></td>
+      <td>colorpicker 객체 선택자(selector)</td>
+    </tr>
+    <tr>
+      <td colspan="2">value</td>
+      <td>string</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td colspan="2">multiple</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>true 인 경우, input 대신 textarea 로 입력받는다. </td>
+    </tr>
+    <tr>
+      <td colspan="2">usetab</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>입력창 내 TAB 키 사용 여부. multiple: true 설정 시 사용가능</td>
+    </tr>
+    <tr>
+      <td colspan="2">readonly</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>입력 가능여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">type</td>
+      <td>string</td>
+      <td>html</td>
+      <td>syntax 타입 (plain, plaintext, text, txt, markup, html, mathml, svg, xml, ssml, atom, rss, css, clike, javascript, js) <br>사용자 정의 시 &#39;custom&#39;</td>
+    </tr>
+    <tr>
+      <td colspan="2">onChange</td>
+      <td>function</td>
+      <td></td>
+      <td>input 값 변경 시 호출되는 이벤트</td>
+    </tr>
+    <tr>
+      <td colspan="2">patterns</td>
+      <td>object</td>
+      <td></td>
+      <td>
+        type 을 &#39;custom&#39;으로 지정 후, 패턴 형식의 Object를 설정한다.<br>
+        <pre>
+{
+  [token keyword: string] : {
+    pattern: 스타일을 적용 할 패턴 정규식
+  }
+}
+</pre>
+        <h4>token keyword</h4>
+        <table class="gn-table gn-syntaxinput is-border">
+          <thead>
+            <th>token keyword</th>
+            <th>style</th>
+          </thead>
+          <tbody>
+          <tr>
+            <td>comment</td>
+            <td>
+              <span class="token comment">comment</span>
+            </td>
+          </tr>
+          <tr>
+            <td>prolog</td>
+            <td>
+              <span class="token prolog">prolog</span>
+            </td>
+          </tr>
+          <tr>
+            <td>doctype</td>
+            <td>
+              <span class="token doctype">doctype</span>
+            </td>
+          </tr>
+          <tr>
+            <td>cdata</td>
+            <td>
+              <span class="token cdata">cdata</span>
+            </td>
+          </tr>
+          <tr>
+            <td>punctuation</td>
+            <td>
+              <span class="token punctuation">punctuation</span>
+            </td>
+          </tr>
+          <tr>
+            <td>namespace</td>
+            <td>
+              <span class="token namespace">namespace</span>
+            </td>
+          </tr>
+          <tr>
+            <td>property</td>
+            <td>
+              <span class="token property">property</span>
+            </td>
+          </tr>
+          <tr>
+            <td>tag</td>
+            <td>
+              <span class="token tag">tag</span>
+            </td>
+          </tr>
+          <tr>
+            <td>boolean</td>
+            <td>
+              <span class="token boolean">boolean</span>
+            </td>
+          </tr>
+          <tr>
+            <td>number</td>
+            <td>
+              <span class="token number">number</span>
+            </td>
+          </tr>
+          <tr>
+            <td>constant</td>
+            <td>
+              <span class="token constant">constant</span>
+            </td>
+          </tr>
+          <tr>
+            <td>symbol</td>
+            <td>
+              <span class="token symbol">symbol</span>
+            </td>
+          </tr>
+          <tr>
+            <td>deleted</td>
+            <td>
+              <span class="token deleted">deleted</span>
+            </td>
+          </tr>
+          <tr>
+            <td>selector</td>
+            <td>
+              <span class="token selector">selector</span>
+            </td>
+          </tr>
+          <tr>
+            <td>char</td>
+            <td>
+              <span class="token char">char</span>
+            </td>
+          </tr>
+          <tr>
+            <td>builtin</td>
+            <td>
+              <span class="token builtin">builtin</span>
+            </td>
+          </tr>
+          <tr>
+            <td>inserted</td>
+            <td>
+              <span class="token inserted">inserted</span>
+            </td>
+          </tr>
+          <tr>
+            <td>operator</td>
+            <td>
+              <span class="token operator">operator</span>
+            </td>
+          </tr>
+          <tr>
+            <td>url</td>
+            <td>
+              <span class="token url">url</span>
+            </td>
+          </tr>
+          <tr>
+            <td>string</td>
+            <td>
+              <span class="token string">string</span>
+            </td>
+          </tr>
+          <tr>
+            <td>atrule</td>
+            <td>
+              <span class="token atrule">atrule</span>
+            </td>
+          </tr>
+          <tr>
+            <td>attr</td>
+            <td>
+              <span class="token attr">attr</span>
+            </td>
+          </tr>
+          <tr>
+            <td>keyword</td>
+            <td>
+              <span class="token keyword">keyword</span>
+            </td>
+          </tr>
+          <tr>
+            <td>function</td>
+            <td>
+              <span class="token function">function</span>
+            </td>
+          </tr>
+          <tr>
+            <td>class</td>
+            <td>
+              <span class="token class">class</span>
+            </td>
+          </tr>
+          <tr>
+            <td>regex</td>
+            <td>
+              <span class="token regex">regex</span>
+            </td>
+          </tr>
+          <tr>
+            <td>variable</td>
+            <td>
+              <span class="token variable">variable</span>
+            </td>
+          </tr>
+          <tr>
+            <td>important</td>
+            <td>
+              <span class="token important">important</span>
+            </td>
+          </tr>
+          <tr>
+            <td>bold</td>
+            <td>
+              <span class="token bold">bold</span>
+            </td>
+          </tr>
+          <tr>
+            <td>italic</td>
+            <td>
+              <span class="token italic">italic</span>
+            </td>
+          </tr>
+          <tr>
+            <td>entity</td>
+            <td>
+              <span class="token entity">entity</span>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="-">메소드</h3>
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>name</th>
+    <th>return</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>setValue(value: string)</td>
+      <td>void</td>
+      <td>값을 변경한다.</td>
+    </tr>
+    <tr>
+      <td>getValue()</td>
+      <td>string</td>
+      <td>값을 반환한다.</td>
+    </tr>
+    <tr>
+      <td>disable</td>
+      <td>void</td>
+      <td>Readonly 상태로 전환한다.</td>
+    </tr>
+    <tr>
+      <td>enable</td>
+      <td>void</td>
+      <td>Readonly 상태를 해제한다.</td>
+    </tr>
+  </tbody>
+</table>
+
     </div>
     <div class="aigis-module UTILITY">
       <h2 class="aigis-module__heading" id="UTILITY">
         UTILITY
       </h2>
       <div class="aigis-module__filepath">
-        /scss\default\help.scss
+        /scss/default/help.scss
       </div>
       <div class="aigis-tags">
         
@@ -8512,7 +9208,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Box
       </h2>
       <div class="aigis-module__filepath">
-        /scss\elements\box.scss
+        /scss/elements/box.scss
       </div>
       <div class="aigis-tags">
         
@@ -8550,7 +9246,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Icon
       </h2>
       <div class="aigis-module__filepath">
-        /scss\elements\icon.scss
+        /scss/elements/icon.scss
       </div>
       <div class="aigis-tags">
         
@@ -8686,7 +9382,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Image
       </h2>
       <div class="aigis-module__filepath">
-        /scss\elements\image.scss
+        /scss/elements/image.scss
       </div>
       <div class="aigis-tags">
         
@@ -8770,7 +9466,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         List
       </h2>
       <div class="aigis-module__filepath">
-        /scss\elements\list.scss
+        /scss/elements/list.scss
       </div>
       <div class="aigis-tags">
         
@@ -9037,7 +9733,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Table
       </h2>
       <div class="aigis-module__filepath">
-        /scss\elements\table.scss
+        /scss/elements/table.scss
       </div>
       <div class="aigis-tags">
         
@@ -9391,7 +10087,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Tag
       </h2>
       <div class="aigis-module__filepath">
-        /scss\elements\tag.scss
+        /scss/elements/tag.scss
       </div>
       <div class="aigis-tags">
         
@@ -9517,7 +10213,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Title
       </h2>
       <div class="aigis-module__filepath">
-        /scss\elements\title.scss
+        /scss/elements/title.scss
       </div>
       <div class="aigis-tags">
         
@@ -9574,7 +10270,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Container
       </h2>
       <div class="aigis-module__filepath">
-        /scss\layout\container.scss
+        /scss/layout/container.scss
       </div>
       <div class="aigis-tags">
         
@@ -9680,7 +10376,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Grid
       </h2>
       <div class="aigis-module__filepath">
-        /scss\layout\grid.scss
+        /scss/layout/grid.scss
       </div>
       <div class="aigis-tags">
         
@@ -9951,7 +10647,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
         Splitter
       </h2>
       <div class="aigis-module__filepath">
-        /scss\layout\splitter.scss
+        /scss/layout/splitter.scss
       </div>
       <div class="aigis-tags">
         
@@ -10099,7 +10795,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
   
   
         
-        <footer class="aigis-footer">Last update at 2021/05/17 13:15</footer>
+        <footer class="aigis-footer">Last update at 2021/12/30 10:35</footer>
       </div>
     </div>
   </div>