diff --git a/src/App.js b/src/App.js index 1960caf24be8c32b3bed44b21ea0acf057413e42..a3dc423e7a3867823ded4d57296974ebfbb1028d 100755 --- a/src/App.js +++ b/src/App.js @@ -1,30 +1,45 @@ import React, { useState, useEffect } from 'react'; import './assets/css/app.css'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; import CheckoutPage from './checkout'; import Products from './products'; import Header from './header'; +import ProductRegistrationPage from './RegisterProductPage'; const App = (props) => { let [cartItems, setCartItems] = useState([]); - let [showProduct, setShowProduct] = useState(true); + + +const [formattedProducts, setFormattedProducts] = useState([]); + +useEffect(() => { + /* wget https://raw.githubusercontent.com/gilbutITbook/007024/master/chapter-05/products.json */ + fetch('./products.json') + .then((r) => r.json()) + .then((data) => { + setFormattedProducts([...data.products]); + console.log(data.products); + }); +}, []); + +const handleAddProduct =(product) =>{ + setFormattedProducts([...formattedProducts,product ]) +} + return ( - <> + <BrowserRouter> <header> - <Header name={props.sitename} - nItems={cartItems.length} - onToggleShowProduct={() => setShowProduct(!showProduct)} - /> + <Header name={props.sitename} nItems={cartItems.length} /> </header> <main> - {showProduct && - <Products cart={cartItems} onSetCart={setCartItems}/> - } - {!showProduct && /* Checkout 페이지 들어갈 자리 */ - <CheckoutPage /> - } + <Routes> + <Route path="/" element={<Products products={formattedProducts} cart={cartItems} onSetCart={setCartItems} />} /> + <Route path="/checkout" element={<CheckoutPage />} /> + <Route path="/register-product" element={<ProductRegistrationPage addProduct={handleAddProduct}/>} /> + </Routes> </main> - </> + </BrowserRouter> ); } diff --git a/src/RegisterProductPage.js b/src/RegisterProductPage.js new file mode 100644 index 0000000000000000000000000000000000000000..4d6a06e717a02ad8d17eaaa6d9423d92c4a6947e --- /dev/null +++ b/src/RegisterProductPage.js @@ -0,0 +1,117 @@ +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; + +const ProductRegistrationPage = (props) => { + const [product, setProduct] = useState({ + title: '', + description: '', + category: '', + image: '', + price: '', + stock: '', + }); + + const handleInputChange = (event) => { + const { name, value } = event.target; + setProduct({ ...product, [name]: value }); + }; + + const handleSubmit = (event) => { + event.preventDefault(); + console.log(product); + setProduct({ + title, + description, + category, + image, + price, + stock, + }); + }; + + return ( + <div> + <h3>제품 등록</h3> + <form > + <div className="form-group"> + <label htmlFor="title">이름:</label> + <input + type="text" + id="title" + name="title" + className="form-control" + value={product.title} + onChange={handleInputChange} + required + /> + </div> + <div className="form-group"> + <label htmlFor="description">설명:</label> + <textarea + id="description" + name="description" + className="form-control" + value={product.description} + onChange={handleInputChange} + required + ></textarea> + </div> + <div className="form-group"> + <label htmlFor="category">상품:</label> + <input + type="text" + id="category" + name="category" + className="form-control" + value={product.category} + onChange={handleInputChange} + required + /> + </div> + <div className="form-group"> + <label htmlFor="image">이미지:</label> + <input + type="text" + id="image" + name="image" + className="form-control" + value={product.image} + onChange={handleInputChange} + required + /> + </div> + <div className="form-group"> + <label htmlFor="price">가격:</label> + <input + type="number" + id="price" + name="price" + className="form-control" + value={product.price} + onChange={handleInputChange} + required + /> + </div> + <div className="form-group"> + <label htmlFor="stock">재고량:</label> + <input + type="number" + id="stock" + name="stock" + className="form-control" + value={product.stock} + onChange={handleInputChange} + required + /> + </div> + <Link to="/"> + + <button type="button" className="btn btn-primary" onClick={()=>{props.addProduct(product)}}>등록하기 + </button> + </Link> + </form> + </div> + ); +}; + +export default ProductRegistrationPage; diff --git a/src/assets/css/app.css b/src/assets/css/app.css index c881ca9484ce22987f147aa17014780ca3661d8a..ec3d1e1636b612ae2dec6a0716fa16df8d3a9aa0 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -73,4 +73,9 @@ label { .container { max-width: 970px; } -} \ No newline at end of file +} + +.btn-add-product { + font-size: 80px; + padding: 5px 120px; + } \ No newline at end of file diff --git a/src/checkout.js b/src/checkout.js index 9d650d8209a3eb82b54058162b458de0c75193d6..0fd21a422a3cbebb3309df2c507edd1269511587 100644 --- a/src/checkout.js +++ b/src/checkout.js @@ -1,89 +1,81 @@ -import React, {useState} from 'react'; +import React, { useState } from 'react'; +import {Link } from 'react-router-dom'; -const CheckoutPage = (props) => { +const CheckoutPage = () => { + let [order, setOrder] = useState({ firstName: '', lastName: '', state: 'CA', address: '', gift: false }); + let states = ['AL', 'AR', 'CA', 'NV', 'NY', 'FL']; + let nItems = 0; - let [order, setOrder] = useState({ firstName: '', lastName: '', state: 'CA', address: '' }); - let states = ['AL', 'AR', 'CA', 'NV', 'NY', 'FL']; + const updateOrder = (event) => { + const { name, value, type, checked } = event.target; + const newValue = type === 'checkbox' ? checked : value; + setOrder({ ...order, [name]: newValue }); + }; - const updateOrder = (event) => { - let control = event.target; - if (control.name == "gift") { - setOrder({ ...order, gift: control.checked }); - return; - } - setOrder({ ...order, [control.name]: control.value }); - } - return ( - <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> + return ( + <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 className="form-group"> + <div className="col-md-12"> + <strong>주소:</strong> </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 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-6 boxes"> - <input type="checkbox" name="gift" id="gift" value={true} onChange={updateOrder} /> - <label htmlFor="gift">선물로 보내기?</label> - </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 key={st} value={st}> {st}</option>)} + </select> </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 className="form-group"> + <div className="col-md-6 boxes"> + <input type="checkbox" name="gift" id="gift" checked={order.gift} onChange={updateOrder} /> + <label htmlFor="gift">선물로 보내기?</label> </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 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="col-md-12 verify"> - <pre> - 이름 : {order.firstName} - <br /> - 성 : {order.lastName} - <br /> - 주소 : {order.address} - <br /> - 주 : {order.state} - <br /> - 배송지: {order.method} - <br /> - 선물 : {order.gift ? "선물" : "선물아님"} - </pre> + <div className="form-group"> + <div className="col-md-12"> + <Link to="/"> + <button type="button" className="btn btn-default btn-lg" > + <span className="glyphicon glyphicon-shopping-cart"> + {nItems || ''} + </span> + 제출 + </button> + </Link> </div> </div> - ) -} + </div> + ); +}; -export default CheckoutPage; \ No newline at end of file +export default CheckoutPage; diff --git a/src/header.js b/src/header.js index 9d7da6290df0a7c71f89b0f6343073ca66c4f7c8..02514bfa820cdc0933cc8acb2efc59280737ad3d 100644 --- a/src/header.js +++ b/src/header.js @@ -1,24 +1,33 @@ import React from 'react'; +import { Link, useLocation } from 'react-router-dom'; + + +const Header = ({ name, nItems, products, setProducts }) => { + const location = useLocation(); + -const Header = ({name, nItems, onToggleShowProduct}) => { return ( - <div className="navbar navbar-default"> - <div className="navbar-header"> - <h1> - {name} - </h1> - </div> - <div className="nav navbar-nav navbar-right cart"> - <button type="button" className="btn btn-default btn-lg" - onClick={onToggleShowProduct} > - <span className="glyphicon glyphicon-shopping-cart"> - {nItems || ''} - </span> - 체크아웃 - </button> - </div> + <div className="navbar navbar-default"> + <div className="navbar-header"> + <h1>{name}</h1> </div> - ) -} + <div className="nav navbar-nav navbar-right cart"> + <Link to={location.pathname.startsWith('/checkout') ? '/' : '/checkout'}> + <button type="button" className="btn btn-default btn-lg"> + <span className="glyphicon glyphicon-shopping-cart"> + {nItems || ''} + </span> + 체크아웃 + </button> + </Link> + </div> + </div> + ); +}; + +export default Header; + + + + -export default Header; \ No newline at end of file diff --git a/src/products.js b/src/products.js index 394acc6d1bfd2ae39719c37c1982e2330afc6786..a32fa66cc918028b82467c0e2077ce3e125ee8d4 100644 --- a/src/products.js +++ b/src/products.js @@ -1,104 +1,102 @@ -import React, {useState, useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; -const Products = ({cart, onSetCart}) => { +const Products = ({ products, cart, onSetCart }) => { - let [products, setProducts] = useState([]); - - useEffect(() => { - /* wget https://raw.githubusercontent.com/gilbutITbook/007024/master/chapter-05/products.json */ - fetch('./products.json') - .then((r) => r.json()) - .then(data => { - setProducts([...data.products]); - console.log(products); - }) - }, []) const formatPrice = (price) => { - if (!parseInt(price)) { return ""; } + if (!parseInt(price)) { + return ''; + } if (price > 99999) { var priceString = (price / 100).toFixed(2); - var priceArray = priceString.split("").reverse(); + var priceArray = priceString.split('').reverse(); var index = 3; while (priceArray.length > index + 3) { - priceArray.splice(index + 3, 0, ","); + priceArray.splice(index + 3, 0, ','); index += 4; } - return "$" + priceArray.reverse().join(""); + return '$' + priceArray.reverse().join(''); } else { - return "$" + (price / 100).toFixed(2); + return '$' + (price / 100).toFixed(2); } - } + }; const addToShoppingCart = (product) => { onSetCart([...cart, product]); - } + }; const canAddToCart = (product) => { if (product.availableInventory) { - return product.availableInventory > cart.filter((p) => p.id == product.id).length; + return product.availableInventory > cart.filter((p) => p.id === product.id).length; } return false; - } + }; const checkRating = (n, product) => { return product.rating - n >= 0; - } + }; const nameOrder = (p, q) => { - let [pLow, qLow] = [p.title.toLowerCase(), q.title.toLowerCase()] + let [pLow, qLow] = [p.title.toLowerCase(), q.title.toLowerCase()]; if (pLow > qLow) { return 1; - } - else if(pLow == qLow) { - return 0; - } - else { + } else if (pLow < qLow) { return -1; + } else { + return 0; } - } + }; - return ( - <> - {products && products.sort(nameOrder).map(product => { - let nProductInCart = cart.filter((p) => p.id == product.id).length; - console.log(product.title, nProductInCart); - return ( - <div className="row product"> - <div className="col-md-5 col-md-offset-0"> - <figure> - <img className="product" src={product.image} /> - </figure> - </div> - <div className="col-md-6 col-md-offset-0 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> - } + return ( + <> + <div className="row product"> + <div className="col-md-12 text-center"> + <Link to="/register-product" className="btn btn-primary btn-lg btn-add-product"> + 상품추가 + </Link> + </div> + </div> + {products && + products.sort(nameOrder).map((product) => { + let nProductInCart = cart.filter((p) => p.id === product.id).length; + console.log(product.title, nProductInCart); + return ( + <div className="row product" key={product.id}> + <div className="col-md-5 col-md-offset-0"> + <figure> + <img className="product" src={product.image} alt={product.title} /> + </figure> + </div> + <div className="col-md-6 col-md-offset-0 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 == nProductInCart && `품절!(Sold out)`} - {nProductInCart == 0 && `지금 구매하세요.`} - {product.availableInventory > nProductInCart && nProductInCart > 0 && - `${product.availableInventory - nProductInCart} 남았습니다.` } - </span> - <div className="rating"> - {[1, 2, 3, 4, 5].map((i) => { - return <span className={checkRating(i, product) ? "rating-active" : ""}>☆</span> - }) - } + <span className="inventory-message"> + {product.availableInventory === nProductInCart && `품절!(Sold out)`} + {nProductInCart === 0 && `지금 구매하세요.`} + {product.availableInventory > nProductInCart && + nProductInCart > 0 && + `${product.availableInventory - nProductInCart} 남았습니다.`} + </span> + <div className="rating"> + {[1, 2, 3, 4, 5].map((i) => ( + <span className={checkRating(i, product) ? "rating-active" : ""} key={i}> + ☆ + </span> + ))} + </div> </div> </div> - </div> - ) - }) - } + ); + })} </> - ) -} - + ); +}; export default Products; \ No newline at end of file