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
25a9bb54
Commit
25a9bb54
authored
Jan 29, 2021
by
Jiwon Yoon
Browse files
Merge branch 'ourMaster' into jiwon
parents
8d8a98af
221883bb
Changes
25
Hide whitespace changes
Inline
Side-by-side
client/src/Components/CartCard.js
deleted
100644 → 0
View file @
8d8a98af
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 @
25a9bb54
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
(
<
Card
id
=
{
id
}
className
=
"
m-3
"
style
=
{{
width
:
"
18rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
{
main_img
&&
`/images/
${
main_img
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
style
=
{{
whiteSpace
:
"
nowrap
"
,
overflow
:
"
hidden
"
,
textOverflow
:
"
ellipsis
"
}}
>
{
name
}
<
/Card.Title
>
<
Card
.
Text
>
{
price
}
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
)
if
(
props
.
status
===
'
list
'
)
{
return
(
<
Card
id
=
{
props
.
id
}
className
=
"
m-3
"
style
=
{{
width
:
"
18rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
{
props
.
main_img
&&
`/images/
${
props
.
main_img
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
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
===
'
recommend
'
)
{
return
(
<
Card
id
=
{
props
.
id
}
className
=
"
mx-1
"
style
=
{{
width
:
"
10rem
"
}}
>
<
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
className
=
'
justify-content-center
'
>
<
Row
className
=
'
justify-content-center
'
>
<>
<
Col
sm
=
{
3
}
xs
=
{
5
}
className
=
'
p-1
'
><
li
>
주문번호
:
<
/li></
Col
>
<
Col
sm
=
{
8
}
xs
=
{
6
}
className
=
'
p-1
'
><
strong
>
{
e
.
_id
}
<
/strong></
Col
>
<
/
>
<
Col
sm
=
{
3
}
xs
=
{
5
}
className
=
'
p-1
'
><
li
>
결제금액
:
<
/li></
Col
>
<
Col
sm
=
{
8
}
xs
=
{
6
}
className
=
'
p-1
'
><
strong
>
{
e
.
total
}
원
<
/strong></
Col
>
<
Col
sm
=
{
3
}
xs
=
{
5
}
className
=
'
p-1
'
><
li
>
배송지
:
<
/li></
Col
>
<
Col
sm
=
{
8
}
xs
=
{
6
}
className
=
'
p-1
'
><
strong
>
{
e
.
receiverInfo
.
address
}
<
/strong> <br /
>
(
{
e
.
receiverInfo
.
address2
}
)
<
/Col
>
<
Col
sm
=
{
3
}
xs
=
{
5
}
className
=
'
p-1
'
><
li
>
주문날짜
:
<
/li></
Col
>
<
Col
sm
=
{
8
}
xs
=
{
6
}
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
\ No newline at end of file
client/src/Components/MainNav.js
View file @
25a9bb54
...
...
@@ -16,10 +16,17 @@ function MainNav() {
{
user
?
<>
<
Nav
.
Link
className
=
"
text-light
"
onClick
=
{()
=>
handleLogout
()}
>
Logout
<
/Nav.Link
>
<
Nav
.
Link
className
=
"
text-light
"
href
=
"
/account
"
>
Mypage
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/shoppingcart
"
>
<
img
alt
=
"
카트
"
src
=
"
/icon/cart.svg
"
width
=
"
30
"
height
=
"
30
"
/>
<
/Nav.Link
>
{
admin
?
''
:
(
<>
<
Nav
.
Link
className
=
"
text-light
"
href
=
"
/account
"
>
Mypage
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/shoppingcart
"
>
<
img
alt
=
"
카트
"
src
=
"
/icon/cart.svg
"
width
=
"
30
"
height
=
"
30
"
/>
<
/Nav.Link
>
<
/
>
)}
<
/
>
:
(
<>
...
...
client/src/Components/OrderCard.js
deleted
100644 → 0
View file @
8d8a98af
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>
)
}
<
Col
>
<
Row
>
<
Card
.
Text
>
주문번호
:
<
strong
>
{
e
.
_id
}
<
/strong> </
Card
.
Text
>
<
/Row
>
<
Row
>
<
Card
.
Text
>
결제금액
:
<
strong
>
{
e
.
total
}
원
<
/strong> </
Card
.
Text
>
<
/Row
>
<
Row
>
<
Card
.
Text
>
배송지
:
<
strong
>
{
e
.
receiverInfo
.
address
}
-
{
e
.
receiverInfo
.
address2
}
<
/strong> </
Card
.
Text
>
<
/Row
>
<
Row
>
<
Card
.
Text
>
주문날짜
:
<
strong
>
{
e
.
createdAt
.
substring
(
0
,
10
)}
<
/strong> </
Card
.
Text
>
<
/Row
>
<
/Col
>
<
/Card.Body
>
)
)
}
<
/Card
>
)
}
export
default
OrderCard
client/src/Components/Pagination.js
View file @
25a9bb54
...
...
@@ -7,6 +7,14 @@ function Paginations({ index, totalPages, handlePage }) {
<
Pagination
className
=
"
d-flex justify-content-center
"
>
<
style
type
=
"
text/css
"
>
{
`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.page-link, .page-link:hover {
color: #91877F;
margin: 0;
...
...
@@ -25,7 +33,7 @@ function Paginations({ index, totalPages, handlePage }) {
`
}
<
/style
>
<
Pagination
.
First
onClick
=
{()
=>
handlePage
(
1
)}
/
>
{
index
===
1
?
<
Pagination
.
Prev
onClick
=
{()
=>
handlePage
(
index
)}
/> : <Pagination.Prev onClick={
()
=>handlePage
(
index - 1
)
} /
>
}
{
index
===
1
?
<
Pagination
.
Prev
disabled
/>
:
<
Pagination
.
Prev
onClick
=
{()
=>
handlePage
(
index
-
1
)}
/>
}
{
index
===
totalPages
&&
index
>
4
?
<
Pagination
.
Item
onClick
=
{()
=>
handlePage
(
index
-
4
)}
>
{
index
-
4
}
<
/Pagination.Item> : ""
}
{
index
>
3
&&
index
>=
totalPages
-
1
?
<
Pagination
.
Item
onClick
=
{()
=>
handlePage
(
index
-
3
)}
>
{
index
-
3
}
<
/Pagination.Item> : ""
}
{
index
<
3
?
""
:
<
Pagination
.
Item
onClick
=
{()
=>
handlePage
(
index
-
2
)}
>
{
index
-
2
}
<
/Pagination.Item>
}
...
...
@@ -35,9 +43,9 @@ function Paginations({ index, totalPages, handlePage }) {
{
index
===
totalPages
?
""
:
<
Pagination
.
Item
onClick
=
{()
=>
handlePage
(
index
+
1
)}
>
{
index
+
1
}
<
/Pagination.Item>
}
{
index
>
totalPages
-
2
?
""
:
<
Pagination
.
Item
onClick
=
{()
=>
handlePage
(
index
+
2
)}
>
{
index
+
2
}
<
/Pagination.Item>
}
{
index
<
totalPages
-
3
&&
index
>=
1
?
<
Pagination
.
Item
onClick
=
{()
=>
handlePage
(
index
+
3
)}
>
{
index
+
3
}
<
/Pagination.Item> : ""
}
{
index
<
totalPages
-
4
&&
index
>=
1
?
<
Pagination
.
Item
onClick
=
{()
=>
handlePage
(
index
+
4
)}
>
{
index
+
4
}
<
/Pagination.Item> : ""
}
{
index
===
totalPages
?
<
Pagination
.
Next
onClick
=
{()
=>
handlePage
(
index
)}
/> : <Pagination.Next onClick={
()
=>handlePage
(
index + 1
)
} /
>
}
{
index
<
=
totalPages
-
3
&&
index
<
3
?
<
Pagination
.
Item
onClick
=
{()
=>
handlePage
(
index
+
3
)}
>
{
index
+
3
}
<
/Pagination.Item> : ""
}
{
index
<
=
totalPages
-
4
&&
index
<
2
?
<
Pagination
.
Item
onClick
=
{()
=>
handlePage
(
index
+
4
)}
>
{
index
+
4
}
<
/Pagination.Item> : ""
}
{
index
===
totalPages
?
<
Pagination
.
Next
disabled
/>
:
<
Pagination
.
Next
onClick
=
{()
=>
handlePage
(
index
+
1
)}
/>
}
<
Pagination
.
Last
onClick
=
{()
=>
handlePage
(
totalPages
)}
/
>
<
/Pagination
>
...
...
client/src/Components/PaymentCard.js
deleted
100644 → 0
View file @
8d8a98af
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/Components/SubNav.js
View file @
25a9bb54
...
...
@@ -28,6 +28,14 @@ function SubNav() {
<
Navbar
sticky
=
"
top
"
className
=
"
flex-nowrap
"
style
=
{{
top
:
"
56px
"
,
paddingTop
:
"
0
"
,
paddingBottom
:
"
0
"
,
backgroundColor
:
"
#fff
"
}}
>
<
style
type
=
"
text/css
"
>
{
`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.nav-link, .nav-link:hover, .nav-link:active {
color: #91877F;
}
...
...
client/src/Pages/Account.js
View file @
25a9bb54
import
React
,
{
useEffect
,
useState
}
from
'
react
'
;
import
{
Card
,
Image
,
Container
,
Row
,
Col
,
Button
,
Form
,
Modal
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
ListCard
from
'
../Components/ListCard
'
;
import
axios
from
'
axios
'
;
import
catchError
from
'
../utils/catchErrors
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
OrderCard
from
'
../Components/OrderCard
'
;
import
{
Card
,
Image
,
Container
,
Row
,
Col
,
Button
,
Form
,
Modal
}
from
'
react-bootstrap
'
;
const
INIT_ACCOUNT
=
{
name
:
""
,
...
...
@@ -21,6 +21,7 @@ function Account() {
async
function
getUsername
(
user
)
{
try
{
setError
(
''
)
const
response
=
await
axios
.
get
(
`/api/users/account/
${
user
}
`
)
setAccount
(
response
.
data
)
}
catch
(
error
)
{
...
...
@@ -63,6 +64,7 @@ function Account() {
const
formData
=
new
FormData
()
formData
.
append
(
'
avatar
'
,
account
.
avatar
[
0
])
try
{
setError
(
''
)
if
(
userId
)
{
const
response
=
await
axios
.
put
(
`/api/users/account/
${
userId
}
`
,
formData
)
window
.
location
.
reload
()
...
...
@@ -77,22 +79,26 @@ function Account() {
async
function
getOrdered
()
{
try
{
const
response
=
await
axios
.
post
(
`/api/users/addorder`
,
{
userId
:
userId
})
const
a
=
response
.
data
setOrdered
(
a
)
console
.
log
(
"
what=
"
,
response
.
data
)
setError
(
''
)
const
response
=
await
axios
.
post
(
`/api/users/addorder`
,
{
userId
:
userId
})
const
res
=
response
.
data
setOrdered
(
res
)
}
catch
(
error
)
{
catchError
(
error
,
setError
)
}
}
return
(
<
Container
className
=
"
px-3
"
>
<
style
type
=
"
text/css
"
>
{
`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
a, a:hover, a:active {
color: #91877F;
text-decoration-color: #91877F;
...
...
@@ -122,8 +128,7 @@ function Account() {
<
/Modal.Body
>
<
Modal
.
Footer
>
<
Col
className
=
"
px-0
"
>
<
Button
variant
=
"
outline-secondary
"
onClick
=
{
handleBasic
}
className
=
"
d-flex justify-content-start
"
><
small
>
기본이미지로
<
/small></
Button
>
<
Button
variant
=
"
outline-secondary
"
onClick
=
{
handleBasic
}
className
=
"
d-flex justify-content-start
"
><
small
>
기본이미지로
<
/small></
Button
>
<
/Col
>
<
Button
variant
=
"
secondary
"
onClick
=
{()
=>
setShow
(
false
)}
>
취소
<
/Button
>
<
Button
variant
=
"
primary
"
type
=
"
submit
"
onClick
=
{()
=>
setShow
(
false
)}
>
저장
<
/Button
>
...
...
@@ -180,9 +185,9 @@ function Account() {
<
/Col
>
<
/Row
>
<
/Card
>
<
Card
>
<
Order
Card
ordered
=
{
ordered
}
/
>
<
/
Card
>
<
div
className
=
'
m-2 mb-5
'
>
<
List
Card
ordered
=
{
ordered
}
status
=
{
'
order
'
}
/
>
<
/
div
>
<
/Container
>
)
}
...
...
client/src/Pages/Admin.js
View file @
25a9bb54
...
...
@@ -68,6 +68,14 @@ function Admin() {
<
Container
>
<
style
type
=
"
text/css
"
>
{
`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
...
...
@@ -81,7 +89,7 @@ function Admin() {
border-color: #91877F;
box-shadow: 0 0 0 0;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: #91877F;
border-color: #91877F;
}
...
...
client/src/Pages/Home.js
View file @
25a9bb54
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
ListCard
from
'
../Components/ListCard
'
;
import
axios
from
'
axios
'
;
...
...
@@ -20,6 +20,7 @@ function Home() {
async
function
getProductlist
()
{
try
{
setError
(
''
)
const
response
=
await
axios
.
get
(
`/api/product/getproduct`
)
setProductlist
({
bestProduct
:
response
.
data
.
bestProduct
,
newProduct
:
response
.
data
.
newProduct
})
}
catch
(
error
)
{
...
...
@@ -31,9 +32,20 @@ function Home() {
<
Container
>
<
style
type
=
"
text/css
"
>
{
`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
a, a:hover, a:active {
color: #000;
text-decoration: none;
}
`
}
<
/style
>
<
div
className
=
"
my-4
"
>
...
...
@@ -53,7 +65,7 @@ function Home() {
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
>
))}
<
/Row
>
...
...
@@ -75,7 +87,7 @@ function Home() {
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
>
))}
<
/Row
>
...
...
client/src/Pages/Payment.js
View file @
25a9bb54
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
,
Link
,
useHistory
}
from
'
react-router-dom
'
;
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
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
...
...
@@ -124,7 +124,7 @@ function Payment({ match, location }) {
setCompleteState
(
false
)
setPaymentWay
([])
}
else
{
const
a
=
(
const
bankList
=
(
<
Row
className
=
"
justify-content-md-center
"
>
<
Col
md
=
{
6
}
className
=
"
border m-5 p-5
"
>
<
Form
>
...
...
@@ -146,14 +146,12 @@ function Payment({ match, location }) {
<
/Form.Group
>
<
/Form
>
<
/Col
>
<
/Row>
)
setPaymentWay
(
a
)
setPaymentWay
(
bankList
)
}
}
async
function
kakaopay
()
{
setCompleteState
(
"
kakaopay
"
)
setPaymentWay
(
<
div
className
=
"
text-center
"
>
...
...
@@ -192,6 +190,7 @@ function Payment({ match, location }) {
}
else
{
itemNames
=
cart
[
0
].
productId
.
pro_name
}
setError
(
''
)
const
response
=
await
fetch
(
'
/api/kakaopay/test/single
'
,
{
method
:
"
POST
"
,
headers
:
{
...
...
@@ -287,7 +286,7 @@ function Payment({ match, location }) {
<
/div
>
<
div
>
<
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
className
=
"
p-5 m-3
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
...
...
@@ -304,17 +303,17 @@ function Payment({ match, location }) {
결제금액
<
span
className
=
"
float-right
"
>
{
finalPrice
+
2500
}
원
<
/span
>
<
/div
>
<
/div
>
<
div
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
결제수단
<
/h5
>
<
div
className
=
"
text-center m-3
"
>
<
Button
className
=
"
align-top m-1
"
variant
=
"
success
"
onClick
=
{
handleClick
}
style
=
{{
height
:
'
42px
'
}}
>
무통장입금
<
/Button
>
<
Button
className
=
"
align-top m-1 p-0
"
style
=
{{
borderColor
:
"
#ffeb00
"
}}
type
=
"
button
"
onClick
=
{
kakaopay
}
alt
=
"
카카오페이
"
><
img
src
=
"
icon/payment_icon_yellow_small2.png
"
/><
/Button
>
<
/div
>
{
paymentWay
}
<
/div
>
<
div
className
=
"
text-center
"
>
<
Button
type
=
"
button
"
onClick
=
{
paymentCompleted
}
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
block
>
결제완료
<
/Button
>
<
div
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
결제수단
<
/h5
>
<
div
className
=
"
text-center m-3
"
>
<
Button
className
=
"
align-top m-1
"
variant
=
"
success
"
onClick
=
{
handleClick
}
style
=
{{
height
:
'
42px
'
}}
>
무통장입금
<
/Button
>
<
Button
className
=
"
align-top m-1 p-0
"
style
=
{{
borderColor
:
"
#ffeb00
"
}}
type
=
"
button
"
onClick
=
{
kakaopay
}
alt
=
"
카카오페이
"
><
img
src
=
"
icon/payment_icon_yellow_small2.png
"
/><
/Button
>
<
/div
>
{
paymentWay
}
<
/div
>
<
div
className
=
"
text-center
"
>
<
Button
type
=
"
button
"
onClick
=
{
paymentCompleted
}
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
block
>
결제완료
<
/Button
>
<
/div
>
<
/Container
>
)
}
...
...
client/src/Pages/PaymentCompleted.js
View file @
25a9bb54
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
axios
from
'
axios
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
Card
,
Row
,
Col
,
Button
,
Alert
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Card
,
Row
,
Col
,
Button
}
from
'
react-bootstrap
'
;
function
PaymentCompleted
()
{
const
user
=
isAuthenticated
()
const
[
error
,
setError
]
=
useState
()
const
[
order
,
setOrder
]
=
useState
([])
...
...
@@ -22,7 +20,6 @@ function PaymentCompleted() {
try
{
setError
(
''
)
const
response
=
await
axios
.
get
(
`/api/order/showorder/
${
user
}
`
)
console
.
log
(
response
.
data
)
setNum
(
response
.
data
.
_id
)
setOrder
(
response
.
data
.
products
)
setTotal
(
response
.
data
.
total
)
...
...
@@ -31,6 +28,7 @@ function PaymentCompleted() {
catchErrors
(
error
,
setError
)
}
}
return
(
<
div
>
<
div
className
=
"
mx-3 my-5 text-center px-3 py-4 border
"
>
...
...
@@ -46,7 +44,6 @@ function PaymentCompleted() {
<
h3
className
=
"
text-center font-weight-bold my-3
"
>
주문내역
<
/h3
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
받는사람
정보
<
/h5
>
<
div
className
=
"
m-3
"
>
<
Row
>
<
Col
xs
=
{
4
}
className
=
"
text-right
"
>
이름
<
/Col
>
<
Col
>
{
receiverInfo
.
name
}
<
/Col
>
...
...
@@ -61,7 +58,6 @@ function PaymentCompleted() {
<
/Row
>
<
/div
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문
상품
정보
<
/h5
>
{
order
.
map
((
e
)
=>
(
<
Card
className
=
"
mx-2
"
>
<
Row
className
=
"
mx-1
"
>
...
...
@@ -92,4 +88,4 @@ function PaymentCompleted() {
)
}
export
default
PaymentCompleted
export
default
PaymentCompleted
\ No newline at end of file
client/src/Pages/Product.js
View file @
25a9bb54
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
,
useHistory
}
from
'
react-router-dom
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Redirect
,
Link
,
useHistory
}
from
'
react-router-dom
'
;
import
ListCard
from
"
../Components/ListCard
"
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
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
})
{
const
[
product
,
setProduct
]
=
useState
(
location
.
state
)
const
[
productList
,
setProductList
]
=
useState
([])
const
[
color
,
setColor
]
=
useState
(
""
)
const
[
size
,
setSize
]
=
useState
(
""
)
const
[
cart
,
setCart
]
=
useState
([])
...
...
@@ -18,23 +20,25 @@ function Product({ match, location }) {
let
history
=
useHistory
();
const
handleClose
=
()
=>
setShow
(
false
);
const
handleShow
=
()
=>
setShow
(
true
);
const
replace
=
product
.
description
.
replaceAll
(
'
{
\n\n
}
'
,
'
<br />
'
)
useEffect
(()
=>
{
getRecommend
()
},
[
product
])
useEffect
(()
=>
{
setProduct
(
location
.
state
)
},
[
location
.
state
])
useEffect
(()
=>
{
if
(
size
&&
color
)
{
pushOptions
()
// console.log(cart)
}
getRecommend
()
},
[
size
,
color
])
async
function
getRecommend
(){
try
{
const
response
=
await
axios
.
get
(
`/api/order/recommend?products=
${
product
.
id
}
`
)
// const response = await axios.post(`/api/order/recommend`,{
// productId: product.id
// })
console
.
log
(
response
.
data
)
setProductList
(
response
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
...
...
@@ -46,14 +50,13 @@ function Product({ match, location }) {
}
function
pushOptions
()
{
// console.log(cart)
const
a
=
cart
.
map
(
el
=>
{
const
rObj
=
{}
rObj
[
"
color
"
]
=
el
.
color
;
rObj
[
"
size
"
]
=
el
.
size
;
return
rObj
const
cartSet
=
cart
.
map
(
el
=>
{
const
newObj
=
{}
newObj
[
"
color
"
]
=
el
.
color
;
newObj
[
"
size
"
]
=
el
.
size
;
return
newObj
})
const
isDuplicated
=
a
.
some
(
el
=>
el
.
color
===
color
&&
el
.
size
===
size
)
const
isDuplicated
=
cartSet
.
some
(
el
=>
el
.
color
===
color
&&
el
.
size
===
size
)
if
(
isDuplicated
)
{
selected
.
sizes
=
false
selected
.
colors
=
false
...
...
@@ -68,7 +71,6 @@ function Product({ match, location }) {
setSize
(
""
)
setPrice
(
product
.
price
+
price
)
}
}
function
handleChange
(
e
)
{
...
...
@@ -85,11 +87,11 @@ function Product({ match, location }) {
function
deleteOption
(
e
)
{
e
.
preventDefault
()
let
preprice
=
0
const
asd
=
cart
.
filter
((
el
)
=>
el
.
color
!==
e
.
target
.
id
||
el
.
size
!==
e
.
target
.
name
)
asd
.
map
((
el
)
=>
{
const
list
=
cart
.
filter
((
el
)
=>
el
.
color
!==
e
.
target
.
id
||
el
.
size
!==
e
.
target
.
name
)
list
.
map
((
el
)
=>
{
preprice
=
preprice
+
el
.
count
*
product
.
price
})
setCart
(
asd
)
setCart
(
list
)
setPrice
(
Number
(
preprice
))
}
...
...
@@ -139,7 +141,6 @@ function Product({ match, location }) {
userId
:
localStorage
.
getItem
(
'
id
'
),
products
:
cart
})
console
.
log
(
response
.
data
)
history
.
push
(
"
/payment
"
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
...
...
@@ -152,18 +153,35 @@ function Product({ match, location }) {
}
}
return
(
<
div
>
{
console
.
log
(
product
)}
<
style
type
=
"
text/css
"
>
{
`
a, a:hover, a:active {
color: #000;
text-decoration: none;
}
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
.btn:hover {
background-color: #91877F;
border-color: #91877F;
}
.btn-primary:focus {
background-color: #91877F;
border-color: #91877F;
box-shadow: 0 0 0 0;
}
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: #91877F;
border-color: #91877F;
}
...
...
@@ -181,7 +199,7 @@ function Product({ match, location }) {
<
/Modal
>
<
Row
className
=
"
justify-content-center mt-5 mx-0
"
>
<
Col
sm
=
{
11
}
md
=
{
4
}
>
<
img
src
=
{
`/images/
${
product
.
main_img
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
w
idth
:
"
100%
"
}}
/
>
<
img
src
=
{
`/images/
${
product
.
main_img
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
maxW
idth
:
"
100%
"
,
height
:
'
auto
'
}}
/
>
<
/Col
>
<
Col
sm
=
{
11
}
md
=
{
4
}
className
=
"
align-middle mt-4
"
>
<
h3
className
=
"
mb-4
"
>
{
product
.
name
}
<
/h3
>
...
...
@@ -220,7 +238,7 @@ function Product({ match, location }) {
<
Col
className
=
"
text-right
"
>
{
price
}
원
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-between mx-0 my-3
"
style
=
{{
width
:
"
100%
"
}}
>
<
Button
type
=
'
button
'
name
=
"
shoppingcart
"
onClick
=
{
addCart
}
style
=
{{
width
:
"
49%
"
}}
>
장바구니
<
/Button
>
<
Button
type
=
'
button
'
name
=
"
shoppingcart
"
onClick
=
{
addCart
}
style
=
{{
width
:
"
49%
"
}}
variant
=
"
primary
"
>
장바구니
<
/Button
>
<
Button
type
=
'
button
'
name
=
"
payment
"
onClick
=
{
addCart
}
style
=
{{
width
:
"
49%
"
}}
>
구매하기
<
/Button
>
<
/Row
>
<
/Form
>
...
...
@@ -231,24 +249,22 @@ function Product({ match, location }) {
<
h3
style
=
{{
borderBottom
:
"
1px solid #91877F
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
className
=
"
p-3
"
>
설명
<
/h3
>
<
Col
className
=
'
text-center
'
style
=
{{
fontSize
:
'
1px
'
}}
>
<
div
className
=
'
p-2 text-center border
'
style
=
{{
background
:
'
#CDC5C2
'
,
width
:
'
5
0%
'
,
margin
:
'
auto
'
,
fontSize
:
'
3.5vmin
'
}}
>
<
Col
className
=
'
text-center
'
>
<
div
className
=
'
p-2 text-center border
'
style
=
{{
background
:
'
#CDC5C2
'
,
width
:
'
6
0%
'
,
margin
:
'
auto
'
,
fontSize
:
'
3.5vmin
'
}}
>
{
product
.
name
}
<
/div
>
<
Image
src
=
{
`/images/
${
product
.
main_img
}
`
}
className
=
'
d-flex justify-content-center p-4
'
style
=
{{
objectFit
:
"
contain
"
,
maxWidth
:
"
100%
"
,
margin
:
'
auto
'
}}
/
>
<
Card
style
=
{{
width
:
'
70%
'
,
margin
:
'
auto
'
}}
className
=
'
my-4
'
>
<
Image
src
=
{
`/images/
${
product
.
main_img
}
`
}
className
=
'
d-flex justify-content-center p-4
'
style
=
{{
objectFit
:
"
contain
"
,
maxWidth
:
"
100%
"
,
height
:
'
auto
'
,
margin
:
'
auto
'
}}
/
>
<
Card
style
=
{{
width
:
'
80%
'
,
margin
:
'
auto
'
}}
className
=
'
my-4
'
>
<
Card
.
Header
className
=
'
text-center
'
style
=
{{
background
:
'
#CDC5C2
'
}}
>
<
h5
className
=
'
m-0
'
style
=
{{
whiteSpace
:
'
nowrap
'
}}
>
[
Description
]
<
/h5
>
<
/Card.Header
>
<
Card
.
Body
className
=
'
text-center m-
4
'
style
=
{{
whiteSpace
:
"
pre-line
"
,
background
:
'
#F7F3F3
'
,
fontSize
:
'
1vw
'
}}
>
<
small
>
{
replace
}
<
/small
>
<
Card
.
Body
className
=
'
text-center m-
2
'
style
=
{{
whiteSpace
:
"
pre-line
"
,
background
:
'
#F7F3F3
'
,
fontSize
:
'
1
.2
vw
'
}}
>
{
product
.
description
}
<
/Card.Body
>
<
/Card
>
<
Col
className
=
'
p-5
'
>
<
div
className
=
'
border p-2
'
style
=
{{
width
:
'
60%
'
,
margin
:
'
auto
'
,
fontSize
:
'
3.5vmin
'
}}
>
[
Detail
Images
]
<
/div
>
<
Image
src
=
{
`/images/
${
product
.
detail_imgs
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
maxWidth
:
"
100%
"
,
margin
:
'
auto
'
}}
className
=
'
p-4 d-flex justify-content-center
'
/>
<
div
className
=
'
border p-2
'
style
=
{{
maxWidth
:
"
100%
"
,
height
:
'
auto
'
,
margin
:
'
auto
'
,
fontSize
:
'
3.5vmin
'
}}
>
[
Detail
Images
]
<
/div
>
<
Image
src
=
{
`/images/
${
product
.
detail_imgs
}
`
}
style
=
{{
objectFit
:
"
contain
"
,
maxWidth
:
"
100%
"
,
height
:
'
auto
'
,
margin
:
'
auto
'
}}
className
=
'
p-4 d-flex justify-content-center
'
/>
<
/Col
>
<
/Col
>
<
/Col
>
...
...
@@ -258,35 +274,24 @@ function Product({ match, location }) {
<
h6
style
=
{{
borderBottom
:
"
1px solid
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
회원님이
선호할만한
상품
추천
<
a
className
=
"
close float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
style
=
{{
fontSize
:
"
1rem
"
,
cursor
:
"
pointer
"
}}
>
X
<
/a
>
<
/h6
>
<
Row
className
=
"
justify-content-space mx-0
"
style
=
{{
flexWrap
:
"
nowrap
"
,
width
:
"
100%
"
,
overflowX
:
"
auto
"
}}
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
10rem
"
,
marginRight
:
"
1rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Card
.
Body
className
=
"
px-0
"
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
10rem
"
,
marginRight
:
"
1rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Card
.
Body
className
=
"
px-0
"
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
10rem
"
,
marginRight
:
"
1rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Card
.
Body
className
=
"
px-0
"
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
minWidth
:
"
10rem
"
,
marginRight
:
"
1rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
}}
/
>
<
Card
.
Body
className
=
"
px-0
"
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Row
className
=
"
justify-content-center mx-0
"
style
=
{{
flexWrap
:
"
nowrap
"
,
width
:
"
100%
"
,
overflowX
:
"
auto
"
}}
>
{
productList
.
map
(
pro
=>
(
<
Link
to
=
{{
pathname
:
`/product/
${
pro
.
_id
}
`
,
state
:
{
id
:
pro
.
_id
,
name
:
pro
.
pro_name
,
price
:
pro
.
price
,
colors
:
pro
.
colors
,
sizes
:
pro
.
sizes
,
description
:
pro
.
description
,
main_img
:
pro
.
main_imgUrl
,
detail_imgs
:
pro
.
detail_imgUrls
}
}}
>
<
ListCard
id
=
{
pro
.
_id
}
name
=
{
pro
.
pro_name
}
price
=
{
pro
.
price
}
main_img
=
{
pro
.
main_imgUrl
}
status
=
{
'
recommend
'
}
/
>
<
/Link
>
))}
<
/Row
>
<
/Col
>
<
/Row
>
...
...
client/src/Pages/ProductRegist.js
View file @
25a9bb54
...
...
@@ -4,7 +4,6 @@ import { Row, Col, Button, Form, Container, Alert, Spinner } from 'react-bootstr
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
function
ProductsRegist
()
{
const
INIT_PRODUCT
=
{
pro_name
:
''
,
...
...
@@ -29,13 +28,13 @@ function ProductsRegist() {
const
[
error
,
setError
]
=
useState
(
''
)
const
[
success
,
setSuccess
]
=
useState
(
false
)
const
[
checked
,
setChecked
]
=
useState
({
"
Free
"
:
false
,
"
XL
"
:
false
,
"
L
"
:
false
,
"
M
"
:
false
,
"
S
"
:
false
,
"
XS
"
:
false
})
const
[
disabled
,
setDisabled
]
=
useState
(
true
)
const
[
loading
,
setLoading
]
=
useState
(
false
)
const
selectRef
=
useRef
(
null
)
const
colorRef
=
useRef
(
null
)
useEffect
(
async
()
=>
{
try
{
setError
(
''
)
const
response
=
await
axios
.
get
(
'
/api/categories/main
'
)
const
data
=
response
.
data
[
0
]
setCategories
([
Object
.
keys
(
data
),
Object
.
values
(
data
)])
...
...
@@ -44,11 +43,6 @@ function ProductsRegist() {
}
},
[])
useEffect
(()
=>
{
const
isProduct
=
Object
.
values
(
product
).
every
(
el
=>
{
console
.
log
(
"
el=
"
,
el
);
Boolean
(
el
)
})
isProduct
?
setDisabled
(
false
)
:
setDisabled
(
true
)
},
[
product
])
function
deleteCategory
(
e
)
{
const
pdcate
=
product
.
sub_category
.
filter
((
el
)
=>
el
!==
e
.
target
.
name
)
setProduct
({
...
product
,
"
sub_category
"
:
pdcate
})
...
...
@@ -78,8 +72,6 @@ function ProductsRegist() {
}
function
deleteColor
(
e
)
{
console
.
log
(
product
.
colors
)
console
.
log
(
e
.
target
.
name
)
const
pdcolors
=
product
.
colors
.
filter
((
el
)
=>
el
!==
e
.
target
.
name
)
setProduct
({
...
product
,
"
colors
"
:
pdcolors
})
}
...
...
@@ -106,7 +98,6 @@ function ProductsRegist() {
}
}
product
[
"
sizes
"
]
=
sizes
console
.
log
(
product
)
const
formData
=
new
FormData
();
for
(
let
key
in
product
)
{
if
(
key
===
"
main_image
"
)
{
...
...
@@ -124,7 +115,6 @@ function ProductsRegist() {
setLoading
(
true
)
setError
(
''
)
const
response
=
await
axios
.
post
(
'
/api/product/regist
'
,
formData
)
console
.
log
(
response
)
setSuccess
(
true
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
...
...
@@ -140,7 +130,6 @@ function ProductsRegist() {
return
(
<
Container
>
{
console
.
log
(
product
)}
<
Row
className
=
"
justify-content-md-center
"
>
<
Col
md
=
{
8
}
className
=
"
border p-1
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
{
error
&&
<
Alert
variant
=
"
danger
"
className
=
"
text-center
"
>
{
error
}
<
/Alert>
}
...
...
client/src/Pages/ProductsList.js
View file @
25a9bb54
...
...
@@ -79,9 +79,7 @@ function ProductsList({ match }) {
}
async
function
handleSort
(
method
)
{
console
.
log
(
method
)
if
(
method
===
"
purchase
"
)
{
console
.
log
(
"
thisispurchase
"
)
productlist
.
sort
(
function
(
a
,
b
)
{
if
(
a
.
purchase
>
b
.
purchase
)
{
return
-
1
;
...
...
@@ -89,12 +87,10 @@ function ProductsList({ match }) {
if
(
a
.
purchase
<
b
.
purchase
)
{
return
1
;
}
// a must be equal to b
return
0
;
});
setSortingName
(
"
인기상품
"
)
}
else
if
(
method
===
"
newest
"
)
{
console
.
log
(
"
thisisnewest
"
)
productlist
.
sort
(
function
(
a
,
b
)
{
if
(
a
.
createdAt
>
b
.
createdAt
)
{
return
-
1
;
...
...
@@ -102,13 +98,10 @@ function ProductsList({ match }) {
if
(
a
.
createdAt
<
b
.
createdAt
)
{
return
1
;
}
// a must be equal to b
return
0
;
});
setSortingName
(
"
신상품
"
)
}
else
if
(
method
===
"
lowest
"
)
{
console
.
log
(
"
thisislowest
"
)
productlist
.
sort
(
function
(
a
,
b
)
{
if
(
a
.
price
>
b
.
price
)
{
return
1
;
...
...
@@ -116,12 +109,10 @@ function ProductsList({ match }) {
if
(
a
.
price
<
b
.
price
)
{
return
-
1
;
}
// a must be equal to b
return
0
;
});
setSortingName
(
"
낮은가격
"
)
}
else
{
console
.
log
(
"
thisispurchase
"
)
productlist
.
sort
(
function
(
a
,
b
)
{
if
(
a
.
price
>
b
.
price
)
{
return
-
1
;
...
...
@@ -129,14 +120,12 @@ function ProductsList({ match }) {
if
(
a
.
price
<
b
.
price
)
{
return
1
;
}
// a must be equal to b
return
0
;
});
setSortingName
(
"
높은가격
"
)
}
}
async
function
handleSubname
(
e
)
{
const
subname
=
e
.
target
.
name
try
{
...
...
@@ -159,6 +148,14 @@ function ProductsList({ match }) {
<
Container
>
<
style
type
=
"
text/css
"
>
{
`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
a, a:hover, a:active {
color: #000;
text-decoration: none;
...
...
@@ -168,18 +165,15 @@ function ProductsList({ match }) {
border-color: #CDC5C2;
border-radius: 0;
}
.btn:hover, .btn:focus {
.btn:hover, .btn
-primary
:focus {
background-color: #91877F;
border-color: #91877F;
box-shadow: 0 0 0 0;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: #91877F;
border-color: #91877F;
}
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0;
}
.dropdown-item {
color: #91877F;
}
...
...
@@ -194,20 +188,20 @@ function ProductsList({ match }) {
<
div
className
=
"
text-center
"
>
<
h1
style
=
{{
fontSize
:
"
5.5vmax
"
}}
className
=
"
text-center m-1 py-3
"
>
{
mainCategory
}
<
/h1
>
<
ButtonGroup
className
=
"
mb-3
"
style
=
{{
display
:
"
inline
"
}}
>
{
subCategory
.
map
(
el
=>
(
<
Button
className
=
"
m-1
"
style
=
{{
fontSize
:
"
0.8
vw
"
}}
name
=
{
el
}
onClick
=
{
handleSubname
}
>
{
el
}
<
/Button>
))
}
{
subCategory
.
map
(
el
=>
(
<
Button
className
=
"
m-1
"
style
=
{{
fontSize
:
"
1.5
vw
"
}}
name
=
{
el
}
onClick
=
{
handleSubname
}
>
{
el
}
<
/Button>
))
}
<
/ButtonGroup
>
<
/div
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-end mx-0 mt-5 mb-3
"
>
<
Form
inline
onSubmit
=
{
handleSearch
}
className
=
"
justify-content-end mx-0 my-2
"
>
<
FormControl
ref
=
{
searchref
}
type
=
"
text
"
onChange
=
{
handleChange
}
placeholder
=
"
Search
"
style
=
{{
width
:
"
1
3
rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
px-2 m
r-2
"
>
<
FormControl
ref
=
{
searchref
}
type
=
"
text
"
onChange
=
{
handleChange
}
placeholder
=
"
Search
"
style
=
{{
width
:
"
1
2
rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
px-2 m
1-1
"
>
<
img
src
=
"
/icon/search.svg
"
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
/Form
>
<
Dropdown
className
=
"
my-2
"
>
<
Dropdown
.
Toggle
className
=
"
mx-
2
"
>
{
sortingName
}
<
/Dropdown.Toggle
>
<
Dropdown
.
Toggle
className
=
"
mx-
1
"
>
{
sortingName
}
<
/Dropdown.Toggle
>
<
Dropdown
.
Menu
>
<
Dropdown
.
Item
as
=
"
button
"
onClick
=
{()
=>
handleSort
(
'
purchase
'
)}
>
인기상품
<
/Dropdown.Item
>
<
Dropdown
.
Item
as
=
"
button
"
onClick
=
{()
=>
handleSort
(
'
newest
'
)}
>
신상품
<
/Dropdown.Item
>
...
...
@@ -232,8 +226,7 @@ function ProductsList({ match }) {
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
>
))
:
(
...
...
client/src/Pages/ShoppingCart.js
View file @
25a9bb54
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
;
import
{
Button
,
Container
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
ListCard
from
'
../Components/ListCard
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
CartCard
from
'
../Components/CartCard
'
;
import
{
Button
,
Container
}
from
'
react-bootstrap
'
;
function
ShoppingCart
()
{
const
[
error
,
setError
]
=
useState
(
''
)
...
...
@@ -15,13 +15,12 @@ function ShoppingCart() {
useEffect
(()
=>
{
getCart
()
// console.log(cart)
},
[
user
])
function
plusNum
(
e
)
{
const
addCount
=
cart
.
map
((
el
)
=>
{
if
(
el
.
_id
===
e
.
target
.
name
)
{
return
{
...
el
,
count
:
el
.
count
+
1
}
return
{
...
el
,
count
:
el
.
count
+
1
}
}
else
{
return
{
...
el
}
}
...
...
@@ -31,7 +30,7 @@ function ShoppingCart() {
function
minusNum
(
e
)
{
const
addCount
=
cart
.
map
((
el
)
=>
{
if
(
el
.
_id
===
e
.
target
.
name
)
{
return
{
...
el
,
count
:
el
.
count
-
1
}
return
{
...
el
,
count
:
el
.
count
-
1
}
}
else
{
return
{
...
el
}
}
...
...
@@ -48,29 +47,26 @@ function ShoppingCart() {
return
{
...
el
}
}
})
const
asd
=
cartCheck
.
filter
((
el
)
=>
el
.
checked
===
true
)
asd
.
map
((
el
)
=>
{
price
=
el
.
count
*
el
.
productId
.
price
+
price
const
list
=
cartCheck
.
filter
((
el
)
=>
el
.
checked
===
true
)
list
.
map
((
el
)
=>
{
price
=
el
.
count
*
el
.
productId
.
price
+
price
})
setFinalPrice
(
price
)
setCart
(
cartCheck
)
setFinalCart
(
asd
)
setFinalCart
(
list
)
}
async
function
deleteCart
(
e
)
{
//장바구니 DB에서 해당 항목 삭제
// console.log(e.target.name)
try
{
setError
(
''
)
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
)
}
// console.log('카트에 담긴 항목을 삭제했습니다.')
}
async
function
getCart
()
{
...
...
@@ -78,63 +74,57 @@ function ShoppingCart() {
setError
(
''
)
const
response
=
await
axios
.
get
(
`/api/cart/showcart/
${
user
}
`
)
const
addChecked
=
response
.
data
.
map
((
el
)
=>
{
return
{
...
el
,
checked
:
false
}
return
{
...
el
,
checked
:
false
}
})
console
.
log
(
"
addchecked=
"
,
addChecked
)
setCart
(
addChecked
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
function
putCheckedCart
(){
function
putCheckedCart
()
{
try
{
setError
(
''
)
const
response
=
axios
.
post
(
`/api/cart/changecart`
,
{
userId
:
user
,
const
response
=
axios
.
post
(
`/api/cart/changecart`
,
{
userId
:
user
,
products
:
cart
})
console
.
log
(
response
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
return
(
<
div
>
{
/* {console.log(cart)} */
}
<
Container
className
=
"
justify-content-center
"
>
<
h1
className
=
"
my-5 font-weight-bold text-center
"
>
장바구니
<
/h1
>
<
div
>
<
h4
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문상품정보
<
/h4
>
{
cart
.
length
>
0
?
<
CartCard
cart
=
{
cart
}
deleteCart
=
{
deleteCart
}
minusNum
=
{
minusNum
}
plusNum
=
{
plusNum
}
checkedCart
=
{
checkedCart
}
/
>
:
<
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
=
"
text-center
"
>
<
Button
as
=
{
Link
}
to
=
{{
pathname
:
`/payment`
,
state
:
finalCart
}}
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
putCheckedCart
}
block
>
결제하기
<
/Button
>
<
Container
className
=
"
justify-content-center
"
>
<
h1
className
=
"
my-5 font-weight-bold text-center
"
>
장바구니
<
/h1
>
<
div
>
<
h4
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문상품정보
<
/h4
>
{
cart
.
length
>
0
?
<
ListCard
cart
=
{
cart
}
deleteCart
=
{
deleteCart
}
minusNum
=
{
minusNum
}
plusNum
=
{
plusNum
}
checkedCart
=
{
checkedCart
}
status
=
{
'
cart
'
}
/
>
:
<
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
>
<
/Container
>
<
/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
>
)
}
...
...
client/src/Pages/Signup.js
View file @
25a9bb54
import
React
,
{
useState
}
from
'
react
'
;
import
axios
from
'
axios
'
import
{
Form
,
Col
,
Container
,
Button
,
Row
,
Alert
}
from
'
react-bootstrap
'
import
catchErrors
from
'
../utils/catchErrors
'
import
{
Redirect
}
from
'
react-router-dom
'
;
import
axios
from
'
axios
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
Form
,
Col
,
Container
,
Button
,
Row
,
Alert
}
from
'
react-bootstrap
'
;
const
INIT_USER
=
{
name
:
''
,
...
...
@@ -33,7 +33,6 @@ function Signup() {
event
.
stopPropagation
();
}
setValidated
(
true
);
try
{
setError
(
''
)
const
response
=
await
axios
.
post
(
'
/api/users/signup
'
,
user
)
...
...
@@ -46,13 +45,11 @@ function Signup() {
function
checkPassword
(
event
)
{
const
p1
=
user
.
password
const
p2
=
user
.
password2
if
(
p1
!==
p2
)
{
event
.
preventDefault
();
event
.
stopPropagation
();
alert
(
'
비밀번호가 일치하지 않습니다.
'
)
return
false
}
else
{
return
true
}
...
...
@@ -68,14 +65,11 @@ function Signup() {
<
Row
className
=
"
justify-content-center
"
>
<
Col
md
=
{
6
}
xs
=
{
10
}
className
=
"
border
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
h2
className
=
"
text-center pt-3 m-4
"
>
Sign
Up
<
/h2
>
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
<
/Alert>
}
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
<
/Alert>
}
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
className
=
"
p-4
"
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
formBasicName
"
>
<
Form
.
Label
column
sm
=
"
4
"
for
=
'
name
'
>
이
름
<
/Form.Label
>
...
...
@@ -89,32 +83,33 @@ function Signup() {
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
이름을
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
formBasicNumber
"
>
<
Form
.
Label
column
sm
=
"
4
"
for
=
'
number
'
>
주민등록번호
<
/Form.Label
>
<
Col
sm
=
"
4
"
xs
=
'
5
'
>
<
Form
.
Control
className
=
'
pr-0
'
required
type
=
"
text
"
name
=
"
number1
"
maxlength
=
"
6
"
placeholder
=
"
생년월일
"
value
=
{
user
.
number1
}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
주민등록번호
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
strong
className
=
'
pt-2 d-flex align-items-flex-start
'
>-<
/strong
>
<
Col
md
=
"
2
"
xs
=
'
3
'
>
<
Form
.
Control
className
=
'
pr-0
'
required
type
=
"
text
"
name
=
"
number2
"
maxlength
=
"
1
"
value
=
{
user
.
number2
}
onChange
=
{
handleChange
}
/
>
<
/Col
>
<
strong
className
=
'
pt-2 d-flex align-items-flex-start
'
>*
*
*
*
*
*<
/strong
>
<
Row
style
=
{{
width
:
'
300px
'
}}
className
=
'
px-3
'
>
<
Col
sm
=
"
6
"
xs
=
'
5
'
className
=
'
pr-1
'
>
<
Form
.
Control
className
=
'
pl-2 pr-0
'
required
type
=
"
text
"
name
=
"
number1
"
maxlength
=
"
6
"
placeholder
=
"
생년월일
"
value
=
{
user
.
number1
}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
주민등록번호
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
strong
className
=
'
pt-2 d-flex align-items-flex-start
'
>-<
/strong
>
<
Col
md
=
"
2
"
xs
=
'
3
'
className
=
'
px-2
'
>
<
Form
.
Control
className
=
'
pl-2 pr-0
'
required
type
=
"
text
"
name
=
"
number2
"
maxlength
=
"
1
"
value
=
{
user
.
number2
}
onChange
=
{
handleChange
}
/
>
<
/Col
>
<
strong
className
=
'
pt-2 d-flex align-items-flex-start
'
>*
*
*
*
*
*<
/strong
>
<
/Row
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
formBasicId
"
>
<
Form
.
Label
column
sm
=
"
4
"
for
=
'
id
'
>
...
...
server/app.js
View file @
25a9bb54
...
...
@@ -24,10 +24,8 @@ const app = express();
app
.
use
(
express
.
json
())
app
.
use
(
cors
())
app
.
use
(
express
.
static
(
path
.
join
(
process
.
cwd
(),
'
dist
'
)))
// app.use(bodyParser.urlencoded({ extended: true }))
app
.
use
(
'
/images
'
,
express
.
static
(
'
uploads/
'
))
// app.use('/', indexRouter);
app
.
use
(
'
/
'
,
kakaopayRoutes
)
app
.
use
(
'
/api/categories
'
,
categoryRouter
)
app
.
use
(
'
/api/users
'
,
userRouter
)
...
...
server/controllers/category.controller.js
View file @
25a9bb54
...
...
@@ -50,4 +50,4 @@ const getsubId = async (req, res, next, ele) => {
next
()
}
export
default
{
getCategory
,
getsubId
,
getSubCategory
,
getToHome
}
export
default
{
getCategory
,
getsubId
,
getSubCategory
,
getToHome
}
\ No newline at end of file
server/controllers/kakaopay.controller.js
View file @
25a9bb54
// import { RequestHandler } from "express";
import
fetch
from
'
node-fetch
'
import
config
from
"
../config.js
"
;
...
...
@@ -30,7 +29,6 @@ const singleTest = async (req, res) => {
console
.
log
(
"
asdaf
"
)
console
.
log
(
req
.
body
)
const
item
=
req
.
body
// set data
const
data
=
[]
for
(
let
property
in
item
)
{
let
encodedKey
=
encodeURIComponent
(
property
);
...
...
@@ -38,7 +36,6 @@ const singleTest = async (req, res) => {
data
.
push
(
encodedKey
+
"
=
"
+
encodedValue
);
}
const
bodyData
=
data
.
join
(
'
&
'
)
// encode data (application/x-www-form-urlencoded)
const
response
=
await
fetch
(
'
https://kapi.kakao.com/v1/payment/ready
'
,
{
method
:
'
POST
'
,
headers
:
{
...
...
@@ -47,16 +44,9 @@ const singleTest = async (req, res) => {
},
body
:
bodyData
,
})
// console.log(response)
const
resp
=
await
response
.
json
()
console
.
log
(
resp
)
res
.
json
({
redirect_url
:
resp
.
next_redirect_pc_url
})
}
export
default
{
success
,
fail
,
cancel
,
singleTest
,
}
export
default
{
success
,
fail
,
cancel
,
singleTest
}
\ No newline at end of file
Prev
1
2
Next
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