검색 기능 구현

client/src/Pages/Admin.js

@@ -7,6 +7,7 @@ import catchError from '../utils/catchErrors';
 import { Row, Form, FormControl, Button, Container } from 'react-bootstrap';
 
 function Admin() {
+    const [search, setSearch] = useState({ word: '' })
     const [productlist, setProductlist] = useState([])
     const [error, setError] = useState('')
 
@@ -24,12 +25,21 @@ 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)
+            e.target.childNodes[0].value = ''
+        } catch (error) {
+            catchError(error, setError)
+        }
     }
 
     return (
@@ -48,7 +58,7 @@ 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 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>

client/src/Pages/Payment.js

@@ -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 [paymentWay, setPaymentWay] = useState([])
@@ -201,11 +201,7 @@ function Payment({ match, location }) {
         return <Redirect to={'/kakao'} />
     }
 
-    
-
     return (
-        <div>
-            {/* {console.log(order)} */}
         <Container>
             <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
             <div>
@@ -300,7 +296,6 @@ function Payment({ match, location }) {
                 <Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={paymentCompleted} block>결제완료</Button>
             </div>
         </Container>
-        </div>
     )
 }
 

client/src/Pages/ProductsList.js

@@ -34,17 +34,17 @@ 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)
+            e.target.childNodes[0].value = ''
         } catch (error) {
             catchError(error, setError)
         }

server/controllers/product.controller.js

@@ -43,8 +43,17 @@ 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('상품을 불러오지 못했습니다.')
     }
@@ -68,16 +77,20 @@ const subname = async (req, res) => {
 }
 
 const categoryId = async (req, res, next, category) => {
-    console.log("req=",req.body)
-    // 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) {
+                console.log('ds')
+                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('상품을 불러오지 못했습니다.')
@@ -95,7 +108,7 @@ const subcategoryId = async (req, res, next, subname) => {
                 _id: 'nothing',
                 pro_name: '상품준비중',
                 price: 0,
-                main_imgUrl:''
+                main_imgUrl: ''
             }
             console.log("findSubname2222=", findSubname)
             res.send(findSubname)