gnui 1.2.19 → 1.2.21

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

@@ -147,6 +147,7 @@
   <div class="new-tree1"></div>
   <div class="new-tree2"></div>
   <div class="new-tree3"></div>
+  <div class="new-tree4"></div>
 </div>
 </div>
 
@@ -154,6 +155,7 @@
   <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-tree1<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-tree2<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-tree3<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-tree4<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 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" >'tree'</span><span class="token punctuation" >,</span> {
@@ -165,7 +167,7 @@
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'R&amp;D Center'</span><span class="token punctuation" >,</span>
@@ -174,7 +176,7 @@
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span>
@@ -190,7 +192,7 @@
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'R&amp;D Center'</span><span class="token punctuation" >,</span>
@@ -199,43 +201,83 @@
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span>
       }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
       color<span class="token punctuation" >:</span> <span class="token string" >'success'</span><span class="token punctuation" >,</span>
-      multiple<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+      hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >false</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" >'tree'</span><span class="token punctuation" >,</span> {
       target<span class="token punctuation" >:</span> <span class="token string" >'.new-tree3'</span><span class="token punctuation" >,</span>
       data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'Genians'</span><span class="token punctuation" >,</span>
-        selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'genians'</span><span class="token punctuation" >,</span>
         actived<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
         opened<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" >'GNUI'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'gnui'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'gnui-core'</span><span class="token punctuation" >,</span>
+          opened<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" >'GNUI'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'gnui-nested'</span>
+          }<span class="token punctuation" >,</span>{
+            text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'gnui-core-nested'</span>
+          }<span class="token punctuation" >,</span>{
+            text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'gnconfengine-nested'</span><span class="token punctuation" >,</span>
+            selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+          }<span class="token punctuation" >]</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span><span class="token punctuation" >,</span>
-          selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'gnconfengine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'R&amp;D Center'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'rnd-center'</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" >'GNUI'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'rnd-gnui'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'rnd-gnui-core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'rnd-gnconfengine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
-        text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span>
+        text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'frontend'</span>
       }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
       hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</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" >'tree'</span><span class="token punctuation" >,</span> {
+      target<span class="token punctuation" >:</span> <span class="token string" >'.new-tree4'</span><span class="token punctuation" >,</span>
+      data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
+        text<span class="token punctuation" >:</span> <span class="token string" >'Disabled Root'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'disabled-root'</span><span class="token punctuation" >,</span>
+        opened<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" >'Locked Node'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'locked-node'</span><span class="token punctuation" >,</span>
+          selected<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" >'Review Only'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'review-only'</span>
+        }<span class="token punctuation" >]</span>
+      }<span class="token punctuation" >,</span>{
+        text<span class="token punctuation" >:</span> <span class="token string" >'Disabled Leaf'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'disabled-leaf'</span>
+      }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+      hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+    }<span class="token punctuation" >)</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -256,10 +298,11 @@
       <td></td>
       <td>{key: value}로 이루어진 데이터
       <br><b>text</b>: 메뉴명
+      <br><b>value</b>: 노드 식별 값
       <br><b>selected</b>: true 인 경우 체크박스 체크된 상태로 표시
       <br><b>opened</b>: true 인 경우 하위항목이 열린상태로 표시
       <br><b>actived</b>: true 인 경우 선택된 상태로 표시
-      <br><b>disabled</b>: true 인 경우 선택할 수 없는 항목으로 표시
+      <br><b>disabled</b>: true 인 경우 해당 노드 선택·체크 불가
       <br><b>icon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) HTMLElement String 을 통해 사용자 정의 아이콘으로 변경
       <br><b>hideIcon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) 아이콘 숨김 처리</td></td>
     </tr>
@@ -300,10 +343,10 @@
       <td>하위 항목 선택 시 상위항목 자동선택 여부</td>
     </tr>
     <tr>
-      <td colspan="2">multiple</td>
+      <td colspan="2">checkChild</td>
       <td>boolean</td>
-      <td>false</td>
-      <td>다중선택 가능여부</td>
+      <td>true</td>
+      <td>부모 항목 선택 시 하위항목 자동선택 여부</td>
     </tr>
     <tr>
       <td colspan="2">showIcon</td>
@@ -311,6 +354,12 @@
       <td>false</td>
       <td>메뉴명 앞 아이콘 표시 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>true 인 경우 초기 렌더 시 전체 트리가 비활성화되며(is-disabled), 선택/체크 상호작용은 불가하지만 토글러를 통한 확장/축소는 가능</td>
+    </tr>
     <tr>
       <td colspan="2">onSelect</td>
       <td>function</td>
@@ -367,6 +416,26 @@
       <td>void</td>
       <td>열려있는 child 데이터를 축소한다. </td>
     </tr>
+    <tr>
+      <td>expandAll()</td>
+      <td>void</td>
+      <td>모든 노드를 확장한다.</td>
+    </tr>
+    <tr>
+      <td>checkAll()</td>
+      <td>void</td>
+      <td>모든 노드를 체크한다. <b>hasCheck: true</b>일 때만 유효하며, 그 외에는 no-op이다.</td>
+    </tr>
+    <tr>
+      <td>uncheckAll()</td>
+      <td>void</td>
+      <td>모든 노드의 체크를 해제한다. <b>hasCheck: true</b>일 때만 유효하며, 그 외에는 no-op이다.</td>
+    </tr>
+    <tr>
+      <td>setChecked(targets: string | string[], checked: boolean)</td>
+      <td>void</td>
+      <td>전달한 단일 또는 복수 노드를 체크/해제한다. 노드 식별은 <b>value</b>로만 수행하며, 대상 노드에는 고유한 <b>value</b>가 필요하다. <b>hasCheck: true</b>일 때만 유효하다.</td>
+    </tr>
     <tr>
       <td>getChecked(withStatus: Boolean = false)</td>
       <td>array</td>
@@ -388,6 +457,16 @@
       <td>any</td>
       <td>keyword를 포함한 아이템만 표시한다</td>
     </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>트리 컴포넌트 전체를 비활성화한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>트리 컴포넌트 전체를 활성화한다.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -396,7 +475,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/CONTROLS/Button(js)/index.html

@@ -457,7 +457,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/CONTROLS/Checkbox/index.html

@@ -186,7 +186,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/CONTROLS/Colorpicker(js)/index.html

@@ -277,7 +277,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/CONTROLS/Datepicker(js)/index.html

@@ -321,7 +321,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/CONTROLS/Dropdown(js)/index.html

@@ -122,7 +122,7 @@
   
   <div class="aigis-module Dropdown">
     <h2 class="aigis-module__heading" id="Dropdown">Dropdown</h2>
-    <div class="aigis-module__filepath">/scss/components/dropdown.scss</div>
+    <div class="aigis-module__filepath">/scss/controls/dropdown.scss</div>
     <div class="aigis-tags">
        
       <span class="gn-tag">v.0.1.0</span>
@@ -854,6 +854,9 @@
     <option value="item5" data-desc="항목5 설명">항목5</option>
   </select>
 
+  <select class="new-dropdown5" name="dropdown5">
+  </select>
+
 
 </div>
 
@@ -877,6 +880,9 @@
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item5<span class="token punctuation" >"</span></span> <span class="token attr-name" >data-desc</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>항목5 설명<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목5<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
 
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown5<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown5<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>select</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" >'dropdown'</span><span class="token punctuation" >,</span> {
@@ -950,7 +956,63 @@
     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>
-</code></pre><table class="gn-table is-full is-border">
+  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-dropdown5'</span><span class="token punctuation" >,</span>
+    onChange<span class="token punctuation" >:</span> function <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 comment" spellcheck="true">;</span>
+    }<span class="token punctuation" >,</span>
+    width<span class="token punctuation" >:</span> <span class="token string" >'300px'</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" >'1'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목1'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리A'</span><span class="token punctuation" >,</span> <span class="token string" >'1000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목2'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리B'</span><span class="token punctuation" >,</span> <span class="token string" >'2000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목3'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리C'</span><span class="token punctuation" >,</span> <span class="token string" >'3000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목4'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리A'</span><span class="token punctuation" >,</span> <span class="token string" >'4000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'5'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목5'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리B'</span><span class="token punctuation" >,</span> <span class="token string" >'5000'</span><span class="token punctuation" >]</span> }
+    <span class="token punctuation" >]</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+</code></pre><h3 id="-dropdownitem-">데이터 모델 (DropdownItem)</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가 있는 항목만 선택 가능하다.)</td>
+    </tr>
+    <tr>
+      <td>icon</td>
+      <td>string</td>
+      <td>N</td>
+      <td><a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name</td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
     <th>type</th>
@@ -985,14 +1047,9 @@
     </tr>
     <tr>
       <td colspan="2">data</td>
-      <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
+      <td>DropdownItem[]</td>
       <td></td>
-      <td>
-        value: 항목 값<br/>
-        text: 옵션 텍스트<br/>
-        html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br/>
-        icon : <a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name 
-      </td>
+      <td>dropdown에 표시할 데이터 배열<br/>- DropdownItem 참조<br/><br/><strong>참고:</strong> 표시 우선순위는 html &gt; cols &gt; text 입니다. html 항목은 text가 있는 경우만 선택 가능하며, html이 있으면 cols는 무시됩니다.</td>
     </tr>
     <tr>
       <td colspan="2">value</td>
@@ -1104,7 +1161,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/CONTROLS/File/index.html

@@ -304,7 +304,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/CONTROLS/Form/Control/index.html

@@ -219,7 +219,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/CONTROLS/Form/Field/index.html

@@ -122,7 +122,7 @@
   
   <div class="aigis-module Field">
     <h2 class="aigis-module__heading" id="Field">Field</h2>
-    <div class="aigis-module__filepath">/scss/controls/form.scss</div>
+    <div class="aigis-module__filepath">/scss/controls/field.scss</div>
     <div class="aigis-tags">
        
       <span class="gn-tag">v.0.1.0</span>
@@ -239,6 +239,58 @@
     <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-plain is-full<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>gnui-guide.png<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>
+</code></pre>
+<h3 id="label-">Label 정렬 및 너비 조절 (가로 정렬일 때)</h3>
+<ul>
+<li>Label에 UTILITY의 텍스트 정렬 클래스(<code>has-text-left</code>, <code>has-text-right</code>, <code>has-text-center</code>)를 적용하여 정렬 변경 가능</li>
+<li>Label에 Grid의 사이즈 클래스(<code>is-1</code> ~ <code>is-12</code>)를 적용하여 너비 조절 가능</li>
+</ul>
+<div class="aigis-preview">
+  <!-- Label 왼쪽 정렬 -->
+<div class="gn-field">
+    <div class="gn-label has-text-left">이름</div>
+    <div class="gn-control">
+        <input class="gn-input" placeholder="input name">
+    </div>
+</div>
+<!-- Label 너비 조절 (Grid 사이즈 클래스 사용) -->
+<div class="gn-field">
+    <div class="gn-label is-3">다국어용 긴 레이블 텍스트</div>
+    <div class="gn-control">
+        <input class="gn-input" placeholder="input name">
+    </div>
+</div>
+<!-- Label 왼쪽 정렬 + 너비 조절 조합 -->
+<div class="gn-field">
+    <div class="gn-label has-text-left is-4">다국어용 매우 긴 레이블 텍스트</div>
+    <div class="gn-control">
+        <input class="gn-input" placeholder="input name">
+    </div>
+</div></div>
+
+<pre><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- Label 왼쪽 정렬 --></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>gn-field<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>gn-label has-text-left<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>gn-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>input</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input name<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 punctuation" >></span></span>
+
+<span class="token comment" spellcheck="true">&lt;!-- Label 너비 조절 (Grid 사이즈 클래스 사용) --></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>gn-field<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>gn-label is-3<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>gn-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>input</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input name<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 punctuation" >></span></span>
+
+<span class="token comment" spellcheck="true">&lt;!-- Label 왼쪽 정렬 + 너비 조절 조합 --></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>gn-field<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>gn-label has-text-left is-4<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>gn-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>input</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input name<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 punctuation" >></span></span>
 </code></pre>
 
   </div>
@@ -246,7 +298,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/CONTROLS/Form/Plain/index.html

@@ -122,7 +122,7 @@
   
   <div class="aigis-module Plain">
     <h2 class="aigis-module__heading" id="Plain">Plain</h2>
-    <div class="aigis-module__filepath">/scss/controls/form.scss</div>
+    <div class="aigis-module__filepath">/scss/controls/plain.scss</div>
     <div class="aigis-tags">
        
       <span class="gn-tag">v.0.1.0</span>
@@ -185,7 +185,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/CONTROLS/Input/index.html

@@ -322,7 +322,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>