#30 react IBoard & NoticeBoard

CapstoneDesign-Plus · Aug 27, 2022 · 607d54f · 607d54f
1 parent 4f8a9f5
commit 607d54f
Show file tree

Hide file tree

Showing 10 changed files with 415 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,8 +47,10 @@
   "devDependencies": {
     "@babel/core": "^7.18.13",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
+    "@babel/runtime": "^7.18.9",
     "@types/crypto-js": "^4.1.1",
     "@types/express": "^4.17.13",
     "@types/express-session": "^1.17.5",

diff --git a/public/admin/assets/components/NoticeBoard.js b/public/admin/assets/components/NoticeBoard.js
diff --git a/public/admin/assets/css/index.css b/public/admin/assets/css/index.css
@@ -7,4 +7,11 @@ body {
 
 table {
   border: 2px solid #eee;
+  border-collapse: collapse;
+}
+
+td, th {
+  padding: 5px;
+
+  border: 2px solid #eee;
 }
diff --git a/public/admin/noticeboard.html b/public/admin/noticeboard.html
@@ -8,37 +8,7 @@
   <link rel="stylesheet" href="./assets/css/index.css">
 </head>
 <body>
-  <div id="board"></div>
-  <script type="module">
-    import setupBoard from './assets/js/board.js';
-
-    setupBoard({
-      selectorQuery: '#board',
-      getUrl: (page, per)=>{
-        return `/api/v1/notice/get/list?page=${page}&per=${per}`
-      },
-      getRecord: (notice) => {
-        return `
-          <td>${notice.identifier}</td>
-          <td>${notice.header}</td>
-          <td>${notice.title}</td>
-          <td>${notice.writer}</td>
-          <td>${notice.numOfView}</td>
-          <td>${notice.postedAt}</td>
-        `
-      },
-      onRecordClick: async (divView, tr) => {
-        const fTd = tr.querySelector('td');
-
-        const id = fTd.textContent.trim();
-
-        const res = await fetch(`/api/v1/notice/get/${id}`);
-
-        if(res.status != 200) throw Error('error');
-
-        divView.setText((await res.json()).content)
-      }
-    });
-  </script>
+  <div id="noticeTable"></div>
+  <script src="./assets/components/NoticeBoard.js"></script>
 </body>
 </html>
diff --git a/src/Components/IBoard.jsx b/src/Components/IBoard.jsx
@@ -0,0 +1,84 @@
+
+import React, { Component, Fragment } from "react";
+
+export default class IBoard extends Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      currentPage: 1,
+      currentPerPage: 15,
+      totalLength: 0,
+      items: [],
+    };
+  }
+
+  async componentDidMount() {
+    await this.fetchBoardData();
+  }
+
+  /**
+   * Calculator page limit using state information.
+   */
+  getPageLimit() {
+    return Math.ceil(this.state.totalLength / this.state.currentPerPage);
+  }
+
+  /**
+   * Must override in subclass.
+   * return table head
+   */
+  renderHead() {
+    return (
+      <tr>
+        <th>Board Template</th>
+      </tr>
+    )
+  }
+
+  /**
+   * Must override in subclass.
+   * @param {object} item
+   */
+  renderItem(item) {
+    return (
+      <tr>
+        <td>{item}</td>
+      </tr>
+    )
+  }
+
+  /**
+   * Must override in subclass.
+   */
+  async fetchBoardData() {
+    console.log('fetch');
+  }
+
+  onClickRefresh() {
+    console.log('hello');
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <h2>{this.state.boardName}</h2>
+        <div>
+          <button onClick={()=> this.onClickRefresh()}>Refresh</button>
+        </div>
+        <table>
+          <thead>
+            { this.renderHead() }
+          </thead>
+          <tbody>
+            { this.state.items.map(item=>this.renderItem(item)) }
+          </tbody>
+        </table>
+        <div>
+
+        </div>
+      </Fragment>
+    )
+  }
+}
diff --git a/src/Components/NoticeBoard.jsx b/src/Components/NoticeBoard.jsx
@@ -0,0 +1,45 @@
+
+import IBoard from "./IBoard";
+
+export default class NoticeBoard extends IBoard {
+
+  renderHead() {
+    return (
+    <tr>
+      <th>Notice Id</th>
+      <th>Notice Header</th>
+      <th>Notice Title</th>
+      <th>Notice Writer</th>
+      <th>Notice View</th>
+    </tr>)
+  }
+
+  renderItem(item) {
+    return <tr key={item.identifier}>
+      <td>{item.identifier}</td>
+      <td>{item.header}</td>
+      <td>{item.title}</td>
+      <td>{item.writer}</td>
+      <td>{item.numOfView}</td>
+    </tr>
+  }
+
+  async fetchBoardData() {
+    const res = await fetch(`/api/v1/notice/get/list?page=${this.state.currentPage}&per=${this.state.currentPerPage}`);
+
+    if(res.status != 200) throw Error('error!');
+
+    const data = await res.json();
+
+    this.setState({
+      currentPage : data.currentPage,
+      currentPerPage : data.countPerPage,
+      totalLength: data.totalCount,
+      items: data.values
+    });
+  }
+
+  onClickRefresh() {
+
+  }
+}
diff --git a/src/Components/WordRelay.jsx b/src/Components/WordRelay.jsx
diff --git a/src/Components/client.jsx b/src/Components/client.jsx
@@ -1,5 +1,5 @@
-const React = require('react');
-const ReactDom = require('react-dom');
-const { default: WordRelay } = require('./WordRelay');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import NoticeBoard from './NoticeBoard';
 
-ReactDom.render(<WordRelay/>, document.querySelector('#root'));
+ReactDOM.render(<NoticeBoard/>, document.querySelector('#noticeTable'));
diff --git a/webpack.config.js b/webpack.config.js
@@ -23,8 +23,14 @@ module.exports = {
       test: /\.jsx?/,
       loader: 'babel-loader',
       options: {
-        presets: ['@babel/preset-env', '@babel/preset-react'],
-        plugins: ['@babel/plugin-proposal-class-properties']
+        presets: [
+          '@babel/preset-env', 
+          ['@babel/preset-react', { 'runtime': 'automatic' }]
+        ],
+        plugins: [
+          '@babel/plugin-proposal-class-properties',
+          // '@babel/plugin-transform-runtime'
+        ]
       }
     }]
   },