feat: 헤더 버튼 동적 생성 및 비활성화

www/ksvc/base/insp/insp.js

@@ -1,9 +1,20 @@
 const req = {
+  
   searchReq : [
     { type : "text",     id : "INSP_ITEM", placeholder : "검사항목" },
     { type : "checkbox", id : "INSP_ITEM", label : "검사항목", checked : "checked" }
   ],
-  btnHidden : {}
+
+  btn : {
+    excel_down : false,
+    excel_data : false,
+    excel_up   : false,
+    filter_btn : false,
+    put_btn    : false,
+    addBtn     : [
+      { id:"orgna_btn", value:"편성확정", disabled: "false" }
+    ]
+  }
 };
 
 const App = () => (

www/ksvc/component/Header.js

@@ -17,17 +17,17 @@ const Header = ({req}) =>{
               );
             case "checkbox":
               return (
-                <div class="input-container flexrow checkbox-container">
+                <div className="input-container flexrow checkbox-container">
                   <label for={s.id}>{s.label}</label>
-                  <div class="input-box">
+                  <div className="input-box">
                     <input type={s.type} id={s.id} checked={s.checked}></input>
                   </div>
                 </div>
               )
             case "select":
               return (
-                <div class="input-container flexcol gap06">
+                <div className="input-container flexcol gap06">
-                  <div class="input-box">
+                  <div className="input-box">
                     <select name={s.id} id={s.id}>
                       <option value="">- 전체 -</option>
                       {s.option.map(op=>(
@@ -46,12 +46,19 @@ const Header = ({req}) =>{
 
       <div className="button-container">
         <div className="button-box">
-          <button className="point-btn" id="excel_down">엑셀 양식 다운로드</button>
+          <button className="point-btn" disabled={req.btn["excel_down"]} id="excel_down">엑셀 양식 다운로드</button>
           <input type="file" id="fileInput" hidden accept=".xlsx, .xls"></input>
-          <button className="point-btn" id="excel_data">엑셀 다운로드</button>
+          <button className="point-btn" disabled={req.btn["excel_data"]} id="excel_data">엑셀 다운로드</button>
-          <button className="point-btn" id="excel_up">엑셀 업로드</button>
+          <button className="point-btn" disabled={req.btn["excel_up"]} id="excel_up">엑셀 업로드</button>
-          <button className="point-btn" id="filter_btn">조회</button>
+
-          <button className="point-btn" id="put_btn">저장</button>
+          { req.btn.addBtn ? req.btn.addBtn.map((add)=>{
+            return(
+                <button className="point-btn" disabled={add.disabled} id={add.id}>{add.value}</button>
+              )
+            }) : null }
+
+          <button className="point-btn" disabled={req.btn["filter_btn"]} id="filter_btn">조회</button>
+          <button className="point-btn" disabled={req.btn["put_btn"]} id="put_btn">저장</button>
         </div>
       </div>