diff --git a/package.json b/package.json
index 4d93cc101b5ff41b7ae9b869ef3e4588718543cf..5c310f8f38e41754d76e64aed348d8d8833e4e2c 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "firebase": "^9.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1"
diff --git a/src/App.js b/src/App.js
index d4986533a1271c539c34b67aabb8190295145973..dd378b6f8ae5c3a134e9e411fe1438c4afc957ac 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,66 +1,109 @@
-
-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);
+
+  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(() => {
-    /* 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);
-      });
+    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} />}
-          />
-         <Route path="/checkout" element={<CheckoutPage products={formattedProducts} cartItems={cartItems} 
-         onSetCartItems={setCartItems} onSetProducts={setFormattedProducts} />} />
-          <Route path="/register-product" element={<ProductRegistrationPage addProduct={handleAddProduct} />} />
+            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>
+          <Route
+            path="/register-product"
+            element={
+              <RegisterPage
+                addProduct={addProduct}
+              />
+            }
+          ></Route>
         </Routes>
       </main>
     </BrowserRouter>
   );
 };
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/RegisterProductPage.js b/src/RegisterProductPage.js
index dee431b9367377f29ed821296f9602e0526707bb..527514f1750a988379a88d8770845033b80cb95b 100644
--- a/src/RegisterProductPage.js
+++ b/src/RegisterProductPage.js
@@ -2,60 +2,89 @@ import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 const RegisterProduct = (props) => {
+  const imageOptions = [
+    { value: "assets/images/product-fullsize.png", text: "产品全尺寸图片" },
+    { value: "assets/images/yarn.jpg", text: "线团图片" },
+    { value: "assets/images/cat-litter.jpg", text: "猫砂图片" },
+    { value: "assets/images/cat-house.jpg", text: "猫屋图片" },
+    { value: "assets/images/laser-pointer.jpg", text: "激光笔图片" },
+    {
+      value: "assets/images/Mindy_Mouse_cat_toy.jpg",
+      text: "Mindy Mouse猫玩具图片",
+    },
+  ];
+
+  let navigate = useNavigate();
+
   const [product, setProduct] = useState({
-    title: '',
-    description: '',
-    category: '',
-    image: '',
-    price: '',
-    availableInventory: '',
+    id: 0,
+    title: "",
+    description: "",
+    price: 0,
+    image: imageOptions[0].value,
+    availableInventory: 0,
+    rating: 0,
   });
-  const navigate = useNavigate(); // useNavigate 훅(Hook) 함수 사용
-
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     setProduct({ ...product, [name]: value });
   };
 
-  const handleSubmit = (event) => {
+  const handleFormSubmit = (event) => {
     event.preventDefault();
-    console.log(validateProduct());
-    if (validateProduct()) {
-      console.log(product);
-      props.addProduct(product);
-      setProduct({
-        title: '',
-        description: '',
-        category: '',
-        image: '',
-        price: '',
-        availableInventory: '',
-      });
-      navigate('/'); // Product Page로 이동
-    } else {
-      alert('상품정보를 바르게 입력하세요'); // Validate 되지 않을 때 alert 메시지 표시
+
+    // 验证规则
+    if (product.title.trim().length === 0) {
+      alert("상품정보를 바르게 입력하세요");
+      return;
+    }
+
+    if (product.description.length < 3) {
+      alert("상품정보를 바르게 입력하세요");
+      return;
+    }
+
+    if (product.price <= 0) {
+      alert("상품정보를 바르게 입력하세요");
+      return;
     }
-  };
 
-  const validateProduct = () => {
-    const { title, description, category, image, price, availableInventory } = product;
-    if (
-      title.length >= 1 &&
-      description.length >= 3 &&
-      category.length >= 3 &&
-      image.length >= 3 &&
-      Number(price) > 0 &&
-      Number(availableInventory) > 0
-    ) {
-      return true;
+    if (product.availableInventory <= 0) {
+      alert("상품정보를 바르게 입력하세요");
+      return;
     }
-    return false;
+
+    // 构建产品对象
+    const productData = {
+      id: product.id,
+      title: product.title,
+      description: product.description,
+      price: product.price,
+      image: product.image,
+      availableInventory: product.availableInventory,
+      rating: product.rating,
+    };
+    props.addProduct(productData);
+    navigate(-1);
   };
 
   return (
     <div>
       <h3>제품 등록</h3>
-      <form onSubmit={handleSubmit}>
+      <form>
+        <div className="form-group">
+          <label htmlFor="id">id:</label>
+          <input
+            type="number"
+            id="id"
+            name="id"
+            className="form-control"
+            value={product.id}
+            onChange={handleInputChange}
+            minLength={1}
+            required
+          />
+        </div>
         <div className="form-group">
           <label htmlFor="title">이름:</label>
           <input
@@ -65,32 +94,20 @@ const RegisterProduct = (props) => {
             className="form-control"
             value={product.title}
             onChange={handleInputChange}
-            minLength={1} // 최소 길이 1
+            minLength={1}
             required
           />
         </div>
         <div className="form-group">
           <label htmlFor="description">설명:</label>
-          <textarea
+          <input
+            type="text"
             id="description"
             name="description"
             className="form-control"
             value={product.description}
             onChange={handleInputChange}
-            minLength={3} // 최소 길이 3
-            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}
-            minLength={3} // 최소 길이 3
+            minLength={3}
             required
           />
         </div>
@@ -103,7 +120,7 @@ const RegisterProduct = (props) => {
             className="form-control"
             value={product.image}
             onChange={handleInputChange}
-            minLength={3} // 최소 길이 3
+            minLength={3}
             required
           />
         </div>
@@ -116,7 +133,7 @@ const RegisterProduct = (props) => {
             className="form-control"
             value={product.price}
             onChange={handleInputChange}
-            min={0} // 0보다 커야 함
+            min={0}
             required
           />
         </div>
@@ -127,14 +144,27 @@ const RegisterProduct = (props) => {
             id="availableInventory"
             name="availableInventory"
             className="form-control"
-            value={product.stock}
+            value={product.availableInventory}
+            onChange={handleInputChange}
+            min={0}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="availableInventory">rating:</label>
+          <input
+            type="number"
+            id="rating"
+            name="rating"
+            className="form-control"
+            value={product.rating}
             onChange={handleInputChange}
-            min={0} // 0보다 커야 함
+            min={0}
             required
           />
         </div>
         <div>
-          <button type="submit" className="btn btn-primary">
+          <button type="submit" className="btn btn-primary" onClick={handleFormSubmit}>
             등록하기
           </button>
           <Link to="/">
diff --git a/src/checkout.js b/src/checkout.js
index 2065a5f0649046bb8895e5d64c7a632c705f9c7a..c5b71dade9d3d1f7764563b2116fa66546877b24 100644
--- a/src/checkout.js
+++ b/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([]);
@@ -144,4 +136,5 @@ const CheckoutPage = ({ products, cartItems, onSetCartItems, onSetProducts }) =>
   );
 };
 
-export default CheckoutPage;
\ No newline at end of file
+export default CheckoutPage;
+
diff --git a/src/firebase.js b/src/firebase.js
new file mode 100644
index 0000000000000000000000000000000000000000..b460557b3fe304f45b6e66e7863502c79edf20e3
--- /dev/null
+++ b/src/firebase.js
@@ -0,0 +1,32 @@
+// 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();
\ No newline at end of file
diff --git a/src/header.js b/src/header.js
index d5839680a862808c30472a3758b9daa346765d7d..83d1fd7585498407bcd57b90ff009f9c9ed81be5 100644
--- a/src/header.js
+++ b/src/header.js
@@ -1,7 +1,18 @@
 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');
@@ -9,9 +20,31 @@ const Header = ({ name, nItems, products, setProducts, clearCart }) => {
 
   const handleCheckoutClick = () => {
     if (isCheckoutPage && hasItemsInCart) {
-    
+
     }
   };
+  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,20 +52,38 @@ 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"
-              className="btn btn-default btn-lg"
-              onClick={handleCheckoutClick}
-            >
-              <span className="glyphicon glyphicon-shopping-cart">
-                {nItems || ''}
-              </span>
-              {checkoutButtonText}
-            </button>
-          </Link>
-        )}
+
+        <Link to={isCheckoutPage ? '/' : '/checkout'}>
+          <button
+            type="button"
+            className="btn btn-default btn-lg"
+            onClick={handleCheckoutClick}
+          >
+            <span className="glyphicon glyphicon-shopping-cart">
+              {nItems || ''}
+            </span>
+            {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>
   );
diff --git a/src/index.js b/src/index.js
index 0d944304d2b0bce6d117c625ffd199400fde889c..96b1819b08097601faf334158cc70c5199182174 100755
--- a/src/index.js
+++ b/src/index.js
@@ -8,3 +8,4 @@ var root = ReactDOM.createRoot(container);
 root.render(<App sitename="React PetShop"/>);
 
 module.hot.accept()
+
diff --git a/src/products.js b/src/products.js
index 3c857a4fee39196117ecdc390ea84414f6347db6..0a08586a5f4efcb95d1aacd50cbd746128e6647f 100644
--- a/src/products.js
+++ b/src/products.js
@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
-const Products = ({ products, cart, onSetCart }) => {
-
-
+const Products = ({ products, cart, onSetCart,user }) => {
+  
   const formatPrice = (price) => {
     if (!parseInt(price)) {
       return '';
@@ -53,9 +52,10 @@ const Products = ({ products, cart, onSetCart }) => {
     <>
       <div className="row product">
         <div className="col-md-12 text-center">
-          <Link to="/register-product" className="btn btn-primary btn-lg btn-add-product">
+          {user!= null&&<Link to="/register-product" className="btn btn-primary btn-lg btn-add-product">
             상품추가
-          </Link>
+          </Link>}
+          
         </div>
       </div>
       {products &&
@@ -100,4 +100,4 @@ const Products = ({ products, cart, onSetCart }) => {
     </>
   );
 };
-export default Products;
\ No newline at end of file
+export default Products;