diff --git a/src/App.js b/src/App.js index 3e600c49043915f0ff6075587cbaa0ed2bc89836..0b6506356e287835086ac21a3e3d1ff32b77c7d6 100755 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './assets/css/app.css'; const App = (props) => { let [cartItems, setCartItems] = useState([]); let [showProduct, setShowProduct] = useState(true); + let [order, setOrder] = useState({firstName : '', lastName : ''}); let product = { id: 1001, @@ -38,6 +39,14 @@ const App = (props) => { return product.availableInventory > cartItems.length; } + const updateFirstName = (event) => { + setOrder({firstName : event.target.value, lastName: order.lastName}) + } + + const updateLastName = (event) => { + setOrder({firstName : order.firstName, lastName: event.target.value}) + } + return ( <> <header> @@ -80,7 +89,23 @@ const App = (props) => { </> } {!showProduct && /* Checkout 페이지 들어갈 자리 */ - <div></div> + <div> + <div className="col-md-6"> + <strong>이름</strong> + <input className="form-control" value={order.firstName} onChange={updateFirstName}/> + </div> + <div className="col-md-6"> + <strong>성</strong> + <input className="form-control" value={order.lastName} onChange={updateLastName}/> + </div> + <div className="col-md-12 verify"> + <pre> + 이름 : {order.firstName} + <br/> + 성 : {order.lastName} + </pre> + </div> + </div> } </div> </main>