finished

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "firebase": "^9.21.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2"

src/App.js

-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';
+import React, { useState, useEffect } from "react";
+import "./assets/css/app.css";
+import CheckoutPage from "./Checkout";
+import Products from "./Products";
+import Header from "./Header";
+import RegisterPage from "./RegisterProductPage";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { collection, getDocs, addDoc } from "firebase/firestore";
+import { db } from "./firebase";
 
 const App = (props) => {
-  const [cartItems, setCartItems] = useState([]);
-  const [formattedProducts, setFormattedProducts] = useState([]);
+  let [cartItems, setCartItems] = useState([]);
+  let [products, setProducts] = useState([]);
+  let [user, setUser] = useState(null);
 
-  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 fetchData = async () => {
+    /* firestore security rule change : 
+          allow read : if request.auth != null; 
+          allow write : if request != null;
+        */
+    const querySnapshot = await getDocs(collection(db, "petshop"));
+    let products = [];
+    querySnapshot.forEach((doc) => {
+      products.push(doc.data());
     });
+    setProducts([...products]);
+    console.log(products);
+  };
+
+  useEffect(() => {
+    fetchData();
   }, []);
 
-  const handleAddProduct = (product) => {
-    setFormattedProducts([...formattedProducts, product]);
+  const handleDeleteItem = (index) => {
+    const updatedCartItems = cartItems.filter((item, i) => i !== index);
+    setCartItems(updatedCartItems);
   };
 
-  const clearCart = () => {
+  const DeleteAllItem = () => {
     setCartItems([]);
   };
 
-  const updateInventory = (productId, quantity) => {
-    setFormattedProducts((prevProducts) => {
-      return prevProducts.map((product) => {
-        if (product.id === productId) {
-          return {
-            ...product,
-            availableInventory: product.availableInventory - quantity
-          };
-        }
-        return product;
+  const updateInventory = () => {
+    cartItems.forEach((item) => {
+      console.log("item" + item);
+      products.forEach((product) => {
+        console.log("product" + product);
+        if (item.id === product.id) product.availableInventory -= 1;
       });
     });
+    setCartItems([]);
+  };
+
+  const addProduct = async (product) => {
+    const docRef = await addDoc(collection(db, "petshop"), product);
+    console.log(`document id : ${docRef.id}`);
+    setProducts([...products, product]);
   };
 
   return (
     <BrowserRouter>
       <header>
-        <Header name={props.sitename} nItems={cartItems.length} clearCart={clearCart} />
+        <Header
+          name={props.sitename}
+          nItems={cartItems.length}
+          user={user}
+          onSignIn={setUser}
+          onSignOut={() => setUser(null)}
+        />
       </header>
       <main>
         <Routes>
           <Route
             path="/"
-            element={<Products products={formattedProducts} cart={cartItems} onSetCart={setCartItems} />}
+            element={
+              <Products
+                products={products}
+                cart={cartItems}
+                onSetCart={setCartItems}
+                user={user}
+              />
+            }
+          ></Route>
+          <Route
+            path="/checkout"
+            element={
+              <CheckoutPage
+                cartItems={cartItems}
+                onDeleteItem={handleDeleteItem}
+                deleteAll={DeleteAllItem}
+                updateInventory={updateInventory}
               />
-         <Route path="/checkout" element={<CheckoutPage products={formattedProducts} cartItems={cartItems} 
-         onSetCartItems={setCartItems} onSetProducts={setFormattedProducts} />} />
-          <Route path="/register-product" element={<ProductRegistrationPage addProduct={handleAddProduct} />} />
+            }
+          ></Route>
+          <Route
+            path="/register-product"
+            element={
+              <RegisterPage
+                addProduct={addProduct}
+              />
+            }
+          ></Route>
         </Routes>
       </main>
     </BrowserRouter>

src/Checkout.js

@@ -38,15 +38,7 @@ const CheckoutPage = ({ products, cartItems, onSetCartItems, onSetProducts }) =>
     cartItems.forEach((item) => {
       let product = products.find(p => p.id == item.id);
       product.availableInventory -= 1;
-      // const updatedProducts = products.map((product) => {
-      //   if (product.id === item.id) {
-      //     return {
-      //       ...product,
-      //       availableInventory: product.availableInventory - 1,
-      //     };
-      //   }
-      //   return product;
-      // });
+
       onSetProducts([...products]);
     });
     onSetCartItems([]);

src/Header.js

 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
-const Header = ({ name, nItems, products, setProducts, clearCart }) => {
+import {
+  GoogleAuthProvider, signInWithPopup,
+  getAdditionalUserInfo, signOut
+} from 'firebase/auth';
+import { auth, auth_provider } from './firebase';
+
+
+
+
+
+
+const Header = ({ name, nItems, user, onSignIn, onSignOut }) => {
   const location = useLocation();
   const hasItemsInCart = nItems > 0;
   const isCheckoutPage = location.pathname.startsWith('/checkout');
@@ -12,6 +23,28 @@ const Header = ({ name, nItems, products, setProducts, clearCart }) => {
 
     }
   };
+  const handleSignIn = () => {
+    signInWithPopup(auth, auth_provider)
+      .then(res => {
+        const credential = GoogleAuthProvider.credentialFromResult(res);
+        const token = credential.accessToken;
+        const user = res.user;
+        const userInfo = getAdditionalUserInfo(res);
+        console.log(userInfo.profile);
+        onSignIn(userInfo.profile);
+      }).catch(error => {
+        console.log(`[${error.code}] ${error.message}`);
+      })
+  }
+  const handleSignOut = () => {
+    signOut(auth).then(() => {
+      console.log(`Bye ${user.name}`);
+      onSignOut();
+    }).catch(error => {
+      console.log(`[${error.code}] ${error.message}`);
+    })
+  }
+  
 
   return (
     <div className="navbar navbar-default">
@@ -19,7 +52,7 @@ const Header = ({ name, nItems, products, setProducts, clearCart }) => {
         <h1>{name}</h1>
       </div>
       <div className="nav navbar-nav navbar-right cart">
-        {nItems > 0 && (
+
         <Link to={isCheckoutPage ? '/' : '/checkout'}>
           <button
             type="button"
@@ -32,7 +65,25 @@ const Header = ({ name, nItems, products, setProducts, clearCart }) => {
             {checkoutButtonText}
           </button>
         </Link>
-        )}
+        {(user) ?
+          <button type="button" className="btn btn-default btn-lg"
+            style={{ margin: '5px' }}
+            onClick={handleSignOut} >
+            <span style={{ margin: '5px' }}>
+              <img className="rounded-circle" src={user.picture}
+                style={{ width: '20px', objectFit: 'cover' }} />
+            </span>
+            {user.name} 로그아웃
+          </button>
+          :
+          <button type="button" className="btn btn-default btn-lg"
+            onClick={handleSignIn} >
+            로그인
+          </button>
+        }
+
+
+
       </div>
     </div>
   );

src/Products.js

@@ -49,6 +49,7 @@ const Products = ({ products, cart, onSetCart }) => {
     }
   };
   
+
   return (
     <>
       <div className="row product">

src/firebase.js

+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+
+import { getFirestore } from 'firebase/firestore';
+import { getAuth ,GoogleAuthProvider } from 'firebase/auth';
+
+
+
+
+const firebaseConfig = {
+    apiKey: "AIzaSyAMGZojwvf5o32lokZ1SkF3JRFYcD2NQcQ",
+    authDomain: "petshop-f62e0.firebaseapp.com",
+    projectId: "petshop-f62e0",
+    storageBucket: "petshop-f62e0.appspot.com",
+    messagingSenderId: "305060990130",
+    appId: "1:305060990130:web:98797b3fbb420f080a8dab",
+    measurementId: "G-CCV33S1HTF"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+export const db = getFirestore(app);
+export const auth = getAuth();
+export const auth_provider = new GoogleAuthProvider();
+
+
+