0115 push

client/src/App.js

@@ -23,7 +23,7 @@ function App() {
         <Route exact path="/" component={Home} />
         <Route path="/login" component={Login} />
         <Route path="/signup" component={Signup} />
-        <Route path="/products/:productId" component={Product} />
+        <Route path="/product/:productId" component={Product} />
         <Route path="/categories/:main" component={ProductsList} />
         <Route path="/admin" component={Admin} />
         <Route path="/regist" component={ProductRegist} />

client/src/Components/CartCard.js

@@ -11,7 +11,7 @@ function CartCard(props) {
                                 <input className="" type="checkbox" id="exampleCheck1" />
                             </Col>
                             <Col className="text-center">
-                                <Card.Img className="img-fluid" variant="top" src={e.productId.main_image && `/images/${e.productId.main_image}`} style={{ width: '20rem' }} />
+                                <Card.Img className="img-fluid" variant="top" src={e.productId.main_imgUrl && `/images/${e.productId.main_imgUrl}`} style={{ width: '20rem' }} />
                             </Col>
                             <Col md={6} className="p-2">
                                 <Card.Body>

client/src/Components/MainNav.js

@@ -11,7 +11,7 @@ function MainNav() {
                 <img alt="로고" src="/icon/footprint.svg" width="24" height="24" />
                 {' '}KU#
             </Navbar.Brand>
-            <Nav>
+            <Nav className="ml-auto">
                 {user ? <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
                     : (
                         <>

client/src/Components/PaymentCard.js

+import React from 'react'
+
+function PaymentCard() {
+    return (
+        <Card >
+            <Row className="mx-1">
+                <Col className="text-center">
+                    <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
+                </Col>
+                <Col md={6} className="p-2">
+                    <Card.Body>
+                        <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" 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" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
+                        </div>
+                    </Card.Body>
+                </Col>
+            </Row>
+        </Card>
+    )
+}
+
+export default PaymentCard

client/src/Components/SubNav.js

@@ -5,13 +5,13 @@ import axios from 'axios';
 import catchErrors from '../utils/catchErrors';
 
 function SubNav() {
-    const [categorysDiv, setCategorysDiv] = useState([])
+    const [categoriesDiv, setCategoriesDiv] = useState([])
     const [error, setError] = useState('')
 
 
     useEffect(async () => {
         try {
-            const response = await axios.get('/api/categorys')
+            const response = await axios.get('/api/categories')
             let list = []
             Object.keys(response.data[0]).forEach((ele) => {
                 const url = ele.toLowerCase()
@@ -19,7 +19,7 @@ function SubNav() {
                     <Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
                 )
             })
-            setCategorysDiv(list)
+            setCategoriesDiv(list)
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -34,8 +34,8 @@ function SubNav() {
                 }
                 `}
             </style>
-            <Nav>
-                {categorysDiv.map(item => item)}
+            <Nav style={{overflowX: "auto"}}>
+                {categoriesDiv.map(item => item)}
             </Nav>
         </Navbar>
     )

client/src/Pages/Payment.js

@@ -210,9 +210,6 @@ function Payment() {
                     <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
                     <Card >
                         <Row className="mx-1">
-                            <Col xs={2} sm={2} className="text-center my-auto">
-                                <input className="" type="checkbox" id="exampleCheck1" />
-                            </Col>
                             <Col className="text-center">
                                 <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
                             </Col>

client/src/Pages/ProductRegist.js

@@ -4,7 +4,6 @@ import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
 import axios from 'axios';
 import catchErrors from '../utils/catchErrors';
 
-let color = {}
 let preColors = []
 let colorHtml = []
 let list = []
@@ -22,38 +21,55 @@ function ProductsRegist() {
         main_image: [],
         detail_image: []
     }
-    const [categorys, setCategorys] = useState({ 0: [], 1: [[]] })
+    const [categories, setCategories] = useState({ 0: [], 1: [[]] })
     const [product, setProduct] = useState(INIT_PRODUCT)
     const [categoryNum, setCategoryNum] = useState(0)
     const [tag, setTag] = useState(0)
+    const [subCate, setSubCate] = useState('')
+    const [color, setColor] = useState({})
     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 })
 
     useEffect(async () => {
         try {
-            const response = await axios.get('/api/categorys')
+            const response = await axios.get('/api/categories')
             const data = response.data[0]
-            setCategorys([Object.keys(data), Object.values(data)])
+            setCategories([Object.keys(data), Object.values(data)])
         } catch (error) {
             catchErrors(error, setError)
         }
     }, [])
 
     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} />
+                <span name={subCate} >{product["main_category"]} / {subCate} </span>
+                <input name={subCate} 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)
+        console.log(list)
     }
 
     function deleteCategory(e) {
-        const categ = e.target.parentNode
-        categ.remove()
-        product["sub_category"].splice(categ.firstElementChild.getAttribute("i"), 1)
+        e.target.parentNode.remove()
+        const index = product["sub_category"].findIndex((item)=>{return item === e.target.name})
+        product["sub_category"].splice(index, 1)
+        setSubCate('')
+        console.log(product["sub_category"].length)
+    }
+    function handleCategory(e) {
+        const { name, value } = e.target
+        if (e.target.name === "main_category") {
+            setCategoryNum(e.target.selectedIndex - 1)
+        }
+        if (name === "sub_category") {
+            product[name].push(value)
+            setSubCate(value)
+        } else {
+            setProduct({ ...product, [name]: value })
+        }
+        console.log(value)
     }
 
     function handleCheckBox(e) {
@@ -63,29 +79,36 @@ function ProductsRegist() {
     function addColor() {
         preColors.push(color["colors"])
         colorHtml.push(
-            <p>{color["colors"]}</p>
+            <div>
+                <span>{color["colors"]}</span>
+                <input name={subCate} type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteColor} />
+            </div>
         )
+        setColor({})
         setProduct({ ...product, "colors": preColors })
     }
+    function deleteColor(e) {
+        e.target.parentNode.remove()
+        product["colors"].splice(e.name, 1)
+        setColor({})
+        console.log(product)
+    }
 
-    function colorChange(e) {
+    function handleColor(e) {
         color[e.target.name] = e.target.value
     }
 
+
+
     function handleChange(event) {
         const { name, value, files } = event.target
         console.log("event.target.name=", name, "event.target.value=", value)
-        if (name === "sub_category") {
-            product[name].push(value)
-        } else if (files) {
+        if (files) {
             setProduct({ ...product, [name]: files })
-
         } else {
             setProduct({ ...product, [name]: value })
         }
-        if (event.target.name === "main_category") {
-            setCategoryNum(event.target.selectedIndex - 1)
-        }
+
     }
 
     async function handleSubmit(e) {
@@ -120,7 +143,7 @@ function ProductsRegist() {
     }
 
     return (
-        <Container className="mt-5">
+        <Container className=". ">
             <Row className="justify-content-md-center">
                 <Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
                     {error && <Alert variant="danger" className="text-center">{error}</Alert>}
@@ -142,17 +165,17 @@ function ProductsRegist() {
                             <Form.Label>분류</Form.Label>
                             <Row>
                                 <Col md={4}>
-                                    <Form.Control as="select" name="main_category" onChange={handleChange}>
+                                    <Form.Control as="select" name="main_category" onChange={handleCategory} disabled={product["sub_category"].length > 0}>
                                         <option value="" >상위분류</option>
-                                        {categorys[0].map((main) => (
+                                        {categories[0].map((main) => (
                                             <option value={main}>{main}</option>
                                         ))}
                                     </Form.Control>
                                 </Col>
                                 <Col md={6}>
-                                    <Form.Control as="select" name="sub_category" onChange={handleChange}>
+                                    <Form.Control as="select" name="sub_category" onChange={handleCategory} disabled={product["main_category"] === "TRAINING"}>
                                         <option value="" >하위분류</option>
-                                        {categorys[1][categoryNum].map((sub) => (
+                                        {categories[1][categoryNum].map((sub) => (
                                             <option value={sub}>{sub}</option>
                                         ))}
                                     </Form.Control>
@@ -176,11 +199,9 @@ function ProductsRegist() {
                             <Form.Label>색상</Form.Label>
                             <Row>
                                 <Col md={10}>
-                                    <Form.Control as="textarea" rows={1} name="colors" placeholder="색상" onChange={colorChange} />
-
+                                    <Form.Control as="textarea" rows={1} name="colors" value={color["colors"]} placeholder="색상" onChange={handleColor} />
                                 </Col>
                                 <Col>
-
                                     <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
                                 </Col>
                             </Row>

client/src/Pages/ProductsList.js

@@ -112,7 +112,7 @@ function ProductsList({ match }) {
                 <Row md={8} sm={12} className="justify-content-start m-2">
                     {productlist.map(pro => (
                         <Link to={{
-                            pathname: `/products/${pro._id}`,
+                            pathname: `/product/${pro._id}`,
                             state: {
                                 id: pro._id,
                                 name: pro.pro_name,

client/src/Pages/ShoppingCart.js

 import React, { useState, useEffect, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import { Card, Button, Container, Row, Col } from 'react-bootstrap';
 import axios from 'axios';
 import catchErrors from '../utils/catchErrors';
@@ -9,7 +9,7 @@ import CartCard from '../Components/CartCard';
 function ShoppingCart() {
     const [num, setNum] = useState()
     const [error, setError] = useState('')
-    const [cart, setCart] = useState()
+    const [cart, setCart] = useState([])
     const [finalPrice, setFinalPrice] = useState(0)
     const user = isAuthenticated()
 
@@ -19,7 +19,6 @@ function ShoppingCart() {
 
     function plusNum() {
         num = num + 1
-
         setNum(num + 1)
     }
     function minusNum() {
@@ -28,7 +27,6 @@ function ShoppingCart() {
         }
         else {
             setNum(num - 1)
-
         }
     }
     async function deleteCart(e) {
@@ -49,10 +47,10 @@ function ShoppingCart() {
             const response = await axios.get(`/api/cart/showcart/${user}`)
             console.log(response.data)
             setCart(response.data)
-            const finalPrices = response.data.map((e)=>{
+            const finalPrices = response.data.map((e) => {
                 return e.count * e.productId.price
             })
-            setFinalPrice( finalPrices.reduce((a,b) => (a+b)))
+            setFinalPrice(finalPrices.reduce((a, b) => (a + b)))
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -61,10 +59,12 @@ function ShoppingCart() {
     return (
         <div>
             <Container className="justify-content-center">
-                <h3 className="my-5 font-weight-bold text-center">장바구니</h3>
+                <h1 className="my-5 font-weight-bold text-center">장바구니</h1>
                 <div>
                     <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
-                    {cart?<CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} num={num} />:<div></div>}
+                    {cart.length >0
+                        ? <CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} num={num} />
+                        : <div className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>}
 
                 </div>
                 <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
@@ -79,11 +79,14 @@ function ShoppingCart() {
                         </li>
                     </ul>
                     <div className="my-1 pt-2 border-top font-weight-bold">
-                        결제금액<span className="float-right">{finalPrice+2500}원</span>
+                        결제금액<span className="float-right">{finalPrice + 2500}원</span>
                     </div>
                 </div>
                 <div className="text-center">
-                    <Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/payment" block>결제하기</Button>
+                    <Button as={Link} to={{
+                            pathname: `/payment`,
+                            state: { cart }
+                        }} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제하기</Button>
                 </div>
             </Container>
 

server/app.js

@@ -28,7 +28,7 @@ app.use('/images', express.static('uploads/'))
 
 // app.use('/', indexRouter);
 app.use('/', kakaopayRoutes)
-app.use('/api/categorys',categoryRouter)
+app.use('/api/categories',categoryRouter)
 app.use('/api/users',userRouter)
 app.use('/api/auth',authRouter)
 app.use('/api/product', productRouter)

server/controllers/cart.controller.js

@@ -19,7 +19,7 @@ const showcart = async (req, res) => {
     try {
         const cart = await Cart.findOne({ userId: req.id }).populate({
             path: 'products.productId',
-            model: 'Product'
+            model: 'Product' 
         })
         res.status(200).json(cart.products)
     } catch (error) {

server/schemas/Category.js

@@ -2,7 +2,7 @@ import mongoose from 'mongoose'
 
 const { Array } = mongoose.Schema.Types
 
-const CategorysSchema = new mongoose.Schema ({
+const CategoriesSchema = new mongoose.Schema ({
     "DRESS": {
         type: Array,
         required: true
@@ -33,4 +33,4 @@ const CategorysSchema = new mongoose.Schema ({
     },
 })
 
-export default mongoose.models.Categorys || mongoose.model('Categorys', CategorysSchema)
\ No newline at end of file
+export default mongoose.models.Categories || mongoose.model('Categories', CategoriesSchema)
\ No newline at end of file