Skip to content

GitLab

Commit e2bb9325 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'ourMaster' into jiwon

parents dcddb500 520cf554
Hide whitespace changes
Inline Side-by-side
client/src/App.js
View file @ e2bb9325
import './App.css';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import PrivateRoute from "./Components/PrivateRoute";
import AdminRoute from "./Components/AdminRoute";
import Home from './Pages/Home'; import Home from './Pages/Home';
import Login from './Pages/Login'; import Login from './Pages/Login';
import Signup from './Pages/Signup'; import Signup from './Pages/Signup';
...@@ -27,13 +28,25 @@ function App() { ...@@ -27,13 +28,25 @@ function App() {
<Route path="/product/:productId" component={Product} /> <Route path="/product/:productId" component={Product} />
<Route path="/categories/:main/:sub" component={ProductsList} /> <Route path="/categories/:main/:sub" component={ProductsList} />
<Route path="/categories/:main" component={ProductsList} /> <Route path="/categories/:main" component={ProductsList} />
<Route path="/admin" component={Admin} /> <AdminRoute path="/admin">
<Route path="/regist" component={ProductRegist} /> <Admin />
<Route path="/shoppingcart" component={ShoppingCart} /> </AdminRoute>
<Route path="/payment" component={Payment} /> <AdminRoute path="/regist">
<Route path="/paymentcompleted" component={PaymentCompleted} /> <ProductRegist />
<Route path="/account" component={Account} /> </AdminRoute>
<Route path='/kakao' component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} /> <PrivateRoute path="/shoppingcart">
<ShoppingCart />
</PrivateRoute>
<PrivateRoute path="/payment">
<Payment />
</PrivateRoute>
<PrivateRoute path="/account">
<Account />
</PrivateRoute>
{/* <PrivateRoute path='/kakao'>
</PrivateRoute>
<Route component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} /> */}
<Redirect path="/" to="/" /> <Redirect path="/" to="/" />
</Switch> </Switch>
</Router> </Router>
......
client/src/Components/AdminRoute.js 0 → 100644
View file @ e2bb9325
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { isAdmin } from '../utils/auth';
function PrivateRoute({path, children}) {
if (isAdmin()) {
return (
<Route path={path}>
{children}
</Route>
)
} else {
alert('권한이 없습니다. 죄송합니다.');
return (
<Redirect to='/' />
)
}
}
export default PrivateRoute
\ No newline at end of file
client/src/Components/AllCard.js 0 → 100644
View file @ e2bb9325
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
View file @ e2bb9325
...@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from 'react'; ...@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from 'react';
import { Card, Button } from 'react-bootstrap'; import { Card, Button } from 'react-bootstrap';
function ListCard({ id, name, price, main_img }) { function ListCard({ id, name, price, main_img }) {
function handleDelete(e) { function handleDelete(e) {
const card = e.target.parentNode.parentNode const card = e.target.parentNode.parentNode
alert('해당 상품을 성공적으로 삭제하였습니다.') alert('해당 상품을 성공적으로 삭제하였습니다.')
...@@ -15,7 +14,6 @@ function ListCard({ id, name, price, main_img }) { ...@@ -15,7 +14,6 @@ function ListCard({ id, name, price, main_img }) {
<Card.Body> <Card.Body>
<Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title> <Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
<Card.Text>{price} 원</Card.Text> <Card.Text>{price} 원</Card.Text>
{/* <Button className="float-right" onClick={handleDelete}>삭제</Button> */}
</Card.Body> </Card.Body>
</Card> </Card>
) )
......
client/src/Components/MainNav.js
View file @ e2bb9325
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, isAdmin } from '../utils/auth';
function MainNav() { function MainNav() {
const user = isAuthenticated() const user = isAuthenticated()
const admin = isAdmin()
return ( return (
<Navbar sticky="top" style={{ background: "#CDC5C2" }}> <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
...@@ -14,7 +14,10 @@ function MainNav() { ...@@ -14,7 +14,10 @@ function MainNav() {
</Navbar.Brand> </Navbar.Brand>
<Nav className="ml-auto"> <Nav className="ml-auto">
{user ? <> <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link> {user ? <> <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
<Nav.Link className="text-light" href="/account"> Mypage </Nav.Link> <Nav.Link className="text-light" href="/account"> Mypage </Nav.Link>
<Nav.Link href="/shoppingcart">
<img alt="카트" src="/icon/cart.svg" width="30" height="30" />
</Nav.Link>
</> </>
: ( : (
<> <>
...@@ -22,12 +25,9 @@ function MainNav() { ...@@ -22,12 +25,9 @@ function MainNav() {
<Nav.Link className="text-light" href='/signup'>Sign Up</Nav.Link> <Nav.Link className="text-light" href='/signup'>Sign Up</Nav.Link>
</> </>
)} )}
<Nav.Link href="/shoppingcart"> {admin ? <Nav.Link href="/admin">
<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.Link> : ''}
</Nav> </Nav>
</Navbar> </Navbar>
) )
......
client/src/Components/Pagination.js
View file @ e2bb9325
import React from 'react'; import React from 'react';
import { Pagination } from 'react-bootstrap'; import { Pagination } from 'react-bootstrap';
function pagination() { function Paginations(props) {
let active = 1;
let items = [];
for (let number = 1; number <= 5; number++) {
items.push(
<Pagination.Item key={number} active={number === active}>
{number}
</Pagination.Item>,
);
}
return ( return (
<Pagination className="justify-content-center">{items}</Pagination> <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 pagination export default Paginations
\ No newline at end of file \ No newline at end of file
client/src/Components/PrivateRoute.js 0 → 100644
View file @ e2bb9325
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { isAuthenticated } from '../utils/auth';
function PrivateRoute({path, children}) {
if (isAuthenticated()) {
return (
<Route path={path}>
{children}
</Route>
)
} else {
alert('회원이 아닙니다. 로그인 및 회원가입을 진행해 주세요.');
return (
<Redirect to='/' />
)
}
}
export default PrivateRoute
\ No newline at end of file
client/src/Components/SubNav.js
View file @ e2bb9325
...@@ -26,7 +26,7 @@ function SubNav() { ...@@ -26,7 +26,7 @@ function SubNav() {
}, []) }, [])
return ( return (
<Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}> <Navbar sticky="top" className="flex-nowrap" style={{ top: "56px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}>
<style type="text/css"> <style type="text/css">
{` {`
.nav-link, .nav-link:hover, .nav-link:active { .nav-link, .nav-link:hover, .nav-link:active {
......
client/src/Pages/Account.js
View file @ e2bb9325
...@@ -16,29 +16,25 @@ function Account() { ...@@ -16,29 +16,25 @@ function Account() {
const [proshow, setProshow] = useState(false) const [proshow, setProshow] = useState(false)
const [error, setError] = useState("") const [error, setError] = useState("")
const userId = isAuthenticated() const userId = isAuthenticated()
const [ordered, setOrdered] = useState('')
async function getUsername(user) { async function getUsername(user) {
// console.log("tlg")
try { try {
const response = await axios.get(`/api/users/account/${user}`) const response = await axios.get(`/api/users/account/${user}`)
setAccount(response.data) setAccount(response.data)
console.log('555555555', response.data);
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
// console.log('error2222', error)
} }
} }
useEffect(() => { useEffect(() => {
getUsername(userId) getUsername(userId)
getOrdered(userId)
}, [userId]) }, [userId])
const handleChange = (event) => { const handleChange = (event) => {
const { name, value, files } = event.target const { name, value, files } = event.target
if (files) { if (files) {
for (const file of files) {
// console.log("name=", name, "value=", value, 'file=', file);
}
setAccount({ ...account, [name]: files }) setAccount({ ...account, [name]: files })
} else { } else {
console.log("name=", name, "value=", value); console.log("name=", name, "value=", value);
...@@ -81,6 +77,16 @@ function Account() { ...@@ -81,6 +77,16 @@ function Account() {
} }
} }
async function getOrdered({}) {
console.log("object")
try {
const response = await axios.get(`/api/users/addorder`)
setOrdered(response.data)
} catch (error) {
catchError(error, setError)
}
}
return ( return (
<Container className="px-3"> <Container className="px-3">
<style type="text/css"> <style type="text/css">
...@@ -105,7 +111,7 @@ function Account() { ...@@ -105,7 +111,7 @@ function Account() {
)} )}
</Button> </Button>
<Modal show={show} onHide={() => setShow(false)}> <Modal show={show} onHide={() => setShow(false)}>
<Modal.Header closeButton style={{background:"#F7F3F3"}}> <Modal.Header closeButton style={{ background: "#F7F3F3" }}>
<Modal.Title >이미지를 변경하시겠습니까?</Modal.Title> <Modal.Title >이미지를 변경하시겠습니까?</Modal.Title>
</Modal.Header> </Modal.Header>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
...@@ -132,11 +138,11 @@ function Account() { ...@@ -132,11 +138,11 @@ function Account() {
{account.name} {account.name}
</strong> </strong>
<Modal <Modal
size="sm" size="sm"
show={proshow} show={proshow}
onHide={() => setProshow(false)}> onHide={() => setProshow(false)}>
<Modal.Header closeButton style={{background:"#F7F3F3"}}> <Modal.Header closeButton style={{ background: "#F7F3F3" }}>
<Modal.Title>회원정보</Modal.Title> <Modal.Title>회원정보</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
......
client/src/Pages/Admin.js
View file @ e2bb9325
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import ListCard from '../Components/ListCard'; import AllCard from '../Components/AllCard';
import Pagination from '../Components/Pagination'; import Pagination from '../Components/Pagination';
import axios from 'axios'; import axios from 'axios';
import { isAdmin } from "../utils/auth";
import catchError from '../utils/catchErrors'; 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() { function Admin() {
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
const [error, setError] = useState('') const [error, setError] = useState('')
const role = isAdmin()
useEffect(() => { useEffect(() => {
getProductlist() getProductlist()
...@@ -34,11 +32,6 @@ function Admin() { ...@@ -34,11 +32,6 @@ function Admin() {
e.preventDefault() e.preventDefault()
} }
if(!role) {
alert('죄송합니다.접근 권한이 없습니다.')
return <Redirect to="/" />
}
return ( return (
<Container> <Container>
<style type="text/css"> <style type="text/css">
...@@ -63,7 +56,7 @@ function Admin() { ...@@ -63,7 +56,7 @@ function Admin() {
</Row> </Row>
<Row className="justify-content-center m-5"> <Row className="justify-content-center m-5">
{productlist.map(pro => ( {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> </Row>
<Pagination /> <Pagination />
......
client/src/Pages/Home.js
View file @ e2bb9325
...@@ -21,7 +21,6 @@ function Home() { ...@@ -21,7 +21,6 @@ function Home() {
async function getProductlist() { async function getProductlist() {
try { try {
const response = await axios.get(`/api/product/getproduct`) const response = await axios.get(`/api/product/getproduct`)
console.log("res=", response.data)
setProductlist({ bestProduct: response.data.bestProduct, newProduct: response.data.newProduct }) setProductlist({ bestProduct: response.data.bestProduct, newProduct: response.data.newProduct })
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
......
client/src/Pages/Payment.js
View file @ e2bb9325
...@@ -8,9 +8,8 @@ import { isAuthenticated } from '../utils/auth'; ...@@ -8,9 +8,8 @@ import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
function Payment({ match, location }) { function Payment({ match, location }) {
const [cart, setCart] = useState([]) const [cart, setCart] = useState([])
const [order, setOrder] = useState({ products: [] }) const [order, setOrder] = useState({products: []})
const [userData, setUserData] = useState({}) const [userData, setUserData] = useState({})
const [error, setError] = useState() const [error, setError] = useState()
const [post, setPost] = useState([]) const [post, setPost] = useState([])
......
client/src/Pages/Product.js
View file @ e2bb9325
...@@ -215,8 +215,24 @@ function Product({ match, location }) { ...@@ -215,8 +215,24 @@ function Product({ match, location }) {
</Row> </Row>
<Row className="justify-content-center mt-5 mx-0"> <Row className="justify-content-center mt-5 mx-0">
<Col sm={11} md={8}> <Col sm={11} md={8}>
<h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }}>설명</h3> <h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3">
<div></div> 설명
</h3>
<Col className='m-3 text-center d-flex justify-content-center'>
<div style={{ wordBreak: 'break-all', wordWrap: 'break-word', fontFamily: "맑은 고딕" }} className="p-3">
<h1 className='m-3'>{product.name} </h1>
<>
<Image src={`/images/${product.main_img}`} style={{ objectFit: "contain", width: '100%'}} />
</>
<Card className='m-3 d-flex justify-content-center'>
<Card.Body>
{product.description}
</Card.Body>
</Card>
<h3 className='mt-5'>[ Detail Images ]</h3>
<Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain"}} className='m-3' />
</div>
</Col>
</Col> </Col>
</Row> </Row>
<Row className="justify-content-center mx-0 pt-3 px-2" style={{ position: "fixed", bottom: "0", width: "100%", backgroundColor: "#fff" }}> <Row className="justify-content-center mx-0 pt-3 px-2" style={{ position: "fixed", bottom: "0", width: "100%", backgroundColor: "#fff" }}>
......
client/src/Pages/ProductsList.js
View file @ e2bb9325
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
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 { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup } from 'react-bootstrap'; import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup } from 'react-bootstrap';
function ProductsList({ match }) { function ProductsList({ match }) {
const [search, setSearch] = useState({ word: '' })
const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase()) const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
const [subcategory, setSubcategory] = useState([]) const [subCategory, setSubCategory] = useState([])
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage, setPostsPerPage] = useState(6);
const [error, setError] = useState('') const [error, setError] = useState('')
const indexOfLast = currentPage * postsPerPage;
const indexOfFirst = indexOfLast - postsPerPage;
function currentPosts(tmp) {
let currentPosts = 0;
currentPosts = tmp.slice(indexOfFirst, indexOfLast);
return currentPosts;
}
useEffect(() => { useEffect(() => {
setMainCategory(match.params.main.toUpperCase()) setMainCategory(match.params.main.toUpperCase())
...@@ -17,120 +29,135 @@ function ProductsList({ match }) { ...@@ -17,120 +29,135 @@ function ProductsList({ match }) {
useEffect(() => { useEffect(() => {
getSubsCategories([]) getSubsCategories()
getProductlist() getProductlist()
}, [mainCategory]) }, [mainCategory])
function handleSearch() { function handleChange(event) {
console.log('handle change', event.target.value)
setSearch({ word: event.target.value })
}
async function handleSearch(event) {
event.preventDefault()
try {
setError('')
const response = await axios.post(`/api/product/getproduct/main/${mainCategory}`, search)
console.log("response.data=", response.data)
setProductlist(response.data)
} catch (error) {
catchError(error, setError)
}
} }
async function getSubsCategories([]) { async function getSubsCategories() {
try { try {
const response = await axios.get(`/api/categories/sub/${mainCategory}`) const response = await axios.get(`/api/categories/sub/${mainCategory}`)
setSubcategory(Object.values(response.data)[0]) setSubCategory(Object.values(response.data)[0])
console.log("response data=", response.data)
console.log("object value=", Object.values(response.data)); console.log("object value=", Object.values(response.data));
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} }
} }
async function getProductlist() { async function getProductlist() {
console.log("tlfgpd")
try { try {
const response = await axios.get(`/api/product/getproduct/${mainCategory}`) const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`)
console.log("response.data=", response.data)
setProductlist(response.data) setProductlist(response.data)
} catch (error) {
catchError(error, setError)
}
}
async function handleSort(method) {
try {
const response = await axios.get(`/api/product/getproduct/?q=${method}`)
setProductlist(response.data)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} }
} }
async function handleSubname(e) {
const subname = e.target.name
console.log("subname=", subname)
try {
console.log("first test!!!!!!!!")
const response = await axios.get(`/api/product/getproduct/sub/${subname}`)
console.log("subname response data=", response.data)
setProductlist(response.data)
} catch (error) {
console.log("error22")
}
}
return ( return (
<div> <Container>
<style type="text/css"> <style type="text/css">
{` {`
a, a:hover, a:active { a, a:hover, a:active {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
} }
.btn { .btn {
background-color: #CDC5C2; background-color: #CDC5C2;
border-color: #CDC5C2; border-color: #CDC5C2;
} }
.btn:hover {
.btn:hover, .btn:active, .btn:focus, .show>.btn-primary.dropdown-toggle { background: #91877F;
background-color: #91877F;
border-color: #91877F; border-color: #91877F;
} }
`} `}
</style> </style>
<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">{mainCategory}</h1>
<h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1> <div className="text-center">
<div className="text-center"> <ButtonGroup className="m-3" variant="outline-light secondary" style={{ display: "inline-block" }}>
<ButtonGroup className="m-3" variant="outline-light secondary" style={{ display: "inline-block" }}> {subCategory.map(el => (<Button className="m-1" variant="secondary" name={el} onClick={handleSubname}>{el}</Button>))}
{subcategory.map(el => (<Button className="m-1" variant="secondary">{el}</Button>))} </ButtonGroup>
</ButtonGroup> </div>
</div> </Col>
</Col> </Row>
</Row> <Row className="justify-content-end mx-0 my-5">
<Row className="justify-content-end mx-0 my-5"> <Dropdown>
<Dropdown> <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle> <Dropdown.Menu>
<Dropdown.Menu> <Dropdown.Item onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
<Dropdown.Item>인기상품</Dropdown.Item> <Dropdown.Item onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
<Dropdown.Item>신상품</Dropdown.Item> <Dropdown.Item onClick={() => handleSort('lowest')}>낮은가격</Dropdown.Item>
<Dropdown.Item>낮은가격</Dropdown.Item> <Dropdown.Item onClick={() => handleSort('highest')}>높은가격</Dropdown.Item>
<Dropdown.Item>높은가격</Dropdown.Item> </Dropdown.Menu>
</Dropdown.Menu> </Dropdown>
</Dropdown> <Form inline onSubmit={handleSearch} className="justify-content-end mx-0">
<Form as={Row} onSubmit={handleSearch} className="justify-content-end mx-0"> <FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <Button type="submit" className="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> </Row>
</Row> <Row md={8} sm={12} className="justify-content-center m-2">
<Row md={8} sm={12} className="justify-content-center m-2"> {productlist.map(pro => (
{productlist.map(pro => ( <Link to={{
// <ListCard as={Link} id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} to={{ pathname: `/product/${pro._id}`,
// pathname: `/product/${pro._id}`, state: {
// state: { id: pro._id,
// id: pro._id, name: pro.pro_name,
// name: pro.pro_name, price: pro.price,
// price: pro.price, colors: pro.colors,
// colors: pro.colors, sizes: pro.sizes,
// sizes: pro.sizes, description: pro.description,
// description: pro.description, main_img: pro.main_imgUrl,
// main_img: pro.main_imgUrl, detail_imgs: pro.detail_imgUrls
// detail_imgs: pro.detail_imgUrls }
// } }}>
// }} /> <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
<Link to={{ </Link>
pathname: `/product/${pro._id}`, ))}
state: { {/* <Pagination className="justify-content-center" index={} endPage={} handlePage={}/> */}
id: pro._id, </Row>
name: pro.pro_name, </Container>
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>
</div>
) )
} }
......
client/src/Pages/ShoppingCart.js
View file @ e2bb9325
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import { Card, Button, Container, Row, Col } from 'react-bootstrap'; import { Button, Container, Row, Col } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
import catchErrors from '../utils/catchErrors'; 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() {
...@@ -134,7 +134,6 @@ function ShoppingCart() { ...@@ -134,7 +134,6 @@ function ShoppingCart() {
}} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={putCheckedCart} block>결제하기</Button> }} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={putCheckedCart} block>결제하기</Button>
</div> </div>
</Container> </Container>
</div> </div>
) )
} }
......
client/src/Pages/Signup.js
View file @ e2bb9325
...@@ -71,42 +71,44 @@ function Signup() { ...@@ -71,42 +71,44 @@ function Signup() {
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}> <Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center mt-5">Sign Up</h2> <h2 className="text-center m-5">Sign Up</h2>
{error && <Alert variant='danger'> {error && <Alert variant='danger'>
{error} {error}
</Alert>} </Alert>}
<Form <Form
noValidate validated={validated} noValidate validated={validated}
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="p-5"> className="p-4">
<Form.Group controlId="formBasicName"> <Form.Group as={Col} controlId="formBasicName" className="justify-content-end">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="id">이 름</Col> <Col sm={4} xs={6} as={Form.Label} for="id">이 름</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={6} as={Form.Control}
required type="text" required type="text"
name="name" name="name"
placeholder="Name" placeholder="Name"
style={{ width: '160px' }} style={{ width: '160px' }}
value={user.name} value={user.name}
onChange={handleChange} /> onChange={handleChange} />
<Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback> <Form.Control.Feedback type="invalid" >이름을 입력하세요. </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicNumber"> <Form.Group as={Col} controlId="formBasicNumber">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col> <Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col>
<Row> <Col xs={3}>
<Form.Control <Form.Control
required type="text" required type="text"
name="number1" name="number1"
maxlength="6" maxlength="6"
className="mx-3 p-1" style={{ width: '80px' }} className="ml-1 mr-3 p-1" style={{ width: '80px' }}
value={user.number1} value={user.number1}
onChange={handleChange}> onChange={handleChange}>
</Form.Control> </Form.Control>
<div className='font-weight-bold d-flex align-items-center' style={{ text: 'center' }}> </Col>
- <Col xs={1}>
</div> <div className='font-weight-bold d-flex align-items-center' style={{ text: 'center' }}>-</div>
</Col>
<Col xs={2}>
<Form.Control <Form.Control
required type="text" required type="text"
name="number2" name="number2"
...@@ -115,14 +117,12 @@ function Signup() { ...@@ -115,14 +117,12 @@ function Signup() {
value={user.number2} value={user.number2}
onChange={handleChange}> onChange={handleChange}>
</Form.Control> </Form.Control>
<div className='font-weight-bold d-flex align-items-center'> </Col>
* * * * * * <div className='font-weight-bold d-flex align-items-center'>* * * * * * </div>
</div> <Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
</Row>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicId"> <Form.Group as={Col} controlId="formBasicId">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="id">아이디</Col> <Col sm={4} xs={6} as={Form.Label} for="id">아이디</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
...@@ -136,7 +136,7 @@ function Signup() { ...@@ -136,7 +136,7 @@ function Signup() {
<Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback> <Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword"> <Form.Group as={Col} controlId="formBasicPassword">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col> <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
...@@ -148,12 +148,12 @@ function Signup() { ...@@ -148,12 +148,12 @@ function Signup() {
required required
onChange={handleChange} onChange={handleChange}
/> />
<Form.Control.Feedback className="text-center" type="invalid"> <Form.Control.Feedback className="text-end" type="invalid">
비밀번호를 입력하세요. 비밀번호를 입력하세요.
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword2"> <Form.Group as={Col} controlId="formBasicPassword2">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col> <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
...@@ -169,7 +169,7 @@ function Signup() { ...@@ -169,7 +169,7 @@ function Signup() {
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicEmail"> <Form.Group as={Col} controlId="formBasicEmail">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="email">이메일</Col> <Col sm={4} xs={6} as={Form.Label} for="email">이메일</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
...@@ -182,7 +182,7 @@ function Signup() { ...@@ -182,7 +182,7 @@ function Signup() {
<Form.Control.Feedback type="invalid"> 이메일 입력하세요. </Form.Control.Feedback> <Form.Control.Feedback type="invalid"> 이메일 입력하세요. </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicTel"> <Form.Group as={Col} controlId="formBasicTel">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col> <Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col>
<Col sm={8} xs={12} style={{ width: '160px' }} className='p-0'> <Col sm={8} xs={12} style={{ width: '160px' }} className='p-0'>
...@@ -200,7 +200,10 @@ function Signup() { ...@@ -200,7 +200,10 @@ function Signup() {
</Col> </Col>
<Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback> <Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> <Form.Control.Feedback className="text-end" type="invalid">
비밀번호를 입력하세요.
</Form.Control.Feedback>
</Form.Group >
<Button <Button
style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block
onClick={checkPassword} onClick={checkPassword}
...@@ -211,7 +214,7 @@ function Signup() { ...@@ -211,7 +214,7 @@ function Signup() {
</Col> </Col>
</Row> </Row>
</Container> </Container>
</div> </div >
) )
} }
......
server/controllers/cart.controller.js
View file @ e2bb9325
...@@ -32,12 +32,15 @@ const changeCart = async (req, res) => { ...@@ -32,12 +32,15 @@ const changeCart = async (req, res) => {
const showCart = async (req, res) => { const showCart = async (req, res) => {
try { try {
console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@")
const cart = await Cart.findOne({ userId: req.id }).populate({ const cart = await Cart.findOne({ userId: req.id }).populate({
path: 'products.productId', path: 'products.productId',
model: 'Product' model: 'Product'
}) })
res.status(200).json(cart.products) res.status(200).json(cart.products)
console.log("cart-products : ", cart.products);
} catch (error) { } catch (error) {
console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
console.log(error) console.log(error)
res.status(500).send('쇼핑카트를 불러오지 못했습니다.') res.status(500).send('쇼핑카트를 불러오지 못했습니다.')
} }
......
server/controllers/category.controller.js
View file @ e2bb9325
...@@ -3,7 +3,6 @@ import Category from "../schemas/Category.js"; ...@@ -3,7 +3,6 @@ import Category from "../schemas/Category.js";
const getCategory = async (req, res) => { const getCategory = async (req, res) => {
try { try {
const category = await Category.find({}, { _id: 0 }) const category = await Category.find({}, { _id: 0 })
// console.log("main= ", category);
res.json(category) res.json(category)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
...@@ -12,12 +11,12 @@ const getCategory = async (req, res) => { ...@@ -12,12 +11,12 @@ const getCategory = async (req, res) => {
} }
const getSubCategory = async (req, res) => { const getSubCategory = async (req, res) => {
// console.log("req.params=", req.params); console.log("req.params=?(getsubcategory)", req.params);
const { sub } = req.params const { sub } = req.params
try { try {
const subcategory = await Category.findOne({}, { _id: 0}).select(`${sub}`) const subcategory = await Category.findOne({}, { _id: 0}).select(`${sub}`)
// console.log("sub= ",subcategory);
res.json(subcategory); res.json(subcategory);
console.log("sub= ",subcategory);
} catch (error) { } catch (error) {
res.status(500).send('카테고리를 불러오지 못했습니다.') res.status(500).send('카테고리를 불러오지 못했습니다.')
} }
...@@ -51,20 +50,4 @@ const getsubId = async (req, res, next, ele) => { ...@@ -51,20 +50,4 @@ const getsubId = async (req, res, next, ele) => {
next() next()
} }
// const userById = async (req, res, next, id) => {
// try {
// const user = await User.findById(id)
// if (!user) {
// res.status(404).send('사용자를 찾을 수 없습니다')
// }
// req.account = user
// next()
// } catch (error) {
// console.log(error);
// res.status(500).send('사용자 아이디 검색 실패')
// }
// }
export default { getCategory, getsubId, getSubCategory, getToHome } export default { getCategory, getsubId, getSubCategory, getToHome }
\ No newline at end of file
server/controllers/order.controller.js
View file @ e2bb9325
...@@ -14,6 +14,17 @@ const addorder = async (req, res) => { ...@@ -14,6 +14,17 @@ const addorder = async (req, res) => {
} }
} }
const Ordered = async (req, res) => {
const { db } = req.body
try {
const ordered = await req.body.findOne({}, { _id: 0}).select(`${db}`)
console.log("sub= ",ordered);
res.json(ordered);
} catch (error) {
res.status(500).send('카테고리를 불러오지 못했습니다.')
}
}
const showorder = async (req, res) => { const showorder = async (req, res) => {
try { try {
const order = await Order.find({ userId: req.userId }).sort({_id:-1}).limit(1).populate({ const order = await Order.find({ userId: req.userId }).sort({_id:-1}).limit(1).populate({
...@@ -44,4 +55,4 @@ const orderById = async (req, res, next, id) => { ...@@ -44,4 +55,4 @@ const orderById = async (req, res, next, id) => {
} }
export default { addorder, showorder, orderById } export default { addorder, showorder, orderById , Ordered}
\ No newline at end of file
server/controllers/product.controller.js
View file @ e2bb9325
...@@ -51,6 +51,7 @@ const getAll = async (req, res) => { ...@@ -51,6 +51,7 @@ const getAll = async (req, res) => {
} }
const getlist = (req, res) => { const getlist = (req, res) => {
console.log('get list')
try { try {
res.json(req.productslist) res.json(req.productslist)
} catch (error) { } catch (error) {
...@@ -58,43 +59,55 @@ const getlist = (req, res) => { ...@@ -58,43 +59,55 @@ const getlist = (req, res) => {
} }
} }
const categoryId = async (req, res, next, category) => { const subname = async (req, res) => {
try { try {
const productslist = await Product.find({ main_category: category }) console.log("last subname::: LET ME SEE")
if (!productslist) { res.json(req.findsubname)
res.status(404).send('상품을 찾을 수 없습니다.')
}
req.productslist = productslist
next()
} catch (error) { } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') res.status(500).send('상품을 불러오지 못했습니다.')
} }
} }
const subgetlist = (req, res) => { const categoryId = async (req, res, next, category) => {
const { search } = req.body
console.log("server search=", search)
try { try {
res.json(req.subproductslist) 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) { } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') res.status(500).send('상품을 불러오지 못했습니다.')
} }
} }
const subcategoryId = async (req, res, next, subcategory) => { const subcategoryId = async (req, res, next, subname) => {
try { try {
const subproductslist = await Product.find({ sub_category: subcategory }) console.log("Please===>>>", subname)
if (!subproductslist) { const findSubname = await Product.find({ sub_category: subname })
res.status(404).send('상품을 찾을 수 없습니다.') console.log("findSubname111=", findSubname)
if (!findSubname) {
const findSubname = {
_id: 'nothing',
pro_name: '상품준비중',
price: 0,
main_imgUrl:''
}
console.log("findSubname2222=", findSubname)
res.send(findSubname)
} }
req.subproductslist = subproductslist res.send(findSubname)
next()
} catch (error) { } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') res.send('상품을 불러오지 못했습니다.')
} }
} }
const plusPurchase = async (req, res) => { const plusPurchase = async (req, res) => {
const { products } = req.body const { products } = req.body
// console.log(products)
try { try {
for (let i = 0; i < products.length; i++) { for (let i = 0; i < products.length; i++) {
const count = products[i].count const count = products[i].count
...@@ -112,7 +125,6 @@ const plusPurchase = async (req, res) => { ...@@ -112,7 +125,6 @@ const plusPurchase = async (req, res) => {
} }
} }
) )
// console.log("i=", i)
} }
res.send("구매수 늘리기, 재고수 줄이기 성공") res.send("구매수 늘리기, 재고수 줄이기 성공")
} catch (error) { } catch (error) {
...@@ -120,4 +132,4 @@ const plusPurchase = async (req, res) => { ...@@ -120,4 +132,4 @@ const plusPurchase = async (req, res) => {
} }
} }
export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subcategoryId, subgetlist, plusPurchase } export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subcategoryId, subname, plusPurchase }
\ No newline at end of file
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