0115

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/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)
         }
@@ -35,7 +35,7 @@ function SubNav() {
                 `}
             </style>
             <Nav>
-                {categorysDiv.map(item => item)}
+                {categoriesDiv.map(item => item)}
             </Nav>
         </Navbar>
     )

client/src/Pages/Home.js

@@ -37,41 +37,6 @@ function Home() {
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
-                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
-                            <Card.Body>
-                                <Card.Title className="font-weight-bold">제품명</Card.Title>
-                                <Card.Text>가격</Card.Text>
-                            </Card.Body>
-                        </Card>
-                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
-                            <Card.Body>
-                                <Card.Title className="font-weight-bold">제품명</Card.Title>
-                                <Card.Text>가격</Card.Text>
-                            </Card.Body>
-                        </Card>
-                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
-                            <Card.Body>
-                                <Card.Title className="font-weight-bold">제품명</Card.Title>
-                                <Card.Text>가격</Card.Text>
-                            </Card.Body>
-                        </Card>
-                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
-                            <Card.Body>
-                                <Card.Title className="font-weight-bold">제품명</Card.Title>
-                                <Card.Text>가격</Card.Text>
-                            </Card.Body>
-                        </Card>
-                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
-                            <Card.Body>
-                                <Card.Title className="font-weight-bold">제품명</Card.Title>
-                                <Card.Text>가격</Card.Text>
-                            </Card.Body>
-                        </Card>
                     </Row>
                 </div>
                 <div className="my-4">

client/src/Pages/Product.js

@@ -3,22 +3,11 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Row, Col, Form, Card, Button } from 'react-bootstrap';
 import catchErrors from '../utils/catchErrors';
 
-const INIT_PRODUCT = {
-    pro_name: '스키니진',
-    price: 12000,
-    count: 1,
-    main_category: 'PANTS',
-    sub_category: ['SKINNY JEANS'],
-    sizes: ['L', 'M'],
-    colors: ['연청', '진청'],
-    main_image: "a8f4d63ead77717f940a2b27deb707a6",
-    productId:"5ffda03428faf35de8319360"
-}
 const preCart = []
 
 function Product({ match, location }) {
-    const [product, setProduct] = useState(INIT_PRODUCT)
-    const [cart, setCart] = useState(INIT_PRODUCT)
+    const [product, setProduct] = useState(location.state)
+    const [cart, setCart] = useState(location.state)
     const [error, setError] = useState('')
     const [selected, setSelected] = useState({ sizes: false, colors: false })
     const [n, setN] = useState(1)
@@ -110,7 +99,7 @@ function Product({ match, location }) {
 
     return (
         <div>
-            {console.log("실행", "product=", product)}
+            {console.log("match=",match.params, "location=",location.state, "product=",product)}
             <style type="text/css">
                 {`
                 .btn {
@@ -126,11 +115,11 @@ function Product({ match, location }) {
             </style>
             <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%" }} />
+                    <img src={product.main_img} style={{ objectFit: "contain", width: "100%" }} />
                 </Col>
                 <Col sm={11} md={4} className="align-middle mt-4">
-                    <h3 className="mb-4">sop682 리본끈셋원피스</h3>
-                    <h5 className="mb-4">가격 : 14,000원</h5>
+                    <h3 className="mb-4">{product.name}</h3>
+                    <h5 className="mb-4">가격 : {product.price}원</h5>
                     <Form style={{ borderBottom: "1px solid" }}>
                         <Form.Group style={{ borderBottom: "1px solid", paddingBottom: "2rem" }}>
                             <Form.Label>색상</Form.Label>

client/src/Pages/ProductRegist.js

@@ -32,7 +32,7 @@ function ProductsRegist() {
 
     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)])
         } catch (error) {
@@ -107,16 +107,16 @@ function ProductsRegist() {
             }
         }
         try {
-            const response = axios.post('/api/product/regist', formData)
-            // setSuccess(true)
+            const response = await axios.post('/api/product/regist', formData)
             console.log(response)
+            setSuccess(true)
         } catch (error) {
             catchErrors(error, setError)
         }
     }
 
     if (success) {
-        return <Redirect to='/' />
+        return <Redirect to='/admin' />
     }
 
     return (

client/src/Pages/ProductsList.js

@@ -8,7 +8,7 @@ import { isAuthenticated } from '../utils/auth';
 import { Container, Row, Col, Form, FormControl, Button, Dropdown } from 'react-bootstrap';
 
 function ProductsList({ match }) {
-    const [mainCategory, setMainCategory] = useState('')
+    const [mainCategory, setMainCategory] = useState(match.params.main)
     const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
     const [productlist, setProductlist] = useState([])
     const [error, setError] = useState('')
@@ -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,

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/auth.controller.js

@@ -24,7 +24,6 @@ const login = async(req,res)=>{
                 secure:config.env ==='production'
             })
             res.json({userId:user._id})
-            
         }else{
             res.status(401).send('비밀번호가 일치하지 않습니다.')
         }

server/controllers/product.controller.js

@@ -29,13 +29,24 @@ const regist = async (req, res) => {
     }
 }
 
+const getToHome = async (res, req) => {
+    try {
+        const bestProduct = await Product.find({}).sort({ purchase: 1 }).limit(6)
+        const newProduct = await Product.find({}).sort({ createdAt: -1 }).limit(6)
+        console.log("best=",bestProduct)
+        console.log("new=",newProduct)
+        res.json(bestProduct, newProduct)
+    } catch {
+        res.status(500).send('상품을 불러오지 못했습니다.')
+    }
+}
+
 const getlist=(req,res)=>{
     try {
         res.json(req.productslist)
     } catch (error) {
         res.status(500).send('상품을 불러오지 못했습니다.')
     }
-
 }
 
 const categoryId = async (req, res, next, category) => {
@@ -50,4 +61,4 @@ const categoryId = async (req, res, next, category) => {
         res.status(500).send('상품을 불러오지 못했습니다.')
     }
 }
-export default { imageUpload, regist, categoryId, getlist }
+export default { imageUpload, regist, categoryId, getlist, getToHome }
\ No newline at end of file

server/routes/product.routes.js

@@ -7,6 +7,9 @@ const router = express.Router()
 router.route('/regist')
     .post(productCtrl.imageUpload, productCtrl.regist)
 
+router.route('/getproduct')
+    .get(productCtrl.getToHome)
+
 router.route('/getproduct/:category')
     .get(productCtrl.getlist)
 

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)
+export default mongoose.models.Categories || mongoose.model('Categories', CategoriesSchema)
\ No newline at end of file