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
8258442f
Commit
8258442f
authored
Jan 17, 2021
by
Jiwon Yoon
Browse files
product랑 shoppingCart 수정
parent
7bca069c
Changes
7
Hide whitespace changes
Inline
Side-by-side
client/src/Components/CartCard.js
View file @
8258442f
...
...
@@ -15,10 +15,10 @@ function CartCard(props) {
<
/Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
input
type
=
"
image
"
name
=
{
String
(
e
.
productId
.
_id
)}
alt
=
"
삭제버튼
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right
"
onClick
=
{
props
.
deleteCart
}
/
>
<
input
type
=
"
image
"
name
=
{
String
(
e
.
_id
)}
alt
=
"
삭제버튼
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right
"
onClick
=
{
props
.
deleteCart
}
/
>
<
Card
.
Title
className
=
"
font-weight-bold mt-3
"
>
{
e
.
productId
.
pro_name
}
<
/Card.Title
>
<
Card
.
Text
>
가격
:
{
e
.
productId
.
price
}
<
/Card.Text
>
<
Card
.
Text
>
옵션
:
{
e
.
size
s
}
/{e.color
s
}</
Card
.
Text
>
<
Card
.
Text
>
옵션
:
{
e
.
size
}
/{e.color}</
Card
.
Text
>
<
Card
.
Text
>
수량
<
/Card.Text
>
<
div
>
<
input
type
=
"
image
"
alt
=
"
마이너스
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
className
=
"
align-middle
"
onClick
=
{
props
.
minusNum
}
/
>
...
...
client/src/Pages/Product.js
View file @
8258442f
import
axios
from
'
axios
'
;
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Row
,
Col
,
Form
,
Card
,
Button
}
from
'
react-bootstrap
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
const
preCart
=
[]
function
Product
({
match
,
location
})
{
const
[
product
,
setProduct
]
=
useState
(
location
.
state
)
const
[
cart
,
setCart
]
=
useState
(
location
.
state
)
const
[
color
,
setColor
]
=
useState
(
""
)
const
[
size
,
setSize
]
=
useState
(
""
)
const
[
cart
,
setCart
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
''
)
const
[
selected
,
setSelected
]
=
useState
({
sizes
:
false
,
colors
:
false
})
const
[
count
,
setCount
]
=
useState
(
1
)
const
[
price
,
setPrice
]
=
useState
(
0
)
useEffect
(()
=>
{
if
(
s
elected
.
sizes
===
true
&&
selected
.
colors
===
true
)
{
if
(
s
ize
&&
color
)
{
pushOptions
()
console
.
log
(
preC
art
)
console
.
log
(
c
art
)
}
},
[
cart
])
},
[
size
,
color
])
function
handleClick
(
e
)
{
...
...
@@ -26,79 +29,74 @@ function Product({ match, location }) {
}
function
pushOptions
()
{
pre
Cart
.
push
(
cart
)
set
Cart
([...
cart
,
{
color
,
size
,
productId
:
product
.
id
}]
)
selected
.
sizes
=
false
selected
.
colors
=
false
setPrice
(
product
.
price
+
price
)
setColor
(
""
)
setSize
(
""
)
setPrice
(
product
.
price
+
price
)
}
function
handleChange
(
e
)
{
const
{
name
,
value
}
=
e
.
target
if
(
e
.
target
.
name
===
"
sizes
"
)
{
setCart
({
...
cart
,
[
name
]:
value
})
if
(
name
===
"
sizes
"
)
{
// setPreCart({ ...preCart, [name]: value })
setSize
(
value
)
selected
.
sizes
=
true
}
else
if
(
e
.
target
.
name
===
"
colors
"
)
{
setCart
({
...
cart
,
[
name
]:
value
})
}
else
if
(
name
===
"
colors
"
)
{
// setPreCart({ ...preCart, [name]: value })
setColor
(
value
)
selected
.
colors
=
true
}
// setCart({ ...cart, [name]: value })
// handleCreate()
}
function
listDelete
(
e
)
{
function
deleteOption
(
e
)
{
e
.
preventDefault
()
const
parent
=
e
.
target
.
parentNode
parent
.
remove
(
)
const
asd
=
cart
.
filter
((
el
)
=>
el
.
color
!==
e
.
target
.
id
||
el
.
size
!==
e
.
target
.
name
)
setCart
(
asd
)
}
function
handleCreate
()
{
// if (product !== undefined) {
// if (product.colors !== "" && product.sizes !== "") {
// cart.push(
// <div className="d-flex justify-content-between my-2" >
// <p>{product.color} {product.size} </p>
// <input name="count" type="number" min="0" max="10" style="width: 40px" onChange={handleChange} />
// <p style="margin-bottom: 0px">{product.price}</p>
// </div>
// )
// const list = document.getElementById('list')
// list.style.borderBottom = "1px solid"
// const shopping = document.createElement('div')
// shopping.className = "d-flex justify-content-between my-2"
// shopping.innerHTML = `${product.color} / ${product.size}
// <input type="number" min="0" max="10" value="1" style="width: 40px" />
// <p style="margin-bottom: 0px">14,000원</p>`
// const deleteA = document.createElement('a')
// deleteA.innerText = 'X'
// deleteA.addEventListener('click', listDelete)
// shopping.appendChild(deleteA)
// list.appendChild(shopping)
// }
// }
function
handleCount
(
e
)
{
e
.
preventDefault
()
// const asd = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name)
const
asd
=
cart
.
map
((
el
)
=>
{
if
(
el
.
color
!==
e
.
target
.
id
||
el
.
size
!==
e
.
target
.
name
){
return
{
el
}
}
else
{
return
{...
el
,
count
:
e
.
target
.
value
}
}
})
// const index = product["sub_category"].findIndex((item)=>{return item === e.target.name})
// product["sub_category"].splice(index, 1)
setCart
(
asd
)
setCount
(
e
.
value
)
}
async
function
addCart
()
{
// preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
try
{
setError
(
''
)
const
response
=
await
axios
.
put
(
'
/api/cart/addcart
'
,
{
userId
:
localStorage
.
getItem
(
'
loginStatus
'
),
productId
:
"
a8f4d63ead77717f940a2b27deb707a6
"
,
products
:
preCart
})
console
.
log
(
response
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
console
.
log
(
cart
)
if
(
localStorage
.
getItem
(
'
id
'
))
{
// preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
try
{
setError
(
''
)
const
response
=
await
axios
.
put
(
'
/api/cart/addcart
'
,
{
userId
:
localStorage
.
getItem
(
'
id
'
),
// productId: product.id,
products
:
cart
})
console
.
log
(
response
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
else
{
alert
(
"
로그인을 해주세요.
"
)
return
<
Redirect
to
=
'
/login
'
/>
}
}
// useEffect(() => {
// handleCreate()
// }, [product])
return
(
<
div
>
{
console
.
log
(
"
match=
"
,
match
.
params
,
"
location=
"
,
location
.
state
,
"
product=
"
,
product
)}
{
/*
{console.log("match=",
match.params, "location=",
location.state, "product=",
product)}
*/
}
<
style
type
=
"
text/css
"
>
{
`
.btn {
...
...
@@ -122,29 +120,37 @@ function Product({ match, location }) {
<
Form
style
=
{{
borderBottom
:
"
1px solid
"
}}
>
<
Form
.
Group
style
=
{{
borderBottom
:
"
1px solid
"
,
paddingBottom
:
"
2rem
"
}}
>
<
Form
.
Label
>
색상
<
/Form.Label
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
colors
"
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
colors
"
value
=
{
color
}
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
option
>
옵션선택
<
/option
>
{
product
.
colors
.
map
((
e
)
=>
(
<
option
>
{
e
}
<
/option
>
))}
<
/Form.Control
>
<
Form
.
Label
>
사이즈
<
/Form.Label
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
sizes
"
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
sizes
"
value
=
{
size
}
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
option
>
옵션선택
<
/option
>
{
product
.
sizes
.
map
((
e
)
=>
(
<
option
>
{
e
}
<
/option
>
))}
<
/Form.Control
>
<
/Form.Group
>
{
preCart
.
map
((
e
)
=>
(
<
div
>
{
e
.
colors
}
/{e.sizes}</
div
>
{
cart
.
map
((
e
)
=>
(
<
div
>
<
span
>
{
e
.
color
}
/{e.size}</
span
>
<
input
onClick
=
{
deleteOption
}
id
=
{
e
.
color
}
name
=
{
e
.
size
}
type
=
"
image
"
alt
=
"
삭제버튼
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right align-middle
"
/>
<
span
>
{
e
.
price
}
원
<
/span
>
<
span
className
=
"
float-right mx-2
"
>
<
input
type
=
'
number
'
id
=
{
e
.
color
}
name
=
{
e
.
size
}
onChange
=
{
handleCount
}
value
=
{
count
}
style
=
{{
width
:
'
3rem
'
}}
className
=
"
text-center
"
/>
<
/span
>
<
/div
>
))}
<
Row
className
=
"
justify-content-between mx-0 my-3
"
style
=
{{
width
:
"
100%
"
}}
>
<
Col
>
총
금액
<
/Col
>
<
Col
className
=
"
text-right
"
>
{
price
}
원
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-between mx-0 my-3
"
style
=
{{
width
:
"
100%
"
}}
>
<
Button
onClick
=
{
addCart
}
style
=
{{
width
:
"
49%
"
}}
>
장바구니
<
/Button
>
<
Button
type
=
'
button
'
onClick
=
{
addCart
}
style
=
{{
width
:
"
49%
"
}}
>
장바구니
<
/Button
>
<
Button
style
=
{{
width
:
"
49%
"
}}
>
구매하기
<
/Button
>
<
/Row
>
<
/Form
>
...
...
client/src/Pages/ProductRegist.js
View file @
8258442f
...
...
@@ -120,15 +120,22 @@ function ProductsRegist() {
}
}
product
[
"
sizes
"
]
=
sizes
console
.
log
(
product
)
const
formData
=
new
FormData
();
for
(
let
key
in
product
)
{
if
(
key
===
"
main_image
"
||
key
===
"
detail_image
"
)
{
console
.
log
(
product
[
key
][
0
])
//
console.log(product[key][0])
formData
.
append
(
key
,
product
[
key
][
0
])
}
else
{
}
else
if
(
key
===
"
sizes
"
||
key
===
"
colors
"
){
for
(
let
i
=
0
;
i
<
product
[
key
].
length
;
i
++
){
formData
.
append
([
key
],
product
[
key
][
i
])
}
}
else
{
formData
.
append
(
key
,
product
[
key
])
}
}
// console.log(formData)
try
{
const
response
=
await
axios
.
post
(
'
/api/product/regist
'
,
formData
)
console
.
log
(
response
)
...
...
@@ -199,7 +206,7 @@ function ProductsRegist() {
<
Form
.
Label
>
색상
<
/Form.Label
>
<
Row
>
<
Col
md
=
{
10
}
>
<
Form
.
Control
as
=
"
textarea
"
rows
=
{
1
}
name
=
"
colors
"
value
=
{
color
[
"
colors
"
]}
placeholder
=
"
색상
"
onChange
=
{
handleColor
}
/
>
<
Form
.
Control
as
=
"
textarea
"
rows
=
{
1
}
name
=
"
colors
"
placeholder
=
"
색상
"
onChange
=
{
handleColor
}
/
>
<
/Col
>
<
Col
>
<
Button
className
=
"
float-right
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
addColor
}
>
추가
<
/Button
>
...
...
client/src/Pages/ShoppingCart.js
View file @
8258442f
...
...
@@ -33,8 +33,11 @@ function ShoppingCart() {
//장바구니 DB에서 해당 항목 삭제
console
.
log
(
e
.
target
.
name
)
try
{
const
response
=
await
axios
.
post
(
'
/api/cart/deletecart
'
,
{
cartId
:
e
.
target
.
name
})
const
response
=
await
axios
.
post
(
'
/api/cart/deletecart
'
,
{
userId
:
user
,
cartId
:
e
.
target
.
name
})
console
.
log
(
response
.
data
)
setCart
(
response
.
data
.
products
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
...
...
server/controllers/cart.controller.js
View file @
8258442f
...
...
@@ -6,7 +6,7 @@ const addcart = async (req, res) => {
const
cart
=
await
Cart
.
findOne
({
userId
:
userId
})
await
Cart
.
updateOne
(
{
_id
:
cart
.
_id
},
{
$
set
:
{
products
:
products
}}
{
$
push
:
{
products
:
products
}}
)
res
.
status
(
200
).
send
(
'
카트에 저장되었습니다.
'
)
}
catch
(
error
)
{
...
...
@@ -30,10 +30,18 @@ const showcart = async (req, res) => {
const
deletecart
=
async
(
req
,
res
)
=>
{
console
.
log
(
req
.
body
)
const
{
cartId
}
=
req
.
body
const
{
userId
,
cartId
}
=
req
.
body
try
{
await
Cart
.
deleteOne
({
_id
:
cartId
})
res
.
send
(
"
삭제완료
"
)
const
cart
=
await
Cart
.
findOneAndUpdate
(
{
userId
:
userId
},
{
$pull
:
{
products
:
{
_id
:
cartId
}
}
},
{
new
:
true
}
).
populate
({
path
:
'
products.productId
'
,
model
:
'
Product
'
})
// res.send("삭제완료")
res
.
json
(
cart
)
}
catch
(
error
)
{
console
.
log
(
error
)
res
.
status
(
500
).
send
(
'
해당 카트를 삭제하지 못했습니다.
'
)
...
...
server/schemas/Cart.js
View file @
8258442f
...
...
@@ -17,10 +17,10 @@ const CartSchema = new mongoose.Schema({
type
:
ObjectId
,
ref
:
'
Product
'
},
size
s
:
{
size
:
{
type
:
String
},
color
s
:
{
color
:
{
type
:
String
}
}
...
...
server/schemas/Product.js
View file @
8258442f
import
mongoose
from
'
mongoose
'
const
{
String
,
Number
}
=
mongoose
.
Schema
.
Types
const
{
String
,
Array
,
Number
}
=
mongoose
.
Schema
.
Types
const
ProductSchema
=
new
mongoose
.
Schema
({
pro_name
:
{
...
...
@@ -33,7 +33,7 @@ const ProductSchema = new mongoose.Schema({
required
:
true
,
},
sub_category
:
{
type
:
[
String
]
,
type
:
Array
,
required
:
true
,
},
description
:
{
...
...
@@ -45,7 +45,7 @@ const ProductSchema = new mongoose.Schema({
required
:
true
},
detail_imgUrls
:
{
type
:
[
String
]
type
:
Array
}
},
{
timestamps
:
true
...
...
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