Skip to content

GitLab

Commit 488f656f authored by kusang96's avatar kusang96
Browse files

검색 기능 구현

parent e776b57a
Hide whitespace changes
Inline Side-by-side
client/src/Pages/Admin.js
View file @ 488f656f
...@@ -7,6 +7,7 @@ import catchError from '../utils/catchErrors'; ...@@ -7,6 +7,7 @@ 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 [search, setSearch] = useState({ word: '' })
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
const [error, setError] = useState('') const [error, setError] = useState('')
...@@ -24,12 +25,21 @@ function Admin() { ...@@ -24,12 +25,21 @@ 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)
e.target.childNodes[0].value = ''
} catch (error) {
catchError(error, setError)
}
} }
return ( return (
...@@ -48,7 +58,7 @@ function Admin() { ...@@ -48,7 +58,7 @@ 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 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>
......
client/src/Pages/Payment.js
View file @ 488f656f
...@@ -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 [paymentWay, setPaymentWay] = useState([]) const [paymentWay, setPaymentWay] = useState([])
...@@ -201,106 +201,101 @@ function Payment({ match, location }) { ...@@ -201,106 +201,101 @@ function Payment({ match, location }) {
return <Redirect to={'/kakao'} /> return <Redirect to={'/kakao'} />
} }
return ( return (
<div> <Container>
{/* {console.log(order)} */} <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" placeholder="이메일 주소를 입력해주세요" />
<Form.Label>이메일</Form.Label> </Form.Group>
<Form.Control type="email" placeholder="이메일 주소를 입력해주세요" /> </Form>
</Form.Group> </Col>
</Form> </Row>
</Col> </div>
</Row>
</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>
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md={8}> <Col md={8}>
<Form> <Form>
<Form.Group> <Form.Group>
<Form.Label>이름</Form.Label> <Form.Label>이름</Form.Label>
<Form.Control type="text" name="name" onChange={handleReceiverInfo}></Form.Control> <Form.Control type="text" name="name" onChange={handleReceiverInfo}></Form.Control>
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Label>휴대전화</Form.Label> <Form.Label>휴대전화</Form.Label>
<Form.Control type="text" name="tel" onChange={handleReceiverInfo}></Form.Control> <Form.Control type="text" name="tel" onChange={handleReceiverInfo}></Form.Control>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicAdd"> <Form.Group controlId="formBasicAdd">
<Form.Label>주소</Form.Label> <Form.Label>주소</Form.Label>
<Form.Row> <Form.Row>
<Col xs={4} sm={4}> <Col xs={4} sm={4}>
<Form.Control type="text" name="postalCode" id="add" onChange={handleReceiverInfo} value={address.code} disabled={(address.code == null) ? false : true} placeholder="우편번호" required ></Form.Control> <Form.Control type="text" name="postalCode" id="add" onChange={handleReceiverInfo} value={address.code} disabled={(address.code == null) ? false : true} placeholder="우편번호" required ></Form.Control>
</Col> </Col>
<Col > <Col >
<Button style={{ background: '#91877F', borderColor: '#91877F' }} className="mx-1" onClick={postClick}>우편번호</Button> <Button style={{ background: '#91877F', borderColor: '#91877F' }} className="mx-1" onClick={postClick}>우편번호</Button>
{post} {post}
</Col> </Col>
</Form.Row> </Form.Row>
<Form.Row> <Form.Row>
<Col> <Col>
<Form.Control type="text" name="address" id="add1" onChange={handleReceiverInfo} value={address.full} disabled={(address.code == null) ? false : true} placeholder="주소" required></Form.Control> <Form.Control type="text" name="address" id="add1" onChange={handleReceiverInfo} value={address.full} disabled={(address.code == null) ? false : true} placeholder="주소" required></Form.Control>
<Form.Control type="text" name="address2" id="add2" onChange={handleReceiverInfo} placeholder="상세주소" required></Form.Control> <Form.Control type="text" name="address2" id="add2" onChange={handleReceiverInfo} placeholder="상세주소" required></Form.Control>
<Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback> <Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback>
</Col> </Col>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
</Form> </Form>
</Col> </Col>
</Row> </Row>
</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>
<PaymentCard cart={cart} /> <PaymentCard cart={cart} />
</div> </div>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}> <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}> <ul className="pl-0" style={{ listStyle: 'none' }}>
<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">{finalPrice}원</span>
</li> </li>
<li> <li>
<span className="text-secondary">배송비</span> <span className="text-secondary">배송비</span>
<span className="text-secondary float-right">2500원</span> <span className="text-secondary float-right">2500원</span>
</li> </li>
</ul> </ul>
<div className="my-1 pt-2 border-top font-weight-bold"> <div className="my-1 pt-2 border-top font-weight-bold">
결제금액<span className="float-right">{finalPrice + 2500}원</span> 결제금액<span className="float-right">{finalPrice + 2500}원</span>
</div>
</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>
<div className="text-center m-3"> <div className="text-center m-3">
<Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button> <Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
<input type="image" alt="카카오페이결제" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} /> <input type="image" alt="카카오페이결제" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} />
</div>
{paymentWay}
</div>
<div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={paymentCompleted} 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 @ 488f656f
...@@ -34,17 +34,17 @@ function ProductsList({ match }) { ...@@ -34,17 +34,17 @@ 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)
e.target.childNodes[0].value = ''
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} }
......
server/controllers/product.controller.js
View file @ 488f656f
...@@ -43,8 +43,17 @@ const getToHome = async (req, res) => { ...@@ -43,8 +43,17 @@ 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('상품을 불러오지 못했습니다.')
} }
...@@ -68,16 +77,20 @@ const subname = async (req, res) => { ...@@ -68,16 +77,20 @@ const subname = async (req, res) => {
} }
const categoryId = async (req, res, next, category) => { const categoryId = async (req, res, next, category) => {
console.log("req=",req.body) console.log("req=", req.query.product)
// const { search } = req.body
// 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) {
// } console.log('ds')
req.productslist = productslist res.status(404).send('상품을 찾을 수 없습니다.')
console.log("nononono", req.productslist) } else {
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('상품을 불러오지 못했습니다.')
...@@ -95,7 +108,7 @@ const subcategoryId = async (req, res, next, subname) => { ...@@ -95,7 +108,7 @@ const subcategoryId = async (req, res, next, subname) => {
_id: 'nothing', _id: 'nothing',
pro_name: '상품준비중', pro_name: '상품준비중',
price: 0, price: 0,
main_imgUrl:'' main_imgUrl: ''
} }
console.log("findSubname2222=", findSubname) console.log("findSubname2222=", findSubname)
res.send(findSubname) res.send(findSubname)
......
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