Merge remote-tracking branch 'origin/jiwon' into who

client/src/App.js

-import logo from './logo.svg';
 import './App.css';
-import { Button } from 'react-bootstrap';
-import { Router } from 'react-router-dom';
-import Login from './Login'
-import LogoutButton from './LogoutButton'
-import {signIn} from './auth'
+import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
+import Home from './Pages/Home';
+import Login from './Pages/Login';
+import Signup from './Pages/Signup';
+import Product from "./Pages/Product";
+import ProductsList from "./Pages/ProductsList";
+import Admin from './Pages/Admin';
+import ProductRegist from './Pages/ProductRegist';
+import ShoppingCart from './Pages/ShoppingCart';
+import Payment from './Pages/Payment';
+import Account from './Pages/Account';
+import MainNav from './Components/MainNav';
+import SubNav from './Components/SubNav';
 
 
 function App() {
-  const [user,setUser]=useState(null);
-
-  const authenticated =user !=null;
-
-  const login =({id, password}) => setUser(signIn({id,password}));
-
-  const logout=()=>setUser(null);
+  // const [user,setUser]=useState(null);
+  // const authenticated =user !=null;
+  // const login =({id, password}) => setUser(signIn({id,password}));
+  // const logout=()=>setUser(null);
+
+
+  return (
+    <div>
+      <MainNav />
+      <SubNav />
+      <Router>
+        <Switch>
+          <Route exact path="/" component={Home} />
+          <Route path="/login" component={Login} />
+          <Route path="/signup" component={Signup} />
+          <Route path="/product" component={Product} />
+          <Route path="/productslist" component={ProductsList} />
+          <Route path="/admin" component={Admin} />
+          <Route path="/regist" component={ProductRegist} />
+          <Route path="/shoppingcart" component={ShoppingCart} />
+          <Route path="/payment" component={Payment} />
+          <Route path="/account" component={Account} />
+          <Route path='/kakao' component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} />
+          <Redirect path="/" to="/" />
+        </Switch>
+      </Router>
+    </div>
+
+  )
 
 
 }

client/src/Components/Card.js

+import React, { useState, useEffect, useRef } from 'react';
+
+function Card() {
+
+
+    return (
+        <div></div>
+        
+    )
+}
+
+export default Card
\ No newline at end of file

client/src/Components/MainNav.js

@@ -13,18 +13,18 @@ function MainNav() {
     return (
         <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
             <Navbar.Brand href="/home" className="text-light">
-                <img src={logo} width="24" height="24" />
+                <img alt="로고" src={logo} width="24" height="24" />
                 {' '}KU#
             </Navbar.Brand>
-            <Nav className="justify-content-end">
+            <Nav className="float-right">
                 <Nav.Link className="text-light" href="/login">Login</Nav.Link>
                 <Nav.Link className="text-light" href="/signup">Signup</Nav.Link>
                 <Nav.Link href="/shoppingcart">
-                    <img src={cart} width="30" height="30" />
+                    <img alt="카트" src={cart} width="30" height="30" />
                 </Nav.Link>
                 <Nav.Link className="text-light" onClick={() => handleClick()}>Logout</Nav.Link>
                 <Nav.Link href="/admin">
-                    <img src={option} width="30" height="30" />
+                    <img alt="관리자" src={option} width="30" height="30" />
                 </Nav.Link>
             </Nav>
         </Navbar>

client/src/Components/SubNav.js

@@ -22,7 +22,7 @@ function SubNav() {
     }
 
     return (
-        <Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff", overflowX: "auto"}}>
+        <Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff", overflowX: "auto" }}>
             <style type="text/css">
                 {`
                 .nav-link, .nav-link:hover, .nav-link:active {
@@ -50,6 +50,7 @@ function SubNav() {
                 }
                 `}
             </style>
+
             <Nav>
                 <NavDropdown title="DRESS" onMouseEnter={() => handleMouseEnter("dress")} onMouseLeave={() => handleMouseLeave("dress")} show={toggle.dress} toggle={() => handleToggle("dress")} onClick={() => handleClick("/dress")}>
                     <NavDropdown.Item href="/dress/long">LONG DRESS</NavDropdown.Item>

client/src/Pages/Account.js

 import React from 'react'
-import MainNav from '../Components/MainNav'
-import SubNav from '../Components/SubNav'
 
 
 function Account() {
     return (
         <div>
-            <MainNav />
-            <SubNav />
             <h5>마이페이지</h5>
         </div>
     )

client/src/Pages/Admin.js

 import React, { useState, useEffect, useRef } from 'react';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
 import Pagination from '../Components/Pagination';
 import search from '../search.svg';
 import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
@@ -31,8 +29,6 @@ function Admin() {
                 }
                 `}
             </style>
-            <MainNav />
-            <SubNav />
             <Container>
                 <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
                     <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />

client/src/Pages/Home.js

 import React, { useState, useEffect, useRef } from 'react';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
 import { Card, Container, Row } from 'react-bootstrap';
 
 
 function Home() {
     return (
         <div>
-            <MainNav />
-            <SubNav />
             <Container className="my-5">
                 <div className="my-4">
                     <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>

client/src/Pages/Login.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Link, Redirect } from 'react-router-dom';
-import Nav1 from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
 import { Form, Col, Container, Button, Row } from 'react-bootstrap';
 
 function Login() {
@@ -21,8 +19,7 @@ function Login() {
 
     return (
         <div>
-            <Nav1 />
-            <Nav2 />
+
             <Container className="my-5">
                 <Row className="justify-content-center">
                     <Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}>

client/src/Pages/Payment.js

 import React, { useState, useEffect, useRef } from 'react';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
 import DaumPostcode from "react-daum-postcode";
 import { Container, Card, Row, Col, Button, Form, FormGroup } from 'react-bootstrap';
 import { Redirect } from 'react-router-dom';
@@ -112,9 +110,9 @@ function Payment() {
                 total_amount: 22000,
                 vat_amount: 200,
                 tax_free_amount: 0,
-                approval_url: 'http://localhost:3000/kakaopay/success',
-                fail_url: 'http://localhost:3000/kakaopay/fail',
-                cancel_url: 'http://localhost:3000/kakaopay/cancel',
+                approval_url: 'http://localhost:3000/account',
+                fail_url: 'http://localhost:3000/shoppingcart',
+                cancel_url: 'http://localhost:3000/kakaopay/payment',
             })
         })
         const data = await response.json()
@@ -147,8 +145,6 @@ function Payment() {
 
     return (
         <div>
-            <MainNav />
-            <SubNav />
             <Container>
                 <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
                 <div>
@@ -222,15 +218,15 @@ function Payment() {
                             </Col>
                             <Col md={6} className="p-2">
                                 <Card.Body>
-                                    <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
+                                    <input type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
                                     <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
                                     <Card.Text>가격</Card.Text>
                                     <Card.Text>옵션</Card.Text>
                                     <Card.Text>수량</Card.Text>
                                     <div>
-                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
+                                        <input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
                                         <input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
-                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
+                                        <input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
                                     </div>
                                 </Card.Body>
                             </Col>
@@ -258,7 +254,7 @@ function Payment() {
                     <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
                     <div className="text-center mt-5">
                         <Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
-                        <input type="image" src="img/payment_icon_yellow_small.png" onClick={kakaopay} />
+                        <input type="image" alt="카카오페이결제" src="img/payment_icon_yellow_small.png" onClick={kakaopay} />
                     </div>
                     {paymentWay}
                 </div>

client/src/Pages/Product.js

+import axios from 'axios';
 import React, { useState, useEffect, useRef } from 'react';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
 import { Row, Col, Form, Card, Button } from 'react-bootstrap';
+import catchErrors from '../utils/catchErrors';
 
 function Product() {
-    const [select, setSelect] = useState({ color: "", size: ""})
+    const [select, setSelect] = useState({ color: "", size: "" })
     const [cart, setCart] = useState()
+    const [error, setError] = useState('')
 
     function handleClick(e) {
         const box = e.target.parentNode.parentNode
@@ -24,14 +25,14 @@ function Product() {
     }
 
     function handleCreate() {
-        console.log("실행","cart=",cart)
+        console.log("실행", "cart=", cart)
         if (cart !== undefined) {
             if (cart.color !== "") {
                 const list = document.getElementById('list')
                 list.style.borderBottom = "1px solid"
                 const shopping = document.createElement('div')
                 shopping.className = "d-flex justify-content-between my-2"
-                shopping.innerHTML=`${cart.color} / ${cart.size}
+                shopping.innerHTML = `${cart.color} / ${cart.size}
                 <input type="number" min="0" max="10" value="1" style="width: 40px" />
                 <p style="margin-bottom: 0px">14,000원</p>`
                 const deleteA = document.createElement('a')
@@ -43,9 +44,29 @@ function Product() {
         }
     }
 
+    async function addCart() {
+        // color, size, count, productObjectId(productlist에서 props), userId(로컬) 를 보내줌
+        try {
+            // setError('')
+            const response = await axios.post('/api/addcart', {
+                userId: "jiwon5393",
+                productObjectId: "5ff7fd63d41cae4ecce51dd1",
+                color: "red",
+                size: "free",
+                count: "1"
+            })
+            console.log(response)
+        }catch(error){
+            // catchErrors(error, setError)
+        }
+
+        
+        alert("상품등록이 완료되었습니다.")
+    }
+
     useEffect(() => {
         if (Object.keys(select).length == 2) {
-            setCart({...select})
+            setCart({ ...select })
             setSelect({})
         }
     }, [select])
@@ -69,8 +90,6 @@ function Product() {
                 }
                 `}
             </style>
-            <MainNav />
-            <SubNav />
             <Row className="justify-content-center mt-5 mx-0">
                 <Col sm={11} md={4}>
                     <img src="https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg" style={{ objectFit: "contain", width: "100%" }} />
@@ -102,7 +121,7 @@ function Product() {
                             <Col className="text-right">14,000원</Col>
                         </Row>
                         <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
-                            <Button style={{ width: "49%" }}>장바구니</Button>
+                            <Button onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
                             <Button style={{ width: "49%" }}>구매하기</Button>
                         </Row>
                     </Form>

client/src/Pages/ProductRegist.js

 import React, { useState, useEffect, useRef } from 'react';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
 import { Row, Col, Button, Form, Container } from 'react-bootstrap';
 import axios from 'axios'
+import catchErrors from '../utils/catchErrors';
+import { Redirect } from 'react-router-dom';
 
+let color = {}
+let colors = []
+let addedcolors = []
+let list = []
 
 function ProductsRegist() {
-    const [product, setProduct] = useState()
+    const INIT_PRODUCT = {
+        pro_name: '',
+        price: 0,
+        stock: 0,
+        main_category: '',
+        sub_category: [],
+        size: [],
+        color: [],
+        description: '',
+        main_image: [],
+        detail_image: []
+    }
+    const categorys = {
+        "DRESS": ["LONG DRESS", "SHORT DRESS", "KNIT DRESS", "SHIRT DRESS", "PATTERN DRESS", "BUSTIER DRESS", "TWO-PIECE DRESS"],
+        "OUTER": ["PADDED JACKET", "JACKET", "JUMPER", "COAT", "FLEECE", "CARDIGAN / VEST"],
+        "TOP": ["KNIT", "HOODY", "BLOUSE", "SHIRT", "SWEATSHIRT", "LONG SLEEVE SHIRT", "SHORT SLEEVE / SLEEVELESS SHIRT"],
+        "PANTS": ["JEANS", "SKINNY JEANS", "BANDING PANTS", "WIDE-FIT PANTS", "BOOT-CUT PANTS", "STRAIGHT-FIT PANTS", "SHORTS", "TROUSERS", "LEGGINGS", "JUMPSUIT / OVERALLS"],
+        "SKIRT": ["LONG SKIRT", "MIDI SKIRT", "MINI SKIRT"],
+        "TRAINING": [],
+        "SHOES": ["SNEAKERS / SLIP-ON", "FLAT / LOAFER", "HEEL / PUMP", "BOOTS", "SANDAL / SLIPPER"]
+    }
+    const [product, setProduct] = useState(INIT_PRODUCT)
+    const [categoryNum, setCategoryNum] = useState(0)
+    const [tag, setTag] = useState(0)
+    const [error, setError] = useState('')
+    const [success, setSuccess] = useState(false)
+    const [checked, setChecked] = useState({ "Free": false, "XL": false, "L": false, "M": false, "S": false, "XS": false })
+
+    const mainCategorys = Object.keys(categorys)
+    const subCategorys = Object.values(categorys)
+
+    function addCategory() {
+        console.log(product)
+        list.push(
+            <div>
+                <span i={tag}>{product["main_category"]} / {product["sub_category"][tag]}</span>
+                <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteCategory} />
+            </div>)
+        setTag(tag + 1)
+    }
+    function deleteCategory(e) {
+        const categ = e.target.parentNode
+        categ.remove()
+        product["sub_category"].splice(e.target.parentNode.firstElementChild.getAttribute("i"), 1)
+        console.log(product)
+    }
+    function handleCheckBox(e) {
+        setChecked({ ...checked, [e.target.value]: !checked[`${e.target.value}`] })
+    }
+
+    function addColor() {
+        addedcolors.push(
+            <div>{color["color"]}</div>
+        )
+        if (product.color) {
+            setProduct({ ...product, [color]: colors })
+        } else {
+            setProduct({ ...product, "color": colors })
+
+        }
+
+    }
 
     function handleChange(event) {
         const { name, value } = event.target
-        console.log("file=",event.target.files)
-        console.log("name=",name,"value=",value)
+        if (event.target.name === "sub_category") {
+            product["sub_category"].push(event.target.value)
+        } else if (event.target.name === "color") {
+            color[event.target.name] = event.target.value
+            // console.log(color)
+        } else {
             setProduct({ ...product, [name]: value })
         }
+        if (event.target.name === "main_category") {
+            setCategoryNum(event.target.selectedIndex - 1)
+        }
+    }
 
-    function handleSubmit(e) {
+    async function handleSubmit(e) {
         e.preventDefault()
+        const sizes = []
+        for (let [key, value] of Object.entries(checked)) {
+            if (value === true) {
+                sizes.push(key)
+            }
+        }
+        product["size"].push(sizes)
         const formData = new FormData();
-        for (let key of Object.keys(product)) {
+        for (let key in product) {
             formData.append(key, product[key])
         }
-        console.log("formData=",formData)
-        axios.post('/api/product/regist',{data: formData}).then(function(res) {
-            console.log("client의 res=", res)
-        })
+        console.log("formData=", formData)
+        console.log(product)
+        try {
+            const response = axios.post('/api/product/regist', { data: formData })
+            setSuccess(true)
+            console.log(response)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
     }
 
+    if (success) {
+        return <Redirect to='/' />
+    }
     return (
         <div>
-            {console.log(product)}
-            <MainNav />
-            <SubNav />
             <Container>
                 <Row className="justify-content-md-center">
-                    <Col md={6} className="border m-5 p-3" style={{ background: '#F7F3F3' }}>
+                    <Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
                         <h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
                         <Form className="p-5" onSubmit={handleSubmit}>
                             <Form.Group controlId="productNameform">
@@ -52,22 +137,53 @@ function ProductsRegist() {
                             <Form.Group>
                                 <Form.Label>분류</Form.Label>
                                 <Row>
-                                    <Col md={6}>
-                                        <Form.Control as="select" name="main_category" placeholder="상위분류" onChange={handleChange}>
-                                            <option>Pants</option>
-                                            <option>Skirt</option>
-                                            <option>Outer</option>
+                                    <Col md={4}>
+                                        <Form.Control as="select" name="main_category" onChange={handleChange}>
+                                            <option value="" >상위분류</option>
+                                            {mainCategorys.map((main) => (
+                                                <option value={main}>{main}</option>
+                                            ))}
                                         </Form.Control>
                                     </Col>
                                     <Col md={6}>
-                                        <Form.Control as="select" name="sub_category" placeholder="하위분류" onChange={handleChange}>
-                                            <option>JEANS</option>
-                                            <option>SKINNY JEANS</option>
-                                            <option>BANDING PANTS</option>
+                                        <Form.Control as="select" name="sub_category" onChange={handleChange}>
+                                            <option value="" >하위분류</option>
+                                            {subCategorys[categoryNum].map((sub) => (
+                                                <option value={sub}>{sub}</option>
+                                            ))}
                                         </Form.Control>
                                     </Col>
+                                    <Col >
+                                        <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addCategory}>추가</Button>
+                                    </Col>
+                                </Row>
+                                {list.map((element) => element)}
+                            </Form.Group>
+                            <Form.Group>
+                                <Form.Label>사이즈</Form.Label>
+                                {/* {console.log(checked)} */}
+                                <Form.Check type="checkbox" name="size" label="Free" value="Free" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="XL" value="XL" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="L" value="L" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="M" value="M" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="S" value="S" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="XS" value="XS" onChange={handleCheckBox} />
+                            </Form.Group>
+                            <Form.Group>
+                                <Form.Label>색상</Form.Label>
+                                <Row>
+                                    <Col md={10}>
+                                        <Form.Control as="textarea" rows={1} name="color" placeholder="색상" onChange={handleChange} />
+
+                                    </Col>
+                                    <Col>
+
+                                        <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
+                                    </Col>
                                 </Row>
+                                {addedcolors.map((element) => element)}
                             </Form.Group>
+
                             <Form.Group controlId="productDescriptionform">
                                 <Form.Label>상품설명</Form.Label>
                                 <Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} />
@@ -80,7 +196,7 @@ function ProductsRegist() {
                                 <Form.Label>상세이미지</Form.Label>
                                 <Form.File id="productImageform" name="detail_image" onChange={handleChange} />
                             </Form.Group>
-                            <Button className="float-right" variant="primary" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
+                            <Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
                         </Form>
                     </Col>
                 </Row>

client/src/Pages/ProductsList.js

 import React, { useState, useEffect, useRef } from 'react';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
 import Pagination from '../Components/Pagination';
 import search from '../search.svg';
 import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
@@ -27,8 +25,6 @@ function ProductsList() {
                 }
                 `}
             </style>
-            <MainNav />
-            <SubNav />
             <Container>
                 <Row className="justify-content-center mx-0 my-4">
                     <Col sm={10}>

client/src/Pages/ShoppingCart.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Redirect } from 'react-router-dom';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
 import { Card, Button, Container, Row, Col } from 'react-bootstrap';
+import axios from 'axios';
 
 function ShoppingCart() {
 
@@ -25,10 +24,13 @@ function ShoppingCart() {
         console.log('카트에 담긴 항목을 삭제했습니다.')
     }
 
+    // async function getCart(){
+    //     const response = await axios.get('/')
+    // }
+
     return (
         <div>
-            <MainNav />
-            <SubNav />
+            {/* {getCart} */}
             <Container className="justify-content-center">
                 <h3 className="my-5 font-weight-bold text-center">장바구니</h3>
                 <div>
@@ -43,15 +45,15 @@ function ShoppingCart() {
                             </Col>
                             <Col md={6} className="p-2">
                                 <Card.Body>
-                                    <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
+                                    <input type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
                                     <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
                                     <Card.Text>가격</Card.Text>
                                     <Card.Text>옵션</Card.Text>
                                     <Card.Text>수량</Card.Text>
                                     <div>
-                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
+                                        <input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
                                         <input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
-                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
+                                        <input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
                                     </div>
                                 </Card.Body>
                             </Col>

client/src/Pages/Signup.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Redirect } from 'react-router-dom';
-import Nav1 from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
 import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
-import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
 import axios from 'axios';
 
 const INIT_USER = {
@@ -63,8 +60,6 @@ function Signup() {
 
     return (
         <div>
-            <Nav1 />
-            <Nav2 />
             <Container className="my-5">
                 {error && <Alert variant='danger'>
                     {error}

client/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
-import Home from './Pages/Home';
-import Login from './Pages/Login';
-import Signup from './Pages/Signup';
-import Product from "./Pages/Product";
-import ProductsList from "./Pages/ProductsList";
-import Admin from './Pages/Admin';
-import ProductRegist from './Pages/ProductRegist';
-import ShoppingCart from './Pages/ShoppingCart';
-import Payment from './Pages/Payment';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import Account from './Pages/Account';
-import Mypage from './Pages/Mypage'
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
-    <Router>
-      <Switch>
-        <Route exact path="/" component={Home} />
-        <Route path="/login" component={Login} />
-        <Route path="/signup" component={Signup} />
-        <Route path="/list" component={ProductsList} />
-        <Route path="/product"component={Product} />
-        <Route path="/productslist"component={ProductsList} />
-        <Route path="/admin" component={Admin} />
-        <Route path="/regist" component={ProductRegist} />
-        <Route path="/shoppingcart" component={ShoppingCart} />
-        <Route path="/payment" component={Payment} />
-        <Route path="/account" component={Account}/>
-        <Route path='/kakao' component={() => {window.location.href='https://compmath.korea.ac.kr'; return null;}}/>
-        <Route path='/mypage' component={Mypage} />
-        <Redirect path="/" to="/" />
-      </Switch>
-    </Router>
+    <App/>
   </React.StrictMode>,
   document.getElementById('root')
 );

client/src/utils/catchErrors.js

+// import React from 'react'
+
+function catchErrors(error, displayError) {
+    let errorMsg
+    if (error.response){
+        errorMsg = error.response.data
+        console.log(errorMsg)
+    }
+    else if (error.request){
+        errorMsg = error.request
+        console.log(errorMsg)
+    }
+    else {
+        errorMsg = error.message
+        console.log(errorMsg)
+    }
+    displayError(errorMsg)
+
+}
+
+export default catchErrors

server/app.js

@@ -3,6 +3,7 @@ import express from 'express';
 import connectDb from './schemas/index.js'
 import userRouter from "./routes/user.routes.js";
 import productRouter from './routes/product.routes.js';
+import cartRouter from './routes/cart.routes.js';
 import path from 'path'
 import kakaopayRoutes from './routes/kakaopay.routes.js'
 import config from './config.js'
@@ -23,6 +24,7 @@ app.use(express.static(path.join(process.cwd(), 'dist')))
 app.use('/', kakaopayRoutes)
 app.use('/api/users',userRouter)
 app.use('/api/product', productRouter)
+app.use('/api/addcart', cartRouter)
 
 app.listen(config.port, () => {
   console.info('Server started on port %s.', config.port)

server/controllers/cart.controller.js

+import Cart from "../schemas/Cart.js";
+import Product from '../schemas/Product.js'
+
+const cart = async (req, res) => {
+    const { userId, productObjectId, color, size, count } = req.body
+    // console.log('req.body=', req.body)
+    // const {userId, productObjectId, }
+    // const { user, pro_name, price, main_image } = req.body
+    // color, size, count, productObjectId(productlist에서 props), userId(로컬)
+    try {
+        const product = await Product.find({ _id: productObjectId })
+        if (product) {
+            // console.log(product)
+            const { pro_name, price, main_image } = product[0]
+            const products = { productObjectId, color, size, count, pro_name, price, main_image }
+            // console.log(products)
+            const newCart = await new Cart({
+                userId, products
+            }).save()
+            console.log(newCart)
+            res.json(newCart)
+
+        }
+        // const newCart = await new Cart({
+        //     user, pro_name, price, stock, main_category, sub_category, main_image
+        // }).save()
+        // const asdf = await Cart.find({ user })
+        // console.log(newCart)
+        // res.json(newCart)
+    } catch (error) {
+        console.log(error)
+        res.status(500).send('죄송합니다. 다시 입력해 주십시오.')
+    }
+
+    //     try {
+    //         const user = await 
+    //     User.findById(id)
+    //     if (!user) {
+    //       console.log(error)
+    //       res.status(404).send('사용자를 찾을 수 없습니다')
+    //     }
+    //     req.profile = user
+    //     next()
+    //   } catch (error) {
+    //     console.log(error)
+    //     res.status(500).send('사용자 아이디 실패')
+    //   }
+}
+
+export default { cart }
\ No newline at end of file

server/controllers/product.controller.js

@@ -2,14 +2,11 @@ import Product from "../schemas/Product.js";
 
 const regist = async (req, res) => {
     console.log('req.body=', req.body)
-    console.log('req.data=', req.data)
-    console.log('req.body.data=', req.body.data)
     const { pro_name, price, stock, main_category, sub_category, description, main_image, detail_image } = req.body
     try {
         const newProduct = await new Product ({
             pro_name, price, stock, main_category, sub_category, description, main_image, detail_image
         }).save()
-        console.log(newProduct)
         res.json(newProduct)
     } catch (error) {
         console.log(error)

server/routes/cart.routes.js

+import express from "express";
+import cartCtrl from '../controllers/cart.controller.js';
+
+
+const router = express.Router()
+
+router.route('/')
+    .post(cartCtrl.cart)
+    // .get()
+
+export default router
\ No newline at end of file