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
d4c8d671
Commit
d4c8d671
authored
Jan 25, 2021
by
kusang96
Browse files
Pagination 수정중
parent
488f656f
Changes
5
Hide whitespace changes
Inline
Side-by-side
client/src/Components/Pagination.js
View file @
d4c8d671
import
{
Pagination
}
from
"
react-bootstrap
"
;
import
React
from
'
react
'
;
import
{
Pagination
}
from
'
react-bootstrap
'
;
function
Paginations
(
props
)
{
...
...
@@ -7,26 +7,23 @@ function Paginations(props) {
<
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
===
props
.
totalPosts
-
1
?
<
Pagination
.
Item
onClick
=
{()
=>
props
.
handlePage
(
props
.
index
-
3
)}
>
{
props
.
index
-
3
}
<
/Pagination.Item> : ""
}
{
props
.
index
===
props
.
totalPosts
?
<
Pagination
.
Item
onClick
=
{()
=>
props
.
handlePage
(
props
.
index
-
4
)}
>
{
props
.
index
-
4
}
<
/Pagination.Item> : ""
}
{
props
.
index
===
props
.
totalPosts
?
<
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
===
props
.
totalPosts
?
""
:
<
Pagination
.
Item
onClick
=
{()
=>
props
.
handlePage
(
props
.
index
+
1
)}
>
{
props
.
index
+
1
}
<
/Pagination.Item>
}
{
props
.
index
>
props
.
totalPosts
-
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
)}
/
>
{
props
.
index
===
props
.
totalPosts
?
""
:
<
Pagination
.
Next
onClick
=
{()
=>
props
.
handlePage
(
props
.
index
+
1
)}
/>
}
<
Pagination
.
Last
onClick
=
{()
=>
props
.
handlePage
(
props
.
totalPosts
)}
/
>
<
/Pagination
>
)
}
export
default
Paginations
\ No newline at end of file
client/src/Components/SubNav.js
View file @
d4c8d671
...
...
@@ -16,7 +16,6 @@ function SubNav() {
const
url
=
ele
.
toLowerCase
()
list
.
push
(
<
Nav
.
Link
as
=
{
Link
}
to
=
{
`/categories/
${
url
}
`
}
>
{
ele
}
<
/Nav.Link
>
//categories/${SubNav.url}/&{url}
)
})
setCategoriesDiv
(
list
)
...
...
client/src/Pages/Admin.js
View file @
d4c8d671
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
AllCard
from
'
../Components/AllCard
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
Pagination
from
"
../Components/Pagination
"
;
import
axios
from
'
axios
'
;
import
catchError
from
'
../utils/catchErrors
'
;
import
{
Row
,
Form
,
FormControl
,
Button
,
Container
}
from
'
react-bootstrap
'
;
function
Admin
()
{
const
INIT_STATUS
=
{
indexOfFirst
:
0
,
indexOfLast
:
10
}
const
[
search
,
setSearch
]
=
useState
({
word
:
''
})
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
searchref
=
useRef
(
null
)
const
indexOfLast
=
currentPage
*
per
;
const
indexOfFirst
=
indexOfLast
-
per
;
useEffect
(()
=>
{
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
()
{
try
{
const
response
=
await
axios
.
get
(
`/api/product/getproduct/all`
)
...
...
@@ -36,12 +59,19 @@ function Admin() {
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
)
}
finally
{
searchref
.
current
.
value
=
''
}
}
if
(
error
)
{
alert
(
`
${
error
}
`
)
setError
(
''
)
searchref
.
current
.
value
=
''
}
return
(
<
Container
>
<
style
type
=
"
text/css
"
>
...
...
@@ -58,18 +88,18 @@ function Admin() {
`
}
<
/style
>
<
Row
as
=
{
Form
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end mx-0 my-5
"
>
<
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
"
>
<
img
src
=
"
icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
Button
sm
=
{
2
}
xs
=
{
6
}
type
=
"
button
"
href
=
"
/regist
"
className
=
"
ml-1
"
>
상품
등록
<
/Button
>
<
/Row
>
<
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
}
/
>
))}
<
/Row
>
<
Pagination
/>
<
Pagination
index
=
{
currentPage
}
totalPosts
=
{
Math
.
ceil
(
productlist
.
length
/
per
)}
handlePage
=
{
setCurrentPage
}
/
>
<
/Container
>
)
}
...
...
client/src/Pages/ProductsList.js
View file @
d4c8d671
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
'
;
...
...
@@ -11,17 +10,8 @@ function ProductsList({ match }) {
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
;
}
const
searchref
=
useRef
(
null
)
useEffect
(()
=>
{
setMainCategory
(
match
.
params
.
main
.
toUpperCase
())
...
...
@@ -44,14 +34,16 @@ function ProductsList({ match }) {
const
response
=
await
axios
.
get
(
`/api/product/getproduct/main/
${
mainCategory
}
?product=
${
search
.
word
}
`
)
console
.
log
(
"
response.data=
"
,
response
.
data
)
setProductlist
(
response
.
data
)
e
.
target
.
childNodes
[
0
].
value
=
''
}
catch
(
error
)
{
catchError
(
error
,
setError
)
}
finally
{
searchref
.
current
.
value
=
''
}
}
async
function
getSubsCategories
()
{
try
{
setError
(
''
)
const
response
=
await
axios
.
get
(
`/api/categories/sub/
${
mainCategory
}
`
)
setSubCategory
(
Object
.
values
(
response
.
data
)[
0
])
console
.
log
(
"
object value=
"
,
Object
.
values
(
response
.
data
));
...
...
@@ -61,8 +53,8 @@ function ProductsList({ match }) {
}
async
function
getProductlist
()
{
console
.
log
(
"
tlfgpd
"
)
try
{
setError
(
''
)
const
response
=
await
axios
.
get
(
`/api/product/getproduct/main/
${
mainCategory
}
`
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
...
...
@@ -72,6 +64,7 @@ function ProductsList({ match }) {
async
function
handleSort
(
method
)
{
try
{
setError
(
''
)
const
response
=
await
axios
.
get
(
`/api/product/getproduct/?q=
${
method
}
`
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
...
...
@@ -81,17 +74,21 @@ function ProductsList({ match }) {
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
)
{
c
onsole
.
log
(
"
e
rror
22
"
)
c
atchError
(
error
,
setE
rror
)
}
}
if
(
error
)
{
alert
(
`
${
error
}
`
)
setError
(
''
)
searchref
.
current
.
value
=
''
}
return
(
<
Container
>
<
style
type
=
"
text/css
"
>
...
...
@@ -105,9 +102,13 @@ function ProductsList({ match }) {
border-color: #CDC5C2;
}
.btn:hover {
background: #91877F;
background
-color
: #91877F;
border-color: #91877F;
}
.dropdown-item:hover, .dropdown-item:active {
background-color: #91877F;
color: #fff;
}
`
}
<
/style
>
<
Row
className
=
"
justify-content-center
"
>
...
...
@@ -122,7 +123,7 @@ function ProductsList({ match }) {
<
/Row
>
<
Row
className
=
"
justify-content-end mx-0 my-5
"
>
<
Dropdown
>
<
Dropdown
.
Toggle
className
=
"
mx-2
"
>
정렬
<
/Dropdown.Toggle
>
<
Dropdown
.
Toggle
variant
=
"
secondary
"
className
=
"
mx-2
"
>
정렬
<
/Dropdown.Toggle
>
<
Dropdown
.
Menu
>
<
Dropdown
.
Item
onClick
=
{()
=>
handleSort
(
'
purchase
'
)}
>
인기상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
onClick
=
{()
=>
handleSort
(
'
newest
'
)}
>
신상품
<
/Dropdown.Item
>
...
...
@@ -131,8 +132,8 @@ function ProductsList({ match }) {
<
/Dropdown.Menu
>
<
/Dropdown
>
<
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
"
>
<
FormControl
ref
=
{
searchref
}
type
=
"
text
"
onChange
=
{
handleChange
}
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
variant
=
"
secondary
"
className
=
"
px-2
"
>
<
img
src
=
"
/icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
/Form
>
...
...
@@ -153,8 +154,8 @@ function ProductsList({ match }) {
}
}}
>
<
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
>
<
/Container
>
...
...
server/controllers/product.controller.js
View file @
d4c8d671
...
...
@@ -82,7 +82,6 @@ const categoryId = async (req, res, next, category) => {
if
(
req
.
query
.
product
)
{
const
productslist
=
await
Product
.
find
({
main_category
:
category
,
pro_name
:
{
$regex
:
new
RegExp
(
req
.
query
.
product
)
}
})
if
(
productslist
.
length
==
0
)
{
console
.
log
(
'
ds
'
)
res
.
status
(
404
).
send
(
'
상품을 찾을 수 없습니다.
'
)
}
else
{
req
.
productslist
=
productslist
...
...
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