DSAD

client/src/Components/AdminRoute.js

@@ -10,7 +10,7 @@ function PrivateRoute({path, children}) {
       </Route>
     )
   } else {
-    alert('궈한이 없습니다. 죄송합니다.');
+    alert('권한이 없습니다. 죄송합니다.');
     return (
       <Redirect to='/' />
     )

client/src/Components/AllCard.js

+import React, { useState, useEffect, useRef } from 'react';
+import { Card, Button } from 'react-bootstrap';
+
+function AllCard({ id, name, price, main_img }) {
+    function handleDelete(e) {
+        const card = e.target.parentNode.parentNode
+        alert('해당 상품을 성공적으로 삭제하였습니다.')
+        card.remove()
+    }
+
+    return (
+        <Card id={id} className="m-3" style={{ width: "18rem" }}>
+            <Card.Img variant="top" src={main_img && `/images/${main_img}`} style={{ objectFit: "contain", height: "22rem" }} />
+            <Card.Body>
+                <Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
+                <Card.Text>{price} 원</Card.Text>
+                <Button className="float-right" onClick={handleDelete}>삭제</Button>
+            </Card.Body>
+        </Card>
+    )
+}
+
+export default AllCard
\ No newline at end of file

client/src/Components/ListCard.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Card, Button } from 'react-bootstrap';
 
 function ListCard({ id, name, price, main_img }) {
-
     function handleDelete(e) {
         const card = e.target.parentNode.parentNode
         alert('해당 상품을 성공적으로 삭제하였습니다.')
@@ -15,7 +14,6 @@ function ListCard({ id, name, price, main_img }) {
             <Card.Body>
                 <Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
                 <Card.Text>{price} 원</Card.Text>
-                <Button className="float-right" onClick={handleDelete}>삭제</Button>
             </Card.Body>
         </Card>
     )

client/src/Components/Pagination.js

@@ -18,3 +18,37 @@ function pagination() {
 }
 
 export default pagination
+
+// import { Pagination } from "react-bootstrap";
+// import React from 'react';
+
+
+
+// function Paginations(props) {
+
+//     return (
+//         <Pagination>
+//             <Pagination.First onClick={() => props.handlePage(1)} />
+//             {props.index === 1 ? <Pagination.Prev onClick={()=>props.handlePage(props.index)} /> : <Pagination.Prev onClick={()=>props.handlePage(props.index - 1)} />}
+//             {props.index === props.endPage-1 ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
+//             {props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 4)}>{props.index - 4}</Pagination.Item> : ""}
+//             {props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
+//             {props.index < 3 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 2)}>{props.index - 2}</Pagination.Item>}
+//             {props.index === 1 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 1)}>{props.index - 1}</Pagination.Item>}
+
+//             <Pagination.Item active>{props.index}</Pagination.Item>
+
+
+//             {props.index === props.endPage ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 1)}>{props.index + 1}</Pagination.Item>}
+//             {props.index > props.endPage-2 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 2)}>{props.index + 2}</Pagination.Item>}
+//             {props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
+//             {props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 4)}>{props.index + 4}</Pagination.Item> : ""}
+//             {props.index === 2 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
+//             {props.index === props.endPage ? "" : <Pagination.Next onClick={()=>props.handlePage(props.index + 1)} />}
+
+//             <Pagination.Last onClick={() =>props.handlePage(props.endPage)} />
+//         </Pagination>
+//     )
+
+// }
+// export default Paginations
\ No newline at end of file

client/src/Pages/Admin.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Redirect } from 'react-router-dom';
-import ListCard from '../Components/ListCard';
+import AllCard from '../Components/AllCard';
 import Pagination from '../Components/Pagination';
 import axios from 'axios';
-import { isAdmin } from "../utils/auth";
 import catchError from '../utils/catchErrors';
-import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
+import { Row, Form, FormControl, Button, Container } from 'react-bootstrap';
 
 function Admin() {
     const [productlist, setProductlist] = useState([])
     const [error, setError] = useState('')
-    const role = isAdmin()
 
     useEffect(() => {
         getProductlist()
@@ -34,11 +32,6 @@ function Admin() {
         e.preventDefault()
     }
 
-    if(!role) {
-        alert('죄송합니다.접근 권한이 없습니다.')
-        return <Redirect to="/" />
-    }
-
     return (
         <Container>
             <style type="text/css">
@@ -63,7 +56,7 @@ function Admin() {
             </Row>
             <Row className="justify-content-center m-5">
                 {productlist.map(pro => (
-                    <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
+                    <AllCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
                 ))}
             </Row>
             <Pagination />

client/src/Pages/Home.js

@@ -21,7 +21,6 @@ function Home() {
     async function getProductlist() {
         try {
             const response = await axios.get(`/api/product/getproduct`)
-            console.log("res=", response.data)
             setProductlist({ bestProduct: response.data.bestProduct, newProduct: response.data.newProduct })
         } catch (error) {
             catchError(error, setError)

client/src/Pages/ProductsList.js

@@ -7,7 +7,7 @@ import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup }
 
 function ProductsList({ match }) {
     const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
-    const [subcategory, setSubcategory] = useState([])
+    const [subCategory, setSubCategory] = useState([])
     const [productlist, setProductlist] = useState([])
     const [error, setError] = useState('')
 
@@ -21,18 +21,27 @@ function ProductsList({ match }) {
         getProductlist()
     }, [mainCategory])
 
+    async function handleClick(sub) {
+        console.log("sub=",sub)
+        try {
+            const response = await axios.get(`/api/product/getproduct/${mainCategory}/${sub}`)
+            console.log("response.data=", response.data)
+            setProductlist(response.data)
+
+        } catch (error) {
+            catchError(error, setError)
+        }
+    }
+
     function handleSearch() {
 
     }
 
-    async function getSubsCategories([]) {
+    async function getSubsCategories() {
         try {
             const response = await axios.get(`/api/categories/sub/${mainCategory}`)
-            setSubcategory(Object.values(response.data)[0])
-
-            console.log("response data=", response.data)
+            setSubCategory(Object.values(response.data)[0])
             console.log("object value=", Object.values(response.data));
-
         } catch (error) {
             catchError(error, setError)
         }
@@ -41,7 +50,6 @@ function ProductsList({ match }) {
     async function getProductlist() {
         try {
             const response = await axios.get(`/api/product/getproduct/${mainCategory}`)
-            console.log("response.data=", response.data)
             setProductlist(response.data)
 
         } catch (error) {
@@ -57,14 +65,12 @@ function ProductsList({ match }) {
                     color: #000;
                     text-decoration: none;
                 }
-
                 .btn {
                     background-color: #CDC5C2;
                     border-color: #CDC5C2;
                 }
-
-                .btn:hover, .btn:active, .btn:focus, .show>.btn-primary.dropdown-toggle {
-                    background-color: #91877F;
+                .btn:hover {
+                    background: #91877F;
                     border-color: #91877F;
                 }
                 `}
@@ -74,8 +80,8 @@ function ProductsList({ match }) {
                     <Col sm={10} xs={12} >
                         <h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
                         <div className="text-center">
-                            <ButtonGroup className="d-flex flex-wrap" variant="outline-light secondary">
-                                {subcategory.map(el => (<Button className="m-1" variant="secondary">{el}</Button>))}
+                            <ButtonGroup className="d-flex flex-wrap">
+                                {subCategory.map(el => (<Button className="m-1" onClick={() => handleClick(el)}>{el}</Button>))}
                             </ButtonGroup>
                         </div>
                     </Col>

server/controllers/category.controller.js

@@ -3,7 +3,6 @@ import Category from "../schemas/Category.js";
 const getCategory = async (req, res) => {
     try {
         const category = await Category.find({}, { _id: 0 })
-        console.log("main= ", category);
         res.json(category)
     } catch (error) {
         console.log(error)
@@ -12,11 +11,9 @@ const getCategory = async (req, res) => {
 }
 
 const getSubCategory = async (req, res) => {
-    console.log("req.params=", req.params);
-    const { sub } = req.params
+    const name = req.params.name
     try {
-        const subcategory = await Category.findOne({}, { _id: 0}).select(`${sub}`)
-        console.log("sub= ",subcategory);
+        const subcategory = await Category.findOne({}, { _id: 0}).select(`${name}`)
         res.json(subcategory);
     } catch (error) {
         res.status(500).send('카테고리를 불러오지 못했습니다.')

server/routes/category.routes.js

@@ -6,9 +6,7 @@ const router = express.Router()
 router.route('/main')
     .get(categoryCtrl.getCategory)
 
-router.route('/sub/:sub')
+router.route('/sub/:name')
     .get(categoryCtrl.getSubCategory)
 
-// router.param('sub',categoryCtrl.getsubId)
-
 export default router
\ No newline at end of file