update function updateOrder, remove other update functions

src/App.js

@@ -39,47 +39,13 @@ const App = (props) => {
     return product.availableInventory > cartItems.length;
   }
 
-  const updateFirstName = (event) => {
-    setOrder({...order, firstName : event.target.value})
-  }
-
-  const updateLastName = (event) => {
-    setOrder({...order, lastName: event.target.value})
-  }
-
-  const updateAddress = (event) => {
-    let address = event.target.value;
-    setOrder({...order, address})
-  }
-
-  const updateState = (event) => {
-    let state = event.target.value;
-    setOrder({...order, state})
-  }
-
   const updateOrder = (event) => {
     let control = event.target;
-    let method = "home";
-    switch(control.id) {
-      case "home":
-        if(control.checked) {
-          method = "home";
-        }
-        console.log(control.value);
-        setOrder({...order, method: control.value})
-        break;
-      case "business":
-        if(control.checked) {
-          method = "business"
-        }
-        console.log(control.value);
-        setOrder({...order, method : control.value})
-        break;
-      case "gift":
-        console.log(control.value, control.checked);
+    if(control.name == "gift") {
       setOrder({...order, gift : control.checked});
-        break;
+      return;
     }
+    setOrder({...order, [control.name] : control.value});
   }
 
 
@@ -128,23 +94,23 @@ const App = (props) => {
             <div>
               <div className="col-md-6">
                 <strong>이름</strong>
-                <input className="form-control" value={order.firstName} onChange={updateFirstName}/>
+                <input className="form-control" name="firstName" value={order.firstName} onChange={updateOrder}/>
               </div>
               <div className="col-md-6">
                 <strong>성</strong>
-                <input className="form-control" value={order.lastName} onChange={updateLastName}/>
+                <input className="form-control" name="lastName" value={order.lastName} onChange={updateOrder}/>
               </div>
 
               <div className="form-group">
                 <div className="col-md-12"> <strong>주소:</strong></div>
                 <div className="col-md-12">
-                  <input className="form-control" value={order.address} onChange={updateAddress}/>
+                  <input className="form-control" name="address" value={order.address} onChange={updateOrder}/>
                 </div>
               </div>
 
               <div className="form-group">
                 <div className="col-md-2"> <strong>주:</strong>
-                  <select className="form-control" value={order.state} onChange={updateState}>
+                  <select className="form-control" name="state" value={order.state} onChange={updateOrder}>
                     <option disabled value="">주</option>
                     <option>AL</option>
                     <option>AR</option>
@@ -157,29 +123,29 @@ const App = (props) => {
               <div className="form-group">
                 <div className="col-md-6 boxes"> 
                 {/* <div className="col-md-12"> */}
-                  <input type="checkbox" id="gift" value={true} onChange={updateOrder}/>
+                  <input type="checkbox" name="gift" id="gift" value={true} onChange={updateOrder}/>
                   <label htmlFor="gift">선물로 보내기?</label>
                 {/* </div> */}
                 </div>
               </div>
 
               <div className="form-group">
-                <div className="col-md-6 boxes">
-                    {/* <div className="col-md-12"> */}
+                <div className="col-md-9 boxes">
+                  <div className="col-md-3">
                     <input key="radio-1" type="radio" name="method" id="home" value="자택" defaultChecked={true} onChange={updateOrder} />
                     <label htmlFor="home">자택</label>
-                    {/* </div> */}
+                  </div>
+                  <div className="col-md-3">
                     <input key="radio-2" type="radio" name="method" id="business" value="직장" onChange={updateOrder} />
                     <label htmlFor="business">직장</label>
                   </div>
                 </div>
+              </div>
 
               <div className="form-group">
-                <div className="col-md-6"> 
-                {/* <div className="col-md-12"> */}
-                  <input type="submit" id="gift" className="btn btn-lg btn-primary submit" 
+                <div className="col-md-12"> 
+                  <input type="submit" name="submit" className="btn btn-lg btn-primary submit" 
                     onClick={()=>{alert("제출완료")}}/>
-                {/* </div> */}
                 </div>
               </div>
 

src/assets/css/app.css

@@ -6,6 +6,10 @@ body {
     max-width: 970px;
 }
 
+label {
+    padding: 3px;
+}
+
 .cart {
     padding: 20px 50px;
 }