From 50d0df38853e7d2bee431aa45fd139f01f2d43cf Mon Sep 17 00:00:00 2001
From: Goldman Kim <bbalganjjm@gmail.com>
Date: Fri, 21 Jun 2024 18:14:04 +0900
Subject: [PATCH] Working on removing Material Design 2

---
 src/main/resources/static/css/common.css      |   6 -
 src/main/resources/static/css/common.pub.css  |  51 ++++++++
 .../static/html/com/app/sample/temp0101.html  |   8 +-
 .../static/html/com/app/sample/type0101.html  |  10 +-
 .../static/html/com/app/sample/type0201.html  |  20 ++--
 .../static/html/com/app/sample/type0301.html  |  22 ++--
 .../static/html/com/app/sample/type0401.html  | 108 +++++++++++------
 .../static/html/com/app/sample/type0402.html  | 107 ++++++++++++-----
 .../static/html/com/app/sample/type04P0.html  |   8 +-
 .../static/html/com/app/sample/type0501.html  | 109 ++++++++++++------
 .../static/html/com/app/sample/type0601.html  |  12 +-
 .../static/html/com/app/sample/type0701.html  |   6 +-
 .../static/js/natural_js/natural.config.js    |   4 +-
 .../templates/common/app/file/manager.html    |   6 +-
 .../templates/common/shell/lefter.html        |   4 +-
 15 files changed, 327 insertions(+), 154 deletions(-)

diff --git a/src/main/resources/static/css/common.css b/src/main/resources/static/css/common.css
index 6b4b06c..9299c34 100644
--- a/src/main/resources/static/css/common.css
+++ b/src/main/resources/static/css/common.css
@@ -350,12 +350,6 @@ th, tfoot td {
     margin-top: 16px;
 }
 
-.view_context__ .button-panel {
-    text-align: right;
-    margin-bottom: 16px;
-    line-height: 40px;
-}
-
 .docs_contents__ .view_context__ pre>code,
 pre.shell>code {
     font-family: var(--njs-font-family-code);
diff --git a/src/main/resources/static/css/common.pub.css b/src/main/resources/static/css/common.pub.css
index e63c05c..76327cf 100644
--- a/src/main/resources/static/css/common.pub.css
+++ b/src/main/resources/static/css/common.pub.css
@@ -1 +1,52 @@
 @charset "utf-8";
+
+.view_context__ .search-panel>ul {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 5px;
+    margin: 0 0 10px 0;
+    border: 1px solid var(--md-sys-color-outline-variant);
+}
+.view_context__ .search-panel>ul>li {
+    list-style: none;
+    padding: 5px 10px;
+    margin: 5px;
+    border-radius: var(--njs-border-radius-m);
+    background-color: var(--md-sys-color-surface-container-low);
+}
+.view_context__ .search-panel>ul>li>label>span {
+    display: block;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    padding-bottom: 2px;
+    margin-bottom: 5px;
+    font-size: 90%;
+}
+
+.view_context__ .button-panel {
+    text-align: right;
+    margin-bottom: 10px;
+    line-height: 40px;
+}
+
+.view_context__ ul.form__ {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 5px;
+    margin: 0;
+    border: 1px solid var(--md-sys-color-outline-variant);
+}
+.view_context__ ul.form__>li {
+    flex: 22%;
+    list-style: none;
+    padding: 5px 10px;
+    margin: 5px;
+    border-radius: var(--njs-border-radius-m);
+    background-color: var(--md-sys-color-surface-container-low);
+}
+.view_context__ ul.form__>li>label>span {
+    display: block;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    padding-bottom: 2px;
+    margin-bottom: 5px;
+    font-size: 90%;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/html/com/app/sample/temp0101.html b/src/main/resources/static/html/com/app/sample/temp0101.html
index d0e1e5a..8ecbd15 100644
--- a/src/main/resources/static/html/com/app/sample/temp0101.html
+++ b/src/main/resources/static/html/com/app/sample/temp0101.html
@@ -6,23 +6,23 @@ <h1>메시지</h1>
     <h3>메시지(N.alert, N.notify)</h3>
 
     <div class="mb10">
-        <button id="btnAlert" class="mdc-button mdc-button--raised">Message Dialog</button>&nbsp;&nbsp;
+        <button id="btnAlert">Message Dialog</button>&nbsp;&nbsp;
         <span class="italic">N() 함수의 인수를 window로 지정하면 메시지 오버레이가 화면 전체를 덮어주고 HTML 요소를 지정하면 지정한 요소만 덮는 오버레이요소가 생성됩니다.</span>
     </div>
 
     <div class="mb10">
-        <button id="btnConfirm" class="mdc-button mdc-button--raised">Confirm Dialog</button>&nbsp;&nbsp;
+        <button id="btnConfirm">Confirm Dialog</button>&nbsp;&nbsp;
         <span class="italic">title 옵션 지정 시 타이틀바를 표시하고 confirm 옵션을 true로 지정하면 [확인]/[취소] 버튼을 표시해 줍니다.</span>
     </div>
 
     <div>
-        <button id="btnInput" class="mdc-button mdc-button--raised">Input Message</button>&nbsp;&nbsp;
+        <button id="btnInput">Input Message</button>&nbsp;&nbsp;
         <input id="inputText" type="text" style="width: 100px;"> <span class="italic">input, select, textarea 등의 HTML 입력 요소를 지정하면 지정한 요소 옆에 메시지를 표시해 줍니다.</span>
     </div>
 
     <h3>N.notify</h3>
     <div>
-        <button id="btnNotify" class="mdc-button mdc-button--raised">Notify Message</button>&nbsp;&nbsp;
+        <button id="btnNotify">Notify Message</button>&nbsp;&nbsp;
         <span class="italic">사용자의 확인과정이 필요없는 알림 메시지를 표시합니다.</span>
     </div>
 
diff --git a/src/main/resources/static/html/com/app/sample/type0101.html b/src/main/resources/static/html/com/app/sample/type0101.html
index a93fa36..c2c90fc 100644
--- a/src/main/resources/static/html/com/app/sample/type0101.html
+++ b/src/main/resources/static/html/com/app/sample/type0101.html
@@ -1,16 +1,16 @@
 <article class="type0101">
-    <div id="search" class="form__ search_box__">
+    <div id="search" class="form__">
         <div class="search-panel">
             <ul>
                 <li><label><span>Name</span><input id="name" type="text"></label></li>
-                <li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
-                <li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
+                <li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
+                <li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
             </ul>
         </div>
     </div>
     <div class="button-panel">
-        <button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
-        <button id="btnExcel" class="mdc-button" data-icon="table_chart">엑셀</button>
+        <button id="btnSearch">조회</button>
+        <button id="btnExcel">엑셀</button>
     </div>
     
     <table id="master" class="grid__">
diff --git a/src/main/resources/static/html/com/app/sample/type0201.html b/src/main/resources/static/html/com/app/sample/type0201.html
index 3ab7072..86c30df 100644
--- a/src/main/resources/static/html/com/app/sample/type0201.html
+++ b/src/main/resources/static/html/com/app/sample/type0201.html
@@ -1,20 +1,20 @@
 <article class="type0201">
-    <div id="search" class="form__ search_box__">
+    <div id="search" class="form__">
         <div class="search-panel">
             <ul>
                 <li><label><span>Name</span><input id="name" type="text"></label></li>
-                <li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
-                <li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
+                <li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
+                <li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
             </ul>
         </div>
     </div>
     <div class="button-panel">
-        <button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
-        <button id="btnExcelImport" class="mdc-button" data-icon="table_rows">엑셀임포트</button>
-        <button id="btnExcel" class="mdc-button" data-icon="table_chart">엑셀다운로드</button>
-        <button id="btnAdd" class="mdc-button" data-icon="playlist_add">추가</button> 
-        <button id="btnDelete" class="mdc-button" data-icon="delete_sweep">삭제</button> 
-        <button id="btnSave" class="mdc-button" data-icon="save">저장</button>
+        <button id="btnSearch">조회</button>
+        <button id="btnExcelImport">엑셀임포트</button>
+        <button id="btnExcel">엑셀다운로드</button>
+        <button id="btnAdd">추가</button>
+        <button id="btnDelete">삭제</button>
+        <button id="btnSave">저장</button>
     </div>
     
     <table id="master" class="grid__">
@@ -70,7 +70,7 @@
                 <td><input id="about" type="text"></td>
                 <td colspan="2">
                     <input id="deptNm" type="text" data-validate='[["required"]]' style="width: 75%;" readonly="readonly">
-                    <button id="btnDept" class="mdc-icon-button mdc-icon-button--mini">search</button>
+                    <button id="btnDept" data-opts='{ "size": "middle" }'>Q</button>
                 </td>
                 <td colspan="2"><input id="greeting" type="text"></td>
             </tr>
diff --git a/src/main/resources/static/html/com/app/sample/type0301.html b/src/main/resources/static/html/com/app/sample/type0301.html
index 8bed70c..95c8066 100644
--- a/src/main/resources/static/html/com/app/sample/type0301.html
+++ b/src/main/resources/static/html/com/app/sample/type0301.html
@@ -1,19 +1,19 @@
 <article class="type0301">
-    <div id="search" class="form__ search_box__">
+    <div id="search" class="form__">
         <div class="search-panel">
             <ul>
                 <li><label><span>Name</span><input id="name" type="text"></label></li>
-                <li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
-                <li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
+                <li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
+                <li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
             </ul>
         </div>
     </div>
     <div class="button-panel">
-        <button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
-        <button id="btnExcel" class="mdc-button" data-icon="table_chart">엑셀</button>
+        <button id="btnSearch">조회</button>
+        <button id="btnExcel">엑셀</button>
     </div>
 
-    <div style="position: relative; min-height: 520px;">
+    <div style="position: relative; min-height: 519px;">
         <table id="master" class="grid__">
             <colgroup>
                 <col style="width: 50px;">
@@ -64,15 +64,15 @@
     <div class="pagination-box">
         <div id="masterPagination">
             <ul>
-                <li><a href="#" title="처음"><button class="mdc-icon-button mdc-icon-button--mini">skip_previous</button></a></li>
-                <li><a href="#" title="이전"><button class="mdc-icon-button mdc-icon-button--mini">navigate_before</button></a></li>
+                <li><a href="#" title="처음"></a></li>
+                <li><a href="#" title="이전"></a></li>
             </ul>
             <ul>
                 <li><a href="#"><span>1</span></a></li>
             </ul>
             <ul>
-                <li><a href="#" title="다음"><button class="mdc-icon-button mdc-icon-button--mini">navigate_next</button></a></li>
-                <li><a href="#" title="마지막"><button class="mdc-icon-button mdc-icon-button--mini">skip_next</button></a></li>
+                <li><a href="#" title="다음"></a></li>
+                <li><a href="#" title="마지막"></a></li>
             </ul>
         </div>
     </div>
@@ -98,7 +98,7 @@
         },
         "p.pagination.masterPagination" : {
             blockOnChangeWhenBind : true,
-            countPerPage : 9,
+            countPerPage : 15,
             countPerPageSet : $(window).width() <= 751 ? 4 : 10,
             onChange : function(pageNo, selEle, selData, currPageNavInfo) {
                 cont["c.getSampleList"]().submit(function(data) {
diff --git a/src/main/resources/static/html/com/app/sample/type0401.html b/src/main/resources/static/html/com/app/sample/type0401.html
index 7c86489..35de9d8 100644
--- a/src/main/resources/static/html/com/app/sample/type0401.html
+++ b/src/main/resources/static/html/com/app/sample/type0401.html
@@ -1,11 +1,11 @@
 <article class="type0401">
-    <div id="search" class="form__ search_box__">
+    <div id="search" class="form__">
         <div class="search-panel">
             <ul>
                 <li><label><span>Name</span><input id="name" type="text"></label></li>
-                <li><label><span>Age</span><select id="age" class="mdc-njs-select"><option value="">선택</option></select></label></li>
-                <li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
-                <li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
+                <li><label><span>Age</span><select id="age"><option value="">선택</option></select></label></li>
+                <li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
+                <li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
             </ul>
         </div>
     </div>
@@ -13,8 +13,8 @@
     <div class="flex-horizental">
         <div style="max-width: 33%;">
             <div class="button-panel">
-                <button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
-                <button id="btnSave" class="mdc-button" data-icon="save">저장</button>
+                <button id="btnSearch">조회</button>
+                <button id="btnSave">저장</button>
             </div>
             <table id="master" class="grid__">
                 <colgroup>
@@ -41,66 +41,108 @@
 
         <div>
             <div class="button-panel">
-                <button id="btnAdd" class="mdc-button" data-icon="playlist_add">추가</button>
-                <button id="btnDelete" class="mdc-button" data-icon="delete_sweep">삭제</button>
-                <button id="btnRevert" class="mdc-button" data-icon="restart_alt">초기화</button>
+                <button id="btnAdd">추가</button>
+                <button id="btnDelete">삭제</button>
+                <button id="btnRevert">초기화</button>
             </div>
+
             <ul id="detail" class="form__">
                 <li>
-                    <p class="mdc-njs-fixed-label">Default Picture</p>
-                    <img id="picture" style="height: 56px;">
+                    <label>
+                        <span>Default Picture</span>
+                        <img id="picture" style="height: 56px;">
+                    </label>
                 </li>
-
-
                 <li>
-                    <input id="name" type="text" data-validate='[["required"]]' data-label="Name">
+                    <label>
+                        <span>Name</span>
+                        <input id="name" type="text" data-validate='[["required"]]'>
+                    </label>
                 </li>
                 <li>
-                    <input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" data-label="Department Name" data-trailingicon="search" data-btnid="btnDeptCd">
+                    <label>
+                        <span>Department</span>
+                        <input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" style="width: 70%;">
+                    </label>
+                    <button id="btnDeptCd" data-opts='{ "size": "middle" }'>Q</button>
                 </li>
                 <li>
-                    <input id="email" type="text" data-validate='[["required"], ["email"]]' data-label="Email">
+                    <label>
+                        <span>Email</span>
+                        <input id="email" type="text" data-validate='[["required"], ["email"]]'>
+                    </label>
                 </li>
                 <li>
-                    <input id="balance" type="text" data-format='[["numeric", "$#,###.##0"]]' data-validate='[["required"], ["number"]]' data-label="Balance">
+                    <label>
+                        <span>Balance</span>
+                        <input id="balance" type="text" data-format='[["numeric", "$#,###.##0"]]' data-validate='[["required"], ["number"]]'>
+                    </label>
                 </li>
                 <li>
-                    <input id="phone" type="text" data-validate='[["required"]]' data-label="Phone">
+                    <label>
+                        <span>Phone</span>
+                        <input id="phone" type="text" data-validate='[["required"]]'>
+                    </label>
                 </li>
                 <li>
-                    <select id="eyeColor" data-validate='[["required"]]' class="mdc-njs-select" data-label="Eye Color"><option>선택</option></select>
+                    <label>
+                        <span>Eye Color</span>
+                        <select id="eyeColor" data-validate='[["required"]]'><option>선택</option></select>
+                    </label>
                 </li>
                 <li>
-                    <input id="age" type="text" data-validate='[["required"], ["integer"]]' data-label="Age">
+                    <label>
+                        <span>Age</span>
+                        <input id="age" type="text" data-validate='[["required"], ["integer"]]'>
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Gender</p>
-                    <input id="gender" type="radio">
+                    <label>
+                        <span>Gender</span>
+                        <input id="gender" type="radio">
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Favorite Fruit</p>
-                    <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
+                    <label>
+                        <span>Favorite Fruit</span>
+                        <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
+                    </label>
                 </li>
                 <li>
-                    <input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]' data-label="Registered">
+                    <label>
+                        <span>Registered</span>
+                        <input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]'>
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Company</p>
-                    <select id="company" multiple="multiple" data-validate='[["required"]]' style="height: 100px;"></select>
+                    <label>
+                        <span>Company</span>
+                        <select id="company" multiple="multiple" data-validate='[["required"]]' style="height: 100px;"></select>
+                    </label>
                 </li>
                 <li>
-                    <textarea id="about" rows="4" cols="34" data-validate='[["required"]]' data-label="About"></textarea>
+                    <label>
+                        <span>About</span>
+                        <textarea id="about" rows="4" cols="34" data-validate='[["required"]]'></textarea>
+                    </label>
                 </li>
                 <li>
-                    <textarea id="greeting" rows="4" cols="34" data-validate='[["required"]]' data-label="Greeting"></textarea>
+                    <label>
+                        <span>Greeting</span>
+                        <textarea id="greeting" rows="4" cols="34" data-validate='[["required"]]'></textarea>
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Active</p>
-                    <input id="isActive" type="checkbox">
+                    <label>
+                        <span>Default Picture</span>
+                        <input id="isActive" type="checkbox">
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Attachments</p>
-                    <button id="btnFile" class="mdc-button mdc-button--outlined" data-icon="file_present">File</button>
+                    <label>
+                        <span>Attachments</span>
+                        <button id="btnFile">File</button>
+                    </label>
                 </li>
             </ul>
         </div>
diff --git a/src/main/resources/static/html/com/app/sample/type0402.html b/src/main/resources/static/html/com/app/sample/type0402.html
index bc0cad8..d464333 100644
--- a/src/main/resources/static/html/com/app/sample/type0402.html
+++ b/src/main/resources/static/html/com/app/sample/type0402.html
@@ -1,19 +1,19 @@
 <article class="type0402">
-    <div id="search" class="form__ search_box__">
+    <div id="search" class="form__">
         <div class="search-panel">
             <ul>
                 <li><label><span>Name</span><input id="name" type="text"></label></li>
-                <li><label><span>Age</span><select id="age" class="mdc-njs-select"><option value="">선택</option></select></label></li>
-                <li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
-                <li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
+                <li><label><span>Age</span><select id="age"><option value="">선택</option></select></label></li>
+                <li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
+                <li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
             </ul>
         </div>
     </div>
     
     <div class="button-panel">
-        <button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
-        <button id="btnExcel" class="mdc-button" data-icon="table_chart">엑셀</button>
-        <button id="btnSave" class="mdc-button" data-icon="save">저장</button>
+        <button id="btnSearch">조회</button>
+        <button id="btnExcel">엑셀</button>
+        <button id="btnSave">저장</button>
     </div>
     <table id="master" class="grid__">
         <colgroup>
@@ -48,65 +48,108 @@
 
     <div>
         <div class="button-panel">
-            <button id="btnAdd" class="mdc-button" data-icon="playlist_add">추가</button>
-            <button id="btnDelete" class="mdc-button" data-icon="delete_sweep">삭제</button>
-            <button id="btnRevert" class="mdc-button" data-icon="restart_alt">초기화</button>
+            <button id="btnAdd">추가</button>
+            <button id="btnDelete">삭제</button>
+            <button id="btnRevert">초기화</button>
         </div>
 
         <ul id="detail" class="form__">
             <li>
-                <p class="mdc-njs-fixed-label">Default Picture</p>
-                <img id="picture" style="height: 56px;">
+                <label>
+                    <span>Default Picture</span>
+                    <img id="picture" style="height: 56px;">
+                </label>
             </li>
             <li>
-                <input id="name" type="text" data-validate='[["required"]]' data-label="Name">
+                <label>
+                    <span>Name</span>
+                    <input id="name" type="text" data-validate='[["required"]]'>
+                </label>
             </li>
             <li>
-                <input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" data-label="Department Name" data-trailingicon="search" data-btnid="btnDeptCd">
+                <label>
+                    <span>Department</span>
+                    <input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" style="width: 70%;">
+                </label>
+                <button id="btnDeptCd" data-opts='{ "size": "middle" }'>Q</button>
             </li>
             <li>
-                <input id="email" type="text" data-validate='[["required"], ["email"]]' data-label="Email">
+                <label>
+                    <span>Email</span>
+                    <input id="email" type="text" data-validate='[["required"], ["email"]]'>
+                </label>
             </li>
             <li>
-                <input id="balance" type="text" data-format='[["numeric", "$#,###.##0"]]' data-validate='[["required"], ["number"]]' data-label="Balance">
+                <label>
+                    <span>Balance</span>
+                    <input id="balance" type="text" data-format='[["numeric", "$#,###.##0"]]' data-validate='[["required"], ["number"]]'>
+                </label>
             </li>
             <li>
-                <input id="phone" type="text" data-validate='[["required"]]' data-label="Phone">
+                <label>
+                    <span>Phone</span>
+                    <input id="phone" type="text" data-validate='[["required"]]'>
+                </label>
             </li>
             <li>
-                <select id="eyeColor" data-validate='[["required"]]' class="mdc-njs-select" data-label="Eye Color"><option>선택</option></select>
+                <label>
+                    <span>Eye Color</span>
+                    <select id="eyeColor" data-validate='[["required"]]'><option>선택</option></select>
+                </label>
             </li>
             <li>
-                <input id="age" type="text" data-validate='[["required"], ["integer"]]' data-label="Age">
+                <label>
+                    <span>Age</span>
+                    <input id="age" type="text" data-validate='[["required"], ["integer"]]'>
+                </label>
             </li>
             <li>
-                <p class="mdc-njs-fixed-label">Gender</p>
-                <input id="gender" type="radio">
+                <label>
+                    <span>Gender</span>
+                    <input id="gender" type="radio">
+                </label>
             </li>
             <li>
-                <p class="mdc-njs-fixed-label">Favorite Fruit</p>
-                <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
+                <label>
+                    <span>Favorite Fruit</span>
+                    <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
+                </label>
             </li>
             <li>
-                <input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]' data-label="Registered">
+                <label>
+                    <span>Registered</span>
+                    <input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]'>
+                </label>
             </li>
             <li>
-                <p class="mdc-njs-fixed-label">Company</p>
-                <select id="company" multiple="multiple" data-validate='[["required"]]' style="height: 100px;"></select>
+                <label>
+                    <span>Company</span>
+                    <select id="company" multiple="multiple" data-validate='[["required"]]' style="height: 100px;"></select>
+                </label>
             </li>
             <li>
-                <textarea id="about" rows="4" cols="34" data-validate='[["required"]]' data-label="About"></textarea>
+                <label>
+                    <span>About</span>
+                    <textarea id="about" rows="4" cols="34" data-validate='[["required"]]'></textarea>
+                </label>
             </li>
             <li>
-                <textarea id="greeting" rows="4" cols="34" data-validate='[["required"]]' data-label="Greeting"></textarea>
+                <label>
+                    <span>Greeting</span>
+                    <textarea id="greeting" rows="4" cols="34" data-validate='[["required"]]'></textarea>
+                </label>
             </li>
             <li>
-                <p class="mdc-njs-fixed-label">Active</p>
-                <input id="isActive" type="checkbox">
+                <label>
+                    <span>Default Picture</span>
+                    <input id="isActive" type="checkbox">
+                </label>
             </li>
             <li>
-                <p class="mdc-njs-fixed-label">Attachments</p>
-                <button id="btnFile" class="mdc-button mdc-button--outlined" data-icon="file_present">File</button>
+                <label>
+                    <span>Attachments</span>
+                    <button id="btnFile">File</button>
+                </label>
             </li>
         </ul>
     </div>
diff --git a/src/main/resources/static/html/com/app/sample/type04P0.html b/src/main/resources/static/html/com/app/sample/type04P0.html
index 89079ea..3257141 100644
--- a/src/main/resources/static/html/com/app/sample/type04P0.html
+++ b/src/main/resources/static/html/com/app/sample/type04P0.html
@@ -9,7 +9,7 @@
 </style>
 
 <article class="type04P0" title="부서조회" style="width: 400px;">
-    <div id="search" class="form__ search_box__">
+    <div id="search" class="form__">
         <div class="search-panel">
             <ul>
                 <li><label><span>Department Name</span><input id="deptNm" type="text"></label></li>
@@ -18,7 +18,7 @@
     </div>
 
     <div class="button-panel">
-        <button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
+        <button id="btnSearch">조회</button>
     </div>
 
     <table id="master" class="grid__">
@@ -41,8 +41,8 @@
     </table>
 
     <div class="button-panel">
-        <button id="btnOk" class="mdc-button" data-icon="check_circle">확인</button>
-        <button id="btnCancel" class="mdc-button" data-icon="cancel">취소</button>
+        <button id="btnOk">확인</button>
+        <button id="btnCancel">취소</button>
     </div>
 
 </article>
diff --git a/src/main/resources/static/html/com/app/sample/type0501.html b/src/main/resources/static/html/com/app/sample/type0501.html
index 0e95f89..db97e68 100644
--- a/src/main/resources/static/html/com/app/sample/type0501.html
+++ b/src/main/resources/static/html/com/app/sample/type0501.html
@@ -1,26 +1,26 @@
 <article class="type0501">
-    <div id="search" class="form__ search_box__">
+    <div id="search" class="form__">
         <div class="search-panel">
             <ul>
-                <li><label><span>Name</span><input id="name" type="text"></label></li>
+                <li><label><span>Company</span><input id="company" type="text"></label></li>
             </ul>
         </div>
     </div>
 
     <div class="flex-horizental">
-        <div style=flex: 1">
+        <div style="flex: 1">
             <div class="button-panel">
-                <button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
-                <button id="btnExcelList" class="mdc-button" data-icon="table_chart">엑셀</button>
+                <button id="btnSearch">조회</button>
+                <button id="btnExcelList">엑셀</button>
             </div>
-            <ul id="codeMaster" class="list__ mdc-list">
+            <ul id="codeMaster" class="list__">
                 <li><span id="val"></span></li>
             </ul>
         </div>
         <div style="flex: 2">
             <div class="button-panel">
-                <button id="btnExcelGrid" class="mdc-button" data-icon="table_chart">엑셀</button>
-                <button id="btnSave" class="mdc-button" data-icon="save">저장</button>
+                <button id="btnExcelGrid">엑셀</button>
+                <button id="btnSave">저장</button>
             </div>
             <table id="master" class="grid__">
                 <colgroup>
@@ -47,65 +47,108 @@
 
         <div style="flex: 4">
             <div class="button-panel">
-                <button id="btnAdd" class="mdc-button" data-icon="playlist_add">추가</button>
-                <button id="btnDelete" class="mdc-button" data-icon="delete_sweep">삭제</button>
-                <button id="btnRevert" class="mdc-button" data-icon="restart_alt">초기화</button>
+                <button id="btnAdd">추가</button>
+                <button id="btnDelete">삭제</button>
+                <button id="btnRevert">초기화</button>
             </div>
 
             <ul id="detail" class="form__">
                 <li>
-                    <p class="mdc-njs-fixed-label">Default Picture</p>
-                    <img id="picture" style="height: 56px;">
+                    <label>
+                        <span>Default Picture</span>
+                        <img id="picture" style="height: 56px;">
+                    </label>
                 </li>
                 <li>
-                    <input id="name" type="text" data-validate='[["required"]]' data-label="Name">
+                    <label>
+                        <span>Name</span>
+                        <input id="name" type="text" data-validate='[["required"]]'>
+                    </label>
                 </li>
                 <li>
-                    <input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" data-label="Department Name" data-trailingicon="search" data-btnid="btnDeptCd">
+                    <label>
+                        <span>Department</span>
+                        <input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" style="width: 70%;">
+                    </label>
+                    <button id="btnDeptCd" data-opts='{ "size": "middle" }'>Q</button>
                 </li>
                 <li>
-                    <input id="email" type="text" data-validate='[["required"], ["email"]]' data-label="Email">
+                    <label>
+                        <span>Email</span>
+                        <input id="email" type="text" data-validate='[["required"], ["email"]]'>
+                    </label>
                 </li>
                 <li>
-                    <input id="balance" type="text" data-format='[["numeric", "$#,###.##0"]]' data-validate='[["required"], ["number"]]' data-label="Balance">
+                    <label>
+                        <span>Balance</span>
+                        <input id="balance" type="text" data-format='[["numeric", "$#,###.##0"]]' data-validate='[["required"], ["number"]]'>
+                    </label>
                 </li>
                 <li>
-                    <input id="phone" type="text" data-validate='[["required"]]' data-label="Phone">
+                    <label>
+                        <span>Phone</span>
+                        <input id="phone" type="text" data-validate='[["required"]]'>
+                    </label>
                 </li>
                 <li>
-                    <select id="eyeColor" data-validate='[["required"]]' class="mdc-njs-select" data-label="Eye Color"><option>선택</option></select>
+                    <label>
+                        <span>Eye Color</span>
+                        <select id="eyeColor" data-validate='[["required"]]'><option>선택</option></select>
+                    </label>
                 </li>
                 <li>
-                    <input id="age" type="text" data-validate='[["required"], ["integer"]]' data-label="Age">
+                    <label>
+                        <span>Age</span>
+                        <input id="age" type="text" data-validate='[["required"], ["integer"]]'>
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Gender</p>
-                    <input id="gender" type="radio">
+                    <label>
+                        <span>Gender</span>
+                        <input id="gender" type="radio">
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Favorite Fruit</p>
-                    <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
+                    <label>
+                        <span>Favorite Fruit</span>
+                        <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
+                    </label>
                 </li>
                 <li>
-                    <input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]' data-label="Registered">
+                    <label>
+                        <span>Registered</span>
+                        <input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]'>
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Company</p>
-                    <select id="company" multiple="multiple" data-validate='[["required"]]' style="height: 100px;"></select>
+                    <label>
+                        <span>Company</span>
+                        <select id="company" multiple="multiple" data-validate='[["required"]]' style="height: 100px;"></select>
+                    </label>
                 </li>
                 <li>
-                    <textarea id="about" rows="4" cols="34" data-validate='[["required"]]' data-label="About"></textarea>
+                    <label>
+                        <span>About</span>
+                        <textarea id="about" rows="4" cols="34" data-validate='[["required"]]'></textarea>
+                    </label>
                 </li>
                 <li>
-                    <textarea id="greeting" rows="4" cols="34" data-validate='[["required"]]' data-label="Greeting"></textarea>
+                    <label>
+                        <span>Greeting</span>
+                        <textarea id="greeting" rows="4" cols="34" data-validate='[["required"]]'></textarea>
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Active</p>
-                    <input id="isActive" type="checkbox">
+                    <label>
+                        <span>Default Picture</span>
+                        <input id="isActive" type="checkbox">
+                    </label>
                 </li>
                 <li>
-                    <p class="mdc-njs-fixed-label">Attachments</p>
-                    <button id="btnFile" class="mdc-button mdc-button--outlined" data-icon="file_present">File</button>
+                    <label>
+                        <span>Attachments</span>
+                        <button id="btnFile">File</button>
+                    </label>
                 </li>
             </ul>
         </div>
diff --git a/src/main/resources/static/html/com/app/sample/type0601.html b/src/main/resources/static/html/com/app/sample/type0601.html
index ee7a303..5257856 100644
--- a/src/main/resources/static/html/com/app/sample/type0601.html
+++ b/src/main/resources/static/html/com/app/sample/type0601.html
@@ -3,18 +3,18 @@
         <div style="max-width: 218px;">
             <div class="flex-horizental">
                 <div class="button-panel">
-                    <button id="btnClose" class="mdc-icon-button mdc-icon-button--mini" data-opts='{ "fill" : "outlined" }'>chevron_right</button>
-                    <button id="btnOpen" class="mdc-icon-button mdc-icon-button--mini" data-opts='{ "fill" : "outlined"}'>expand_more</button>
+                    <button id="btnClose">-</button>
+                    <button id="btnOpen">+</button>
                 </div>
             </div>
             <div id="master" style="min-height: 676px;"></div>
         </div>
         <div>
             <div class="button-panel">
-                <button id="btnAdd" class="mdc-button" data-icon="playlist_add">추가</button>
-                <button id="btnDelete" class="mdc-button" data-icon="delete_sweep">삭제</button>
-                <button id="btnSave" class="mdc-button" data-icon="save">저장</button>
-                <button id="btnExcel" class="mdc-button" data-icon="table_chart">엑셀</button>
+                <button id="btnAdd">추가</button>
+                <button id="btnDelete">삭제</button>
+                <button id="btnSave">저장</button>
+                <button id="btnExcel">엑셀</button>
             </div>
             <table id="detail" class="grid__">
                 <colgroup>
diff --git a/src/main/resources/static/html/com/app/sample/type0701.html b/src/main/resources/static/html/com/app/sample/type0701.html
index 5e84ba3..310f7e3 100644
--- a/src/main/resources/static/html/com/app/sample/type0701.html
+++ b/src/main/resources/static/html/com/app/sample/type0701.html
@@ -3,13 +3,13 @@
         <div class="search-panel">
             <ul>
                 <li><label><span>Name</span><input id="name" type="text"></label></li>
-                <li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
-                <li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
+                <li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
+                <li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
             </ul>
         </div>
     </div>
     <div class="button-panel">
-        <button id="btnSearch" href="#" class="btn-search mdc-button mdc-button--raised">조회</button>
+        <button id="btnSearch" href="#" class="btn-search--raised">조회</button>
     </div>
     <div id="master">
         <a href="#"><span></span></a> <!-- 맨 앞으로 가기 버튼 -->
diff --git a/src/main/resources/static/js/natural_js/natural.config.js b/src/main/resources/static/js/natural_js/natural.config.js
index 13d7cc5..5269cbd 100644
--- a/src/main/resources/static/js/natural_js/natural.config.js
+++ b/src/main/resources/static/js/natural_js/natural.config.js
@@ -468,8 +468,8 @@
             }
         },
         "button" : {
-            color : "secondary_container",
-            size : "medium"
+            color : "primary_container",
+            size : "large"
         },
         "popup" : {
             /**
diff --git a/src/main/resources/templates/common/app/file/manager.html b/src/main/resources/templates/common/app/file/manager.html
index 9a0c11c..b951f2d 100644
--- a/src/main/resources/templates/common/app/file/manager.html
+++ b/src/main/resources/templates/common/app/file/manager.html
@@ -77,8 +77,8 @@
     <div class="file_contents__">
         <div class="upload__ flex-horizental">
             <div class="button-panel">
-                <button id="btnAdd" class="mdc-button" data-icon="playlist_add">추가</button>
-                <button id="btnUpload" class="mdc-button mdc-button--raised" data-icon="file_upload">업로드</button>
+                <button id="btnAdd">추가</button>
+                <button id="btnUpload" class="mdc-button--raised">업로드</button>
             </div>
         </div>
         <h4 class="download__">다운로드</h4>
@@ -92,7 +92,7 @@ <h4 class="upload__">업로드<span class="max_upload_file_cnt__"></span></h4>
         <div class="upload__ desc"></div>
     </div>
     <div class="button-panel">
-        <button id="btnOk" class="upload__ mdc-button" data-icon="check_circle">확인</button>
+        <button id="btnOk" class="upload__">확인</button>
     </div>
 </article>
 
diff --git a/src/main/resources/templates/common/shell/lefter.html b/src/main/resources/templates/common/shell/lefter.html
index f4aa01d..1150c77 100644
--- a/src/main/resources/templates/common/shell/lefter.html
+++ b/src/main/resources/templates/common/shell/lefter.html
@@ -171,7 +171,7 @@
                     </li>
                     <li class="leaf-node">
                         <a href="html/com/app/sample/type0301.html" data-pageid="type0301">
-                            <span>조회폼 + 그리드+DB페이징</span>
+                            <span>조회폼 + 그리드 + DB페이징</span>
                         </a>
                     </li>
                     <li class="leaf-node">
@@ -186,7 +186,7 @@
                     </li>
                     <li class="leaf-node">
                         <a href="html/com/app/sample/type0501.html" data-pageid="type0501">
-                            <span>조회폼 + 리스트 + 그리드+상세폼</span>
+                            <span>조회폼 + 리스트 + 그리드 + 상세폼</span>
                         </a>
                     </li>
                     <li class="leaf-node">