follow react-petshop-2

fe24cbec · JYCHOI · fe24cbec · fe24cbec · fe24cbec · fe24cbec
Commit fe24cbec authored 2 years ago by JYCHOI
--- a/.babelrc
+++ b/.babelrc
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ]
+}
\ No newline at end of file
--- a/.gitignore
+++ b/.gitignore
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+# testing
+/coverage
+# production
+/build
+package-lock.json
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/README.md
+++ b/README.md
+# React PetShop - React.js로 만드는 애완용품 샵
+- BootStrap 3을 사용합니다.
+- [Vue.js in Action 의 프로젝트] (http://github.com/gilbutITbook/007024) 를 React.js로 변경한 코드입니다.
--- a/package.json
+++ b/package.json
+{
+  "name": "react-boilerplate",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --open --mode development --port 3000",
+    "build": "webpack --mode production"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^6.7.3",
+    "style-loader": "^3.3.2",
+    "file-loader": "^6.2.0",
+    "webpack": "^5.77.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1"
+  }
+}
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
+header h1 {
+    padding: 10px 20px;
+}
+body {
+    max-width: 970px;
+}
+.cart {
+    padding: 20px 50px;
+}
+.boxes {
+    margin-top: 20px;
+}
+.verify {
+    margin-top: 20px;
+}
+.submit {
+    margin-top: 20px;
+    float: right;
+}
+.pagecheckout {
+    padding: 20px 50px;
+}
+.description {
+    font-size: 150%;
+    margin-top: 50px;
+}
--- a/public/assets/images/product-fullsize.png
+++ b/public/assets/images/product-fullsize.png
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+    crossorigin="anonymous" >
+    <title>React PetShop</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script src="./app.bundle.js"></script>
+</body>
+</html>
--- a/src/App.js
+++ b/src/App.js
+import React, { useState } from 'react';
+import './assets/css/app.css';
+const App = (props) => {
+  let [cartItems, setCartItems] = useState([]);
+  let [showProduct, setShowProduct] = useState(true);
+  let product = {
+    id: 1001,
+    title: "고양이 사료, 25파운드",
+    description: "당신의 고양이를 위한 거부할 수 없는, 유기농 25파운드 사료입니다.",
+    price: 2000,
+    image: "./assets/images/product-fullsize.png",
+    availableInventory : 5,
+  };
+  const formatPrice = (price) => {
+    if (!parseInt(price)) { return ""; }
+    if (price > 99999) {
+      var priceString = (price / 100).toFixed(2);
+      var priceArray = priceString.split("").reverse();
+      var index = 3;
+      while (priceArray.length > index + 3) {
+        priceArray.splice(index + 3, 0, ",");
+        index += 4;
+      }
+      return "$" + priceArray.reverse().join("");
+    } else {
+      return "$" + (price / 100).toFixed(2);
+    }
+  }
+  const addToShoppingCart = () => {
+    setCartItems([...cartItems, product]);
+  }
+  const canAddToCart = () => {
+    return product.availableInventory > cartItems.length;
+  }
+  return (
+    <>
+      <header>
+        <div className="navbar navbar-default">
+          <div className="navbar-header">
+            <h1>
+              {props.sitename}
+            </h1>
+          </div>
+          <div className="nav navbar-nav navbar-right cart">
+            <button type="button" className="btn btn-default btn-lg"
+              onClick={() => setShowProduct(!showProduct)} >
+              <span className="glyphicon glyphicon-shopping-cart">
+                {cartItems.length || ''}
+              </span>
+              체크아웃
+            </button>
+          </div>
+        </div>
+      </header>
+      <main>
+        <div className="row product">
+          {showProduct &&
+            <>
+              <div className="col-md-2 col-md-offset-1">
+                <figure>
+                  <img 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() &&
+                  <button className="btn btn-primary btn-lg"
+                    onClick={addToShoppingCart}> 장바구니 담기
+                  </button>
+                }
+              </div>
+            </>
+          }
+          {!showProduct && /* Checkout 페이지 들어갈 자리 */
+            <div></div>
+          }
+        </div>
+      </main>
+    </>
+  );
+}
+export default App;
--- a/src/assets/css/app.css
+++ b/src/assets/css/app.css
+header h1 {
+    padding: 10px 20px;
+}
+body {
+    max-width: 970px;
+}
+.cart {
+    padding: 20px 50px;
+}
+.boxes {
+    margin-top: 20px;
+}
+.verify {
+    margin-top: 20px;
+}
+.submit {
+    margin-top: 20px;
+    float: right;
+}
+.pagecheckout {
+    padding: 20px 50px;
+}
+.description {
+    font-size: 150%;
+    margin-top: 50px;
+}
+.inventory-message {
+    margin-left: 20px;
+    font-weight: bold;
+    font-size: 120%;
+}
+.product {
+    margin-top: 30px;
+    margin-left: 20px;
+    max-height: 300px;
+    max-width: 100%;
+}
+.figure {}
+.rating-active:before {
+    content: "\2605";
+    position: absolute;
+}
+.rating {
+    display: inline;
+    margin-left: 10px;
+    margin-top: 10px;
+    float: right;
+}
+.rating>span {
+    display: inline-block;
+    position: relative;
+    width: 1.1em;
+}
+@media (min-width: 1200px) {
+    .container {
+        max-width: 970px;
+    }
+}
\ No newline at end of file
--- a/src/assets/images/product-fullsize.png
+++ b/src/assets/images/product-fullsize.png
--- a/src/index.js
+++ b/src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+var container = document.getElementById('root');
+var root = ReactDOM.createRoot(container);
+root.render(<App sitename="React PetShop"/>);
+module.hot.accept()
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+const webpack = require('webpack');
+module.exports = {
+    entry: {
+        app: './src/index.js'
+    },
+    output: {
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, 'public')
+    },
+    module: {
+        rules: [{
+            test: /\.(js|jsx)$/,
+            exclude: /node_modules/,
+            use: {
+                loader: 'babel-loader'
+            }
+        },
+                {
+            test: /\.css$/i,
+            use: ['style-loader', 'css-loader']
+        },
+        {
+            test: /\.(png|jpe?g|gif)$/i,
+            loader: 'file-loader',
+        }]
+    },
+    devServer: {
+        static: {
+            directory: path.join(__dirname, 'public'),
+        },
+        allowedHosts: 'all',
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin()
+    ],
+    watchOptions: {
+        ignored: '**/node_modules',
+    },
+};