Skip to content

GitLab

Commit 1dca5038 authored by 이재연's avatar 이재연
Browse files

재연 0115

parents 2a67f236 0912b817
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 1dca5038
......@@ -13,7 +13,6 @@ import Account from './Pages/Account';
import MainNav from './Components/MainNav';
import SubNav from './Components/SubNav';
function App() {
return (
......@@ -24,8 +23,8 @@ function App() {
<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="/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} />
......@@ -36,8 +35,6 @@ function App() {
</Switch>
</Router>
)
}
export default App;
\ No newline at end of file
client/src/Components/ListCard.js
View file @ 1dca5038
import React from 'react';
import { Card } from 'react-bootstrap'
import React, { useState, useEffect, useRef } from 'react';
import { Card } from 'react-bootstrap';
function ListCard(props) {
function ListCard({ id, name, price, main_img }) {
return (
<>
{props.productlist.map((e) => (
<Card>
<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 className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src={e.detail_imgUrl && `/images/${e.detail_imgUrl}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>{e.pro_name}</Card.Title>
<Card.Text>{e.price}원</Card.Text>
</Card.Body>
</Card>
</Card>
))}
</>
)
}
......
client/src/Components/MainNav.js
View file @ 1dca5038
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()
......
client/src/Components/SubNav.js
View file @ 1dca5038
......@@ -16,7 +16,7 @@ function SubNav() {
Object.keys(response.data[0]).forEach((ele) => {
const url = ele.toLowerCase()
list.push(
<Nav.Link as={Link} to={`/product/${url}`}>{ele}</Nav.Link>
<Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
)
})
setCategorysDiv(list)
......
client/src/Pages/Home.js
View file @ 1dca5038
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,6 +29,7 @@ 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.Body>
......
client/src/Pages/Product.js
View file @ 1dca5038
......@@ -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(
......@@ -105,14 +104,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
View file @ 1dca5038
......@@ -32,7 +32,7 @@ function ProductsRegist() {
useEffect(async () => {
try {
const response = await axios.get('/api/categorys')
const response = await axios.get('/api/categories/main')
const data = response.data[0]
setCategorys([Object.keys(data), Object.values(data)])
} catch (error) {
......
client/src/Pages/ProductsList.js
View file @ 1dca5038
import React, { useState, useEffect} from 'react';
import { Container, Row, Col, Form, FormControl, Button, Dropdown } from 'react-bootstrap';
import React, { useState, useEffect, useRef } from 'react';
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 catchError from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
import { Container, Row, Col, Form, FormControl, Button, Dropdown } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors';
function ProductsList(props) {
function ProductsList({ match }) {
const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
const [subcategory, setSubcategory] = useState([])
const [productlist, setProductlist] = useState([])
const [sub, setSub] = useState([])
const [error, setError] = useState('')
const [category, setCategory] = useState('')
const [subcategory, setSubcategory] = useState([])
// const user=isAuthenticated()
useEffect(() => {
setCategory(props.match.params.product.toUpperCase())
}, [props.match.params.product])
getSubsCategories()
getProductlist()
}, [mainCategory])
useEffect(() => {
getProductlist()
}, [category])
setMainCategory(match.params.main.toUpperCase())
}, [match.params.main])
useEffect(async() => {
getsubproductlist()
}, [subcategory])
function handleSearch() {
function handleSubmit(e) {
e.preventDefault()
}
// 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) {
// catchErrors(error, setError)
// }
// }
// function handleSubmit(e) {
// e.preventDefault()
// }
async function getSubsCategories() {
try {
const response = await axios.get(`/api/categories/sub/${mainCategory}`)
console.log("sub", response.data)
setSubcategory(response.data)
} catch (error) {
catchError(error, setError)
}
}
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)
......@@ -46,7 +72,7 @@ function ProductsList(props) {
async function getsubproductlist(){
try {
const response = await axios.get(`/api/product/getproduct/${subcategory}`)
console.log(response.data)
console.log("response.data sub=",response.data)
setProductlist(response.data)
} catch (error) {
catchErrors(error,setError)
......@@ -55,10 +81,14 @@ function ProductsList(props) {
return (
<div>
{console.log("match.params=",category)}
{console.log("props=",props)}
{console.log("main=",mainCategory)}
<style type="text/css">
{`
a, a:hover, a:active {
color: #000;
text-decoration: none;
}
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
......@@ -73,14 +103,14 @@ function ProductsList(props) {
<Container>
<Row className="justify-content-center" >
<Col sm={10} xs={12} >
<h1 style={{ fontSize: "3rem" }} className="text-center">{category}</h1>
<h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
<div className="text-center">{subcategory.map((ele) => (
<Button className="m-1" onClick={handleClick}>{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>
......@@ -90,16 +120,32 @@ function ProductsList(props) {
<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" />
</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} /> */}
......
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