Skip to content

GitLab

Commit 8be66ea0 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'ourMaster' into jiwon

parents 16cfb78c 0912b817
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 8be66ea0
...@@ -13,11 +13,9 @@ import Account from './Pages/Account'; ...@@ -13,11 +13,9 @@ import Account from './Pages/Account';
import MainNav from './Components/MainNav'; import MainNav from './Components/MainNav';
import SubNav from './Components/SubNav'; import SubNav from './Components/SubNav';
function App() { function App() {
return ( return (
<div>
<Router> <Router>
<MainNav /> <MainNav />
<SubNav /> <SubNav />
...@@ -25,8 +23,8 @@ function App() { ...@@ -25,8 +23,8 @@ function App() {
<Route exact path="/" component={Home} /> <Route exact path="/" component={Home} />
<Route path="/login" component={Login} /> <Route path="/login" component={Login} />
<Route path="/signup" component={Signup} /> <Route path="/signup" component={Signup} />
<Route path="/product" component={Product} /> <Route path="/products/:productId" component={Product} />
<Route path="/product/:product" component={ProductsList} /> <Route path="/categories/:main" component={ProductsList} />
<Route path="/admin" component={Admin} /> <Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductRegist} /> <Route path="/regist" component={ProductRegist} />
<Route path="/shoppingcart" component={ShoppingCart} /> <Route path="/shoppingcart" component={ShoppingCart} />
...@@ -36,10 +34,7 @@ function App() { ...@@ -36,10 +34,7 @@ function App() {
<Redirect path="/" to="/" /> <Redirect path="/" to="/" />
</Switch> </Switch>
</Router> </Router>
</div>
) )
} }
export default App; export default App;
\ No newline at end of file
client/src/Components/ListCard.js
View file @ 8be66ea0
import React, { useState, useEffect, useRef } from 'react'; 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 ( return (
<> <Card id={id} className="mt-5" style={{ width: "18rem", margin: "auto" }}>
{props.productlist.map((e)=>( <Card.Img variant="top" src={main_img && `/images/${main_img}`} style={{ objectFit: "contain", height: "22rem" }} />
<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.Body> <Card.Body>
<Card.Title>{e.pro_name}</Card.Title> <Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
<Card.Text>{e.price}</Card.Text> <Card.Text>{price} 원</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
))}
</>
) )
} }
......
client/src/Components/MainNav.js
View file @ 8be66ea0
import React from 'react'; import React from 'react';
import { Navbar, Nav } from 'react-bootstrap'; import { Navbar, Nav } from 'react-bootstrap';
import { handleLogout, isAuthenticated } from '../utils/auth' import { handleLogout, isAuthenticated } from '../utils/auth';
function MainNav() { function MainNav() {
const user = isAuthenticated() const user = isAuthenticated()
...@@ -8,7 +8,7 @@ function MainNav() { ...@@ -8,7 +8,7 @@ function MainNav() {
return ( return (
<Navbar sticky="top" style={{ background: "#CDC5C2" }}> <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
<Navbar.Brand href="/home" className="text-light"> <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# {' '}KU#
</Navbar.Brand> </Navbar.Brand>
<Nav> <Nav>
...@@ -20,10 +20,10 @@ function MainNav() { ...@@ -20,10 +20,10 @@ function MainNav() {
</> </>
)} )}
<Nav.Link href="/shoppingcart"> <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>
<Nav.Link href="/admin"> <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.Link>
</Nav> </Nav>
</Navbar> </Navbar>
......
client/src/Components/SubNav.js
View file @ 8be66ea0
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap'; import { Navbar, Nav } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
...@@ -16,7 +16,7 @@ function SubNav() { ...@@ -16,7 +16,7 @@ function SubNav() {
Object.keys(response.data[0]).forEach((ele) => { Object.keys(response.data[0]).forEach((ele) => {
const url = ele.toLowerCase() const url = ele.toLowerCase()
list.push( list.push(
<Nav.Link href={`/product/${url}`}>{ele}</Nav.Link> <Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
) )
}) })
setCategorysDiv(list) setCategorysDiv(list)
......
client/src/Pages/Home.js
View file @ 8be66ea0
import React, { useState, useEffect, useRef } from 'react'; 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'; import { Card, Container, Row } from 'react-bootstrap';
function Home() { 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 ( return (
<div> <div>
...@@ -12,43 +29,44 @@ function Home() { ...@@ -12,43 +29,44 @@ function Home() {
<div className="my-4"> <div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2> <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0"> <Row className="justify-content-center mx-0">
<ListCard productlist={productlist} />
<Card className="mx-1 my-2" style={{ width: '18rem' }}> <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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}> <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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}> <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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}> <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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}> <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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}> <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.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
......
client/src/Pages/Product.js
View file @ 8be66ea0
...@@ -16,7 +16,7 @@ const INIT_PRODUCT = { ...@@ -16,7 +16,7 @@ const INIT_PRODUCT = {
} }
const preCart = [] const preCart = []
function Product() { function Product({ match, location }) {
const [product, setProduct] = useState(INIT_PRODUCT) const [product, setProduct] = useState(INIT_PRODUCT)
const [cart, setCart] = useState(INIT_PRODUCT) const [cart, setCart] = useState(INIT_PRODUCT)
const [error, setError] = useState('') const [error, setError] = useState('')
...@@ -63,7 +63,6 @@ function Product() { ...@@ -63,7 +63,6 @@ function Product() {
} }
function handleCreate() { function handleCreate() {
console.log("실행", "cart=", product)
// if (product !== undefined) { // if (product !== undefined) {
// if (product.colors !== "" && product.sizes !== "") { // if (product.colors !== "" && product.sizes !== "") {
// cart.push( // cart.push(
...@@ -104,9 +103,13 @@ function Product() { ...@@ -104,9 +103,13 @@ function Product() {
} }
} }
// useEffect(() => {
// handleCreate()
// }, [product])
return ( return (
<div> <div>
{console.log(cart)} {console.log("실행", "product=", product)}
<style type="text/css"> <style type="text/css">
{` {`
.btn { .btn {
......
client/src/Pages/ProductRegist.js
View file @ 8be66ea0
...@@ -99,7 +99,7 @@ function ProductsRegist() { ...@@ -99,7 +99,7 @@ function ProductsRegist() {
product["sizes"] = sizes product["sizes"] = sizes
const formData = new FormData(); const formData = new FormData();
for (let key in product) { for (let key in product) {
if (key === "main_imgUrl" ||key === "detail_imgUrl") { if (key === "main_image" || key === "detail_image") {
console.log(product[key][0]) console.log(product[key][0])
formData.append(key, product[key][0]) formData.append(key, product[key][0])
} else { } else {
......
client/src/Pages/ProductsList.js
View file @ 8be66ea0
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import Pagination from '../Components/Pagination'; import { Link } from 'react-router-dom';
import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
import ListCard from '../Components/ListCard'; import ListCard from '../Components/ListCard';
import Pagination from '../Components/Pagination';
import axios from 'axios'; import axios from 'axios';
import catchError from '../utils/catchErrors' import catchError from '../utils/catchErrors';
import {isAuthenticated} from '../utils/auth' 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 [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
const [error, setError] = useState('') const [error, setError] = useState('')
const [category, setCategory] = useState('OUTER')
const user=isAuthenticated() // const user=isAuthenticated()
useEffect(() => { useEffect(() => {
getProductlist(user) setMainCategory(match.params.main.toUpperCase())
}, [user]) }, [match.params.main])
useEffect(() => {
getProductlist()
}, [mainCategory])
// async function getProfile(user){ // async function getProfile(user){
// console.log(user) // console.log(user)
...@@ -28,14 +33,28 @@ function ProductsList() { ...@@ -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) { function handleSubmit(e) {
e.preventDefault() e.preventDefault()
} }
async function getProductlist() { async function getProductlist() {
try { try {
const response = await axios.get(`/api/product/getproduct/${category}`) const response = await axios.get(`/api/product/getproduct/${mainCategory}`)
console.log(response.data) console.log("response.data=", response.data)
setProductlist(response.data) setProductlist(response.data)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
...@@ -44,9 +63,13 @@ function ProductsList() { ...@@ -44,9 +63,13 @@ function ProductsList() {
return ( return (
<div> <div>
<style type="text/css"> <style type="text/css">
{` {`
a, a:hover, a:active {
color: #000;
text-decoration: none;
}
.btn { .btn {
background-color: #CDC5C2; background-color: #CDC5C2;
border-color: #CDC5C2; border-color: #CDC5C2;
...@@ -61,14 +84,14 @@ function ProductsList() { ...@@ -61,14 +84,14 @@ function ProductsList() {
<Container> <Container>
<Row className="justify-content-center" > <Row className="justify-content-center" >
<Col sm={10} xs={12} > <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) => ( <div className="text-center">{sub.map((ele) => (
<Button className="m-1">{ele}</Button> <Button className="m-1" onClick={(ele) => handleClick(ele)}>{ele}</Button>
))}</div> ))}</div>
</Col> </Col>
</Row> </Row>
<Row className="justify-content-end mx-0 my-5"> <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>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle> <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
...@@ -78,16 +101,32 @@ function ProductsList() { ...@@ -78,16 +101,32 @@ function ProductsList() {
<Dropdown.Item>높은가격</Dropdown.Item> <Dropdown.Item>높은가격</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </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" }} /> <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="search px-2"> <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> </Button>
</Form> </Form>
</Form> {/* </Form> */}
</Row> </Row>
<Row md={8} sm={12} className="justify-content-start m-2"> <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> </Row>
</Container> </Container>
{/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */} {/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */}
......
client/src/Pages/ShoppingCart.js
View file @ 8be66ea0
...@@ -6,8 +6,6 @@ import catchErrors from '../utils/catchErrors'; ...@@ -6,8 +6,6 @@ import catchErrors from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth' import { isAuthenticated } from '../utils/auth'
import CartCard from '../Components/CartCard'; import CartCard from '../Components/CartCard';
function ShoppingCart() { function ShoppingCart() {
const [num, setNum] = useState() const [num, setNum] = useState()
const [error, setError] = useState('') const [error, setError] = useState('')
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment