followed react-petshop-5

231a5f5a · hongfeng wu · 231a5f5a · 231a5f5a · 231a5f5a · 231a5f5a
Commit 231a5f5a authored 2 years ago by hongfeng wu
--- 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",
+    "react-router-dom": "^6.11.1"
+  },
+  "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/app.bundle.js.LICENSE.txt
+++ b/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.
+ */
--- 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/Mindy_Mouse_cat_toy.jpg
+++ b/public/assets/images/Mindy_Mouse_cat_toy.jpg
--- a/public/assets/images/cat-house.jpg
+++ b/public/assets/images/cat-house.jpg
--- a/public/assets/images/cat-litter.jpg
+++ b/public/assets/images/cat-litter.jpg
--- a/public/assets/images/laser-pointer.jpg
+++ b/public/assets/images/laser-pointer.jpg
--- a/public/assets/images/product-fullsize.png
+++ b/public/assets/images/product-fullsize.png
--- a/public/assets/images/yarn.jpg
+++ b/public/assets/images/yarn.jpg
--- 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/public/products.json
+++ b/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
+    }
+  ]
+}
--- a/src/App.js
+++ b/src/App.js
+import React, { useState, useEffect } from 'react';
+import './assets/css/app.css';
+import CheckoutPage from './checkout';
+import Products from './products';
+import Header from './header';
+
+const App = (props) => {
+  let [cartItems, setCartItems] = useState([]);
+  let [showProduct, setShowProduct] = useState(true);
+
+  return (
+    <>
+      <header>
+        <Header name={props.sitename} 
+                nItems={cartItems.length} 
+                onToggleShowProduct={() => setShowProduct(!showProduct)}
+        />
+      </header>
+      <main>
+        {showProduct && 
+          <Products cart={cartItems} onSetCart={setCartItems}/>
+        }
+        {!showProduct && /* Checkout 페이지 들어갈 자리 */
+          <CheckoutPage />
+        }
+      </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;
+}
+
+label {
+    padding: 3px;
+}
+
+.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/checkout.js
+++ b/src/checkout.js
+import React, {useState} from 'react';
+
+const CheckoutPage = (props) => {
+
+    let [order, setOrder] = useState({ firstName: '', lastName: '', state: 'CA', address: '' });
+    let states = ['AL', 'AR', 'CA', 'NV', 'NY', 'FL'];
+
+    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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <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="form-group">
+          <div className="col-md-12">
+            <input type="submit" name="submit" className="btn btn-lg btn-primary submit"
+              onClick={() => { alert("제출완료") }} />
+          </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>
+      </div>
+    )
+}
+
+export default CheckoutPage;
\ No newline at end of file
--- a/src/header.js
+++ b/src/header.js
+import React from 'react';
+
+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>
+  )
+}
+
+export default Header;
\ No newline at end of file