finish

public/app.bundle.js.LICENSE.txt

-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

public/products.json

+{
+  "products":[
+    {
+      "id": 1001,
+      "title": "고양이 사료, 25파운드",
+      "description": "당신의 고양이를 위한 <em>거부할 수 없는</em>, 유기농 25파운드 사료입니다.",
+      "price": 2000,
+      "image": "assets/images/product-fullsize.png",
+      "availableInventory": 10,
+      "rating": 1
+    },
+    {
+      "id": 1002,
+      "title": "실뭉치",
+      "description": "실뭉치로 당신의 고양이에게 <strong>오랜</strong> 놀이 시간을 주세요!",
+      "price": 299,
+      "image": "assets/images/yarn.jpg",
+      "availableInventory": 7,
+      "rating": 1
+    },
+    {
+      "id": 1003,
+      "title": "고양이 화장실",
+      "description": "당신의 고양이를 위한 최고급 화장실입니다.",
+      "price": 1100,
+      "image": "assets/images/cat-litter.jpg",
+      "availableInventory": 99,
+      "rating": 4
+    },
+    {
+      "id": 1004,
+      "title": "고양이 집",
+      "description": "고양이가 놀 수 있는 장소!",
+      "price": 799,
+      "image": "assets/images/cat-house.jpg",
+      "availableInventory": 11,
+      "rating": 5
+    },
+    {
+      "id": 1005,
+      "title": "레이저 포인터",
+      "description": "이 <em>놀라운</em> 상품으로 고양이와 놀아주세요.",
+      "price": 4999,
+      "image": "assets/images/laser-pointer.jpg",
+      "availableInventory": 25,
+      "rating": 1
+    }
+  ]
+}

src/App.js

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import './assets/css/app.css';
 
 const App = (props) => {
-  let [cartItems, setCartItems] = useState([]);
+  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'];
 
-  let product = {
-    id: 1001,
-    title: "고양이 사료, 25파운드",
-    description: "당신의 고양이를 위한 거부할 수 없는, 유기농 25파운드 사료입니다.",
-    price: 2000,
-    image: "./assets/images/product-fullsize.png",
-    availableInventory : 5,
-  };
+
+
+
+
+
+  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 ""; }
@@ -33,12 +44,38 @@ const App = (props) => {
     }
   }
 
-  const addToShoppingCart = () => {
-    setCartItems([...cartItems, product]);
+  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 = () => {
-    return product.availableInventory > cartItems.length;
+  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) => {
@@ -49,6 +86,19 @@ const App = (props) => {
     }
     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 (
@@ -64,7 +114,7 @@ const App = (props) => {
             <button type="button" className="btn btn-default btn-lg"
               onClick={() => setShowProduct(!showProduct)} >
               <span className="glyphicon glyphicon-shopping-cart">
-                {cartItems.length || ''}
+                {allProductsNum() || ''}
               </span>
               체크아웃
             </button>
@@ -73,25 +123,51 @@ const App = (props) => {
       </header>
       <main>
         <div className="row product">
-          {showProduct &&
-            <>
-              <div className="col-md-2 col-md-offset-1">
+          {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 src={product.image} />
+                      <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() &&
+                    {canAddToCart(product) &&
                       <button className="btn btn-primary btn-lg"
-                    onClick={addToShoppingCart}> 장바구니 담기
+                        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">