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