Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
shopping-mall
Commits
0ce738d0
Commit
0ce738d0
authored
Jan 25, 2021
by
kusang96
Browse files
정렬 실행중
parent
53631f4f
Changes
4
Show whitespace changes
Inline
Side-by-side
client/src/Components/Pagination.js
View file @
0ce738d0
import
React
from
'
react
'
;
import
{
Pagination
}
from
'
react-bootstrap
'
;
function
pagination
()
{
let
active
=
1
;
let
items
=
[];
for
(
let
number
=
1
;
number
<=
5
;
number
++
)
{
items
.
push
(
<
Pagination
.
Item
key
=
{
number
}
active
=
{
number
===
active
}
>
{
number
}
<
/Pagination.Item>
,
);
}
function
Paginations
(
props
)
{
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
// import { Pagination } from "react-bootstrap";
// import React from 'react';
// function Paginations(props) {
// return (
// <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 Paginations
\ No newline at end of file
export
default
Paginations
\ No newline at end of file
client/src/Pages/ProductsList.js
View file @
0ce738d0
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
ListCard
from
'
../Components/ListCard
'
;
import
Pagination
from
"
../Components/Pagination
"
;
import
axios
from
'
axios
'
;
import
catchError
from
'
../utils/catchErrors
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Dropdown
,
ButtonGroup
}
from
'
react-bootstrap
'
;
function
ProductsList
({
match
})
{
const
[
search
,
setSearch
]
=
useState
({
word
:
''
})
const
[
mainCategory
,
setMainCategory
]
=
useState
(
match
.
params
.
main
.
toUpperCase
())
const
[
subCategory
,
setSubCategory
]
=
useState
([])
const
[
productlist
,
setProductlist
]
=
useState
([])
const
[
currentPage
,
setCurrentPage
]
=
useState
(
1
);
const
[
postsPerPage
,
setPostsPerPage
]
=
useState
(
6
);
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
(()
=>
{
setMainCategory
(
match
.
params
.
main
.
toUpperCase
())
...
...
@@ -17,12 +29,12 @@ function ProductsList({ match }) {
useEffect
(()
=>
{
getSubsCategories
(
[]
)
getSubsCategories
()
getProductlist
()
},
[
mainCategory
])
async
function
handleClick
(
sub
)
{
console
.
log
(
"
sub=
"
,
sub
)
console
.
log
(
"
sub=
"
,
sub
)
try
{
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
mainCategory
}
/
${
sub
}
`
)
console
.
log
(
"
response.data=
"
,
response
.
data
)
...
...
@@ -33,8 +45,23 @@ function ProductsList({ match }) {
}
}
function
handleSearch
()
{
function
handleChange
(
event
)
{
console
.
log
(
'
handle change
'
,
event
.
target
.
value
)
setSearch
({
word
:
event
.
target
.
value
})
}
async
function
handleSearch
(
event
)
{
console
.
log
(
'
search
'
,
search
)
event
.
preventDefault
()
console
.
log
(
"
tlfgod
"
)
try
{
setError
(
''
)
const
response
=
await
axios
.
post
(
`/api/product/getproduct/
${
mainCategory
}
`
,
search
)
console
.
log
(
"
response.data=
"
,
response
.
data
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
catchError
(
error
,
setError
)
}
}
async
function
getSubsCategories
()
{
...
...
@@ -51,14 +78,22 @@ function ProductsList({ match }) {
try
{
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
mainCategory
}
`
)
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
)
{
catchError
(
error
,
setError
)
}
}
return
(
<
div
>
<
Container
>
<
style
type
=
"
text/css
"
>
{
`
a, a:hover, a:active {
...
...
@@ -75,7 +110,6 @@ function ProductsList({ match }) {
}
`
}
<
/style
>
<
Container
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
sm
=
{
10
}
xs
=
{
12
}
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
className
=
"
text-center
"
>
{
mainCategory
}
<
/h1
>
...
...
@@ -90,15 +124,15 @@ function ProductsList({ match }) {
<
Dropdown
>
<
Dropdown
.
Toggle
className
=
"
mx-2
"
>
정렬
<
/Dropdown.Toggle
>
<
Dropdown
.
Menu
>
<
Dropdown
.
Item
>
인기상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
>
신상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
>
낮은가격
<
/Dropdown.Item
>
<
Dropdown
.
Item
>
높은가격
<
/Dropdown.Item
>
<
Dropdown
.
Item
onClick
=
{()
=>
handleSort
(
'
purchase
'
)}
>
인기상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
onClick
=
{()
=>
handleSort
(
'
newest
'
)}
>
신상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
onClick
=
{()
=>
handleSort
(
'
lowest
'
)}
>
낮은가격
<
/Dropdown.Item
>
<
Dropdown
.
Item
onClick
=
{()
=>
handleSort
(
'
highest
'
)}
>
높은가격
<
/Dropdown.Item
>
<
/Dropdown.Menu
>
<
/Dropdown
>
<
Form
as
=
{
Row
}
onSubmit
=
{
handleSearch
}
className
=
"
justify-content-end mx-0
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
search
px-2
"
>
<
Form
inline
onSubmit
=
{
handleSearch
}
className
=
"
justify-content-end mx-0
"
>
<
FormControl
type
=
"
text
"
onChange
=
{
handleChange
}
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
px-2
"
>
<
img
src
=
"
/icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
/Form
>
...
...
@@ -120,8 +154,8 @@ function ProductsList({ match }) {
}}
/
>
))}
<
/Row
>
{
/* <Pagination className="justify-content-center" index={} endPage={} handlePage={}/> */
}
<
/Container
>
<
/div
>
)
}
...
...
server/controllers/product.controller.js
View file @
0ce738d0
...
...
@@ -51,6 +51,7 @@ const getAll = async (req, res) => {
}
const
getlist
=
(
req
,
res
)
=>
{
console
.
log
(
'
get list
'
)
try
{
res
.
json
(
req
.
productslist
)
}
catch
(
error
)
{
...
...
@@ -59,6 +60,8 @@ const getlist = (req, res) => {
}
const
categoryId
=
async
(
req
,
res
,
next
,
category
)
=>
{
const
{
search
}
=
req
.
body
console
.
log
(
"
server=
"
,
search
)
try
{
const
productslist
=
await
Product
.
find
({
main_category
:
category
})
if
(
!
productslist
)
{
...
...
@@ -71,25 +74,25 @@ const categoryId = async (req, res, next, category) => {
}
}
const
subgetlist
=
(
req
,
res
)
=>
{
try
{
res
.
json
(
req
.
subproductslist
)
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
상품을 불러오지 못했습니다.
'
)
}
}
//
const subgetlist = (req, res) => {
//
try {
//
res.json(req.subproductslist)
//
} catch (error) {
//
res.status(500).send('상품을 불러오지 못했습니다.')
//
}
//
}
const
subcategoryId
=
async
(
req
,
res
,
next
,
subcategory
)
=>
{
try
{
const
subproductslist
=
await
Product
.
find
({
sub_category
:
subcategory
})
if
(
!
subproductslist
)
{
res
.
status
(
404
).
send
(
'
상품을 찾을 수 없습니다.
'
)
}
req
.
subproductslist
=
subproductslist
next
()
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
상품을 불러오지 못했습니다.
'
)
}
}
//
const subcategoryId = async (req, res, next, subcategory) => {
//
try {
//
const subproductslist = await Product.find({ sub_category: subcategory })
//
if (!subproductslist) {
//
res.status(404).send('상품을 찾을 수 없습니다.')
//
}
//
req.subproductslist = subproductslist
//
next()
//
} catch (error) {
//
res.status(500).send('상품을 불러오지 못했습니다.')
//
}
//
}
export
default
{
imageUpload
,
regist
,
getToHome
,
getAll
,
categoryId
,
getlist
,
subcategoryId
,
subgetlist
}
\ No newline at end of file
export
default
{
imageUpload
,
regist
,
getToHome
,
getAll
,
categoryId
,
getlist
}
\ No newline at end of file
server/routes/product.routes.js
View file @
0ce738d0
...
...
@@ -16,11 +16,11 @@ router.route('/getproduct/all')
router
.
route
(
'
/getproduct/:category
'
)
.
get
(
productCtrl
.
getlist
)
router
.
route
(
'
/getproduct/:subcategory
'
)
.
get
(
productCtrl
.
subgetlist
)
//
router.route('/getproduct/:subcategory')
//
.get(productCtrl.subgetlist)
router
.
param
(
'
category
'
,
productCtrl
.
categoryId
)
router
.
param
(
'
subcategory
'
,
productCtrl
.
subcategoryId
)
//
router.param('subcategory',productCtrl.subcategoryId)
export
default
router
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment