Merge branch 'kimpen' into ourMaster

client/src/Components/Pagination.js

+import { Pagination } from "react-bootstrap";
 import React from 'react';
-import { Pagination } from 'react-bootstrap';
 
-function Paginations({ inedx, endPage, handlePage }) {
+function Paginations({ index, endPage, handlePage }) {
 
     return (
         <Pagination>
@@ -15,7 +15,6 @@ function Paginations({ inedx, endPage, handlePage }) {
 
             <Pagination.Item active>{index}</Pagination.Item>
 
-
             {index === endPage ? "" : <Pagination.Item onClick={()=>handlePage(index + 1)}>{index + 1}</Pagination.Item>}
             {index > endPage-2 ? "" : <Pagination.Item onClick={()=>handlePage(index + 2)}>{index + 2}</Pagination.Item>}
             {index === 1 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""}
@@ -26,7 +25,6 @@ function Paginations({ inedx, endPage, handlePage }) {
             <Pagination.Last onClick={() =>handlePage(endPage)} />
         </Pagination>
     )
-
 }
 
 export default Paginations
\ No newline at end of file

client/src/Components/SubNav.js

@@ -15,8 +15,7 @@ function SubNav() {
             Object.keys(response.data[0]).forEach((ele) => {
                 const url = ele.toLowerCase()
                 list.push(
-                    <Nav.Link href={`/categories/${url}`}>{ele}                   
-                    </Nav.Link>
+                    <Nav.Link href={`/categories/${url}`}>{ele}</Nav.Link>
                 )
             })
             setCategoriesDiv(list)

client/src/Pages/Admin.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Redirect } from 'react-router-dom';
 import AllCard from '../Components/AllCard';
-import Pagination from '../Components/Pagination';
+import Pagination from "../Components/Pagination";
 import axios from 'axios';
 import catchError from '../utils/catchErrors';
 import { Row, Form, FormControl, Button, Container } from 'react-bootstrap';
 
 function Admin() {
+    const INIT_STATUS = { indexOfFirst: 0, indexOfLast: 10 }
+    const [search, setSearch] = useState({ word: '' })
     const [productlist, setProductlist] = useState([])
+    const [status, setStatus] = useState(INIT_STATUS)
+    const [currentPage, setCurrentPage] = useState(1);
+    const [per, setPer] = useState(10);
     const [error, setError] = useState('')
+    const searchref = useRef(null)
+    const indexOfLast = currentPage * per;
+    const indexOfFirst = indexOfLast - per;
 
     useEffect(() => {
         getProductlist()
     }, [])
 
+    function paginate(items, index, itemNumber) {
+        const posts = [];
+        const startIndex = (index - 1) * itemNumber
+        for (var i = 0; i < itemNumber; i++) {
+            posts.push(items[(startIndex + i)])
+        }
+        return posts
+    }
+
+    function currentPosts(tmp) {
+        let currentPosts = 0;
+        currentPosts = tmp.slice(indexOfFirst, indexOfLast);
+        console.log("postsPerPage=",currentPage)
+        return currentPosts;
+    }
+
     async function getProductlist() {
         try {
             const response = await axios.get(`/api/product/getproduct/all`)
@@ -24,12 +48,28 @@ function Admin() {
         }
     }
 
-    function handleSearch() {
-
+    function handleChange(event) {
+        setSearch({ word: event.target.value })
     }
 
-    function handleSubmit(e) {
+    async function handleSubmit(e) {
         e.preventDefault()
+        try {
+            setError('')
+            const response = await axios.get(`/api/product/getproduct/all?product=${search.word}`)
+            console.log("response.data=", response.data)
+            setProductlist(response.data)
+        } catch (error) {
+            catchError(error, setError)
+        } finally {
+            searchref.current.value = ''
+        }
+    }
+
+    if (error) {
+        alert(`${error}`)
+        setError('')
+        searchref.current.value = ''
     }
 
     return (
@@ -48,18 +88,18 @@ function Admin() {
                 `}
             </style>
             <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
-                <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
+                <FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
                 <Button type="submit" className="px-2">
                     <img src="icon/search.svg" width="20" height="20" />
                 </Button>
                 <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
             </Row>
             <Row className="justify-content-center m-5">
-                {productlist.map(pro => (
+                {currentPosts(productlist).map(pro => (
                     <AllCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
                 ))}
             </Row>
-            <Pagination />
+            <Pagination index={currentPage} totalPosts={Math.ceil(productlist.length / per)} handlePage={setCurrentPage} />
         </Container>
     )
 }

client/src/Pages/Payment.js

 import axios from 'axios';
 import React, { useState, useEffect, useRef } from 'react';
 import DaumPostcode from "react-daum-postcode";
-import { Container, Card, Row, Col, Button, Form, FormGroup } from 'react-bootstrap';
+import { Container, Row, Col, Button, Form } from 'react-bootstrap';
 import { Redirect, Link, useHistory } from 'react-router-dom';
 import PaymentCard from '../Components/PaymentCard';
 import { isAuthenticated } from '../utils/auth';
@@ -9,7 +9,7 @@ import catchErrors from '../utils/catchErrors';
 
 function Payment({ match, location }) {
     const [cart, setCart] = useState([])
-    const [order, setOrder] = useState({products: []})
+    const [order, setOrder] = useState({ products: [] })
     const [userData, setUserData] = useState({})
     const [error, setError] = useState()
     const [post, setPost] = useState([])
@@ -231,8 +231,6 @@ function Payment({ match, location }) {
     }
 
     return (
-        <div>
-            {/* {console.log(completeState)} */}
         <Container>
             <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
             <div>
@@ -256,7 +254,6 @@ function Payment({ match, location }) {
                     </Col>
                 </Row>
             </div>
-
             <div>
                 <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>받는사람 정보</h5>
                 <Row className="justify-content-center">
@@ -297,7 +294,6 @@ function Payment({ match, location }) {
                 <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
                 <PaymentCard cart={cart} deleteOrder={deleteOrder} />
             </div>
-
             <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
                 <ul className="pl-0" style={{ listStyle: 'none' }}>
                     <li>
@@ -312,7 +308,6 @@ function Payment({ match, location }) {
                 <div className="my-1 pt-2 border-top font-weight-bold">
                     결제금액<span className="float-right">{finalPrice + 2500}원</span>
                 </div>
-                </div>
                 <div>
                     <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
                     <div className="text-center m-3">
@@ -324,8 +319,12 @@ function Payment({ match, location }) {
                 <div className="text-center">
                     <Button type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button>
                 </div>
-            </Container>
+                {paymentWay}
+            </div>
+            <div className="text-center">
+                <Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={paymentCompleted} block>결제완료</Button>
             </div>
+        </Container>
     )
 }
 

client/src/Pages/ProductsList.js

@@ -16,6 +16,7 @@ function ProductsList({ match }) {
     const [error, setError] = useState('')
     const indexOfLast = currentPage * postsPerPage;
     const indexOfFirst = indexOfLast - postsPerPage;
+    const searchref = useRef(null)
 
     const [sortingName, setSortingName] = useState('정렬')
 
@@ -36,24 +37,26 @@ function ProductsList({ match }) {
     }, [mainCategory])
 
     function handleChange(event) {
-        console.log('handle change', event.target.value)
         setSearch({ word: event.target.value })
     }
 
-    async function handleSearch(event) {
-        event.preventDefault()
+    async function handleSearch(e) {
+        e.preventDefault()
         try {
             setError('')
-            const response = await axios.post(`/api/product/getproduct/main/${mainCategory}`, search)
+            const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}`)
             console.log("response.data=", response.data)
             setProductlist(response.data)
         } catch (error) {
             catchError(error, setError)
+        } finally {
+            searchref.current.value = ''
         }
     }
 
     async function getSubsCategories() {
         try {
+            setError('')
             const response = await axios.get(`/api/categories/sub/${mainCategory}`)
             setSubCategory(Object.values(response.data)[0])
             console.log("object value=", Object.values(response.data));
@@ -64,6 +67,7 @@ function ProductsList({ match }) {
 
     async function getProductlist() {
         try {
+            setError('')
             const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`)
             setProductlist(response.data)
         } catch (error) {
@@ -132,7 +136,6 @@ function ProductsList({ match }) {
 
     async function handleSubname(e) {
         const subname = e.target.name
-        console.log("subname=", subname)
         try {
             console.log("first test!!!!!!!!")
             const response = await axios.get(`/api/product/getproduct/sub?subname=${subname}`)
@@ -143,6 +146,12 @@ function ProductsList({ match }) {
         }
     }
 
+    if (error) {
+        alert(`${error}`)
+        setError('')
+        searchref.current.value = ''
+    }
+
     return (
         <Container>
             {console.log(productlist)}
@@ -157,9 +166,13 @@ function ProductsList({ match }) {
                     border-color: #CDC5C2;
                 }
                 .btn:hover {
-                    background: #91877F;
+                    background-color: #91877F;
                     border-color: #91877F;
                 }
+                .dropdown-item:hover, .dropdown-item:active {
+                    background-color: #91877F;
+                    color: #fff;
+                }
                 `}
             </style>
             <Row className="justify-content-center">
@@ -174,7 +187,7 @@ function ProductsList({ match }) {
             </Row>
             <Row className="justify-content-end mx-0 mt-5 mb-3">
                 <Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2">
-                    <FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
+                    <FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
                     <Button  type="submit" className="px-2 mr-2">
                         <img src="/icon/search.svg" width="20" height="20" />
                     </Button>

server/controllers/product.controller.js

@@ -43,15 +43,23 @@ const getToHome = async (req, res) => {
 
 const getAll = async (req, res) => {
     try {
+        if (req.query.product) {
+            const productslist = await Product.find({ pro_name: { $regex: new RegExp(req.query.product) } }).sort({ createdAt: -1 })
+            if (productslist.length == 0) {
+                res.status(404).send('상품을 찾을 수 없습니다.')
+            } else {
+                res.json(productslist)
+            }
+        } else {
             const productslist = await Product.find({}).sort({ createdAt: -1 })
             res.json(productslist)
+        }
     } catch (error) {
         res.status(500).send('상품을 불러오지 못했습니다.')
     }
 }
 
 const getlist = (req, res) => {
-    console.log('get list')
     try {
         res.json(req.productslist)
     } catch (error) {
@@ -61,15 +69,19 @@ const getlist = (req, res) => {
 
 
 const categoryId = async (req, res, next, category) => {
-    const { search } = req.body
-    console.log("server search=", search)
+    console.log("req=", req.query.product)
     try {
+        if (req.query.product) {
+            const productslist = await Product.find({ main_category: category, pro_name: { $regex: new RegExp(req.query.product) } })
+            if (productslist.length == 0) {
+                res.status(404).send('상품을 찾을 수 없습니다.')
+            } else {
+                req.productslist = productslist
+            }
+        } else {
             const productslist = await Product.find({ main_category: category })
-        // if (!productslist) {
-        //     res.status(404).send('상품을 찾을 수 없습니다.')
-        // }
             req.productslist = productslist
-        console.log("nononono", req.productslist)
+        }
         next()
     } catch (error) {
         res.status(500).send('상품을 불러오지 못했습니다.')