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
07a6689c
Commit
07a6689c
authored
Jan 27, 2021
by
kusang96
Browse files
card
parent
5151510f
Changes
11
Hide whitespace changes
Inline
Side-by-side
client/src/Components/CartCard.js
deleted
100644 → 0
View file @
5151510f
import
React
from
'
react
'
import
{
Card
,
Row
,
Col
}
from
'
react-bootstrap
'
;
function
CartCard
(
props
)
{
return
(
<>
{
props
.
cart
.
map
((
e
)
=>
(
<
Card
>
<
Row
className
=
"
mx-1
"
>
<
Col
xs
=
{
2
}
sm
=
{
2
}
className
=
"
text-center my-auto
"
>
<
input
className
=
""
type
=
"
checkbox
"
name
=
{
String
(
e
.
_id
)}
onChange
=
{
props
.
checkedCart
}
/
>
<
/Col
>
<
Col
className
=
"
text-center
"
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
{
e
.
productId
.
main_imgUrl
&&
`/images/
${
e
.
productId
.
main_imgUrl
}
`
}
style
=
{{
width
:
'
20rem
'
}}
/
>
<
/Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
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
className
=
"
mb-0
"
>
가격
:
{
e
.
productId
.
price
}
원
<
/Card.Text
>
<
Card
.
Text
className
=
"
mb-0
"
>
옵션
:
{
e
.
size
}
/{e.color}</
Card
.
Text
>
<
Card
.
Text
>
수량
<
/Card.Text
>
<
div
>
<
input
type
=
"
image
"
name
=
{
String
(
e
.
_id
)}
alt
=
"
마이너스
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
className
=
"
align-middle
"
onClick
=
{
props
.
minusNum
}
/
>
<
input
type
=
"
number
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
text-center align-middle mx-1
"
placeholder
=
{
e
.
count
}
value
=
{
e
.
count
}
readOnly
><
/input
>
<
input
type
=
"
image
"
name
=
{
String
(
e
.
_id
)}
alt
=
"
플러스
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/plus-math.png
"
className
=
"
align-middle
"
onClick
=
{
props
.
plusNum
}
/
>
<
/div
>
<
/Card.Body
>
<
/Col
>
<
/Row
>
<
/Card
>
))
}
<
/
>
)
}
export
default
CartCard
client/src/Components/ListCard.js
View file @
07a6689c
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
{
Card
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Card
}
from
'
react-bootstrap
'
;
function
ListCard
(
{
id
,
name
,
price
,
main_img
}
)
{
function
ListCard
(
props
)
{
return
(
if
(
props
.
status
===
'
list
'
)
{
<
Card
id
=
{
id
}
className
=
"
m-3
"
style
=
{{
width
:
"
18rem
"
}}
>
return
(
<
Card
.
Img
variant
=
"
top
"
src
=
{
main_img
&&
`/images/
${
main_img
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
id
=
{
props
.
id
}
className
=
"
m-3
"
style
=
{{
width
:
"
18rem
"
}}
>
<
Card
.
Body
>
<
Card
.
Img
variant
=
"
top
"
src
=
{
props
.
main_img
&&
`/images/
${
props
.
main_img
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Title
style
=
{{
whiteSpace
:
"
nowrap
"
,
overflow
:
"
hidden
"
,
textOverflow
:
"
ellipsis
"
}}
>
{
name
}
<
/Card.Title
>
<
Card
.
Body
>
<
Card
.
Text
>
{
price
}
원
<
/Card.Text
>
<
Card
.
Title
style
=
{{
whiteSpace
:
"
nowrap
"
,
overflow
:
"
hidden
"
,
textOverflow
:
"
ellipsis
"
}}
>
{
props
.
name
}
<
/Card.Title
>
<
/Card.Body
>
<
Card
.
Text
>
{
props
.
price
}
원
<
/Card.Text
>
<
/Card
>
<
/Card.Body
>
)
<
/Card
>
)
}
else
if
(
props
.
status
===
'
recommend
'
)
{
return
(
<
Card
id
=
{
props
.
id
}
style
=
{{
minWidth
:
"
8rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
{
props
.
main_img
&&
`/images/
${
props
.
main_img
}
`
}
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Card
.
Body
className
=
"
px-0
"
>
<
Card
.
Title
style
=
{{
whiteSpace
:
"
nowrap
"
,
overflow
:
"
hidden
"
,
textOverflow
:
"
ellipsis
"
}}
>
{
props
.
name
}
<
/Card.Title
>
<
Card
.
Text
>
{
props
.
price
}
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
)
}
else
if
(
props
.
status
===
'
order
'
)
{
return
(
<
Card
>
<
Card
.
Title
className
=
"
font-weight-bold mt-4 text-center
"
>
주문
현황
<
/Card.Title
>
{
props
.
ordered
.
map
((
e
)
=>
(
<
Card
.
Body
className
=
'
m-1
'
>
{
e
.
products
.
length
>
1
?
<
Card
.
Header
className
=
"
font-weight-bold mb-3 text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
{
e
.
products
[
0
].
productId
.
pro_name
}
외
{
e
.
products
.
length
-
1
}
개
<
/Card.Header
>
:
(
<
Card
.
Header
className
=
"
font-weight-bold mb-3 text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
{
e
.
products
[
0
].
productId
.
pro_name
}
<
/Card.Header>
)
}
<
Card
.
Text
>
<
Col
>
<
Row
className
=
''
>
<
Col
sm
=
{
4
}
xs
=
{
4
}
className
=
'
p-1
'
>
주문번호
:
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
8
}
className
=
'
p-1
'
><
strong
>
{
e
.
_id
}
<
/strong></
Col
>
<
Col
sm
=
{
4
}
xs
=
{
4
}
className
=
'
p-1
'
>
결제금액
:
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
8
}
className
=
'
p-1
'
><
strong
>
{
e
.
total
}
원
<
/strong></
Col
>
<
Col
sm
=
{
4
}
xs
=
{
4
}
className
=
'
p-1
'
>
배송지
:
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
8
}
className
=
'
p-1
'
><
strong
>
{
e
.
receiverInfo
.
address
}
/ </
strong
><
strong
><
small
>
{
e
.
receiverInfo
.
address2
}
<
/small></
strong
><
/Col
>
<
Col
sm
=
{
4
}
xs
=
{
4
}
className
=
'
p-1
'
>
주문날짜
:
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
8
}
className
=
'
p-1
'
><
strong
>
{
e
.
createdAt
.
substring
(
0
,
10
)}
<
/strong></
Col
>
<
/Row
>
<
/Col
>
<
/Card.Text
>
<
/Card.Body
>
)
)
}
<
/Card
>
)
}
else
if
(
props
.
status
===
'
cart
'
)
{
return
(
<>
{
props
.
cart
.
map
((
e
)
=>
(
<
Card
>
<
Row
className
=
"
mx-1
"
>
<
Col
xs
=
{
2
}
sm
=
{
2
}
className
=
"
text-center my-auto
"
>
<
input
className
=
""
type
=
"
checkbox
"
name
=
{
String
(
e
.
_id
)}
onChange
=
{
props
.
checkedCart
}
/
>
<
/Col
>
<
Col
className
=
"
text-center
"
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
{
e
.
productId
.
main_imgUrl
&&
`/images/
${
e
.
productId
.
main_imgUrl
}
`
}
style
=
{{
width
:
'
20rem
'
}}
/
>
<
/Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
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
className
=
"
mb-0
"
>
가격
:
{
e
.
productId
.
price
}
원
<
/Card.Text
>
<
Card
.
Text
className
=
"
mb-0
"
>
옵션
:
{
e
.
size
}
/{e.color}</
Card
.
Text
>
<
Card
.
Text
>
수량
<
/Card.Text
>
<
div
>
<
input
type
=
"
image
"
name
=
{
String
(
e
.
_id
)}
alt
=
"
마이너스
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
className
=
"
align-middle
"
onClick
=
{
props
.
minusNum
}
/
>
<
input
type
=
"
number
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
text-center align-middle mx-1
"
placeholder
=
{
e
.
count
}
value
=
{
e
.
count
}
readOnly
><
/input
>
<
input
type
=
"
image
"
name
=
{
String
(
e
.
_id
)}
alt
=
"
플러스
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/plus-math.png
"
className
=
"
align-middle
"
onClick
=
{
props
.
plusNum
}
/
>
<
/div
>
<
/Card.Body
>
<
/Col
>
<
/Row
>
<
/Card
>
))
}
<
/
>
)
}
else
if
(
props
.
status
===
'
payment
'
)
{
return
(
<>
{
props
.
cart
.
map
((
e
)
=>
(
<
Card
>
<
Row
className
=
"
mx-1
"
>
<
Col
className
=
"
text-center
"
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
{
e
.
productId
.
main_imgUrl
&&
`/images/
${
e
.
productId
.
main_imgUrl
}
`
}
style
=
{{
width
:
'
20rem
'
}}
/
>
<
/Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
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
.
deleteOrder
}
/
>
<
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
}
/{e.color}</
Card
.
Text
>
<
Card
.
Text
>
수량
:
{
e
.
count
}
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
/Row
>
<
/Card
>
))
}
<
/
>
)
}
}
}
export
default
ListCard
export
default
ListCard
\ No newline at end of file
client/src/Components/OrderCard.js
deleted
100644 → 0
View file @
5151510f
import
React
from
'
react
'
import
{
Card
,
Col
,
Row
}
from
'
react-bootstrap
'
function
OrderCard
(
props
)
{
return
(
<
Card
>
<
Card
.
Title
className
=
"
font-weight-bold mt-4 text-center
"
>
주문
현황
<
/Card.Title
>
{
props
.
ordered
.
map
((
e
)
=>
(
<
Card
.
Body
className
=
'
m-1
'
>
{
e
.
products
.
length
>
1
?
<
Card
.
Header
className
=
"
font-weight-bold mb-3 text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
{
e
.
products
[
0
].
productId
.
pro_name
}
외
{
e
.
products
.
length
-
1
}
개
<
/Card.Header
>
:
(
<
Card
.
Header
className
=
"
font-weight-bold mb-3 text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
{
e
.
products
[
0
].
productId
.
pro_name
}
<
/Card.Header>
)
}
<
Card
.
Text
>
<
Col
>
<
Row
className
=
''
>
<
Col
sm
=
{
4
}
xs
=
{
4
}
className
=
'
p-1
'
>
주문번호
:
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
8
}
className
=
'
p-1
'
><
strong
>
{
e
.
_id
}
<
/strong></
Col
>
<
Col
sm
=
{
4
}
xs
=
{
4
}
className
=
'
p-1
'
>
결제금액
:
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
8
}
className
=
'
p-1
'
><
strong
>
{
e
.
total
}
원
<
/strong></
Col
>
<
Col
sm
=
{
4
}
xs
=
{
4
}
className
=
'
p-1
'
>
배송지
:
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
8
}
className
=
'
p-1
'
><
strong
>
{
e
.
receiverInfo
.
address
}
/ </
strong
><
strong
><
small
>
{
e
.
receiverInfo
.
address2
}
<
/small></
strong
><
/Col
>
<
Col
sm
=
{
4
}
xs
=
{
4
}
className
=
'
p-1
'
>
주문날짜
:
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
8
}
className
=
'
p-1
'
><
strong
>
{
e
.
createdAt
.
substring
(
0
,
10
)}
<
/strong></
Col
>
<
/Row
>
<
/Col
>
<
/Card.Text
>
<
/Card.Body
>
)
)
}
<
/Card
>
)
}
export
default
OrderCard
client/src/Components/PaymentCard.js
deleted
100644 → 0
View file @
5151510f
import
React
from
'
react
'
import
{
Card
,
Row
,
Col
}
from
'
react-bootstrap
'
;
function
PaymentCard
(
props
)
{
return
(
<>
{
props
.
cart
.
map
((
e
)
=>
(
<
Card
>
<
Row
className
=
"
mx-1
"
>
<
Col
className
=
"
text-center
"
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
{
e
.
productId
.
main_imgUrl
&&
`/images/
${
e
.
productId
.
main_imgUrl
}
`
}
style
=
{{
width
:
'
20rem
'
}}
/
>
<
/Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
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
.
deleteOrder
}
/
>
<
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
}
/{e.color}</
Card
.
Text
>
<
Card
.
Text
>
수량
:
{
e
.
count
}
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
/Row
>
<
/Card
>
))
}
<
/
>
)
}
export
default
PaymentCard
client/src/Pages/Account.js
View file @
07a6689c
import
React
,
{
useEffect
,
useState
}
from
'
react
'
;
import
React
,
{
useEffect
,
useState
}
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
Order
Card
from
'
../Components/
Order
Card
'
;
import
List
Card
from
'
../Components/
List
Card
'
;
import
axios
from
'
axios
'
;
import
axios
from
'
axios
'
;
import
catchError
from
'
../utils/catchErrors
'
;
import
catchError
from
'
../utils/catchErrors
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
...
@@ -179,7 +179,7 @@ function Account() {
...
@@ -179,7 +179,7 @@ function Account() {
<
/Row
>
<
/Row
>
<
/Card
>
<
/Card
>
<
div
className
=
'
m-2 mb-5
'
>
<
div
className
=
'
m-2 mb-5
'
>
<
Order
Card
ordered
=
{
ordered
}
/
>
<
List
Card
ordered
=
{
ordered
}
status
=
{
'
order
'
}
/
>
<
/div
>
<
/div
>
<
/Container
>
<
/Container
>
)
)
...
...
client/src/Pages/Home.js
View file @
07a6689c
...
@@ -54,7 +54,7 @@ function Home() {
...
@@ -54,7 +54,7 @@ function Home() {
detail_imgs
:
pro
.
detail_imgUrls
detail_imgs
:
pro
.
detail_imgUrls
}
}
}}
>
}}
>
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
/
>
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
status
=
{
'
list
'
}
/
>
<
/Link
>
<
/Link
>
))}
))}
<
/Row
>
<
/Row
>
...
@@ -76,7 +76,7 @@ function Home() {
...
@@ -76,7 +76,7 @@ function Home() {
detail_imgs
:
pro
.
detail_imgUrls
detail_imgs
:
pro
.
detail_imgUrls
}
}
}}
>
}}
>
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
/
>
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
status
=
{
'
list
'
}
/
>
<
/Link
>
<
/Link
>
))}
))}
<
/Row
>
<
/Row
>
...
...
client/src/Pages/Payment.js
View file @
07a6689c
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
,
Link
,
useHistory
}
from
'
react-router-dom
'
;
import
{
Redirect
,
Link
,
useHistory
}
from
'
react-router-dom
'
;
import
DaumPostcode
from
"
react-daum-postcode
"
;
import
DaumPostcode
from
"
react-daum-postcode
"
;
import
Paymen
tCard
from
'
../Components/
Paymen
tCard
'
;
import
Lis
tCard
from
'
../Components/
Lis
tCard
'
;
import
axios
from
'
axios
'
;
import
axios
from
'
axios
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
...
@@ -286,7 +286,7 @@ function Payment({ match, location }) {
...
@@ -286,7 +286,7 @@ function Payment({ match, location }) {
<
/div
>
<
/div
>
<
div
>
<
div
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문상품정보
<
/h5
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문상품정보
<
/h5
>
<
Paymen
tCard
cart
=
{
cart
}
deleteOrder
=
{
deleteOrder
}
/
>
<
Lis
tCard
cart
=
{
cart
}
deleteOrder
=
{
deleteOrder
}
status
=
{
'
payment
'
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
p-5 m-3
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
div
className
=
"
p-5 m-3
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
...
@@ -313,10 +313,6 @@ function Payment({ match, location }) {
...
@@ -313,10 +313,6 @@ function Payment({ match, location }) {
<
div
className
=
"
text-center
"
>
<
div
className
=
"
text-center
"
>
<
Button
type
=
"
button
"
onClick
=
{
paymentCompleted
}
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
block
>
결제완료
<
/Button
>
<
Button
type
=
"
button
"
onClick
=
{
paymentCompleted
}
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
block
>
결제완료
<
/Button
>
<
/div
>
<
/div
>
{
paymentWay
}
<
/div
>
<
div
className
=
"
text-center
"
>
<
Button
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
paymentCompleted
}
block
>
결제완료
<
/Button
>
<
/div
>
<
/div
>
<
/Container
>
<
/Container
>
)
)
...
...
client/src/Pages/Product.js
View file @
07a6689c
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Redirect
,
useHistory
}
from
'
react-router-dom
'
;
import
{
Redirect
,
Link
,
useHistory
}
from
'
react-router-dom
'
;
import
ListCard
from
"
../Components/ListCard
"
;
import
axios
from
'
axios
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
Row
,
Col
,
Form
,
Card
,
Button
,
Modal
,
Image
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Form
,
Card
,
Button
,
Modal
,
Image
}
from
'
react-bootstrap
'
;
...
@@ -7,6 +8,7 @@ import { Row, Col, Form, Card, Button, Modal, Image } from 'react-bootstrap';
...
@@ -7,6 +8,7 @@ import { Row, Col, Form, Card, Button, Modal, Image } from 'react-bootstrap';
function
Product
({
match
,
location
})
{
function
Product
({
match
,
location
})
{
const
[
product
,
setProduct
]
=
useState
(
location
.
state
)
const
[
product
,
setProduct
]
=
useState
(
location
.
state
)
const
[
productList
,
setProductList
]
=
useState
([])
const
[
color
,
setColor
]
=
useState
(
""
)
const
[
color
,
setColor
]
=
useState
(
""
)
const
[
size
,
setSize
]
=
useState
(
""
)
const
[
size
,
setSize
]
=
useState
(
""
)
const
[
cart
,
setCart
]
=
useState
([])
const
[
cart
,
setCart
]
=
useState
([])
...
@@ -19,16 +21,22 @@ function Product({ match, location }) {
...
@@ -19,16 +21,22 @@ function Product({ match, location }) {
const
handleClose
=
()
=>
setShow
(
false
);
const
handleClose
=
()
=>
setShow
(
false
);
const
handleShow
=
()
=>
setShow
(
true
);
const
handleShow
=
()
=>
setShow
(
true
);
useEffect
(()
=>
{
recommend
()
},
[])
useEffect
(()
=>
{
useEffect
(()
=>
{
if
(
size
&&
color
)
{
if
(
size
&&
color
)
{
pushOptions
()
pushOptions
()
}
}
recommend
()
},
[
size
,
color
])
},
[
size
,
color
])
async
function
recommend
(){
async
function
recommend
(){
try
{
try
{
const
response
=
await
axios
.
post
(
'
/api/order/recommend
'
)
console
.
log
(
"
pro=
"
,
product
.
id
)
const
response
=
await
axios
.
post
(
'
/api/order/recommend
'
,
{
productId
:
product
.
id
})
console
.
log
(
"
recommend res=
"
,
response
.
data
)
setProductList
(
response
.
data
)
}
catch
(
error
)
{
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
catchErrors
(
error
,
setError
)
}
}
...
@@ -257,34 +265,30 @@ function Product({ match, location }) {
...
@@ -257,34 +265,30 @@ function Product({ match, location }) {
<
a
className
=
"
close float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
style
=
{{
fontSize
:
"
1rem
"
,
cursor
:
"
pointer
"
}}
>
X
<
/a
>
<
a
className
=
"
close float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
style
=
{{
fontSize
:
"
1rem
"
,
cursor
:
"
pointer
"
}}
>
X
<
/a
>
<
/h6
>
<
/h6
>
<
Row
className
=
"
justify-content-evenly mx-0
"
style
=
{{
flexWrap
:
"
nowrap
"
,
width
:
"
100%
"
,
overflowX
:
"
auto
"
}}
>
<
Row
className
=
"
justify-content-evenly mx-0
"
style
=
{{
flexWrap
:
"
nowrap
"
,
width
:
"
100%
"
,
overflowX
:
"
auto
"
}}
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
8rem
"
}}
>
{
productList
.
map
(
pro
=>
(
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Link
to
=
{{
<
Card
.
Body
className
=
"
px-0
"
>
pathname
:
`/product/
${
pro
.
_id
}
`
,
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
state
:
{
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
id
:
pro
.
_id
,
<
/Card.Body
>
name
:
pro
.
pro_name
,
<
/Col
>
price
:
pro
.
price
,
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
8rem
"
}}
>
colors
:
pro
.
colors
,
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
sizes
:
pro
.
sizes
,
<
Card
.
Body
className
=
"
px-0
"
>
description
:
pro
.
description
,
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
main_img
:
pro
.
main_imgUrl
,
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
detail_imgs
:
pro
.
detail_imgUrls
<
/Card.Body
>
}
<
/Col
>
}}
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
8rem
"
}}
>
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
status
=
{
'
recommend
'
}
/
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
/Link
>
<
Card
.
Body
className
=
"
px-0
"
>
))}
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
{
/* <Col as={Card} style={{ minWidth: "8rem" }}>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
8rem
"
}}
>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Card.Body>
<
/Col
>
</Col>
*/
}
<
/Row
>
<
/Row
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
...
...
client/src/Pages/ProductsList.js
View file @
07a6689c
...
@@ -218,8 +218,7 @@ function ProductsList({ match }) {
...
@@ -218,8 +218,7 @@ function ProductsList({ match }) {
detail_imgs
:
pro
.
detail_imgUrls
detail_imgs
:
pro
.
detail_imgUrls
}
}
}}
>
}}
>
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
status
=
{
'
list
'
}
/
>
/
>
<
/Link
>
<
/Link
>
))
))
:
(
:
(
...
...
client/src/Pages/ShoppingCart.js
View file @
07a6689c
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
Car
tCard
from
'
../Components/
Car
tCard
'
;
import
Lis
tCard
from
'
../Components/
Lis
tCard
'
;
import
axios
from
'
axios
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
...
@@ -95,38 +95,36 @@ function ShoppingCart() {
...
@@ -95,38 +95,36 @@ function ShoppingCart() {
}
}
return
(
return
(
<
div
>
<
Container
className
=
"
justify-content-center
"
>
<
Container
className
=
"
justify-content-center
"
>
<
h1
className
=
"
my-5 font-weight-bold text-center
"
>
장바구니
<
/h1
>
<
h1
className
=
"
my-5 font-weight-bold text-center
"
>
장바구니
<
/h1
>
<
div
>
<
div
>
<
h4
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문상품정보
<
/h4
>
<
h4
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문상품정보
<
/h4
>
{
cart
.
length
>
0
{
cart
.
length
>
0
?
<
ListCard
cart
=
{
cart
}
deleteCart
=
{
deleteCart
}
minusNum
=
{
minusNum
}
plusNum
=
{
plusNum
}
checkedCart
=
{
checkedCart
}
status
=
{
'
cart
'
}
/
>
?
<
CartCard
cart
=
{
cart
}
deleteCart
=
{
deleteCart
}
minusNum
=
{
minusNum
}
plusNum
=
{
plusNum
}
checkedCart
=
{
checkedCart
}
/
>
:
<
div
className
=
"
text-center my-5
"
>
장바구니에
담긴
상품이
없습니다
.
<
/div>
}
:
<
div
className
=
"
text-center my-5
"
>
장바구니에
담긴
상품이
없습니다
.
<
/div>
}
<
/div
>
<
div
className
=
"
p-5 m-3
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
<
li
>
<
span
className
=
"
text-secondary
"
>
총
상품금액
<
/span
>
<
span
className
=
"
text-secondary float-right
"
>
{
finalPrice
}
원
<
/span
>
<
/li
>
<
li
>
<
span
className
=
"
text-secondary
"
>
배송비
<
/span
>
<
span
className
=
"
text-secondary float-right
"
>
2500
원
<
/span
>
<
/li
>
<
/ul
>
<
div
className
=
"
my-1 pt-2 border-top font-weight-bold
"
>
결제금액
<
span
className
=
"
float-right
"
>
{
finalPrice
+
2500
}
원
<
/span
>
<
/div
>
<
/div
>
<
div
className
=
"
p-5 m-3
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
/div
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
<
div
className
=
"
text-center
"
>
<
li
>
<
Button
as
=
{
Link
}
to
=
{{
<
span
className
=
"
text-secondary
"
>
총
상품금액
<
/span
>
pathname
:
`/payment`
,
<
span
className
=
"
text-secondary float-right
"
>
{
finalPrice
}
원
<
/span
>
state
:
finalCart
<
/li
>
}}
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
putCheckedCart
}
block
>
결제하기
<
/Button
>
<
li
>
<
/div
>
<
span
className
=
"
text-secondary
"
>
배송비
<
/span
>
<
/Container
>
<
span
className
=
"
text-secondary float-right
"
>
2500
원
<
/span
>
<
/li
>
<
/ul
>
<
div
className
=
"
my-1 pt-2 border-top font-weight-bold
"
>
결제금액
<
span
className
=
"
float-right
"
>
{
finalPrice
+
2500
}
원
<
/span
>
<
/div
>
<
/div
>
<
div
className
=
"
text-center
"
>
<
Button
as
=
{
Link
}
to
=
{{
pathname
:
`/payment`
,
state
:
finalCart
}}
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
putCheckedCart
}
block
>
결제하기
<
/Button
>
<
/div
>
<
/Container
>
<
/div
>
)
)
}
}
...
...
server/controllers/order.controller.js
View file @
07a6689c
import
mongoose
from
'
mongoose
'
;
import
Order
from
"
../schemas/Order.js
"
;
import
Order
from
"
../schemas/Order.js
"
;
import
User
from
"
../schemas/User.js
"
;
import
User
from
"
../schemas/User.js
"
;
...
@@ -49,26 +50,30 @@ const orderById = async (req, res, next, id) => {
...
@@ -49,26 +50,30 @@ const orderById = async (req, res, next, id) => {
}
}
}
}
const
recommendPro
=
async
(
req
,
res
)
=>
{
const
recommendPro
=
async
(
req
,
res
)
=>
{
const
{
productId
}
=
req
.
body
console
.
log
(
productId
)
try
{
try
{
const
recommend
=
await
Order
.
aggregate
([
const
recommend
=
await
Order
.
aggregate
([
{
$match
:
{
'
products.productId
'
:
{
$ne
:
[
"
$productId[0]
"
,
mongoose
.
Types
.
ObjectId
(
productId
)]
}
}
},
{
"
$unwind
"
:
"
$products
"
},
{
"
$unwind
"
:
"
$products
"
},
// {
// $match:{'products.productId':'600e2fcc8afbb038487cc8fa'}
// },
{
{
$group
:
$group
:
{
{
productId
:
"
$products.productId
"
,
_id
:
'
$products.productId
'
,
total
:
{
$sum
:
1
}
num_total
:{
$sum
:
1
}
}
}
}
}
])
])
console
.
log
(
recommend
)
const
sorting
=
recommend
.
filter
({})
console
.
log
(
'
recommend=
'
,
recommend
)
res
.
send
(
'
dddkfdskfsa fsk
'
)
}
catch
(
error
)
{
}
catch
(
error
)
{
console
.
log
(
error
)
console
.
log
(
'
error in order
'
,
error
)
res
.
status
(
500
).
send
(
'
추천 실패
'
)
}
}
}
}
export
default
{
addorder
,
showorder
,
orderById
,
Ordered
,
recommendPro
}
export
default
{
addorder
,
showorder
,
orderById
,
Ordered
,
recommendPro
}
\ No newline at end of file
\ 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