Skip to content

GitLab

Commit fbce3d1a authored by kusang96's avatar kusang96
Browse files

Merge branch 'kimpen' into ourMaster

parents fa94e0d1 d4c8d671
Hide whitespace changes
Inline Side-by-side
client/src/Components/Pagination.js
View file @ fbce3d1a
import { Pagination } from "react-bootstrap";
import React from 'react'; import React from 'react';
import { Pagination } from 'react-bootstrap';
function Paginations({ inedx, endPage, handlePage }) { function Paginations({ index, endPage, handlePage }) {
return ( return (
<Pagination> <Pagination>
...@@ -15,7 +15,6 @@ function Paginations({ inedx, endPage, handlePage }) { ...@@ -15,7 +15,6 @@ function Paginations({ inedx, endPage, handlePage }) {
<Pagination.Item active>{index}</Pagination.Item> <Pagination.Item active>{index}</Pagination.Item>
{index === endPage ? "" : <Pagination.Item onClick={()=>handlePage(index + 1)}>{index + 1}</Pagination.Item>} {index === endPage ? "" : <Pagination.Item onClick={()=>handlePage(index + 1)}>{index + 1}</Pagination.Item>}
{index > endPage-2 ? "" : <Pagination.Item onClick={()=>handlePage(index + 2)}>{index + 2}</Pagination.Item>} {index > endPage-2 ? "" : <Pagination.Item onClick={()=>handlePage(index + 2)}>{index + 2}</Pagination.Item>}
{index === 1 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""} {index === 1 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""}
...@@ -26,7 +25,6 @@ function Paginations({ inedx, endPage, handlePage }) { ...@@ -26,7 +25,6 @@ function Paginations({ inedx, endPage, handlePage }) {
<Pagination.Last onClick={() =>handlePage(endPage)} /> <Pagination.Last onClick={() =>handlePage(endPage)} />
</Pagination> </Pagination>
) )
} }
export default Paginations export default Paginations
\ No newline at end of file
client/src/Components/SubNav.js
View file @ fbce3d1a
...@@ -15,8 +15,7 @@ function SubNav() { ...@@ -15,8 +15,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={`/categories/${url}`}>{ele} <Nav.Link href={`/categories/${url}`}>{ele}</Nav.Link>
</Nav.Link>
) )
}) })
setCategoriesDiv(list) setCategoriesDiv(list)
......
client/src/Pages/Admin.js
View file @ fbce3d1a
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 AllCard from '../Components/AllCard'; import AllCard from '../Components/AllCard';
import Pagination from '../Components/Pagination'; import Pagination from "../Components/Pagination";
import axios from 'axios'; import axios from 'axios';
import catchError from '../utils/catchErrors'; import catchError from '../utils/catchErrors';
import { Row, Form, FormControl, Button, Container } from 'react-bootstrap'; import { Row, Form, FormControl, Button, Container } from 'react-bootstrap';
function Admin() { function Admin() {
const INIT_STATUS = { indexOfFirst: 0, indexOfLast: 10 }
const [search, setSearch] = useState({ word: '' })
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
const [status, setStatus] = useState(INIT_STATUS)
const [currentPage, setCurrentPage] = useState(1);
const [per, setPer] = useState(10);
const [error, setError] = useState('') const [error, setError] = useState('')
const searchref = useRef(null)
const indexOfLast = currentPage * per;
const indexOfFirst = indexOfLast - per;
useEffect(() => { useEffect(() => {
getProductlist() getProductlist()
}, []) }, [])
function paginate(items, index, itemNumber) {
const posts = [];
const startIndex = (index - 1) * itemNumber
for (var i = 0; i < itemNumber; i++) {
posts.push(items[(startIndex + i)])
}
return posts
}
function currentPosts(tmp) {
let currentPosts = 0;
currentPosts = tmp.slice(indexOfFirst, indexOfLast);
console.log("postsPerPage=",currentPage)
return currentPosts;
}
async function getProductlist() { async function getProductlist() {
try { try {
const response = await axios.get(`/api/product/getproduct/all`) const response = await axios.get(`/api/product/getproduct/all`)
...@@ -24,12 +48,28 @@ function Admin() { ...@@ -24,12 +48,28 @@ function Admin() {
} }
} }
function handleSearch() { function handleChange(event) {
setSearch({ word: event.target.value })
} }
function handleSubmit(e) { async function handleSubmit(e) {
e.preventDefault() e.preventDefault()
try {
setError('')
const response = await axios.get(`/api/product/getproduct/all?product=${search.word}`)
console.log("response.data=", response.data)
setProductlist(response.data)
} catch (error) {
catchError(error, setError)
} finally {
searchref.current.value = ''
}
}
if (error) {
alert(`${error}`)
setError('')
searchref.current.value = ''
} }
return ( return (
...@@ -48,18 +88,18 @@ function Admin() { ...@@ -48,18 +88,18 @@ function Admin() {
`} `}
</style> </style>
<Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5"> <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="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>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button> <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Row> </Row>
<Row className="justify-content-center m-5"> <Row className="justify-content-center m-5">
{productlist.map(pro => ( {currentPosts(productlist).map(pro => (
<AllCard 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 index={currentPage} totalPosts={Math.ceil(productlist.length / per)} handlePage={setCurrentPage} />
</Container> </Container>
) )
} }
......
client/src/Pages/Payment.js
View file @ fbce3d1a
import axios from 'axios'; import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import DaumPostcode from "react-daum-postcode"; import DaumPostcode from "react-daum-postcode";
import { Container, Card, Row, Col, Button, Form, FormGroup } from 'react-bootstrap'; import { Container, Row, Col, Button, Form } from 'react-bootstrap';
import { Redirect, Link, useHistory } from 'react-router-dom'; import { Redirect, Link, useHistory } from 'react-router-dom';
import PaymentCard from '../Components/PaymentCard'; import PaymentCard from '../Components/PaymentCard';
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
...@@ -9,7 +9,7 @@ import catchErrors from '../utils/catchErrors'; ...@@ -9,7 +9,7 @@ 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([])
...@@ -231,87 +231,82 @@ function Payment({ match, location }) { ...@@ -231,87 +231,82 @@ function Payment({ match, location }) {
} }
return ( return (
<div> <Container>
{/* {console.log(completeState)} */} <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
<Container> <div>
<h3 className="my-5 font-weight-bold text-center">주문/결제</h3> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문자 정보</h5>
<div> <Row className="justify-content-md-center">
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문자 정보</h5> <Col md={4}>
<Row className="justify-content-md-center"> <Form>
<Col md={4}> <Form.Group controlId="formBasicName">
<Form> <Form.Label>이름</Form.Label>
<Form.Group controlId="formBasicName"> <Form.Control type="text" value={userData.name} readOnly />
<Form.Label>이름</Form.Label> </Form.Group>
<Form.Control type="text" value={userData.name} readOnly /> <Form.Group controlId="formBasicTel">
</Form.Group> <Form.Label>휴대전화</Form.Label>
<Form.Group controlId="formBasicTel"> <Form.Control type="tel" value={userData.tel} readOnly />
<Form.Label>휴대전화</Form.Label> </Form.Group>
<Form.Control type="tel" value={userData.tel} readOnly /> <Form.Group controlId="formBasicEmail">
</Form.Group> <Form.Label>이메일</Form.Label>
<Form.Group controlId="formBasicEmail"> <Form.Control type="email" value={userData.email} readOnly />
<Form.Label>이메일</Form.Label> </Form.Group>
<Form.Control type="email" value={userData.email} readOnly /> </Form>
</Form.Group> </Col>
</Form> </Row>
</Col> </div>
</Row> <div>
</div> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>받는사람 정보</h5>
<Row className="justify-content-center">
<div> <Col md={8}>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>받는사람 정보</h5> <Form>
<Row className="justify-content-center"> <Form.Group>
<Col md={8}> <Form.Label>이름</Form.Label>
<Form> <Form.Control type="text" name="name" onChange={handleReceiverInfo}></Form.Control>
<Form.Group> </Form.Group>
<Form.Label>이름</Form.Label> <Form.Group>
<Form.Control type="text" name="name" onChange={handleReceiverInfo}></Form.Control> <Form.Label>휴대전화</Form.Label>
</Form.Group> <Form.Control type="text" name="tel" onChange={handleReceiverInfo}></Form.Control>
<Form.Group> </Form.Group>
<Form.Label>휴대전화</Form.Label> <Form.Group controlId="formBasicAdd">
<Form.Control type="text" name="tel" onChange={handleReceiverInfo}></Form.Control> <Form.Label>주소</Form.Label>
</Form.Group> <Form.Row>
<Form.Group controlId="formBasicAdd"> <Col xs={4} sm={4}>
<Form.Label>주소</Form.Label> <Form.Control type="text" name="postalCode" id="add" onChange={handleReceiverInfo} value={address.code} disabled={(address.code == null) ? false : true} placeholder="우편번호" required ></Form.Control>
<Form.Row> </Col>
<Col xs={4} sm={4}> <Col >
<Form.Control type="text" name="postalCode" id="add" onChange={handleReceiverInfo} value={address.code} disabled={(address.code == null) ? false : true} placeholder="우편번호" required ></Form.Control> <Button style={{ background: '#91877F', borderColor: '#91877F' }} className="mx-1" onClick={postClick}>우편번호</Button>
</Col> {post}
<Col > </Col>
<Button style={{ background: '#91877F', borderColor: '#91877F' }} className="mx-1" onClick={postClick}>우편번호</Button> </Form.Row>
{post} <Form.Row>
</Col> <Col>
</Form.Row> <Form.Control type="text" name="address" id="add1" onChange={handleReceiverInfo} value={address.full} disabled={(address.code == null) ? false : true} placeholder="주소" required></Form.Control>
<Form.Row> <Form.Control type="text" name="address2" id="add2" onChange={handleReceiverInfo} placeholder="상세주소" required></Form.Control>
<Col> <Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback>
<Form.Control type="text" name="address" id="add1" onChange={handleReceiverInfo} value={address.full} disabled={(address.code == null) ? false : true} placeholder="주소" required></Form.Control> </Col>
<Form.Control type="text" name="address2" id="add2" onChange={handleReceiverInfo} placeholder="상세주소" required></Form.Control> </Form.Row>
<Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback> </Form.Group>
</Col> </Form>
</Form.Row> </Col>
</Form.Group> </Row>
</Form> </div>
</Col> <div>
</Row> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
</div> <PaymentCard cart={cart} deleteOrder={deleteOrder} />
<div> </div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5> <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
<PaymentCard cart={cart} deleteOrder={deleteOrder} /> <ul className="pl-0" style={{ listStyle: 'none' }}>
</div> <li>
<span className="text-secondary">총 상품금액</span>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}> <span className="text-secondary float-right">{finalPrice}원</span>
<ul className="pl-0" style={{ listStyle: 'none' }}> </li>
<li> <li>
<span className="text-secondary">총 상품금액</span> <span className="text-secondary">배송비</span>
<span className="text-secondary float-right">{finalPrice}원</span> <span className="text-secondary float-right">2500원</span>
</li> </li>
<li> </ul>
<span className="text-secondary">배송비</span> <div className="my-1 pt-2 border-top font-weight-bold">
<span className="text-secondary float-right">2500원</span> 결제금액<span className="float-right">{finalPrice + 2500}원</span>
</li>
</ul>
<div className="my-1 pt-2 border-top font-weight-bold">
결제금액<span className="float-right">{finalPrice + 2500}원</span>
</div>
</div> </div>
<div> <div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
...@@ -324,8 +319,12 @@ function Payment({ match, location }) { ...@@ -324,8 +319,12 @@ function Payment({ match, location }) {
<div className="text-center"> <div className="text-center">
<Button type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button> <Button type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button>
</div> </div>
</Container> {paymentWay}
</div> </div>
<div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={paymentCompleted} block>결제완료</Button>
</div>
</Container>
) )
} }
......
client/src/Pages/ProductsList.js
View file @ fbce3d1a
...@@ -16,6 +16,7 @@ function ProductsList({ match }) { ...@@ -16,6 +16,7 @@ function ProductsList({ match }) {
const [error, setError] = useState('') const [error, setError] = useState('')
const indexOfLast = currentPage * postsPerPage; const indexOfLast = currentPage * postsPerPage;
const indexOfFirst = indexOfLast - postsPerPage; const indexOfFirst = indexOfLast - postsPerPage;
const searchref = useRef(null)
const [sortingName, setSortingName] = useState('정렬') const [sortingName, setSortingName] = useState('정렬')
...@@ -36,24 +37,26 @@ function ProductsList({ match }) { ...@@ -36,24 +37,26 @@ function ProductsList({ match }) {
}, [mainCategory]) }, [mainCategory])
function handleChange(event) { function handleChange(event) {
console.log('handle change', event.target.value)
setSearch({ word: event.target.value }) setSearch({ word: event.target.value })
} }
async function handleSearch(event) { async function handleSearch(e) {
event.preventDefault() e.preventDefault()
try { try {
setError('') setError('')
const response = await axios.post(`/api/product/getproduct/main/${mainCategory}`, search) const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}`)
console.log("response.data=", response.data) console.log("response.data=", response.data)
setProductlist(response.data) setProductlist(response.data)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} finally {
searchref.current.value = ''
} }
} }
async function getSubsCategories() { async function getSubsCategories() {
try { try {
setError('')
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("object value=", Object.values(response.data)); console.log("object value=", Object.values(response.data));
...@@ -64,6 +67,7 @@ function ProductsList({ match }) { ...@@ -64,6 +67,7 @@ function ProductsList({ match }) {
async function getProductlist() { async function getProductlist() {
try { try {
setError('')
const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`) const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`)
setProductlist(response.data) setProductlist(response.data)
} catch (error) { } catch (error) {
...@@ -132,7 +136,6 @@ function ProductsList({ match }) { ...@@ -132,7 +136,6 @@ function ProductsList({ match }) {
async function handleSubname(e) { async function handleSubname(e) {
const subname = e.target.name const subname = e.target.name
console.log("subname=", subname)
try { try {
console.log("first test!!!!!!!!") console.log("first test!!!!!!!!")
const response = await axios.get(`/api/product/getproduct/sub?subname=${subname}`) const response = await axios.get(`/api/product/getproduct/sub?subname=${subname}`)
...@@ -143,6 +146,12 @@ function ProductsList({ match }) { ...@@ -143,6 +146,12 @@ function ProductsList({ match }) {
} }
} }
if (error) {
alert(`${error}`)
setError('')
searchref.current.value = ''
}
return ( return (
<Container> <Container>
{console.log(productlist)} {console.log(productlist)}
...@@ -157,9 +166,13 @@ function ProductsList({ match }) { ...@@ -157,9 +166,13 @@ function ProductsList({ match }) {
border-color: #CDC5C2; border-color: #CDC5C2;
} }
.btn:hover { .btn:hover {
background: #91877F; background-color: #91877F;
border-color: #91877F; border-color: #91877F;
} }
.dropdown-item:hover, .dropdown-item:active {
background-color: #91877F;
color: #fff;
}
`} `}
</style> </style>
<Row className="justify-content-center"> <Row className="justify-content-center">
...@@ -174,7 +187,7 @@ function ProductsList({ match }) { ...@@ -174,7 +187,7 @@ function ProductsList({ match }) {
</Row> </Row>
<Row className="justify-content-end mx-0 mt-5 mb-3"> <Row className="justify-content-end mx-0 mt-5 mb-3">
<Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2"> <Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2">
<FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} /> <FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2 mr-2"> <Button type="submit" className="px-2 mr-2">
<img src="/icon/search.svg" width="20" height="20" /> <img src="/icon/search.svg" width="20" height="20" />
</Button> </Button>
......
server/controllers/product.controller.js
View file @ fbce3d1a
...@@ -43,15 +43,23 @@ const getToHome = async (req, res) => { ...@@ -43,15 +43,23 @@ const getToHome = async (req, res) => {
const getAll = async (req, res) => { const getAll = async (req, res) => {
try { try {
const productslist = await Product.find({}).sort({ createdAt: -1 }) if (req.query.product) {
res.json(productslist) const productslist = await Product.find({ pro_name: { $regex: new RegExp(req.query.product) } }).sort({ createdAt: -1 })
if (productslist.length == 0) {
res.status(404).send('상품을 찾을 수 없습니다.')
} else {
res.json(productslist)
}
} else {
const productslist = await Product.find({}).sort({ createdAt: -1 })
res.json(productslist)
}
} catch (error) { } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') res.status(500).send('상품을 불러오지 못했습니다.')
} }
} }
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) {
...@@ -61,15 +69,19 @@ const getlist = (req, res) => { ...@@ -61,15 +69,19 @@ const getlist = (req, res) => {
const categoryId = async (req, res, next, category) => { const categoryId = async (req, res, next, category) => {
const { search } = req.body console.log("req=", req.query.product)
console.log("server search=", search)
try { try {
const productslist = await Product.find({ main_category: category }) if (req.query.product) {
// if (!productslist) { const productslist = await Product.find({ main_category: category, pro_name: { $regex: new RegExp(req.query.product) } })
// res.status(404).send('상품을 찾을 수 없습니다.') if (productslist.length == 0) {
// } res.status(404).send('상품을 찾을 수 없습니다.')
req.productslist = productslist } else {
console.log("nononono", req.productslist) req.productslist = productslist
}
} else {
const productslist = await Product.find({ main_category: category })
req.productslist = productslist
}
next() next()
} catch (error) { } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') res.status(500).send('상품을 불러오지 못했습니다.')
......
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