diff --git a/src/App.css b/src/App.css index 43a0dd4..3866309 100644 --- a/src/App.css +++ b/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; diff --git a/src/components/Description.jsx b/src/components/Description.jsx index 7abb3d7..5764bcd 100644 --- a/src/components/Description.jsx +++ b/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 (

당신의 돈 국밥으로 환산해보셨습니까?

-

당신이 알고싶은 국밥가 : {userInput.price}

); + const { userInput } = this.props; + let gookbab = userInput.price / 5000; + let chicken = userInput.price / 16000; + return ( +
+

당신의 돈 국밥으로 환산해보셨습니까?

+

당신이 알고싶은 국밥가 : {gookbab}

+

+ 고것은{" "} + + {" "} + {chicken}{" "} + {" "} + 치킨이구연{" "} +

+
+ ); } } diff --git a/src/components/PriceForm.jsx b/src/components/PriceForm.jsx index cc3af2d..907b121 100644 --- a/src/components/PriceForm.jsx +++ b/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 (
-
- - -
-
) + const { userInput } = this.props; + return ( +
+
+ + +
+
+ ); } } -export default PriceForm; \ No newline at end of file +export default PriceForm; diff --git a/src/jsconfig.json b/src/jsconfig.json new file mode 100644 index 0000000..504cd64 --- /dev/null +++ b/src/jsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "experimentalDecorators": true + } +}