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
064e5fe5
Commit
064e5fe5
authored
Jan 13, 2021
by
kusang96
Browse files
category DB에서 가져오기
parent
e7e1d3d1
Changes
9
Hide whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
064e5fe5
...
@@ -16,7 +16,6 @@ import SubNav from './Components/SubNav';
...
@@ -16,7 +16,6 @@ import SubNav from './Components/SubNav';
function
App
()
{
function
App
()
{
return
(
return
(
<
div
>
<
div
>
<
MainNav
/>
<
MainNav
/>
...
...
client/src/Components/SubNav.js
View file @
064e5fe5
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
{
Navbar
,
Nav
,
NavDropdown
}
from
'
react-bootstrap
'
;
import
{
Navbar
,
Nav
,
NavDropdown
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
function
SubNav
()
{
function
SubNav
()
{
const
[
toggle
,
setToggle
]
=
useState
({
"
dress
"
:
false
,
"
outer
"
:
false
,
"
top
"
:
false
,
"
pants
"
:
false
,
"
skirt
"
:
false
,
"
training
"
:
false
,
"
shoes
"
:
false
});
const
[
categorysDiv
,
setCategorysDiv
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
''
)
function
handleMouseEnter
(
id
)
{
setToggle
({
[
id
]:
true
})
}
useEffect
(
async
()
=>
{
try
{
function
handleMouseLeave
(
id
)
{
const
response
=
await
axios
.
get
(
'
/api/categorys
'
)
setToggle
({
[
id
]:
false
})
let
list
=
[]
}
Object
.
keys
(
response
.
data
[
0
]).
forEach
((
ele
)
=>
{
const
url
=
"
/
"
+
ele
.
toLowerCase
()
function
handleToggle
(
id
)
{
list
.
push
(
setToggle
({
[
id
]:
!
toggle
[
`
${
id
}
`
]
})
<
Nav
.
Link
href
=
{
url
}
>
{
ele
}
<
/Nav.Link
>
}
)
})
function
handleClick
(
url
)
{
setCategorysDiv
(
list
)
return
<
Redirect
to
=
{
url
}
/
>
}
catch
(
error
)
{
}
catchErrors
(
error
,
setError
)
}
},
[])
return
(
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
"
>
<
style
type
=
"
text/css
"
>
{
`
{
`
.nav-link, .nav-link:hover, .nav-link:active {
.nav-link, .nav-link:hover, .nav-link:active {
color: #91877F;
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
>
<
/style
>
<
Nav
>
<
Nav
>
<
NavDropdown
title
=
"
DRESS
"
onMouseEnter
=
{()
=>
handleMouseEnter
(
"
dress
"
)}
onMouseLeave
=
{()
=>
handleMouseLeave
(
"
dress
"
)}
show
=
{
toggle
.
dress
}
toggle
=
{()
=>
handleToggle
(
"
dress
"
)}
onClick
=
{()
=>
handleClick
(
"
/dress
"
)}
>
{
categorysDiv
.
map
(
item
=>
item
)}
<
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
>
<
/Nav
>
<
/Nav
>
<
/Navbar
>
<
/Navbar
>
)
)
...
...
client/src/Pages/ProductRegist.js
View file @
064e5fe5
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
{
Row
,
Col
,
Button
,
Form
,
Container
,
Alert
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Button
,
Form
,
Container
,
Alert
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
let
color
=
{}
let
color
=
{}
...
@@ -22,15 +22,7 @@ function ProductsRegist() {
...
@@ -22,15 +22,7 @@ function ProductsRegist() {
main_image
:
[],
main_image
:
[],
detail_image
:
[]
detail_image
:
[]
}
}
const
categorys
=
{
const
[
categorys
,
setCategorys
]
=
useState
({
0
:
[],
1
:
[[]]
})
"
DRESS
"
:
[
"
LONG DRESS
"
,
"
SHORT DRESS
"
,
"
KNIT DRESS
"
,
"
SHIRT DRESS
"
,
"
PATTERN DRESS
"
,
"
BUSTIER DRESS
"
,
"
TWO-PIECE DRESS
"
],
"
OUTER
"
:
[
"
PADDED JACKET
"
,
"
JACKET
"
,
"
JUMPER
"
,
"
COAT
"
,
"
FLEECE
"
,
"
CARDIGAN / VEST
"
],
"
TOP
"
:
[
"
KNIT
"
,
"
HOODY
"
,
"
BLOUSE
"
,
"
SHIRT
"
,
"
SWEATSHIRT
"
,
"
LONG SLEEVE SHIRT
"
,
"
SHORT SLEEVE / SLEEVELESS SHIRT
"
],
"
PANTS
"
:
[
"
JEANS
"
,
"
SKINNY JEANS
"
,
"
BANDING PANTS
"
,
"
WIDE-FIT PANTS
"
,
"
BOOT-CUT PANTS
"
,
"
STRAIGHT-FIT PANTS
"
,
"
SHORTS
"
,
"
TROUSERS
"
,
"
LEGGINGS
"
,
"
JUMPSUIT / OVERALLS
"
],
"
SKIRT
"
:
[
"
LONG SKIRT
"
,
"
MIDI SKIRT
"
,
"
MINI SKIRT
"
],
"
TRAINING
"
:
[],
"
SHOES
"
:
[
"
SNEAKERS / SLIP-ON
"
,
"
FLAT / LOAFER
"
,
"
HEEL / PUMP
"
,
"
BOOTS
"
,
"
SANDAL / SLIPPER
"
]
}
const
[
product
,
setProduct
]
=
useState
(
INIT_PRODUCT
)
const
[
product
,
setProduct
]
=
useState
(
INIT_PRODUCT
)
const
[
categoryNum
,
setCategoryNum
]
=
useState
(
0
)
const
[
categoryNum
,
setCategoryNum
]
=
useState
(
0
)
const
[
tag
,
setTag
]
=
useState
(
0
)
const
[
tag
,
setTag
]
=
useState
(
0
)
...
@@ -38,8 +30,15 @@ function ProductsRegist() {
...
@@ -38,8 +30,15 @@ function ProductsRegist() {
const
[
success
,
setSuccess
]
=
useState
(
false
)
const
[
success
,
setSuccess
]
=
useState
(
false
)
const
[
checked
,
setChecked
]
=
useState
({
"
Free
"
:
false
,
"
XL
"
:
false
,
"
L
"
:
false
,
"
M
"
:
false
,
"
S
"
:
false
,
"
XS
"
:
false
})
const
[
checked
,
setChecked
]
=
useState
({
"
Free
"
:
false
,
"
XL
"
:
false
,
"
L
"
:
false
,
"
M
"
:
false
,
"
S
"
:
false
,
"
XS
"
:
false
})
const
mainCategorys
=
Object
.
keys
(
categorys
)
useEffect
(
async
()
=>
{
const
subCategorys
=
Object
.
values
(
categorys
)
try
{
const
response
=
await
axios
.
get
(
'
/api/categorys
'
)
const
data
=
response
.
data
[
0
]
setCategorys
([
Object
.
keys
(
data
),
Object
.
values
(
data
)])
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
},
[])
function
addCategory
()
{
function
addCategory
()
{
console
.
log
(
product
)
console
.
log
(
product
)
...
@@ -50,12 +49,13 @@ function ProductsRegist() {
...
@@ -50,12 +49,13 @@ function ProductsRegist() {
<
/div>
)
<
/div>
)
setTag
(
tag
+
1
)
setTag
(
tag
+
1
)
}
}
function
deleteCategory
(
e
)
{
function
deleteCategory
(
e
)
{
const
categ
=
e
.
target
.
parentNode
const
categ
=
e
.
target
.
parentNode
categ
.
remove
()
categ
.
remove
()
product
[
"
sub_category
"
].
splice
(
e
.
target
.
parentNode
.
firstElementChild
.
getAttribute
(
"
i
"
),
1
)
product
[
"
sub_category
"
].
splice
(
categ
.
firstElementChild
.
getAttribute
(
"
i
"
),
1
)
console
.
log
(
product
)
}
}
function
handleCheckBox
(
e
)
{
function
handleCheckBox
(
e
)
{
setChecked
({
...
checked
,
[
e
.
target
.
value
]:
!
checked
[
`
${
e
.
target
.
value
}
`
]
})
setChecked
({
...
checked
,
[
e
.
target
.
value
]:
!
checked
[
`
${
e
.
target
.
value
}
`
]
})
}
}
...
@@ -65,17 +65,18 @@ function ProductsRegist() {
...
@@ -65,17 +65,18 @@ function ProductsRegist() {
colorHtml
.
push
(
colorHtml
.
push
(
<
p
>
{
color
[
"
colors
"
]}
<
/p
>
<
p
>
{
color
[
"
colors
"
]}
<
/p
>
)
)
setProduct
({...
product
,
"
colors
"
:
preColors
})
setProduct
({
...
product
,
"
colors
"
:
preColors
})
}
}
function
colorChange
(
e
){
function
colorChange
(
e
)
{
color
[
e
.
target
.
name
]
=
e
.
target
.
value
color
[
e
.
target
.
name
]
=
e
.
target
.
value
}
}
function
handleChange
(
event
)
{
function
handleChange
(
event
)
{
const
{
name
,
value
,
files
}
=
event
.
target
const
{
name
,
value
,
files
}
=
event
.
target
if
(
event
.
target
.
name
===
"
sub_category
"
)
{
console
.
log
(
"
event.target.name=
"
,
name
,
"
event.target.value=
"
,
value
)
product
[
"
sub_category
"
].
push
(
event
.
target
.
value
)
if
(
name
===
"
sub_category
"
)
{
product
[
name
].
push
(
value
)
}
else
if
(
files
)
{
}
else
if
(
files
)
{
setProduct
({
...
product
,
[
name
]:
files
})
setProduct
({
...
product
,
[
name
]:
files
})
...
@@ -95,8 +96,7 @@ function ProductsRegist() {
...
@@ -95,8 +96,7 @@ function ProductsRegist() {
sizes
.
push
(
key
)
sizes
.
push
(
key
)
}
}
}
}
product
[
"
sizes
"
]
=
sizes
product
[
"
sizes
"
]
=
sizes
console
.
log
(
product
)
const
formData
=
new
FormData
();
const
formData
=
new
FormData
();
for
(
const
key
in
product
)
{
for
(
const
key
in
product
)
{
console
.
log
(
"
product[key]=
"
,
product
[
key
])
console
.
log
(
"
product[key]=
"
,
product
[
key
])
...
@@ -108,18 +108,6 @@ function ProductsRegist() {
...
@@ -108,18 +108,6 @@ function ProductsRegist() {
formData
.
append
(
key
,
product
[
key
])
formData
.
append
(
key
,
product
[
key
])
}
}
}
}
// formData 값 확인용
// for (const key of formData.keys()) {
// console.log("key=",key);
// }
// for (const value of formData.values()) {
// console.log(value);
// }
try
{
try
{
const
response
=
await
axios
.
post
(
'
/api/product/regist
'
,
formData
)
const
response
=
await
axios
.
post
(
'
/api/product/regist
'
,
formData
)
}
catch
(
error
)
{
}
catch
(
error
)
{
...
@@ -130,93 +118,92 @@ function ProductsRegist() {
...
@@ -130,93 +118,92 @@ function ProductsRegist() {
if
(
success
)
{
if
(
success
)
{
return
<
Redirect
to
=
'
/
'
/>
return
<
Redirect
to
=
'
/
'
/>
}
}
return
(
return
(
<
div
>
<
Container
className
=
"
mt-5
"
>
<
Container
>
<
Row
className
=
"
justify-content-md-center
"
>
<
Row
className
=
"
justify-content-md-center
"
>
<
Col
md
=
{
8
}
className
=
"
border p-1
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
Col
md
=
{
8
}
className
=
"
border p-1
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
{
error
&&
<
Alert
variant
=
"
danger
"
className
=
"
text-center
"
>
{
error
}
<
/Alert>
}
{
error
&&
<
Alert
variant
=
"
danger
"
className
=
"
text-center
"
>
{
error
}
<
/Alert>
}
<
h2
className
=
"
text-center mt-5 font-weight-bold
"
>
상품등록
<
/h2
>
<
h2
className
=
"
text-center mt-5 font-weight-bold
"
>
상품등록
<
/h2
>
<
Form
className
=
"
p-5
"
onSubmit
=
{
handleSubmit
}
>
<
Form
className
=
"
p-5
"
onSubmit
=
{
handleSubmit
}
>
<
Form
.
Group
controlId
=
"
productNameform
"
>
<
Form
.
Group
controlId
=
"
productNameform
"
>
<
Form
.
Label
>
상품명
<
/Form.Label
>
<
Form
.
Label
>
상품명
<
/Form.Label
>
<
Form
.
Control
type
=
"
text
"
name
=
"
pro_name
"
placeholder
=
"
상품명
"
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
type
=
"
text
"
name
=
"
pro_name
"
placeholder
=
"
상품명
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productAmountform
"
>
<
Form
.
Group
controlId
=
"
productAmountform
"
>
<
Form
.
Label
>
재고
<
/Form.Label
>
<
Form
.
Label
>
재고
<
/Form.Label
>
<
Form
.
Control
type
=
"
text
"
name
=
"
stock
"
placeholder
=
"
숫자만 입력해주세요
"
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
type
=
"
text
"
name
=
"
stock
"
placeholder
=
"
숫자만 입력해주세요
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productPriceform
"
>
<
Form
.
Group
controlId
=
"
productPriceform
"
>
<
Form
.
Label
>
가격
<
/Form.Label
>
<
Form
.
Label
>
가격
<
/Form.Label
>
<
Form
.
Control
type
=
"
text
"
name
=
"
price
"
placeholder
=
"
숫자만 입력해주세요
"
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
type
=
"
text
"
name
=
"
price
"
placeholder
=
"
숫자만 입력해주세요
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Group
>
<
Form
.
Label
>
분류
<
/Form.Label
>
<
Form
.
Label
>
분류
<
/Form.Label
>
<
Row
>
<
Row
>
<
Col
md
=
{
4
}
>
<
Col
md
=
{
4
}
>
<
Form
.
Control
as
=
"
select
"
name
=
"
main_category
"
onChange
=
{
handleChange
}
>
<
Form
.
Control
as
=
"
select
"
name
=
"
main_category
"
onChange
=
{
handleChange
}
>
<
option
value
=
""
>
상위분류
<
/option
>
<
option
value
=
""
>
상위분류
<
/option
>
{
mainCategorys
.
map
((
main
)
=>
(
{
categorys
[
0
].
map
((
main
)
=>
(
<
option
value
=
{
main
}
>
{
main
}
<
/option
>
<
option
value
=
{
main
}
>
{
main
}
<
/option
>
))}
))}
<
/Form.Control
>
<
/Form.Control
>
<
/Col
>
<
/Col
>
<
Col
md
=
{
6
}
>
<
Col
md
=
{
6
}
>
<
Form
.
Control
as
=
"
select
"
name
=
"
sub_category
"
onChange
=
{
handleChange
}
>
<
Form
.
Control
as
=
"
select
"
name
=
"
sub_category
"
onChange
=
{
handleChange
}
>
<
option
value
=
""
>
하위분류
<
/option
>
<
option
value
=
""
>
하위분류
<
/option
>
{
subCategorys
[
categoryNum
].
map
((
sub
)
=>
(
{
categorys
[
1
][
categoryNum
].
map
((
sub
)
=>
(
<
option
value
=
{
sub
}
>
{
sub
}
<
/option
>
<
option
value
=
{
sub
}
>
{
sub
}
<
/option
>
))}
))}
<
/Form.Control
>
<
/Form.Control
>
<
/Col
>
<
/Col
>
<
Col
>
<
Col
>
<
Button
className
=
"
float-right
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
addCategory
}
>
추가
<
/Button
>
<
Button
className
=
"
float-right
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
addCategory
}
>
추가
<
/Button
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
{
list
.
map
((
element
)
=>
element
)}
{
list
.
map
((
element
)
=>
element
)}
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Group
>
<
Form
.
Label
>
사이즈
<
/Form.Label
>
<
Form
.
Label
>
사이즈
<
/Form.Label
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
Free
"
value
=
"
Free
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
Free
"
value
=
"
Free
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
XL
"
value
=
"
XL
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
XL
"
value
=
"
XL
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
L
"
value
=
"
L
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
L
"
value
=
"
L
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
M
"
value
=
"
M
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
M
"
value
=
"
M
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
S
"
value
=
"
S
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
S
"
value
=
"
S
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
XS
"
value
=
"
XS
"
onChange
=
{
handleCheckBox
}
/
>
<
Form
.
Check
type
=
"
checkbox
"
name
=
"
sizes
"
label
=
"
XS
"
value
=
"
XS
"
onChange
=
{
handleCheckBox
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Group
>
<
Form
.
Label
>
색상
<
/Form.Label
>
<
Form
.
Label
>
색상
<
/Form.Label
>
<
Row
>
<
Row
>
<
Col
md
=
{
10
}
>
<
Col
md
=
{
10
}
>
<
Form
.
Control
as
=
"
textarea
"
rows
=
{
1
}
name
=
"
colors
"
placeholder
=
"
색상
"
onChange
=
{
colorChange
}
/
>
<
Form
.
Control
as
=
"
textarea
"
rows
=
{
1
}
name
=
"
colors
"
placeholder
=
"
색상
"
onChange
=
{
colorChange
}
/
>
<
/Col
>
<
/Col
>
<
Col
>
<
Col
>
<
Button
className
=
"
float-right
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
addColor
}
>
추가
<
/Button
>
<
Button
className
=
"
float-right
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
addColor
}
>
추가
<
/Button
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
{
colorHtml
.
map
((
element
)
=>
element
)}
{
colorHtml
.
map
((
element
)
=>
element
)}
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productDescriptionform
"
>
<
Form
.
Group
controlId
=
"
productDescriptionform
"
>
<
Form
.
Label
>
상품설명
<
/Form.Label
>
<
Form
.
Label
>
상품설명
<
/Form.Label
>
<
Form
.
Control
as
=
"
textarea
"
name
=
"
description
"
rows
=
{
3
}
placeholder
=
"
상품을 설명해주세요
"
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
as
=
"
textarea
"
name
=
"
description
"
rows
=
{
3
}
placeholder
=
"
상품을 설명해주세요
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Group
>
<
Form
.
Label
>
대표이미지
<
/Form.Label
>
<
Form
.
Label
>
대표이미지
<
/Form.Label
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
main_image
"
onChange
=
{
handleChange
}
/
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
main_image
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Group
>
<
Form
.
Label
>
상세이미지
<
/Form.Label
>
<
Form
.
Label
>
상세이미지
<
/Form.Label
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
detail_image
"
onChange
=
{
handleChange
}
/
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
detail_image
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Button
className
=
"
float-right
"
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
>
등록
<
/Button
>
<
Button
className
=
"
float-right
"
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
>
등록
<
/Button
>
<
/Form
>
<
/Form
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
<
/Container
>
<
/Container
>
<
/div
>
)
)
}
}
...
...
client/src/Pages/Signup.js
View file @
064e5fe5
...
@@ -13,7 +13,7 @@ const INIT_USER = {
...
@@ -13,7 +13,7 @@ const INIT_USER = {
}
}
function
Signup
()
{
function
Signup
()
{
const
[
user
,
setUser
]
=
useState
(
true
)
const
[
user
,
setUser
]
=
useState
(
''
)
const
[
error
,
setError
]
=
useState
(
''
)
const
[
error
,
setError
]
=
useState
(
''
)
const
[
validated
,
setValidated
]
=
useState
(
false
);
const
[
validated
,
setValidated
]
=
useState
(
false
);
...
@@ -63,6 +63,7 @@ const [validated, setValidated] = useState(false);
...
@@ -63,6 +63,7 @@ const [validated, setValidated] = useState(false);
return
(
return
(
<
div
>
<
div
>
{
console
.
log
(
user
)}
<
Container
className
=
"
my-5
"
>
<
Container
className
=
"
my-5
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
md
=
{
6
}
xs
=
{
10
}
className
=
"
border
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
Col
md
=
{
6
}
xs
=
{
10
}
className
=
"
border
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
...
...
server/app.js
View file @
064e5fe5
import
express
from
'
express
'
;
import
express
from
'
express
'
;
import
fs
from
'
fs
'
;
import
fs
from
'
fs
'
;
import
connectDb
from
'
./schemas/index.js
'
import
connectDb
from
'
./schemas/index.js
'
;
import
categoryRouter
from
"
./routes/category.routes.js
"
;
import
userRouter
from
"
./routes/user.routes.js
"
;
import
userRouter
from
"
./routes/user.routes.js
"
;
import
productRouter
from
'
./routes/product.routes.js
'
;
import
productRouter
from
'
./routes/product.routes.js
'
;
import
cartRouter
from
'
./routes/cart.routes.js
'
;
import
cartRouter
from
'
./routes/cart.routes.js
'
;
...
@@ -19,13 +20,14 @@ fs.readdir('uploads', (error) => {
...
@@ -19,13 +20,14 @@ fs.readdir('uploads', (error) => {
connectDb
()
connectDb
()
const
app
=
express
();
const
app
=
express
();
app
.
use
(
express
.
json
())
app
.
use
(
cors
())
app
.
use
(
cors
())
app
.
use
(
express
.
static
(
path
.
join
(
process
.
cwd
(),
'
dist
'
)))
app
.
use
(
express
.
static
(
path
.
join
(
process
.
cwd
(),
'
dist
'
)))
// app.use(bodyParser.urlencoded({ extended: true }))
// app.use(bodyParser.urlencoded({ extended: true }))
// app.use('/', indexRouter);
// app.use('/', indexRouter);
app
.
use
(
'
/
'
,
kakaopayRoutes
)
app
.
use
(
'
/
'
,
kakaopayRoutes
)
app
.
use
(
'
/api/categorys
'
,
categoryRouter
)
app
.
use
(
'
/api/users
'
,
userRouter
)
app
.
use
(
'
/api/users
'
,
userRouter
)
app
.
use
(
'
/api/auth
'
,
authRouter
)
app
.
use
(
'
/api/auth
'
,
authRouter
)
app
.
use
(
'
/api/product
'
,
productRouter
)
app
.
use
(
'
/api/product
'
,
productRouter
)
...
...
server/controllers/category.controller.js
0 → 100644
View file @
064e5fe5
import
Category
from
"
../schemas/Category.js
"
;
const
getCategory
=
async
(
req
,
res
)
=>
{
try
{
const
category
=
await
Category
.
find
({},
{
_id
:
0
})
res
.
json
(
category
)
}
catch
(
error
)
{
console
.
log
(
error
)
res
.
status
(
500
).
send
(
'
카테고리 검색 실패
'
)
}
}
export
default
{
getCategory
}
\ No newline at end of file
server/controllers/product.controller.js
View file @
064e5fe5
...
@@ -9,8 +9,9 @@ const imageUpload = upload.fields([
...
@@ -9,8 +9,9 @@ const imageUpload = upload.fields([
])
])
const
regist
=
async
(
req
,
res
)
=>
{
const
regist
=
async
(
req
,
res
)
=>
{
console
.
log
(
"
req.body=
"
,
req
.
body
)
try
{
try
{
const
{
pro_name
,
price
,
stock
,
main_category
,
sub_category
,
description
}
=
req
.
body
const
{
pro_name
,
price
,
stock
,
main_category
,
sub_category
,
description
,
colors
,
sizes
}
=
req
.
body
const
main_img
=
req
.
files
[
'
main_image
'
][
0
]
const
main_img
=
req
.
files
[
'
main_image
'
][
0
]
const
detail_img
=
req
.
files
[
'
detail_image
'
]
const
detail_img
=
req
.
files
[
'
detail_image
'
]
const
main_imgUrl
=
main_img
.
filename
const
main_imgUrl
=
main_img
.
filename
...
@@ -19,7 +20,7 @@ const regist = async (req, res) => {
...
@@ -19,7 +20,7 @@ const regist = async (req, res) => {
detail_imgUrls
.
push
(
file
.
filename
)
detail_imgUrls
.
push
(
file
.
filename
)
})
})
const
newProduct
=
await
new
Product
({
const
newProduct
=
await
new
Product
({
pro_name
,
price
,
stock
,
main_category
,
sub_category
,
description
,
main_imgUrl
,
detail_imgUrls
pro_name
,
price
,
stock
,
main_category
,
sub_category
,
description
,
main_imgUrl
,
detail_imgUrls
,
colors
,
sizes
}).
save
()
}).
save
()
res
.
json
(
newProduct
)
res
.
json
(
newProduct
)
}
catch
(
error
)
{
}
catch
(
error
)
{
...
...
server/routes/category.routes.js
0 → 100644
View file @
064e5fe5
import
express
from
"
express
"
;
import
categoryCtrl
from
"
../controllers/category.controller.js
"
;
const
router
=
express
.
Router
()
router
.
route
(
'
/
'
)
.
get
(
categoryCtrl
.
getCategory
)
export
default
router
\ No newline at end of file
server/schemas/Category.js
0 → 100644
View file @
064e5fe5
import
mongoose
from
'
mongoose
'
const
{
Array
}
=
mongoose
.
Schema
.
Types
const
CategorysSchema
=
new
mongoose
.
Schema
({
"
DRESS
"
:
{
type
:
Array
,
required
:
true
},
"
OUTER
"
:
{
type
:
Array
,
required
:
true
},
"
TOP
"
:
{
type
:
Array
,
required
:
true
},
"
PANTS
"
:
{
type
:
Array
,
required
:
true
},
"
SKIRT
"
:
{
type
:
Array
,
required
:
true
},
"
TRAINING
"
:
{
type
:
Array
,
required
:
true
},
"
SHOES
"
:
{
type
:
Array
,
required
:
true
},
})
export
default
mongoose
.
models
.
Categorys
||
mongoose
.
model
(
'
Categorys
'
,
CategorysSchema
)
\ 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