feat: 헤더 검색 조건 동적 생성

www/ksvc/base/insp/insp.js

@@ -1,6 +1,14 @@
+const req = {
+  searchReq : [
+    { type : "text",     id : "INSP_ITEM", placeholder : "검사항목" },
+    { type : "checkbox", id : "INSP_ITEM", label : "검사항목", checked : "checked" }
+  ],
+  btnHidden : {}
+};
+
 const App = () => (
   <>
-    <Header />
+    <Header req={req} />
   </>
 );
 

www/ksvc/component/Header.js

@@ -1,14 +1,46 @@
-const Header = () =>{
+const Header = ({req}) =>{
+
   return (
     <div className="inner-container">
 
       <div className="search-container">
 
-        <div className="input-container flexcol gap06">
+        {req.searchReq.map(s=>{
-          <div className="input-box">
+          switch(s.type){
-            <input type="text" id="INSP_ITEM" placeholder="검사항목"></input>
+            case "text":
-          </div>
+              return (
-        </div>
+                <div className="input-container flexcol gap06">
+                  <div className="input-box">
+                    <input type={s.type} id={s.id} placeholder={s.placeholder}></input>
+                  </div>
+                </div>
+              );
+            case "checkbox":
+              return (
+                <div class="input-container flexrow checkbox-container">
+                  <label for={s.id}>{s.label}</label>
+                  <div class="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 class="input-box">
+                    <select name={s.id} id={s.id}>
+                      <option value="">- 전체 -</option>
+                      {s.option.map(op=>(
+                        <option value={op.value}>{op.text}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              )
+
+          }
+        })}
+
         
       </div>