Skip to content

GitLab

Commit fdb92c49 authored by 이재연's avatar 이재연
Browse files

Merge remote-tracking branch 'origin/ourMaster' into jaeyeon

parents 78491956 520cf554
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ fdb92c49
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 @ fdb92c49
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 @ fdb92c49
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 @ fdb92c49
...@@ -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 @ fdb92c49
import React from 'react'; import React from 'react';
import { Navbar, Nav } from 'react-bootstrap'; import { Navbar, Nav } from 'react-bootstrap';
import { handleLogout, isAdmin, isAuthenticated} from '../utils/auth'; import { handleLogout, isAuthenticated, isAdmin } from '../utils/auth';
function MainNav() { function MainNav() {
const user = isAuthenticated() const user = isAuthenticated()
const admin = isAdmin() const admin = isAdmin()
...@@ -16,6 +15,9 @@ function MainNav() { ...@@ -16,6 +15,9 @@ function MainNav() {
<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>
</> </>
: ( : (
<> <>
...@@ -23,16 +25,9 @@ function MainNav() { ...@@ -23,16 +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">
<img alt="카트" src="/icon/cart.svg" width="30" height="30" />
</Nav.Link>
{admin ? <Nav.Link href="/admin"> {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/Pagination.js
View file @ fdb92c49
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 @ fdb92c49
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 @ fdb92c49
...@@ -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 @ fdb92c49
...@@ -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}>
...@@ -136,7 +142,7 @@ function Account() { ...@@ -136,7 +142,7 @@ function Account() {
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 @ fdb92c49
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 @ fdb92c49
...@@ -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 @ fdb92c49
...@@ -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([])
...@@ -232,6 +231,13 @@ function Payment({ match, location }) { ...@@ -232,6 +231,13 @@ function Payment({ match, location }) {
} }
} }
if (redirect) {
console.log(redirect)
return <Redirect to={'/kakao'} />
}
return ( return (
<div> <div>
{/* {console.log(completeState)} */} {/* {console.log(completeState)} */}
......
client/src/Pages/Product.js
View file @ fdb92c49
import axios from 'axios'; import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Form, Card, Button, Modal } from 'react-bootstrap'; import { Row, Col, Form, Card, Button, Image } from 'react-bootstrap';
import { Redirect, useHistory } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
...@@ -33,31 +33,15 @@ function Product({ match, location }) { ...@@ -33,31 +33,15 @@ function Product({ match, location }) {
} }
function pushOptions() { function pushOptions() {
// console.log(cart) setCart([...cart, { color, size, productId: product.id, count: 1 }])
const a = cart.map(el => {
const rObj = {}
rObj["color"] = el.color;
rObj["size"] = el.size;
return rObj
})
const isDuplicated = a.some(el => el.color === color && el.size === size)
if (isDuplicated) {
selected.sizes = false
selected.colors = false
setColor("")
setSize("")
alert("이미 선택한 옵션입니다.")
} else {
selected.sizes = false selected.sizes = false
selected.colors = false selected.colors = false
setCart([...cart, { color, size, productId: product.id, count: 1 , checked:false}]) console.log(product)
setColor("") setColor("")
setSize("") setSize("")
setPrice(product.price + price) setPrice(product.price + price)
} }
}
function handleChange(e) { function handleChange(e) {
const { name, value } = e.target const { name, value } = e.target
if (name === "sizes") { if (name === "sizes") {
...@@ -215,8 +199,24 @@ function Product({ match, location }) { ...@@ -215,8 +199,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/ProductRegist.js
View file @ fdb92c49
...@@ -102,11 +102,8 @@ function ProductsRegist() { ...@@ -102,11 +102,8 @@ function ProductsRegist() {
} }
function deleteColor(e) { function deleteColor(e) {
// console.log("e.name=",e.target.name)
e.target.parentNode.remove() e.target.parentNode.remove()
product["colors"].splice(e.name, 1) product["colors"].splice(e.name, 1)
// setColor({})
// console.log(product)
} }
function handleColor(e) { function handleColor(e) {
...@@ -136,8 +133,8 @@ function ProductsRegist() { ...@@ -136,8 +133,8 @@ function ProductsRegist() {
for (let key in product) { for (let key in product) {
if (key === "main_image" || key === "detail_image") { if (key === "main_image" || key === "detail_image") {
formData.append(key, product[key][0]) formData.append(key, product[key][0])
} else if (key === "sizes" || key === "colors" || key === "sub_category") { } else if(key === "sizes" || key === "colors" || key === 'sub_category'){
for (let i = 0; i < product[key].length; i++) { for (let i = 0; i < product[key].length ; i++){
formData.append([key], product[key][i]) formData.append([key], product[key][i])
} }
} }
......
client/src/Pages/ProductsList.js
View file @ fdb92c49
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,66 +29,93 @@ function ProductsList({ match }) { ...@@ -17,66 +29,93 @@ 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">{el}</Button>))} {subCategory.map(el => (<Button className="m-1" variant="secondary" name={el} onClick={handleSubname}>{el}</Button>))}
</ButtonGroup> </ButtonGroup>
</div> </div>
</Col> </Col>
...@@ -85,34 +124,21 @@ function ProductsList({ match }) { ...@@ -85,34 +124,21 @@ function ProductsList({ match }) {
<Dropdown> <Dropdown>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle> <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item>인기상품</Dropdown.Item> <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.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
<Form as={Row} onSubmit={handleSearch} className="justify-content-end mx-0"> <Form inline onSubmit={handleSearch} className="justify-content-end mx-0">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="search px-2"> <Button type="submit" className="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 => (
// <ListCard as={Link} id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} to={{
// pathname: `/product/${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
// }
// }} />
<Link to={{ <Link to={{
pathname: `/product/${pro._id}`, pathname: `/product/${pro._id}`,
state: { state: {
...@@ -129,9 +155,9 @@ function ProductsList({ match }) { ...@@ -129,9 +155,9 @@ function ProductsList({ match }) {
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} /> <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
</Link> </Link>
))} ))}
{/* <Pagination className="justify-content-center" index={} endPage={} handlePage={}/> */}
</Row> </Row>
</Container> </Container>
</div>
) )
} }
......
client/src/Pages/ShoppingCart.js
View file @ fdb92c49
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 @ fdb92c49
...@@ -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 @ fdb92c49
...@@ -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 @ fdb92c49
...@@ -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 }
server/controllers/order.controller.js
View file @ fdb92c49
...@@ -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,5 @@ const orderById = async (req, res, next, id) => { ...@@ -44,4 +55,5 @@ const orderById = async (req, res, next, id) => {
} }
export default { addorder, showorder, orderById }
\ No newline at end of file export default { addorder, showorder, Ordered }
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