diff --git a/src/pages/20181112o4/config.json b/src/pages/20181112o4/config.json
index 557259f..3df0b0d 100644
--- a/src/pages/20181112o4/config.json
+++ b/src/pages/20181112o4/config.json
@@ -1,7 +1,10 @@
 {
   "template": "react",
-  "style": "css",
-  "proxy": {
-      "/api": "http://localhost:3000"
-    }
+  "https": false,
+  "port":8088,
+  "proxy":[{
+    "context": ["/api"],
+    "target": "http://localhost:8080/",
+    "secure": false
+  }]
 }
\ No newline at end of file
diff --git a/src/pages/20181112o4/src/components/app.css b/src/pages/20181112o4/src/components/app.css
index 4c2fba7..07b344f 100644
--- a/src/pages/20181112o4/src/components/app.css
+++ b/src/pages/20181112o4/src/components/app.css
@@ -2,4 +2,22 @@
   width: 100%;
   height: 100%;
   font-size: 16px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.group {
+  height: 100%;
+  flex: 1;
+}
+
+.row {
+  display: flex;
+  justify-content: space-around;
+}
+
+.item {
+  width: 10px;
+  height: 10px;
+  background-color: lightgreen;
 }
diff --git a/src/pages/20181112o4/src/components/app.js b/src/pages/20181112o4/src/components/app.js
index c645302..b2aa8c6 100644
--- a/src/pages/20181112o4/src/components/app.js
+++ b/src/pages/20181112o4/src/components/app.js
@@ -4,10 +4,73 @@ import React, { Component } from 'react';
 import './app.css';
 
 class App extends Component {
+   constructor () {
+      super();
+
+            
+      this.front = 2;
+      this.back = 10;
+      this.gap = 2;
+      this.group = 4;
+      this.lines = (this.back - this.front) / this.gap;
+
+      this.state = {
+         seatList:[]
+      }
+   }
+
+   groupName(g) {
+      let name = '';
+      switch(g) {
+         case 0:
+            name = 'A';
+            break;
+         case 1:
+            name = 'B';
+            break;
+         case 2:
+            name = 'C';
+            break;
+         case 3:
+            name = 'D';
+            break;
+      }
+      return name;
+   }
+
+   componentDidMount() {
+      let list = [];
+      for (let g = 0; g < this.group; g++) {
+         for (let line = this.lines; line >= 0; line--) {
+            for (let seat = 0; seat < (this.back - this.gap * (this.lines - line)); seat++) {
+               list.push({
+                  group: this.groupName(g),
+                  number: seat,
+                  row: line,
+                  disable:false
+               });
+            }
+         };
+      }
+      this.setState({
+         seatList:list
+      });
+
+      console.log(list)
+   }
+
+   renderSeat() {
+      
+   }
+
    render() {
       return (
          <div className="app">
-            Hello World!
+            <div className="group">
+               <div className="row">
+                  <div className="item"></div>
+               </div>
+            </div>
          </div>
       );
    }
diff --git a/src/pages/20181112o4/src/index.css b/src/pages/20181112o4/src/index.css
index ab0b271..ac4846e 100644
--- a/src/pages/20181112o4/src/index.css
+++ b/src/pages/20181112o4/src/index.css
@@ -7,4 +7,6 @@ body {
 #root {
   width: 100%;
   height: 100%;
+  padding: 30px 20px;
+  box-sizing: border-box;
 }
\ No newline at end of file
diff --git a/task/webpack.react.js b/task/webpack.react.js
index 4a34e74..ddf3b67 100644
--- a/task/webpack.react.js
+++ b/task/webpack.react.js
@@ -69,7 +69,7 @@ exports.run = (paths, command) => {
 		    contentBase: path.join(paths.targetPath, "dist"),
 		    compress: true,
 		    host: 'localhost',
-		    port: 8088,
+		    port: _configJson.port ? _configJson.port : 8088,
 		    hot: true,
 		    //open: true,
 			stats: {colors: true},
diff --git a/template/react/config.json b/template/react/config.json
index cefa755..3df0b0d 100644
--- a/template/react/config.json
+++ b/template/react/config.json
@@ -1,6 +1,7 @@
 {
   "template": "react",
   "https": false,
+  "port":8088,
   "proxy":[{
     "context": ["/api"],
     "target": "http://localhost:8080/",