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
d6c361c6
Commit
d6c361c6
authored
Jan 13, 2021
by
이재연
Browse files
dd
parent
708a8aaf
Changes
8
Hide whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
d6c361c6
...
...
@@ -18,26 +18,24 @@ function App() {
return
(
<
div
>
<
Router
>
<
MainNav
/>
<
SubNav
/>
<
Router
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
<
Route
path
=
"
/login
"
component
=
{
Login
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
Signup
}
/
>
<
Route
path
=
"
/product
"
component
=
{
Product
}
/
>
<
Route
path
=
"
/productslist
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
ProductRegist
}
/
>
<
Route
path
=
"
/shoppingcart
"
component
=
{
ShoppingCart
}
/
>
<
Route
path
=
"
/payment
"
component
=
{
Payment
}
/
>
<
Route
path
=
"
/account
"
component
=
{
Account
}
/
>
<
Route
path
=
'
/kakao
'
component
=
{()
=>
{
window
.
location
.
href
=
'
https://compmath.korea.ac.kr
'
;
return
null
;
}}
/
>
<
Redirect
path
=
"
/
"
to
=
"
/
"
/>
<
/Switch
>
<
/Router
>
<
/div
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
<
Route
path
=
"
/login
"
component
=
{
Login
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
Signup
}
/
>
{
/* <Route path="/product" component={Product} /> */
}
<
Route
path
=
"
/product/:product
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
ProductRegist
}
/
>
<
Route
path
=
"
/shoppingcart
"
component
=
{
ShoppingCart
}
/
>
<
Route
path
=
"
/payment
"
component
=
{
Payment
}
/
>
<
Route
path
=
"
/account
"
component
=
{
Account
}
/
>
<
Route
path
=
'
/kakao
'
component
=
{()
=>
{
window
.
location
.
href
=
'
https://compmath.korea.ac.kr
'
;
return
null
;
}}
/
>
<
Redirect
path
=
"
/
"
to
=
"
/
"
/>
<
/Switch
>
<
/Router
>
)
...
...
client/src/Components/ListCard.js
View file @
d6c361c6
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
React
from
'
react
'
;
import
{
Card
}
from
'
react-bootstrap
'
function
ListCard
(
props
)
{
...
...
client/src/Components/SubNav.js
View file @
d6c361c6
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
{
Navbar
,
Nav
,
NavDropdown
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
function
SubNav
()
{
const
[
toggle
,
setToggle
]
=
useState
({
"
dress
"
:
false
,
"
outer
"
:
false
,
"
top
"
:
false
,
"
pants
"
:
false
,
"
skirt
"
:
false
,
"
training
"
:
false
,
"
shoes
"
:
false
});
function
handleMouseEnter
(
id
)
{
setToggle
({
[
id
]:
true
})
}
function
handleMouseLeave
(
id
)
{
setToggle
({
[
id
]:
false
})
}
function
handleToggle
(
id
)
{
setToggle
({
[
id
]:
!
toggle
[
`
${
id
}
`
]
})
}
function
handleClick
(
url
)
{
return
<
Redirect
to
=
{
url
}
/
>
}
const
[
categorysDiv
,
setCategorysDiv
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
''
)
useEffect
(
async
()
=>
{
try
{
const
response
=
await
axios
.
get
(
'
/api/categorys
'
)
let
list
=
[]
Object
.
keys
(
response
.
data
[
0
]).
forEach
((
ele
)
=>
{
const
url
=
ele
.
toLowerCase
()
list
.
push
(
<
Nav
.
Link
as
=
{
Link
}
to
=
{
`/product/
${
url
}
`
}
>
{
ele
}
<
/Nav.Link
>
)
})
setCategorysDiv
(
list
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
},
[])
return
(
<
Navbar
sticky
=
"
top
"
className
=
"
flex-nowrap
"
style
=
{{
top
:
"
62px
"
,
paddingTop
:
"
0
"
,
paddingBottom
:
"
0
"
,
backgroundColor
:
"
#fff
"
,
overflowX
:
"
auto
"
}}
>
<
Navbar
sticky
=
"
top
"
className
=
"
flex-nowrap
"
style
=
{{
top
:
"
62px
"
,
paddingTop
:
"
0
"
,
paddingBottom
:
"
0
"
,
backgroundColor
:
"
#fff
"
}}
>
<
style
type
=
"
text/css
"
>
{
`
.nav-link, .nav-link:hover, .nav-link:active {
color: #91877F;
}
.dropdown-toggle:after {
display: none;
}
.dropdown-menu {
background-color: #91877F;
}
.dropdown-item {
color: #f8f9fa;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #91877F;
}
.dropdown-item:active {
background-color: #f8f9fa;
}
`
}
<
/style
>
<
Nav
>
<
NavDropdown
title
=
"
DRESS
"
onMouseEnter
=
{()
=>
handleMouseEnter
(
"
dress
"
)}
onMouseLeave
=
{()
=>
handleMouseLeave
(
"
dress
"
)}
show
=
{
toggle
.
dress
}
toggle
=
{()
=>
handleToggle
(
"
dress
"
)}
onClick
=
{()
=>
handleClick
(
"
/dress
"
)}
>
<
NavDropdown
.
Item
href
=
"
/dress/long
"
>
LONG
DRESS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/dress/short
"
>
SHORT
DRESS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/dress/knit
"
>
KNIT
DRESS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/dress/shirt
"
>
SHIRT
DRESS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/dress/pattern
"
>
PATTERN
DRESS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/dress/bustier
"
>
BUSTIER
DRESS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/dress/two-piece
"
>
TWO
-
PIECE
DRESS
<
/NavDropdown.Item
>
<
/NavDropdown
>
<
NavDropdown
title
=
"
OUTER
"
onMouseEnter
=
{()
=>
handleMouseEnter
(
"
outer
"
)}
onMouseLeave
=
{()
=>
handleMouseLeave
(
"
outer
"
)}
show
=
{
toggle
.
outer
}
toggle
=
{()
=>
handleToggle
(
"
outer
"
)}
onClick
=
{()
=>
handleClick
(
"
/outer
"
)}
>
<
NavDropdown
.
Item
href
=
"
/outer/padded-jacket
"
>
PADDED
JACKET
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/outer/jacket
"
>
JACKET
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/outer/jumper
"
>
JUMPER
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/outer/coat
"
>
COAT
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/outer/fleece
"
>
FLEECE
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/outer/cardigan_vest
"
>
CARDIGAN
/
VEST
<
/NavDropdown.Item
>
<
/NavDropdown
>
<
NavDropdown
title
=
"
TOP
"
onMouseEnter
=
{()
=>
handleMouseEnter
(
"
top
"
)}
onMouseLeave
=
{()
=>
handleMouseLeave
(
"
top
"
)}
show
=
{
toggle
.
top
}
toggle
=
{()
=>
handleToggle
(
"
top
"
)}
onClick
=
{()
=>
handleClick
(
"
/top
"
)}
>
<
NavDropdown
.
Item
href
=
"
/top/knit
"
>
KNIT
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/top/hoody
"
>
HOODY
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/top/blouse
"
>
BLOUSE
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/top/shirt
"
>
SHIRT
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/top/sweatshirt
"
>
SWEATSHIRT
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/top/long-sleeve-shirt
"
>
LONG
SLEEVE
SHIRT
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/top/short-sleeved-shirt_sleeveless-shirt
"
>
SHORT
SLEEVE
/
SLEEVELESS
SHIRT
<
/NavDropdown.Item
>
<
/NavDropdown
>
<
NavDropdown
title
=
"
PANTS
"
onMouseEnter
=
{()
=>
handleMouseEnter
(
"
pants
"
)}
onMouseLeave
=
{()
=>
handleMouseLeave
(
"
pants
"
)}
show
=
{
toggle
.
pants
}
toggle
=
{()
=>
handleToggle
(
"
pants
"
)}
onClick
=
{()
=>
handleClick
(
"
/pants
"
)}
>
<
NavDropdown
.
Item
href
=
"
/pants/jeans
"
>
JEANS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/skinny-jeans
"
>
SKINNY
JEANS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/banding
"
>
BANDING
PANTS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/wide-fit
"
>
WIDE
-
FIT
PANTS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/boot-cut
"
>
BOOT
-
CUT
PANTS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/straight-fit
"
>
STRAIGHT
-
FIT
PANTS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/wide-fit
"
>
WIDE
-
FIT
PANTS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/shorts
"
>
SHORTS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/trousers
"
>
TROUSERS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/leggings
"
>
LEGGINGS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/pants/jumpsuit_overalls
"
>
JUMPSUIT
/
OVERALLS
<
/NavDropdown.Item
>
<
/NavDropdown
>
<
NavDropdown
title
=
"
SKIRT
"
onMouseEnter
=
{()
=>
handleMouseEnter
(
"
skirt
"
)}
onMouseLeave
=
{()
=>
handleMouseLeave
(
"
skirt
"
)}
show
=
{
toggle
.
skirt
}
toggle
=
{()
=>
handleToggle
(
"
skirt
"
)}
onClick
=
{()
=>
handleClick
(
"
/skirt
"
)}
>
<
NavDropdown
.
Item
href
=
"
/skirt/long
"
>
LONG
SKIRT
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/skirt/midi
"
>
MIDI
SKIRT
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/skirt/mini
"
>
MINI
SKIRT
<
/NavDropdown.Item
>
<
/NavDropdown
>
<
Nav
.
Item
>
<
Nav
.
Link
href
=
"
/training
"
>
TRAINING
<
/Nav.Link
>
<
/Nav.Item
>
<
NavDropdown
title
=
"
SHOES
"
onMouseEnter
=
{()
=>
handleMouseEnter
(
"
shoes
"
)}
onMouseLeave
=
{()
=>
handleMouseLeave
(
"
shoes
"
)}
show
=
{
toggle
.
shoes
}
toggle
=
{()
=>
handleToggle
(
"
shoes
"
)}
onClick
=
{()
=>
handleClick
(
"
/shoes
"
)}
>
<
NavDropdown
.
Item
href
=
"
/skirt/sneakers_slip-on
"
>
SNEAKERS
/
SLIP
-
ON
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/skirt/flat_loafer
"
>
FLAT
/
LOAFER
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/skirt/heel_pump
"
>
HEEL
/
PUMP
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/skirt/boots
"
>
BOOTS
<
/NavDropdown.Item
>
<
NavDropdown
.
Item
href
=
"
/skirt/sandal_slipper
"
>
SANDAL
/
SLIPPER
<
/NavDropdown.Item
>
<
/NavDropdown
>
{
categorysDiv
.
map
(
item
=>
item
)}
<
/Nav
>
<
/Navbar
>
)
...
...
client/src/Pages/ProductRegist.js
View file @
d6c361c6
...
...
@@ -99,7 +99,7 @@ function ProductsRegist() {
console
.
log
(
product
)
const
formData
=
new
FormData
();
for
(
let
key
in
product
)
{
if
(
key
===
"
main_im
gUrl
"
||
key
===
"
detail_im
gUrl
"
)
{
if
(
key
===
"
main_im
age
"
||
key
===
"
detail_im
age
"
)
{
console
.
log
(
product
[
key
][
0
])
formData
.
append
(
key
,
product
[
key
][
0
])
}
else
{
...
...
@@ -192,11 +192,11 @@ function ProductsRegist() {
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
대표이미지
<
/Form.Label
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
main_im
gUrl
"
onChange
=
{
handleChange
}
/
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
main_im
age
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
상세이미지
<
/Form.Label
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
detail_im
gUrl
"
onChange
=
{
handleChange
}
/
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
detail_im
age
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
Button
className
=
"
float-right
"
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
>
등록
<
/Button
>
<
/Form
>
...
...
client/src/Pages/ProductsList.js
View file @
d6c361c6
...
...
@@ -5,35 +5,28 @@ 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
()
{
const
[
sub
,
setSub
]
=
useState
([
'
PADDED JACKET
'
,
'
JACKET
'
,
'
JUMPER
'
,
'
COAT
'
,
'
FLEECE
'
,
'
CARDIGAN / VEST
'
])
function
ProductsList
(
props
)
{
const
[
productlist
,
setProductlist
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
''
)
const
[
category
,
setCategory
]
=
useState
(
'
OUTER
'
)
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
user
=
isAuthenticated
()
useEffect
(()
=>
{
getProductlist
(
user
)
return
getProductlist
(
user
)
},
[
user
])
// async function getProfile(user){
// console.log(user)
// try {
// const response = await axios.get(`/api/users/profile/${user}`)
// setProfile(response.data)
// } catch (error) {
// catchErrors(error, setError)
// }
// }
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
}
async
function
getProductlist
()
{
try
{
console
.
log
(
'
dd=
'
,
category
)
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
category
}
`
)
console
.
log
(
response
.
data
)
setProductlist
(
response
.
data
)
...
...
@@ -42,6 +35,21 @@ function ProductsList() {
}
}
function
handleClick
(
e
){
e
.
preventDefault
()
return
getsubproductlist
()
}
async
function
getsubproductlist
(){
try
{
const
response
=
await
axios
.
get
(
`/api/product/getproduct/
${
subcategory
}
`
)
console
.
log
(
response
.
data
)
setProductlist
(
response
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
return
(
<
div
>
<
style
type
=
"
text/css
"
>
...
...
@@ -61,8 +69,8 @@ function ProductsList() {
<
Row
className
=
"
justify-content-center
"
>
<
Col
sm
=
{
10
}
xs
=
{
12
}
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
className
=
"
text-center
"
>
OUTER
<
/h1
>
<
div
className
=
"
text-center
"
>
{
sub
.
map
((
ele
)
=>
(
<
Button
className
=
"
m-1
"
>
{
ele
}
<
/Button
>
<
div
className
=
"
text-center
"
>
{
sub
category
.
map
((
ele
)
=>
(
<
Button
className
=
"
m-1
"
onClick
=
{
handleClick
}
>
{
ele
}
<
/Button
>
))}
<
/div
>
<
/Col
>
<
/Row
>
...
...
client/src/Pages/ShoppingCart.js
View file @
d6c361c6
...
...
@@ -6,8 +6,6 @@ import catchErrors from '../utils/catchErrors';
import
{
isAuthenticated
}
from
'
../utils/auth
'
import
CartCard
from
'
../Components/CartCard
'
;
function
ShoppingCart
()
{
function
ShoppingCart
()
{
const
[
num
,
setNum
]
=
useState
(
0
)
const
[
error
,
setError
]
=
useState
(
''
)
...
...
server/controllers/product.controller.js
View file @
d6c361c6
...
...
@@ -37,6 +37,7 @@ const getlist=(req,res)=>{
}
const
categoryId
=
async
(
req
,
res
,
next
,
category
)
=>
{
try
{
const
productslist
=
await
Product
.
find
({
main_category
:
category
})
...
...
@@ -49,4 +50,25 @@ const categoryId = async (req, res, next, category) => {
res
.
status
(
500
).
send
(
'
상품을 불러오지 못했습니다.
'
)
}
}
export
default
{
imageUpload
,
regist
,
categoryId
,
getlist
}
\ No newline at end of file
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
(
'
상품을 불러오지 못했습니다.
'
)
}
}
export
default
{
imageUpload
,
regist
,
categoryId
,
getlist
,
subcategoryId
,
subgetlist
}
\ No newline at end of file
server/routes/product.routes.js
View file @
d6c361c6
...
...
@@ -7,9 +7,14 @@ 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
)
router
.
param
(
'
category
'
,
productCtrl
.
categoryId
)
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