치킨 가격 , 국밥가격 페이지에 표시, 확인버튼은 필요가 없어져서 리셋버튼으로 바꿨습니다.

src/App.css

@@ -9,15 +9,19 @@ body {
   text-align: center;
   margin: 0;
   padding: 0;
-
+  font-weight: normal;
   margin-top: 20em;
   background-image: url("http://www.powerkoream.co.kr/news/photo/201412/1102039_1308_2456.jpg");
   background-repeat: no-repeat;
   background-size: 100%;
 }
 
-h2 {
+h2,
+h3 {
+  font-size: 30px;
   font-weight: normal;
+  color: rgb(187, 187, 255);
+  -webkit-text-stroke: 1px black;
 }
 
 .vignette {
@@ -50,7 +54,7 @@ label {
 
 input[type="text"] {
   width: 20%;
-  font-size: 50px;
+  font-size: 40px;
   color: white;
   border: 1px solid #ccc;
   box-sizing: border-box;

src/components/Description.jsx

@@ -1,7 +1,7 @@
-import React, {Component} from "react";
-import {inject, observer} from "mobx-react";
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
 
-@inject('userInput')
+@inject("userInput")
 @observer
 class Description extends Component {
   constructor(props) {
@@ -10,9 +10,23 @@ class Description extends Component {
   }
 
   render() {
-    const {userInput} = this.props;
-    return (<div><h2>당신의 돈 국밥으로 환산해보셨습니까?</h2>
-      <h3>당신이 알고싶은 국밥가 : {userInput.price}</h3></div>);
+    const { userInput } = this.props;
+    let gookbab = userInput.price / 5000;
+    let chicken = userInput.price / 16000;
+    return (
+      <div>
+        <h2>당신의 돈 국밥으로 환산해보셨습니까?</h2>
+        <h3>당신이 알고싶은 국밥가 : {gookbab}</h3>
+        <h3>
+          고것은{" "}
+          <font size="40" color="yellow">
+            {" "}
+            {chicken}{" "}
+          </font>{" "}
+          치킨이구연{" "}
+        </h3>
+      </div>
+    );
   }
 }
 

src/components/PriceForm.jsx

@@ -1,8 +1,8 @@
-import {userInput} from "../store";
-import {inject, observer} from "mobx-react/dist/mobx-react";
-import React, {Component} from "react";
+import { userInput } from "../store";
+import { inject, observer } from "mobx-react/dist/mobx-react";
+import React, { Component } from "react";
 
-@inject('userInput')
+@inject("userInput")
 @observer
 class PriceForm extends Component {
   constructor(props) {
@@ -13,36 +13,35 @@ class PriceForm extends Component {
   }
 
   handleChange(event) {
-    const {userInput} = this.props;
+    const { userInput } = this.props;
     userInput.setPrice(event.target.value);
   }
 
   handleSubmit(event) {
-    const {userInput} = this.props;
-    let gookbabCount = parseInt(userInput.price, 10);
-
-    const converted = gookbabCount / 5000;
-    alert("고것은 " + converted + " 국밥이네요.");
+    const { userInput } = this.props;
+    userInput.price = "";
 
     event.preventDefault();
   }
 
   render() {
-    const {userInput} = this.props;
-    return (<div>
-      <form onSubmit={this.handleSubmit}>
-        <label>
-          가격:
-          <input
-            type="text"
-            value={userInput.price}
-            onChange={this.handleChange}
-          />
-        </label>
-        <input type="submit" className="btnClass" value="확인"/>
-      </form>
-    </div>)
+    const { userInput } = this.props;
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          <label>
+            가격:
+            <input
+              type="text"
+              value={userInput.price}
+              onChange={this.handleChange}
+            />
+          </label>
+          <input type="submit" className="btnClass" value="리셋" />
+        </form>
+      </div>
+    );
   }
 }
 
-export default PriceForm;
+export default PriceForm;

src/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}