feat: 테이블 컴포넌트 분리

www/ksvc/base/insp/insp.js

@@ -1,5 +1,5 @@
 const req = {
-  
+
   searchReq : [
     { type : "text",     id : "INSP_ITEM", placeholder : "검사항목" },
     { type : "checkbox", id : "INSP_ITEM", label : "검사항목", checked : "checked" }
@@ -12,15 +12,22 @@ const req = {
     filter_btn : false,
     put_btn    : false,
     addBtn     : [
-      { id:"orgna_btn", value:"편성확정", disabled: "false" }
+      { id:"orgna_btn", value:"편성확정", disabled: true }
     ]
   }
 };
 
 const App = () => (
   <>
-    <Header req={req} />
+    <div className="table-header item-header">
+      <Header req={req} />
+    </div>
+    <TableContainer>
+      <Table title={"검사항목등록"} height={"tb-height-half"}/>
+      <Table title={"검사항목등록2"} height={"tb-height-half"}/>
+    </TableContainer>
   </>
 );
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);

www/ksvc/base/insp/insp.php

@@ -16,55 +16,11 @@ include_once _SVC_INC_PATH_ . "/header.php";
   <?php include_once _SVC_INC_PATH_ . "/sidebar.php"; ?>
   <!-- 사이드바 불러오기 종료 // -->
 
-    <!-- 검색 조회 및 저장 -->
+  <div id="root"></div>
-    <div class="table-header item-header" id="root">
-    </div>
-    <!-- 검색 조회 및 저장 종료 // -->
 
 
 
-    <!-- 컨텐츠 컨테이너 -->
-    <div class="contents-container">
 
-      <!-- 테이블 컨테이너 -->
-      <div class="table-container">
-        <div class="inner-container">
-
-          <div class="table-box" id="main_container">
-            <!-- 테이블 헤더 (제목, 추가, 삭제, 저장) -->
-            <div class="table-title">
-              <p class="title">검사항목</p>
-
-              <!-- 버튼 -->
-              <div class="button-box">
-                <button class="add-btn reverse-btn">
-                  <?php include _SVC_INC_PATH_ . '/img/add.php' ?>
-                  추가
-                </button>
-                <button class="remove-btn reverse-btn">
-                  <?php include _SVC_INC_PATH_ . '/img/delete.php' ?>
-                  삭제
-                </button>
-              </div>
-              <!-- 버튼 종료 // -->
-
-            </div>
-            <!-- 테이블 헤더 종료 // -->
-
-            <!-- 테이블 -->
-            <div class="tb-height-full">
-              <div class="hy-table" id="insp_table"></div>
-            </div>
-            <!-- 테이블 종료 // -->
-
-          </div>
-
-        </div>
-      </div>
-      <!-- 테이블 컨테이너 종료 // -->
-
-    </div>
-    <!-- 컨텐츠 컨테이너 종료 // -->
 
   </div>
   <!-- 메인 섹션 종료 // -->
@@ -73,6 +29,8 @@ include_once _SVC_INC_PATH_ . "/header.php";
 
 <?php include_once _SVC_INC_PATH_ . "/footer_common.php"; ?>
 <script type="text/babel" src="../../component/Header.js"></script>
+<script type="text/babel" src="../../component/Table.js"></script>
+<script type="text/babel" src="../../component/TableContainer.js"></script>
 <script type="text/babel" src="./insp.js"></script>
 <script src="./insp_excel.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>

www/ksvc/component/Header.js

@@ -5,11 +5,11 @@ const Header = ({req}) =>{
 
       <div className="search-container">
 
-        {req.searchReq.map(s=>{
+        {req.searchReq.map((s, sidx)=>{
           switch(s.type){
             case "text":
               return (
-                <div className="input-container flexcol gap06">
+                <div key={'input_'+sidx} className="input-container flexcol gap06">
                   <div className="input-box">
                     <input type={s.type} id={s.id} placeholder={s.placeholder}></input>
                   </div>
@@ -17,21 +17,21 @@ const Header = ({req}) =>{
               );
             case "checkbox":
               return (
-                <div className="input-container flexrow checkbox-container">
+                <div key={'input_'+sidx} className="input-container flexrow checkbox-container">
-                  <label for={s.id}>{s.label}</label>
+                  <label htmlFor={s.id}>{s.label}</label>
                   <div className="input-box">
-                    <input type={s.type} id={s.id} checked={s.checked}></input>
+                    <input type={s.type} id={s.id} defaultChecked={s.checked}></input>
                   </div>
                 </div>
               )
             case "select":
               return (
-                <div className="input-container flexcol gap06">
+                <div key={'input_'+sidx} className="input-container flexcol gap06">
                   <div className="input-box">
                     <select name={s.id} id={s.id}>
                       <option value="">- 전체 -</option>
-                      {s.option.map(op=>(
+                      {s.option.map((op, opidx)=>(
-                        <option value={op.value}>{op.text}</option>
+                        <option key={'op_'+opidx} value={op.value}>{op.text}</option>
                       ))}
                     </select>
                   </div>
@@ -51,9 +51,9 @@ const Header = ({req}) =>{
           <button className="point-btn" disabled={req.btn["excel_data"]} id="excel_data">엑셀 다운로드</button>
           <button className="point-btn" disabled={req.btn["excel_up"]} id="excel_up">엑셀 업로드</button>
 
-          { req.btn.addBtn ? req.btn.addBtn.map((add)=>{
+          { req.btn.addBtn ? req.btn.addBtn.map((add, idx)=>{
             return(
-                <button className="point-btn" disabled={add.disabled} id={add.id}>{add.value}</button>
+                <button key={'btn_'+idx} className="point-btn" disabled={add.disabled} id={add.id}>{add.value}</button>
               )
             }) : null }
 

www/ksvc/component/Table.js

@@ -0,0 +1,48 @@
+class Table extends React.Component {
+  constructor(props){
+    super(props);
+    this.title = props.title;
+    this.height = props.height;
+
+    this.ajaxUrl = "./insp.ajax.php";
+  }
+  componentDidMount() {
+
+    const tableData = [
+      {id: 1, name: "John", age: 29},
+      {id: 2, name: "Jane", age: 34},
+      {id: 3, name: "Smith", age: 23}
+    ];
+
+    const table = new Tabulator(this.tableRef, {
+      data: tableData,
+      layout: "fitColumns",
+      columns: [
+        {title: "ID", field: "id", width: 150},
+        {title: "Name", field: "name"},
+        {title: "Age", field: "age"}
+      ]
+    });
+  }
+
+  render() {
+    return (
+      <>
+        <div className="table-title">
+        <p className="title">{this.title}</p>
+
+
+        <div className="button-box">
+          <button className="add-btn reverse-btn" onClick={this.addRow}>추가</button>
+          <button className="remove-btn reverse-btn" onClick={this.removeRow}>삭제</button>
+        </div>
+
+
+      </div>  
+      <div className={this.height}>
+        <div className="hy-table" ref={el => (this.tableRef = el)} id="insp_table"></div>
+      </div>
+      </>
+    );
+  }
+}

www/ksvc/component/TableContainer.js

@@ -0,0 +1,18 @@
+const TableContainer = ({title, children}) => {
+
+  return (
+    <div className="contents-container">
+
+      <div className="table-container">
+        <div className="inner-container">
+          <div className="table-box" id="main_container">
+  
+            {children}
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+  )
+}