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
2a67f236
Commit
2a67f236
authored
Jan 15, 2021
by
이재연
Browse files
zz
parent
57d0b50b
Changes
7
Hide whitespace changes
Inline
Side-by-side
client/src/Components/ListCard.js
View file @
2a67f236
import
React
from
'
react
'
;
import
{
Card
}
from
'
react-bootstrap
'
import
{
Card
}
from
'
react-bootstrap
'
function
ListCard
(
props
)
{
return
(
<>
{
props
.
productlist
.
map
((
e
)
=>
(
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
{
e
.
main_imgUrl
&&
`/images/
${
e
.
main_imgUrl
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
{
e
.
pro_name
}
<
/Card.Title
>
<
Card
.
Text
>
{
e
.
price
}
<
/Card.Text
>
<
/Card.Body
>
<
/Card>
))}
<
/
>
{
props
.
productlist
.
map
((
e
)
=>
(
<
Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
{
e
.
main_imgUrl
&&
`/images/
${
e
.
main_imgUrl
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
{
e
.
pro_name
}
<
/Card.Title
>
<
Card
.
Text
>
{
e
.
price
}
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
{
e
.
detail_imgUrl
&&
`/images/
${
e
.
detail_imgUrl
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
{
e
.
pro_name
}
<
/Card.Title
>
<
Card
.
Text
>
{
e
.
price
}
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
))}
<
/>
)
}
}
export
default
ListCard
\ No newline at end of file
client/src/Components/MainNav.js
View file @
2a67f236
...
...
@@ -8,7 +8,7 @@ function MainNav() {
return
(
<
Navbar
sticky
=
"
top
"
style
=
{{
background
:
"
#CDC5C2
"
}}
>
<
Navbar
.
Brand
href
=
"
/home
"
className
=
"
text-light
"
>
<
img
alt
=
"
로고
"
src
=
"
icon/footprint.svg
"
width
=
"
24
"
height
=
"
24
"
/>
<
img
alt
=
"
로고
"
src
=
"
/
icon/footprint.svg
"
width
=
"
24
"
height
=
"
24
"
/>
{
'
'
}
KU
#
<
/Navbar.Brand
>
<
Nav
>
...
...
@@ -20,10 +20,10 @@ function MainNav() {
<
/
>
)}
<
Nav
.
Link
href
=
"
/shoppingcart
"
>
<
img
alt
=
"
카트
"
src
=
"
icon/cart.svg
"
width
=
"
30
"
height
=
"
30
"
/>
<
img
alt
=
"
카트
"
src
=
"
/
icon/cart.svg
"
width
=
"
30
"
height
=
"
30
"
/>
<
/Nav.Link
>
<
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
>
<
/Navbar
>
...
...
client/src/Pages/Home.js
View file @
2a67f236
...
...
@@ -13,42 +13,42 @@ function Home() {
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
3rem
"
,
marginBottom
:
"
2rem
"
}}
><
u
>
Best
<
/u></
h2
>
<
Row
className
=
"
justify-content-center mx-0
"
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
...
...
@@ -60,42 +60,42 @@ function Home() {
<
h2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
3rem
"
,
marginBottom
:
"
2rem
"
,
marginTop
:
"
2rem
"
}}
><
u
>
New
Arrival
<
/u></
h2
>
<
Row
className
=
"
justify-content-center mx-0
"
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mx-1 my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
icon/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
/
icon/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
...
...
client/src/Pages/ProductRegist.js
View file @
2a67f236
...
...
@@ -3,7 +3,6 @@ import { Redirect } from 'react-router-dom';
import
{
Row
,
Col
,
Button
,
Form
,
Container
,
Alert
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
let
color
=
{}
let
preColors
=
[]
...
...
client/src/Pages/ProductsList.js
View file @
2a67f236
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Card
,
Dropdown
}
from
'
react-bootstrap
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Container
,
Row
,
Col
,
Form
,
FormControl
,
Button
,
Dropdown
}
from
'
react-bootstrap
'
;
import
ListCard
from
'
../Components/ListCard
'
;
import
axios
from
'
axios
'
;
import
catchError
from
'
../utils/catchErrors
'
import
{
isAuthenticated
}
from
'
../utils/auth
'
import
catchErrors
from
'
../utils/catchErrors
'
;
function
ProductsList
(
props
)
{
const
[
productlist
,
setProductlist
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
''
)
const
[
category
,
setCategory
]
=
useState
(
props
.
match
.
params
.
product
)
const
[
subcategory
,
setSubcategory
]
=
useState
([
'
PADDED JACKET
'
,
'
JACKET
'
,
'
JUMPER
'
,
'
COAT
'
,
'
FLEECE
'
,
'
CARDIGAN / VEST
'
])
const
[
click
,
setClick
]
=
useState
(
true
)
const
[
category
,
setCategory
]
=
useState
(
''
)
const
[
subcategory
,
setSubcategory
]
=
useState
([])
const
user
=
isAuthenticated
()
useEffect
(()
=>
{
return
getProductlist
(
user
)
},
[
user
])
setCategory
(
props
.
match
.
params
.
product
.
toUpperCase
())
},
[
props
.
match
.
params
.
product
])
useEffect
(()
=>
{
getProductlist
()
},
[
category
])
useEffect
(
async
()
=>
{
getsubproductlist
()
},
[
subcategory
])
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
...
...
@@ -26,7 +30,6 @@ function ProductsList(props) {
async
function
getProductlist
()
{
try
{
console
.
log
(
'
dd=
'
,
category
)
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
category
}
`
)
console
.
log
(
response
.
data
)
setProductlist
(
response
.
data
)
...
...
@@ -52,9 +55,10 @@ function ProductsList(props) {
return
(
<
div
>
{
console
.
log
(
"
match.params=
"
,
props
.
match
.
params
.
product
)}
{
console
.
log
(
"
match.params=
"
,
category
)}
{
console
.
log
(
"
props=
"
,
props
)}
<
style
type
=
"
text/css
"
>
{
`
{
`
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
...
...
@@ -69,7 +73,7 @@ function ProductsList(props) {
<
Container
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
sm
=
{
10
}
xs
=
{
12
}
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
className
=
"
text-center
"
>
OUTER
<
/h1
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
className
=
"
text-center
"
>
{
category
}
<
/h1
>
<
div
className
=
"
text-center
"
>
{
subcategory
.
map
((
ele
)
=>
(
<
Button
className
=
"
m-1
"
onClick
=
{
handleClick
}
>
{
ele
}
<
/Button
>
))}
<
/div
>
...
...
@@ -89,13 +93,13 @@ function ProductsList(props) {
<
Form
as
=
{
Row
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end mx-0
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
search px-2
"
>
<
img
src
=
"
icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
img
src
=
"
/
icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
/Form
>
<
/Form
>
<
/Row
>
<
Row
md
=
{
8
}
sm
=
{
12
}
className
=
"
justify-content-start m-2
"
>
<
ListCard
productlist
=
{
productlist
}
/
>
<
ListCard
productlist
=
{
productlist
}
/
>
<
/Row
>
<
/Container
>
{
/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */
}
...
...
server/controllers/product.controller.js
View file @
2a67f236
...
...
@@ -41,10 +41,12 @@ const getlist=(req,res)=>{
const
categoryId
=
async
(
req
,
res
,
next
,
category
)
=>
{
try
{
const
productslist
=
await
Product
.
find
({
main_category
:
category
})
console
.
log
(
category
)
const
productslist
=
await
Product
.
find
({
"
main_category
"
:
`
${
category
}
`
})
if
(
!
productslist
)
{
res
.
status
(
404
).
send
(
'
상품을 찾을 수 없습니다.
'
)
}
console
.
log
(
"
list=
"
,
productslist
)
req
.
productslist
=
productslist
next
()
}
catch
(
error
)
{
...
...
@@ -61,7 +63,7 @@ const subgetlist=(req,res)=>{
}
const
subcategoryId
=
async
(
req
,
res
,
next
,
subcategory
)
=>
{
try
{
const
subproductslist
=
await
Product
.
find
({
sub_category
:
subcategory
})
const
subproductslist
=
await
Product
.
find
({
"
sub_category
"
:
`
${
subcategory
}
`
}
)
if
(
!
subproductslist
)
{
res
.
status
(
404
).
send
(
'
상품을 찾을 수 없습니다.
'
)
}
...
...
server/routes/product.routes.js
View file @
2a67f236
...
...
@@ -7,8 +7,8 @@ const router = express.Router()
router
.
route
(
'
/regist
'
)
.
post
(
productCtrl
.
imageUpload
,
productCtrl
.
regist
)
//
router.route('/getproduct/:category')
//
.get(productCtrl.getlist)
router
.
route
(
'
/getproduct/:category
'
)
.
get
(
productCtrl
.
getlist
)
router
.
route
(
'
/getproduct/:subcategory
'
)
.
get
(
productCtrl
.
subgetlist
)
...
...
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