Select Git revision
Forked from
sce213ta / mysh-1
Source project has a limited visibility.
-
Jaewon Choi authoredJaewon Choi authored
App.js 8.13 KiB
import React, { useState, useEffect } from 'react';
import './assets/css/app.css';
const App = (props) => {
let [cartItems, setCartItems] = useState({});
let [showProduct, setShowProduct] = useState(true);
let [order, setOrder] = useState({ firstName: '', lastName: '', state: 'CA', address: '' });
let [products, setProducts] = useState([]);
let states = ['AL', 'AR', 'CA', 'NV', 'NY', 'FL'];
const nameOrder = (p, q) => {
let [pLow, qLow] = [p.title.toLowerCase(), q.title.toLowerCase()]
if (pLow > qLow) {
return 1;
}
else if (pLow == qLow) {
return 0;
}
else {
return -1;
}
}
const formatPrice = (price) => {
if (!parseInt(price)) { return ""; }
if (price > 99999) {
var priceString = (price / 100).toFixed(2);
var priceArray = priceString.split("").reverse();
var index = 3;
while (priceArray.length > index + 3) {
priceArray.splice(index + 3, 0, ",");
index += 4;
}
return "$" + priceArray.reverse().join("");
} else {
return "$" + (price / 100).toFixed(2);
}
}
useEffect(() => {
fetch('./products.json')
.then((r) => r.json())
.then(data => {
setProducts([...data.products]);
// console.log(products);
})
}, [])
// useEffect(() => {
// console.log(products);
// }, [products]);
const addToShoppingCart = (product) => {
const updatedCartItems = { ...cartItems };
if (updatedCartItems[product.id]) {
updatedCartItems[product.id] += 1;
} else {
updatedCartItems[product.id] = 1;
}
setCartItems(updatedCartItems);
}
const canAddToCart = (product) => {
// console.log("canAddToCart:" + product.availableInventory)
let produtNum=0;
if (cartItems[product.id]) {
produtNum= cartItems[product.id];
}
return product.availableInventory > produtNum
}
const updateOrder = (event) => {
let control = event.target;
if (control.name == "gift") {
setOrder({ ...order, gift: control.checked });
return;
}
setOrder({ ...order, [control.name]: control.value });
}
const checkRating = (n, product) => {
return product.rating - n >= 0;
}
const allProductsNum = ()=>{
let sum=0
Object.keys(cartItems).forEach((key) => {
sum+=cartItems[key]
});
return sum;
}
return (
<>
<header>
<div className="navbar navbar-default">
<div className="navbar-header">
<h1>
{props.sitename}
</h1>
</div>
<div className="nav navbar-nav navbar-right cart">
<button type="button" className="btn btn-default btn-lg"
onClick={() => setShowProduct(!showProduct)} >
<span className="glyphicon glyphicon-shopping-cart">
{allProductsNum() || ''}
</span>
체크아웃
</button>
</div>
</div>
</header>
<main>
<div className="row product">
{showProduct && products &&
products.sort(nameOrder).map(product => {
let numProductsInCart = cartItems[product.id];
if (!numProductsInCart)numProductsInCart=0
return (
<div className="row product">
<div className="col-md-4 col-md-offset-0">
<figure>
<img className="product" src={product.image} />
</figure>
</div>
<div className="col-md-6 col-md-offset-2 description">
<h1> {product.title} </h1>
<p> {product.description} </p>
<p className="price"> {formatPrice(product.price)} </p>
{canAddToCart(product) &&
<button className="btn btn-primary btn-lg"
onClick={() => addToShoppingCart(product)}> 장바구니 담기
</button>
}
<span className="inventory-message">
{/* {(product.availableInventory == numProductsInCart && `품절!(Sold out)`) ||
(numProductsInCart == 0 && `지금 구매하세요.`) ||
(product.availableInventory > numProductsInCart && numProductsInCart > 0 &&
`${product.availableInventory - numProductsInCart} 남았습니다.`)} */}
{product.availableInventory == numProductsInCart && `품절!(Sold out)`}
{numProductsInCart == 0 && `지금 구매하세요.`}
{product.availableInventory > numProductsInCart && numProductsInCart > 0 &&
`${product.availableInventory - numProductsInCart} 남았습니다.`}
</span>
<div className="rating">
{[1, 2, 3, 4, 5].map((i) => {
return <span className={checkRating(i, product) ? "rating-active" : ""}>☆</span>
})}
</div>
</div>
</div>
)
})}
{!showProduct && /* Checkout 페이지 들어갈 자리 */
<div>
<div className="col-md-6">
<strong>이름</strong>
<input className="form-control" name="firstName" value={order.firstName} onChange={updateOrder} />
</div>
<div className="col-md-6">
<strong>성</strong>
<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" name="address" value={order.address} onChange={updateOrder} />
</div>
</div>
<div className="form-group">
<div className="col-md-12"> <strong>주:</strong>
<select className="form-control" name="state" value={order.state} onChange={updateOrder}>
{states.map((st) => <option value={st}> {st}</option>)}
</select>
</div>
</div>
<div className="form-group">
<div className="col-md-6 boxes">
<input type="checkbox" name="gift" id="gift" value={true} onChange={updateOrder} />
<label htmlFor="gift">선물로 보내기?</label>
</div>
</div>
<div className="form-group">
<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 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-12">
<input type="submit" name="submit" className="btn btn-lg btn-primary submit"
onClick={() => { alert("제출완료") }} />
</div>
</div>
<div className="col-md-12 verify">
<pre>
이름 : {order.firstName}
<br />
성 : {order.lastName}
<br />
주소 : {order.address}
<br />
주 : {order.state}
<br />
배송지: {order.method}
<br />
선물 : {order.gift ? "선물" : "선물아님"}
</pre>
</div>
</div>
}
</div>
</main>
</>
);
}
export default App;