Merge branch 'ourMaster' into jiwon

client/src/App.js

@@ -13,33 +13,28 @@ import Account from './Pages/Account';
 import MainNav from './Components/MainNav';
 import SubNav from './Components/SubNav';
 
-
 function App() {
 
   return (
-    <div>
-      <Router>
-        <MainNav />
-        <SubNav />
-        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route path="/login" component={Login} />
-          <Route path="/signup" component={Signup} />
-          <Route path="/product" component={Product} />
-          <Route path="/product/:product" component={ProductsList} />
-          <Route path="/admin" component={Admin} />
-          <Route path="/regist" component={ProductRegist} />
-          <Route path="/shoppingcart" component={ShoppingCart} />
-          <Route path="/payment" component={Payment} />
-          <Route path="/account" component={Account} />
-          <Route path='/kakao' component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} />
-          <Redirect path="/" to="/" />
-        </Switch>
-      </Router>
-    </div>
+    <Router>
+      <MainNav />
+      <SubNav />
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/login" component={Login} />
+        <Route path="/signup" component={Signup} />
+        <Route path="/products/:productId" component={Product} />
+        <Route path="/categories/:main" component={ProductsList} />
+        <Route path="/admin" component={Admin} />
+        <Route path="/regist" component={ProductRegist} />
+        <Route path="/shoppingcart" component={ShoppingCart} />
+        <Route path="/payment" component={Payment} />
+        <Route path="/account" component={Account} />
+        <Route path='/kakao' component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} />
+        <Redirect path="/" to="/" />
+      </Switch>
+    </Router>
   )
-
-
 }
 
-export default App;
+export default App;
\ No newline at end of file

client/src/Components/ListCard.js

 import React, { useState, useEffect, useRef } from 'react';
-import {Card} from 'react-bootstrap'
+import { Card } from 'react-bootstrap';
 
-function ListCard(props) {
+function ListCard({ id, name, price, main_img }) {
 
     return (
-        <>
-        {props.productlist.map((e)=>(
-          <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
-            <Card.Img variant="top" src={e.main_imgUrl && `/images/${e.main_imgUrl}`} style={{ objectFit: "contain", height: "22rem" }} />
+        <Card id={id} className="mt-5" style={{ width: "18rem", margin: "auto" }}>
+            <Card.Img variant="top" src={main_img && `/images/${main_img}`} style={{ objectFit: "contain", height: "22rem" }} />
             <Card.Body>
-                <Card.Title>{e.pro_name}</Card.Title>
-                <Card.Text>{e.price}</Card.Text>
+                <Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
+                <Card.Text>{price} 원</Card.Text>
             </Card.Body>
-        </Card>    
-        ))}      
-        </>
+        </Card>
     )
 }
 

client/src/Components/MainNav.js

 import React from 'react';
 import { Navbar, Nav } from 'react-bootstrap';
-import { handleLogout, isAuthenticated } from '../utils/auth'
+import { handleLogout, isAuthenticated } from '../utils/auth';
 
 function MainNav() {
     const user = isAuthenticated()
@@ -8,7 +8,7 @@ function MainNav() {
     return (
         <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
             <Navbar.Brand href="/home" className="text-light">
-                <img alt="로고" src="icon/footprint.svg" width="24" height="24" />
+                <img alt="로고" src="/icon/footprint.svg" width="24" height="24" />
                 {' '}KU#
             </Navbar.Brand>
             <Nav>
@@ -20,10 +20,10 @@ function MainNav() {
                         </>
                     )}
                 <Nav.Link href="/shoppingcart">
-                    <img alt="카트" src="icon/cart.svg" width="30" height="30" />
+                    <img alt="카트" src="/icon/cart.svg" width="30" height="30" />
                 </Nav.Link>
                 <Nav.Link href="/admin">
-                    <img alt="관리자" src="icon/option.svg" width="30" height="30" />
+                    <img alt="관리자" src="/icon/option.svg" width="30" height="30" />
                 </Nav.Link>
             </Nav>
         </Navbar>

client/src/Components/SubNav.js

 import React, { useState, useEffect, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
-import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import { Navbar, Nav } from 'react-bootstrap';
 import axios from 'axios';
 import catchErrors from '../utils/catchErrors';
 
@@ -16,7 +16,7 @@ function SubNav() {
             Object.keys(response.data[0]).forEach((ele) => {
                 const url = ele.toLowerCase()
                 list.push(
-                    <Nav.Link href={`/product/${url}`}>{ele}</Nav.Link>
+                    <Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
                 )
             })
             setCategorysDiv(list)

client/src/Pages/Home.js

 import React, { useState, useEffect, useRef } from 'react';
+import ListCard from '../Components/ListCard';
+import axios from 'axios';
+import catchError from '../utils/catchErrors';
 import { Card, Container, Row } from 'react-bootstrap';
 
 
 function Home() {
-    
+    const [productlist, setProductlist] = useState([])
+    const [error, setError] = useState('')
 
+    useEffect(() => {
+        getProductlist()
+    }, [])
+
+    async function getProductlist() {
+        try {
+            const response = await axios.get(`/api/product/getproduct`)
+            console.log(response.data)
+            setProductlist(response.data)
+        } catch (error) {
+            catchError(error, setError)
+        }
+    }
 
     return (
         <div>
@@ -12,43 +29,44 @@ function Home() {
                 <div className="my-4">
                     <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
                     <Row className="justify-content-center mx-0">
+                        <ListCard productlist={productlist} />
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
+                            <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.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.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.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.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.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>

client/src/Pages/Product.js

@@ -16,7 +16,7 @@ const INIT_PRODUCT = {
 }
 const preCart = []
 
-function Product() {
+function Product({ match, location }) {
     const [product, setProduct] = useState(INIT_PRODUCT)
     const [cart, setCart] = useState(INIT_PRODUCT)
     const [error, setError] = useState('')
@@ -63,7 +63,6 @@ function Product() {
     }
 
     function handleCreate() {
-        console.log("실행", "cart=", product)
         // if (product !== undefined) {
         //     if (product.colors !== "" && product.sizes !== "") {
         //         cart.push(
@@ -104,9 +103,13 @@ function Product() {
         }
     }
 
+    // useEffect(() => {
+    //     handleCreate()
+    // }, [product])
+
     return (
         <div>
-            {console.log(cart)}
+            {console.log("실행", "product=", product)}
             <style type="text/css">
                 {`
                 .btn {

client/src/Pages/ProductRegist.js

@@ -99,7 +99,7 @@ function ProductsRegist() {
         product["sizes"] = sizes
         const formData = new FormData();
         for (let key in product) {
-            if (key === "main_imgUrl" ||key === "detail_imgUrl") {
+            if (key === "main_image" || key === "detail_image") {
                 console.log(product[key][0])
                 formData.append(key, product[key][0])
             } else {

client/src/Pages/ProductsList.js

 import React, { useState, useEffect, useRef } from 'react';
-import Pagination from '../Components/Pagination';
-import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
 import ListCard from '../Components/ListCard';
+import Pagination from '../Components/Pagination';
 import axios from 'axios';
-import catchError from '../utils/catchErrors'
-import {isAuthenticated} from '../utils/auth'
+import catchError from '../utils/catchErrors';
+import { isAuthenticated } from '../utils/auth';
+import { Container, Row, Col, Form, FormControl, Button, Dropdown } from 'react-bootstrap';
 
-function ProductsList() {
+function ProductsList({ match }) {
+    const [mainCategory, setMainCategory] = useState('')
     const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
     const [productlist, setProductlist] = useState([])
     const [error, setError] = useState('')
-    const [category, setCategory] = useState('OUTER')
 
-    const user=isAuthenticated()
+    // const user=isAuthenticated()
+
+    useEffect(() => {
+        setMainCategory(match.params.main.toUpperCase())
+    }, [match.params.main])
 
     useEffect(() => {
-        getProductlist(user)
-    }, [user])
+        getProductlist()
+    }, [mainCategory])
 
     // async function getProfile(user){
     //     console.log(user)
@@ -28,14 +33,28 @@ function ProductsList() {
     //     }
     // }
 
+    function handleSearch() {
+
+    }
+
+    async function handleClick(subCategory) {
+        try {
+            const response = await axios.get(`/api/product/getproduct/${subCategory}`)
+            console.log("response.data=", response.data)
+            setProductlist(response.data)
+        } catch (error) {
+            catchError(error, setError)
+        }
+    }
+
     function handleSubmit(e) {
         e.preventDefault()
     }
 
     async function getProductlist() {
         try {
-            const response = await axios.get(`/api/product/getproduct/${category}`)
-            console.log(response.data)
+            const response = await axios.get(`/api/product/getproduct/${mainCategory}`)
+            console.log("response.data=", response.data)
             setProductlist(response.data)
         } catch (error) {
             catchError(error, setError)
@@ -44,9 +63,13 @@ function ProductsList() {
 
     return (
         <div>
-            
             <style type="text/css">
                 {`
+                a, a:hover, a:active {
+                    color: #000;
+                    text-decoration: none;
+                }
+
                 .btn {
                     background-color: #CDC5C2;
                     border-color: #CDC5C2;
@@ -61,14 +84,14 @@ function ProductsList() {
             <Container>
                 <Row className="justify-content-center" >
                     <Col sm={10} xs={12} >
-                        <h1 style={{ fontSize: "3rem" }} className="text-center">OUTER</h1>
+                        <h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
                         <div className="text-center">{sub.map((ele) => (
-                            <Button className="m-1">{ele}</Button>
+                            <Button className="m-1" onClick={(ele) => handleClick(ele)}>{ele}</Button>
                         ))}</div>
                     </Col>
                 </Row>
                 <Row className="justify-content-end mx-0 my-5">
-                    <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
+                    {/* <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0"> */}
                         <Dropdown>
                             <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
                             <Dropdown.Menu>
@@ -78,16 +101,32 @@ function ProductsList() {
                                 <Dropdown.Item>높은가격</Dropdown.Item>
                             </Dropdown.Menu>
                         </Dropdown>
-                        <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
+                        <Form as={Row} onSubmit={handleSearch} className="justify-content-end mx-0">
                             <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
                             <Button type="submit" className="search px-2">
-                                <img src="icon/search.svg" width="20" height="20" />
+                                <img src="/icon/search.svg" width="20" height="20" />
                             </Button>
                         </Form>
-                    </Form>
+                    {/* </Form> */}
                 </Row>
                 <Row md={8} sm={12} className="justify-content-start m-2">
-                    <ListCard productlist={productlist} />
+                    {productlist.map(pro => (
+                        <Link to={{
+                            pathname: `/products/${pro._id}`,
+                            state: {
+                                id: pro._id,
+                                name: pro.pro_name,
+                                price: pro.price,
+                                colors: pro.colors,
+                                sizes: pro.sizes,
+                                description: pro.description,
+                                main_img: pro.main_imgUrl,
+                                detail_imgs: pro.detail_imgUrls
+                            }
+                        }}>
+                            <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
+                        </Link>
+                    ))}
                 </Row>
             </Container>
             {/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */}

client/src/Pages/ShoppingCart.js

@@ -6,8 +6,6 @@ import catchErrors from '../utils/catchErrors';
 import { isAuthenticated } from '../utils/auth'
 import CartCard from '../Components/CartCard';
 
-
-
 function ShoppingCart() {
     const [num, setNum] = useState()
     const [error, setError] = useState('')