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
7a918c31
Commit
7a918c31
authored
Jan 06, 2021
by
박상호
🎼
Browse files
1-6
parents
9c17ddca
3ba7cf83
Changes
33
Hide whitespace changes
Inline
Side-by-side
.env
View file @
7a918c31
BROWSER=none
BROWSER=none
PORT=4000
PORT=4000
MONGO_URI=mongodb://localhost/
MONGO_URI=mongodb://localhost/shopping-mall
\ No newline at end of file
\ No newline at end of file
client/.gitignore
View file @
7a918c31
...
@@ -24,5 +24,6 @@ yarn-error.log*
...
@@ -24,5 +24,6 @@ yarn-error.log*
package-lock.json
package-lock.json
.eslintcache
.eslintcache
debug.log
.yarn.lock
.yarn.lock
client/package.json
View file @
7a918c31
...
@@ -6,6 +6,7 @@
...
@@ -6,6 +6,7 @@
"@testing-library/jest-dom"
:
"^5.11.6"
,
"@testing-library/jest-dom"
:
"^5.11.6"
,
"@testing-library/react"
:
"^11.2.2"
,
"@testing-library/react"
:
"^11.2.2"
,
"@testing-library/user-event"
:
"^12.6.0"
,
"@testing-library/user-event"
:
"^12.6.0"
,
"axios"
:
"^0.21.1"
,
"bootstrap"
:
"^4.5.3"
,
"bootstrap"
:
"^4.5.3"
,
"react"
:
"^17.0.1"
,
"react"
:
"^17.0.1"
,
"react-bootstrap"
:
"^1.4.0"
,
"react-bootstrap"
:
"^1.4.0"
,
...
@@ -38,5 +39,6 @@
...
@@ -38,5 +39,6 @@
"last 1 firefox version"
,
"last 1 firefox version"
,
"last 1 safari version"
"last 1 safari version"
]
]
}
},
"proxy"
:
"http://localhost:3001"
}
}
client/public/img/payment_icon_yellow_medium.png
0 → 100644
View file @
7a918c31
1.79 KB
client/public/img/payment_icon_yellow_small.png
0 → 100644
View file @
7a918c31
1.49 KB
client/src/Components/Card.js
0 → 100644
View file @
7a918c31
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Card
}
from
'
react-bootstrap
'
;
function
Card
()
{
return
(
)
}
export
default
Card
\ No newline at end of file
client/src/Components/MainNav.js
View file @
7a918c31
...
@@ -7,7 +7,7 @@ import option from '../option.svg';
...
@@ -7,7 +7,7 @@ import option from '../option.svg';
function
MainNav
()
{
function
MainNav
()
{
function
handleClick
()
{
function
handleClick
()
{
alert
(
'
로그아웃이 완료되었습니다.
'
)
alert
(
'
로그아웃이 완료되었습니다.
'
)
window
.
location
.
href
=
"
/
"
window
.
location
.
href
=
"
/
home
"
}
}
return
(
return
(
...
...
client/src/Components/SubNav.js
View file @
7a918c31
...
@@ -22,7 +22,7 @@ function SubNav() {
...
@@ -22,7 +22,7 @@ function SubNav() {
}
}
return
(
return
(
<
Navbar
sticky
=
"
top
"
className
=
"
flex-nowrap
"
style
=
{{
top
:
"
62px
"
,
paddingTop
:
"
0
"
,
paddingBottom
:
"
0
"
,
backgroundColor
:
"
#fff
"
}}
>
<
Navbar
sticky
=
"
top
"
className
=
"
flex-nowrap
"
style
=
{{
top
:
"
62px
"
,
paddingTop
:
"
0
"
,
paddingBottom
:
"
0
"
,
backgroundColor
:
"
#fff
"
,
overflowX
:
"
auto
"
}}
>
<
style
type
=
"
text/css
"
>
<
style
type
=
"
text/css
"
>
{
`
{
`
.nav-link, .nav-link:hover, .nav-link:active {
.nav-link, .nav-link:hover, .nav-link:active {
...
...
client/src/Pages/Account.js
0 → 100644
View file @
7a918c31
import
React
from
'
react
'
import
MainNav
from
'
../Components/MainNav
'
import
SubNav
from
'
../Components/SubNav
'
function
Account
()
{
return
(
<
div
>
<
MainNav
/>
<
SubNav
/>
<
h5
>
마이페이지
<
/h5
>
<
/div
>
)
}
export
default
Account
client/src/Pages/Admin.js
View file @
7a918c31
...
@@ -3,13 +3,17 @@ import MainNav from '../Components/MainNav';
...
@@ -3,13 +3,17 @@ import MainNav from '../Components/MainNav';
import
SubNav
from
'
../Components/SubNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
search
from
'
../search.svg
'
;
import
search
from
'
../search.svg
'
;
import
{
Row
,
Col
,
Form
,
FormControl
,
Button
,
Card
}
from
'
react-bootstrap
'
;
import
{
Row
,
Form
,
FormControl
,
Button
,
Card
,
Container
}
from
'
react-bootstrap
'
;
function
Admin
()
{
function
Admin
()
{
function
handleClick
(
e
)
{
function
handleClick
(
e
)
{
const
card
=
e
.
target
.
parentNode
.
parentNode
const
card
=
e
.
target
.
parentNode
.
parentNode
console
.
log
(
card
)
alert
(
'
해당 상품을 성공적으로 삭제하였습니다.
'
)
alert
(
'
해당 상품을 성공적으로 삭제하였습니다.
'
)
card
.
remove
()
}
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
}
}
return
(
return
(
...
@@ -29,95 +33,95 @@ function Admin() {
...
@@ -29,95 +33,95 @@ function Admin() {
<
/style
>
<
/style
>
<
MainNav
/>
<
MainNav
/>
<
SubNav
/>
<
SubNav
/>
<
Row
className
=
"
justify-content-end mt-5 mr-3 mb-5
"
>
<
Container
>
<
Col
as
=
{
Form
}
inline
className
=
"
justify-content-end
"
>
<
Row
as
=
{
Form
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end
mx-0 my-5
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
className
=
"
mr-1
"
/>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
px-2
"
>
<
Button
type
=
"
submit
"
className
=
"
px-2
"
>
<
img
src
=
{
search
}
width
=
"
20
"
height
=
"
20
"
/>
<
img
src
=
{
search
}
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
/Button
>
<
/Col
>
<
Button
sm
=
{
2
}
xs
=
{
6
}
type
=
"
button
"
href
=
"
/regist
"
className
=
"
ml-1
"
>
상품
등록
<
/Button
>
<
Col
sm
=
{
2
}
xs
=
{
3
}
as
=
{
Button
}
type
=
"
button
"
href
=
"
/regist
"
>
상품
등록
<
/Col
>
<
/Row
>
<
/Row
>
<
Row
className
=
"
justify-content-start m-5
"
>
<
Row
className
=
"
justify-content-start m-5
"
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
my-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
>
케이시앵글부츠
(
SH
)
<
/Card.Title
>
<
Card
.
Title
>
케이시앵글부츠
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
<
Card
.
Text
>
재고
:
8
<
br
/>
재고
:
8
<
br
/>
구매자
수
:
10
구매자
수
:
10
<
/Card.Text
>
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
>
메리제인플랫
(
SH
)
<
/Card.Title
>
<
Card
.
Title
>
메리제인플랫
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
<
Card
.
Text
>
재고
:
20
<
br
/>
재고
:
20
<
br
/>
구매자
수
:
60
구매자
수
:
60
<
/Card.Text
>
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
>
솔티드스니커즈
(
SH
)
<
/Card.Title
>
<
Card
.
Title
>
솔티드스니커즈
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
<
Card
.
Text
>
재고
:
34
<
br
/>
재고
:
34
<
br
/>
구매자
수
:
5
구매자
수
:
5
<
/Card.Text
>
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
>
버켄슬리퍼
(
SH
)
<
/Card.Title
>
<
Card
.
Title
>
버켄슬리퍼
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
<
Card
.
Text
>
재고
:
50
<
br
/>
재고
:
50
<
br
/>
구매자
수
:
18
구매자
수
:
18
<
/Card.Text
>
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
>
크레센도
하이힐펌프스
<
/Card.Title
>
<
Card
.
Title
>
크레센도
하이힐펌프스
<
/Card.Title
>
<
Card
.
Text
>
<
Card
.
Text
>
재고
:
35
<
br
/>
재고
:
35
<
br
/>
구매자
수
:
70
구매자
수
:
70
<
/Card.Text
>
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
>
어텀솔져1cm
스웨이드로퍼
<
/Card.Title
>
<
Card
.
Title
>
어텀솔져1cm
스웨이드로퍼
<
/Card.Title
>
<
Card
.
Text
>
<
Card
.
Text
>
재고
:
40
<
br
/>
재고
:
40
<
br
/>
구매자
수
:
30
구매자
수
:
30
<
/Card.Text
>
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
m
y
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
className
=
"
m
t
-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
>
포웰3
.
5
cm
스니커즈
<
/Card.Title
>
<
Card
.
Title
>
포웰3
.
5
cm
스니커즈
<
/Card.Title
>
<
Card
.
Text
>
<
Card
.
Text
>
재고
:
15
<
br
/>
재고
:
15
<
br
/>
구매자
수
:
50
구매자
수
:
50
<
/Card.Text
>
<
/Card.Text
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
Button
className
=
"
float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
>
삭제
<
/Button
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
/Row
>
<
/Row
>
<
Pagination
/>
<
Pagination
/>
<
/Container
>
<
/div
>
<
/div
>
)
)
...
...
client/src/Pages/Home.js
View file @
7a918c31
...
@@ -5,51 +5,50 @@ import { Card, Container, Row } from 'react-bootstrap';
...
@@ -5,51 +5,50 @@ import { Card, Container, Row } from 'react-bootstrap';
function
Home
()
{
function
Home
()
{
return
(
return
(
<
div
>
<
div
>
<
MainNav
/>
<
MainNav
/>
<
SubNav
/>
<
SubNav
/>
<
Container
>
<
Container
className
=
"
my-5
"
>
<
div
className
=
"
my-
3
"
>
<
div
className
=
"
my-
4
"
>
<
h
3
><
u
>
Best
<
/u></
h
3
>
<
h
2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
5rem
"
,
marginBottom
:
"
2rem
"
}}
><
u
>
Best
<
/u></
h
2
>
<
Row
className
=
"
justify-content-center
"
>
<
Row
className
=
"
justify-content-center
mx-0
"
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
...
@@ -58,45 +57,45 @@ function Home() {
...
@@ -58,45 +57,45 @@ function Home() {
<
/Card
>
<
/Card
>
<
/Row
>
<
/Row
>
<
/div
>
<
/div
>
<
div
className
=
"
my-
3
"
>
<
div
className
=
"
my-
4
"
>
<
h
3
><
u
>
New
Arrival
<
/u></
h
3
>
<
h
2
style
=
{{
marginRight
:
"
5rem
"
,
marginLeft
:
"
5rem
"
,
marginBottom
:
"
2rem
"
,
marginTop
:
"
2rem
"
}}
><
u
>
New
Arrival
<
/u></
h
2
>
<
Row
className
=
"
justify-content-center
"
>
<
Row
className
=
"
justify-content-center
mx-0
"
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
/Card.Body
>
<
/Card.Body
>
<
/Card
>
<
/Card
>
<
Card
className
=
"
mx-1
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
className
=
"
mx-1
my-2
"
style
=
{{
width
:
'
18rem
'
}}
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
/>
<
Card
.
Body
>
<
Card
.
Body
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold
"
>
제품명
<
/Card.Title
>
...
...
client/src/Pages/Login.js
View file @
7a918c31
...
@@ -11,7 +11,7 @@ function Login() {
...
@@ -11,7 +11,7 @@ function Login() {
const
handleSubmit
=
(
e
)
=>
{
const
handleSubmit
=
(
e
)
=>
{
const
form
=
e
.
currentTarget
;
const
form
=
e
.
currentTarget
;
console
.
log
(
form
)
console
.
log
(
form
)
if
(
form
.
checkValidity
()
===
false
)
{
if
(
form
.
checkValidity
()
===
false
)
{
//checkValidity 는 입력 요소에 유효한 데이터가 포함되어 있는지 확인
e
.
preventDefault
();
e
.
preventDefault
();
e
.
stopPropagation
();
e
.
stopPropagation
();
}
}
...
...
client/src/Pages/Payment.js
View file @
7a918c31
...
@@ -2,7 +2,8 @@ import React, { useState, useEffect, useRef } from 'react';
...
@@ -2,7 +2,8 @@ import React, { useState, useEffect, useRef } from 'react';
import
MainNav
from
'
../Components/MainNav
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
DaumPostcode
from
"
react-daum-postcode
"
;
import
DaumPostcode
from
"
react-daum-postcode
"
;
import
{
Container
,
Card
,
Row
,
Col
,
Button
,
Form
}
from
'
react-bootstrap
'
;
import
{
Container
,
Card
,
Row
,
Col
,
Button
,
Form
,
FormGroup
}
from
'
react-bootstrap
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
function
Payment
()
{
function
Payment
()
{
...
@@ -11,6 +12,9 @@ function Payment() {
...
@@ -11,6 +12,9 @@ function Payment() {
const
[
isZoneCode
,
setIsZoneCode
]
=
useState
();
const
[
isZoneCode
,
setIsZoneCode
]
=
useState
();
const
[
isPostOpen
,
setIsPostOpen
]
=
useState
();
const
[
isPostOpen
,
setIsPostOpen
]
=
useState
();
const
[
post
,
setPost
]
=
useState
([])
const
[
post
,
setPost
]
=
useState
([])
const
[
redirect
,
setRedirect
]
=
useState
(
null
)
const
[
address
,
setAddress
]
=
useState
(
""
)
const
[
num
,
setNum
]
=
useState
(
0
)
function
postClick
()
{
function
postClick
()
{
if
(
post
.
length
!==
0
)
{
if
(
post
.
length
!==
0
)
{
...
@@ -19,20 +23,20 @@ function Payment() {
...
@@ -19,20 +23,20 @@ function Payment() {
else
{
else
{
setPost
(
setPost
(
<
div
>
<
div
>
<
DaumPostcode
style
=
{
postCodeStyle
}
onComplete
=
{
handleComplete
}
/
>
<
DaumPostcode
style
=
{
postCodeStyle
}
onComplete
=
{
handleComplete
}
autoClose
=
{
true
}
/
>
<
/div
>
<
/div
>
)
)
}
}
}
}
const
handleComplete
=
(
data
)
=>
{
const
handleComplete
=
(
data
)
=>
{
let
fullAddress
=
data
.
address
;
let
fullAddress
=
data
.
address
;
let
extraAddress
=
""
;
let
extraAddress
=
""
;
console
.
log
(
data
)
if
(
data
.
addressType
===
"
R
"
)
{
if
(
data
.
addressType
===
"
R
"
)
{
if
(
data
.
bname
!==
""
)
{
if
(
data
.
bname
!==
""
)
{
extraAddress
+=
data
.
bname
;
extraAddress
+=
data
.
bname
;
console
.
log
(
extraAddress
)
}
}
if
(
data
.
buildingName
!==
""
)
{
if
(
data
.
buildingName
!==
""
)
{
extraAddress
+=
extraAddress
+=
...
@@ -40,46 +44,49 @@ function Payment() {
...
@@ -40,46 +44,49 @@ function Payment() {
}
}
fullAddress
+=
extraAddress
!==
""
?
` (
${
extraAddress
}
)`
:
""
;
fullAddress
+=
extraAddress
!==
""
?
` (
${
extraAddress
}
)`
:
""
;
}
}
setIsZoneCode
(
data
.
zonecode
);
setAddress
({
full
:
fullAddress
,
zone
:
data
.
zonecode
});
setIsAddress
(
fullAddress
);
setIsPostOpen
(
false
);
console
.
log
(
fullAddress
);
};
}
const
postCodeStyle
=
{
const
postCodeStyle
=
{
display
:
"
block
"
,
//
display: "block",
position
:
"
absolute
"
,
position
:
"
absolute
"
,
// top: "50%",
width
:
"
400px
"
,
width
:
"
400px
"
,
height
:
"
500px
"
,
height
:
"
500px
"
,
padding
:
"
7px
"
,
padding
:
"
7px
"
,
zIndex
:
"
1000
"
};
};
function
handleClick
()
{
function
handleClick
()
{
if
(
paymentWay
.
length
!==
0
)
{
if
(
paymentWay
.
length
!==
0
)
{
setPaymentWay
([])
setPaymentWay
([])
}
}
else
{
else
{
const
a
=
(
const
a
=
(
<
div
>
<
Row
className
=
"
justify-content-md-center
"
>
<
Form
>
<
Col
md
=
{
6
}
className
=
"
border m-5 p-5
"
>
<
Form
.
Group
controlId
=
"
exampleForm.ControlSelect1
"
>
<
Form
>
<
Form
.
Label
>
입금은행
<
/Form.Label
>
<
Form
.
Group
controlId
=
"
exampleForm.ControlSelect1
"
>
<
Form
.
Control
as
=
"
select
"
placeholder
=
"
입금은행을 선택하세요.
"
>
<
Form
.
Label
>
입금은행
<
/Form.Label
>
<
option
>
농협
/
352
-
0559
-
2528
-
83
/
김수빈
<
/option
>
<
Form
.
Control
as
=
"
select
"
placeholder
=
"
입금은행을 선택하세요.
"
>
<
option
>
우리은행
/
0000
-
000
-
000000
/
이재연
<
/option
>
<
option
>
농협
/
352
-
0559
-
2528
-
83
/
김수빈
<
/option
>
<
option
>
국민은행
/
111111
-
11
-
111111
/
윤대기
<
/option
>
<
option
>
우리은행
/
0000
-
000
-
000000
/
이재연
<
/option
>
<
/Form.Control
>
<
option
>
국민은행
/
111111
-
11
-
111111
/
윤대기
<
/option
>
<
/Form.Group
>
<
/Form.Control
>
<
Form
.
Group
controlId
=
"
formName
"
>
<
/Form.Group
>
<
Form
.
Label
>
입금자
<
/Form.Label
>
<
Form
.
Group
controlId
=
"
formName
"
>
<
Form
.
Control
type
=
"
email
"
placeholder
=
"
윤지원
"
/>
<
Form
.
Label
>
입금자
<
/Form.Label
>
<
/Form.Group
>
<
Form
.
Control
type
=
"
email
"
placeholder
=
"
윤지원
"
/>
<
Form
.
Group
controlId
=
"
formDay
"
>
<
/Form.Group
>
<
Form
.
Label
>
입금예정일
<
/Form.Label
>
<
Form
.
Group
controlId
=
"
formDay
"
>
<
Form
.
Control
type
=
"
date
"
/>
<
Form
.
Label
>
입금예정일
<
/Form.Label
>
<
/Form.Group
>
<
Form
.
Control
type
=
"
date
"
/>
<
/Form
>
<
/Form.Group
>
<
/div>
)
<
/Form
>
<
/Col
>
<
/Row>
)
setPaymentWay
(
a
)
setPaymentWay
(
a
)
}
}
}
}
...
@@ -90,6 +97,54 @@ function Payment() {
...
@@ -90,6 +97,54 @@ function Payment() {
}
}
}
}
async
function
kakaopay
()
{
const
response
=
await
fetch
(
'
/api/kakaopay/test/single
'
,
{
method
:
"
POST
"
,
headers
:
{
'
Content-type
'
:
'
application/json
'
},
body
:
JSON
.
stringify
({
cid
:
'
TC0ONETIME
'
,
partner_order_id
:
'
partner_order_id
'
,
partner_user_id
:
'
partner_user_id
'
,
item_name
:
'
앙고라 반목 폴라 베이직 모헤어 니트 (T)
'
,
quantity
:
1
,
total_amount
:
22000
,
vat_amount
:
200
,
tax_free_amount
:
0
,
approval_url
:
'
http://localhost:3000/kakaopay/success
'
,
fail_url
:
'
http://localhost:3000/kakaopay/fail
'
,
cancel_url
:
'
http://localhost:3000/kakaopay/cancel
'
,
})
})
const
data
=
await
response
.
json
()
console
.
log
(
data
)
window
.
location
.
href
=
data
.
redirect_url
// setRedirect(data.redirect_url)
}
function
plusNum
()
{
setNum
(
num
+
1
)
}
function
minusNum
()
{
if
(
num
===
0
)
{
setNum
(
0
)
}
else
{
setNum
(
num
-
1
)
}
}
function
deleteCart
()
{
//장바구니 DB에서 해당 항목 삭제
console
.
log
(
'
카트에 담긴 항목을 삭제했습니다.
'
)
}
if
(
redirect
)
{
console
.
log
(
redirect
)
return
<
Redirect
to
=
{
'
/kakao
'
}
/
>
}
return
(
return
(
<
div
>
<
div
>
<
MainNav
/>
<
MainNav
/>
...
@@ -98,55 +153,84 @@ function Payment() {
...
@@ -98,55 +153,84 @@ function Payment() {
<
h3
className
=
"
my-5 font-weight-bold text-center
"
>
주문
/
결제
<
/h3
>
<
h3
className
=
"
my-5 font-weight-bold text-center
"
>
주문
/
결제
<
/h3
>
<
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
>
<
Form
>
<
Row
className
=
"
justify-content-md-center
"
>
<
Form
.
Group
controlId
=
"
formBasicName
"
>
<
Col
md
=
{
4
}
>
<
Form
.
Label
>
이름
<
/Form.Label
>
<
Form
>
<
Form
.
Control
type
=
"
text
"
placeholder
=
"
윤지원
"
/>
<
Form
.
Group
controlId
=
"
formBasicName
"
>
<
/Form.Group
>
<
Form
.
Label
>
이름
<
/Form.Label
>
<
Form
.
Group
controlId
=
"
formBasicEmail
"
>
<
Form
.
Control
type
=
"
text
"
placeholder
=
"
윤지원
"
/>
<
Form
.
Label
>
이메일
<
/Form.Label
>
<
/Form.Group
>
<
Form
.
Control
type
=
"
email
"
placeholder
=
"
jiwon5393@naver.com
"
/>
<
Form
.
Group
controlId
=
"
formBasicEmail
"
>
<
/Form.Group
>
<
Form
.
Label
>
이메일
<
/Form.Label
>
<
Form
.
Group
controlId
=
"
formBasicTel
"
>
<
Form
.
Control
type
=
"
email
"
placeholder
=
"
jiwon5393@naver.com
"
/>
<
Form
.
Label
>
휴대전화
<
/Form.Label
>
<
/Form.Group
>
<
Form
.
Control
type
=
"
tel
"
placeholder
=
"
010-0000-0000
"
/>
<
Form
.
Group
controlId
=
"
formBasicTel
"
>
<
/Form.Group
>
<
Form
.
Label
>
휴대전화
<
/Form.Label
>
<
/Form
>
<
Form
.
Control
type
=
"
tel
"
placeholder
=
"
010-0000-0000
"
/>
<
/Form.Group
>
<
/Form
>
<
/Col
>
<
/Row
>
<
/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
>
<
Row
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
md
=
{
8
}
>
<
Col
>
<
Form
>
<
Button
className
=
"
my-3
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
postClick
}
>
우편번호
<
/Button
>
<
Form
.
Group
>
<
Form
.
Label
>
이름
<
/Form.Label
>
<
Form
.
Control
><
/Form.Control
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicAdd
"
>
<
Form
.
Label
>
주소
<
/Form.Label
>
<
Form
.
Row
>
<
Col
xs
=
{
4
}
sm
=
{
4
}
>
<
Form
.
Control
type
=
"
text
"
id
=
"
add
"
value
=
{
address
.
zone
}
disabled
=
{(
address
.
zone
==
null
)
?
false
:
true
}
placeholder
=
"
우편번호
"
required
><
/Form.Control
>
<
/Col
>
<
Col
>
<
Button
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
className
=
"
mx-1
"
onClick
=
{
postClick
}
>
우편번호
<
/Button
>
{
post
}
<
/Col
>
<
/Form.Row
>
<
Form
.
Row
>
<
Col
>
<
Form
.
Control
type
=
"
text
"
id
=
"
add1
"
value
=
{
address
.
full
}
disabled
=
{(
address
.
zone
==
null
)
?
false
:
true
}
placeholder
=
"
주소
"
required
><
/Form.Control
>
<
Form
.
Control
type
=
"
text
"
id
=
"
add2
"
placeholder
=
"
상세주소
"
required
><
/Form.Control
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
상세
주소를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
휴대전화
<
/Form.Label
>
<
Form
.
Control
><
/Form.Control
>
<
/Form.Group
>
<
/Form
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
{
post
}
<
/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
>
<
Card
>
<
Card
>
<
Row
>
<
Row
className
=
"
mx-1
"
>
<
Col
className
=
"
text-center align-self-center
"
>
<
Col
xs
=
{
2
}
sm
=
{
2
}
className
=
"
text-center my-auto
"
>
<
input
className
=
""
type
=
"
checkbox
"
id
=
"
exampleCheck1
"
><
/input
>
<
input
className
=
""
type
=
"
checkbox
"
id
=
"
exampleCheck1
"
/>
<
/Col
>
<
/Col
>
<
Col
>
<
Col
className
=
"
text-center
"
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
style
=
{{
width
:
'
20rem
'
}}
/
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
style
=
{{
width
:
'
20rem
'
}}
/
>
<
/Col
>
<
/Col
>
<
Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
Card
.
Body
>
<
i
mg
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right
"
/>
<
i
nput
type
=
"
image
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right
"
onClick
=
{
deleteCart
}
/
>
<
Card
.
Title
className
=
"
font-weight-bold mt-3
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold mt-3
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
옵션
<
/Card.Text
>
<
Card
.
Text
>
옵션
<
/Card.Text
>
<
div
className
=
"
align-items-center
"
>
<
Card
.
Text
>
수량
<
/Card.Text
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
/>
<
div
>
<
input
type
=
"
text
"
placeholder
=
"
1
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
text-center align-middle mx-1
"
readOnly
><
/input
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
className
=
"
align-middle
"
onClick
=
{
minusNum
}
/
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/plus-math.png
"
/>
<
input
type
=
"
text
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
text-center align-middle mx-1
"
placeholder
=
"
1
"
value
=
{
num
}
readOnly
><
/input
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/plus-math.png
"
className
=
"
align-middle
"
onClick
=
{
plusNum
}
/
>
<
/div
>
<
/div
>
<
/Card.Body
>
<
/Card.Body
>
<
/Col
>
<
/Col
>
...
@@ -172,12 +256,14 @@ function Payment() {
...
@@ -172,12 +256,14 @@ function Payment() {
<
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
>
<
div
className
=
"
text-center
"
>
<
div
className
=
"
text-center
mt-5
"
>
<
Button
variant
=
"
success
"
onClick
=
{
handleClick
}
>
무통장입금
<
/Button
>
<
Button
variant
=
"
success
"
className
=
"
align-top
"
onClick
=
{
handleClick
}
>
무통장입금
<
/Button
>
<
Button
variant
=
"
warning
"
style
=
{{
color
:
'
#ffffff
'
}}
onClick
=
{
handleClick2
}
>
카카오페이
<
/Button
>
<
input
type
=
"
image
"
src
=
"
img/payment_icon_yellow_small.png
"
onClick
=
{
kakaopay
}
/
>
<
/div
>
<
/div
>
{
paymentWay
}
{
paymentWay
}
<
/div
>
<
div
className
=
"
text-center
"
>
<
Button
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
href
=
"
/account
"
block
>
결제완료
<
/Button
>
<
/div
>
<
/div
>
<
/Container
>
<
/Container
>
<
/div
>
<
/div
>
...
...
client/src/Pages/Product.js
0 → 100644
View file @
7a918c31
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
{
Row
,
Col
,
Form
,
Card
,
Button
}
from
'
react-bootstrap
'
;
function
Product
()
{
const
[
select
,
setSelect
]
=
useState
({
color
:
""
,
size
:
""
})
const
[
cart
,
setCart
]
=
useState
()
function
handleClick
(
e
)
{
const
box
=
e
.
target
.
parentNode
.
parentNode
box
.
style
.
display
=
"
none
"
}
function
handleChange
(
e
)
{
const
{
name
,
value
}
=
e
.
target
setSelect
({
...
select
,
[
name
]:
value
})
}
function
listDelete
(
e
)
{
e
.
preventDefault
()
const
parent
=
e
.
target
.
parentNode
parent
.
remove
()
}
function
handleCreate
()
{
console
.
log
(
"
실행
"
,
"
cart=
"
,
cart
)
if
(
cart
!==
undefined
)
{
if
(
cart
.
color
!==
""
)
{
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
=
`
${
cart
.
color
}
/
${
cart
.
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
)
}
}
}
useEffect
(()
=>
{
if
(
Object
.
keys
(
select
).
length
==
2
)
{
setCart
({...
select
})
setSelect
({})
}
},
[
select
])
useEffect
(()
=>
{
handleCreate
()
},
[
cart
])
return
(
<
div
>
<
style
type
=
"
text/css
"
>
{
`
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
background-color: #91877F;
border-color: #91877F;
}
`
}
<
/style
>
<
MainNav
/>
<
SubNav
/>
<
Row
className
=
"
justify-content-center mt-5 mx-0
"
>
<
Col
sm
=
{
11
}
md
=
{
4
}
>
<
img
src
=
"
https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
100%
"
}}
/
>
<
/Col
>
<
Col
sm
=
{
11
}
md
=
{
4
}
className
=
"
align-middle mt-4
"
>
<
h3
className
=
"
mb-4
"
>
sop682
리본끈셋원피스
<
/h3
>
<
h5
className
=
"
mb-4
"
>
가격
:
14
,
000
원
<
/h5
>
<
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
=
"
color
"
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
option
>
옵션선택
<
/option
>
<
option
>
브릭레드
(
스트랩포함
)
<
/option
>
<
option
>
베이지
(
스트랩포함
)
<
/option
>
<
option
>
블랙
(
스트랩포함
)
<
/option
>
<
/Form.Control
>
<
Form
.
Label
>
사이즈
<
/Form.Label
>
<
Form
.
Control
as
=
"
select
"
className
=
"
mb-2
"
name
=
"
size
"
defaultValue
=
"
옵션 선택
"
onChange
=
{
handleChange
}
>
<
option
>
옵션선택
<
/option
>
<
option
>
M
<
/option
>
<
option
>
L
<
/option
>
<
option
>
XL
<
/option
>
<
option
>
FREE
<
/option
>
<
/Form.Control
>
<
/Form.Group
>
<
div
id
=
"
list
"
><
/div
>
<
Row
className
=
"
justify-content-between mx-0 my-3
"
style
=
{{
width
:
"
100%
"
}}
>
<
Col
>
총
금액
<
/Col
>
<
Col
className
=
"
text-right
"
>
14
,
000
원
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-between mx-0 my-3
"
style
=
{{
width
:
"
100%
"
}}
>
<
Button
style
=
{{
width
:
"
49%
"
}}
>
장바구니
<
/Button
>
<
Button
style
=
{{
width
:
"
49%
"
}}
>
구매하기
<
/Button
>
<
/Row
>
<
/Form
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-center mt-5 mx-0
"
>
<
Col
sm
=
{
11
}
md
=
{
8
}
>
<
h3
style
=
{{
borderBottom
:
"
1px solid #91877F
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
설명
<
/h3
>
<
div
><
/div
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-center mx-0 pt-3 px-2
"
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
0
"
,
width
:
"
100%
"
,
backgroundColor
:
"
#fff
"
}}
>
<
Col
sm
=
{
12
}
md
=
{
9
}
>
<
h6
style
=
{{
borderBottom
:
"
1px solid
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
회원님이
선호할만한
상품
추천
<
a
className
=
"
close float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
style
=
{{
fontSize
:
"
1rem
"
}}
>
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
>
<
/Col
>
<
/Row
>
<
/div
>
)
}
export
default
Product
\ No newline at end of file
client/src/Pages/Products.js
deleted
100644 → 0
View file @
9c17ddca
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
{
Row
,
Col
,
Form
,
Card
}
from
'
react-bootstrap
'
;
function
Products
()
{
function
handleClick
(
e
)
{
const
box
=
e
.
target
.
parentNode
.
parentNode
box
.
style
.
display
=
"
none
"
}
return
(
<
div
>
{
/* <style type="text/css">
{`
.close {
color:
}
`}
</style> */
}
<
MainNav
/>
<
SubNav
/>
<
Row
className
=
"
justify-content-center mt-5
"
>
<
Col
md
=
{
4
}
>
<
img
src
=
"
https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
100%
"
}}
/
>
<
/Col
>
<
Col
md
=
{
4
}
className
=
"
align-middle
"
>
<
Form
>
<
Form
.
Group
>
<
Form
.
Label
>
옵션
<
/Form.Label
>
<
Form
.
Control
as
=
"
select
"
defaultValue
=
"
옵션 선택
"
>
<
option
>
옵션
선택
<
/option
>
<
option
>
브릭레드
(
스트랩포함
)
<
/option
>
<
option
>
베이지
(
스트랩포함
)
<
/option
>
<
option
>
블랙
(
스트랩포함
)
<
/option
>
<
/Form.Control
>
<
/Form.Group
>
<
/Form
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
justify-content-center mt-5
"
>
<
Col
md
=
{
8
}
>
<
h3
style
=
{{
borderBottom
:
"
1px solid #91877F
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
설명
<
/h3
>
<
div
><
/div
>
<
/Col
>
<
/Row
>
<
div
className
=
"
mx-5 pt-3
"
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
0
"
,
backgroundColor
:
"
#fff
"
}}
>
<
h6
style
=
{{
borderBottom
:
"
1px solid
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
회원님이
선호할만한
상품
추천
<
a
className
=
"
close float-right
"
onClick
=
{(
e
)
=>
handleClick
(
e
)}
style
=
{{
fontSize
:
"
1rem
"
}}
>
X
<
/a
>
<
/h6
>
<
Row
className
=
"
justify-content-space
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
100%
"
}}
>
<
Col
as
=
{
Card
}
style
=
{{
width
:
"
16rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
width
:
"
16rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
width
:
"
16rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
Col
as
=
{
Card
}
style
=
{{
width
:
"
16rem
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
width
:
"
10rem
"
,
height
:
"
10rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
클로타탄원피스
<
/Card.Title
>
<
Card
.
Text
>
구매자
수
:
30
<
/Card.Text
>
<
/Card.Body
>
<
/Col
>
<
/Row
>
<
/div
>
<
/div
>
)
}
export
default
Products
\ No newline at end of file
client/src/Pages/ProductsList.js
View file @
7a918c31
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
Products
from
'
./Products
'
;
import
Pagination
from
'
../Components/Pagination
'
;
import
search
from
'
../search.svg
'
;
import
{
Container
,
Row
,
Form
,
FormControl
,
Button
,
Card
}
from
'
react-bootstrap
'
;
function
ProductsList
()
{
function
ProductsList
()
{
const
[
sub
,
setSub
]
=
useState
([
'
PADDED JACKET
'
,
'
JACKET
'
,
'
JUMPER
'
,
'
COAT
'
,
'
FLEECE
'
,
'
CARDIGAN / VEST
'
])
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
}
return
(
return
(
<
div
>
<
div
>
<
style
type
=
"
text/css
"
>
{
`
.btn {
background-color: #CDC5C2;
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
background-color: #91877F;
border-color: #91877F;
}
`
}
<
/style
>
<
MainNav
/>
<
MainNav
/>
<
SubNav
/>
<
SubNav
/>
<
Container
>
<
Row
className
=
"
mx-0 my-4
"
style
=
{{
flexDirection
:
"
column
"
,
alignItems
:
"
center
"
}}
>
<
h1
style
=
{{
fontSize
:
"
3rem
"
}}
>
OUTER
<
/h1
>
<
Row
>
{
sub
.
map
((
ele
)
=>
(
<
Button
>
ele
<
/Button
>
))}
<
/Row
>
<
/Row
>
<
Row
as
=
{
Form
}
onSubmit
=
{
handleSubmit
}
className
=
"
justify-content-end mx-0 my-5
"
>
<
FormControl
type
=
"
text
"
placeholder
=
"
Search
"
style
=
{{
width
:
"
13rem
"
}}
/
>
<
Button
type
=
"
submit
"
className
=
"
search px-2
"
>
<
img
src
=
{
search
}
width
=
"
20
"
height
=
"
20
"
/>
<
/Button
>
<
Button
sm
=
{
2
}
xs
=
{
6
}
type
=
"
button
"
href
=
"
/regist
"
className
=
"
ml-1
"
>
상품
등록
<
/Button
>
<
/Row
>
<
Row
className
=
"
justify-content-start m-5
"
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
케이시앵글부츠
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
메리제인플랫
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
솔티드스니커즈
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
버켄슬리퍼
(
SH
)
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
크레센도
하이힐펌프스
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
어텀솔져1cm
스웨이드로퍼
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
Card
className
=
"
mt-5
"
style
=
{{
width
:
"
18rem
"
,
margin
:
"
auto
"
}}
>
<
Card
.
Img
variant
=
"
top
"
src
=
"
https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg
"
style
=
{{
objectFit
:
"
contain
"
,
height
:
"
22rem
"
}}
/
>
<
Card
.
Body
>
<
Card
.
Title
>
포웰3
.
5
cm
스니커즈
<
/Card.Title
>
<
Card
.
Text
>
가격
:
12
,
000
원
<
/Card.Text
>
<
/Card.Body
>
<
/Card
>
<
/Row
>
<
/Container
>
<
Pagination
/>
<
/div
>
<
/div
>
)
)
}
}
...
...
client/src/Pages/ProductsRegist.js
View file @
7a918c31
...
@@ -2,58 +2,81 @@ import React, { useState, useEffect, useRef } from 'react';
...
@@ -2,58 +2,81 @@ import React, { useState, useEffect, useRef } from 'react';
import
Nav1
from
'
../Components/MainNav
'
;
import
Nav1
from
'
../Components/MainNav
'
;
import
Nav2
from
'
../Components/SubNav
'
;
import
Nav2
from
'
../Components/SubNav
'
;
import
{
Row
,
Col
,
Button
,
Form
,
Container
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Button
,
Form
,
Container
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
function
ProductsRegist
()
{
function
ProductsRegist
()
{
const
[
product
,
setProduct
]
=
useState
()
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
setProduct
({
...
product
,
[
name
]:
value
})
}
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
axios
.
post
(
'
/api/products/regist
'
,
{
product
}).
then
(
function
(
res
)
{
console
.
log
(
"
client의 res=
"
,
res
)
})
}
return
(
return
(
<
div
>
<
div
>
{
console
.
log
(
product
)}
<
Nav1
/>
<
Nav1
/>
<
Nav2
/>
<
Nav2
/>
<
Container
>
<
Container
>
<
Row
className
=
"
justify-content-md-center
"
>
<
Row
className
=
"
justify-content-md-center
"
>
<
Col
md
=
{
6
}
className
=
"
border m-5 p-3
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
Col
md
=
{
6
}
className
=
"
border m-5 p-3
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
h2
className
=
"
text-center mt-5 font-weight-bold
"
>
상품등록
<
/h2
>
<
h2
className
=
"
text-center mt-5 font-weight-bold
"
>
상품등록
<
/h2
>
<
Form
className
=
"
p-5
"
>
<
Form
className
=
"
p-5
"
onSubmit
=
{
handleSubmit
}
>
<
Form
.
Group
controlId
=
"
productNameform
"
>
<
Form
.
Group
controlId
=
"
productNameform
"
>
<
Form
.
Label
>
상품명
<
/Form.Label
>
<
Form
.
Label
>
상품명
<
/Form.Label
>
<
Form
.
Control
type
=
"
text
"
placeholder
=
"
상품명
"
/>
<
Form
.
Control
type
=
"
text
"
name
=
"
pro_name
"
placeholder
=
"
상품명
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productAmountform
"
>
<
Form
.
Group
controlId
=
"
productAmountform
"
>
<
Form
.
Label
>
수량
<
/Form.Label
>
<
Form
.
Label
>
재고
<
/Form.Label
>
<
Form
.
Control
type
=
"
text
"
placeholder
=
"
숫자만 입력해주세요
"
/>
<
Form
.
Control
type
=
"
text
"
name
=
"
stock
"
placeholder
=
"
숫자만 입력해주세요
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productPriceform
"
>
<
Form
.
Group
controlId
=
"
productPriceform
"
>
<
Form
.
Label
>
가격
<
/Form.Label
>
<
Form
.
Label
>
가격
<
/Form.Label
>
<
Form
.
Control
type
=
"
text
"
placeholder
=
"
숫자만 입력해주세요
"
/>
<
Form
.
Control
type
=
"
text
"
name
=
"
price
"
placeholder
=
"
숫자만 입력해주세요
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Group
>
<
Form
.
Label
>
분류
<
/Form.Label
>
<
Form
.
Label
>
분류
<
/Form.Label
>
<
Row
>
<
Row
>
<
Col
md
=
{
6
}
>
<
Col
md
=
{
6
}
>
<
Form
.
Control
as
=
"
select
"
placeholder
=
"
상위분류
"
>
<
Form
.
Control
as
=
"
select
"
name
=
"
main_category
"
placeholder
=
"
상위분류
"
onChange
=
{
handleChange
}
>
<
option
>
Pants
<
/option
>
<
option
>
Pants
<
/option
>
<
option
>
Skirt
<
/option
>
<
option
>
Skirt
<
/option
>
<
option
>
Outer
<
/option
>
<
option
>
Outer
<
/option
>
<
/Form.Control
>
<
/Form.Control
>
<
/Col
>
<
/Col
>
<
Col
md
=
{
6
}
>
<
Col
md
=
{
6
}
>
<
Form
.
Control
as
=
"
select
"
placeholder
=
"
하위분류
"
>
<
Form
.
Control
as
=
"
select
"
name
=
"
sub_category
"
placeholder
=
"
하위분류
"
onChange
=
{
handleChange
}
>
<
option
>
긴바지
<
/option
>
<
option
>
JEANS
<
/option
>
<
option
>
반바지
<
/option
>
<
option
>
SKINNY
JEANS
<
/option
>
<
option
>
청바지
<
/option
>
<
option
>
BANDING
PANTS
<
/option
>
<
/Form.Control
>
<
/Form.Control
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productDescriptionform
"
>
<
Form
.
Group
controlId
=
"
productDescriptionform
"
>
<
Form
.
Label
>
상품설명
<
/Form.Label
>
<
Form
.
Label
>
상품설명
<
/Form.Label
>
<
Form
.
Control
as
=
"
textarea
"
rows
=
{
3
}
placeholder
=
"
상품을 설명해주세요
"
/>
<
Form
.
Control
as
=
"
textarea
"
name
=
"
description
"
rows
=
{
3
}
placeholder
=
"
상품을 설명해주세요
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Group
>
<
Form
.
Label
>
대표이미지
<
/Form.Label
>
<
Form
.
Label
>
대표이미지
<
/Form.Label
>
<
Form
.
File
id
=
"
productImageform
"
/>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
main_image
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
상세이미지
<
/Form.Label
>
<
Form
.
File
id
=
"
productImageform
"
name
=
"
detail_image
"
onChange
=
{
handleChange
}
/
>
<
/Form.Group
>
<
/Form.Group
>
<
Button
className
=
"
float-right
"
variant
=
"
primary
"
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
>
등록
<
/Button
>
<
Button
className
=
"
float-right
"
variant
=
"
primary
"
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
>
등록
<
/Button
>
<
/Form
>
<
/Form
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
...
...
client/src/Pages/ShoppingCart.js
View file @
7a918c31
...
@@ -6,6 +6,25 @@ import { Card, Button, Container, Row, Col } from 'react-bootstrap';
...
@@ -6,6 +6,25 @@ import { Card, Button, Container, Row, Col } from 'react-bootstrap';
function
ShoppingCart
()
{
function
ShoppingCart
()
{
const
[
num
,
setNum
]
=
useState
(
0
)
function
plusNum
()
{
setNum
(
num
+
1
)
}
function
minusNum
()
{
if
(
num
===
0
)
{
setNum
(
0
)
}
else
{
setNum
(
num
-
1
)
}
}
function
deleteCart
()
{
//장바구니 DB에서 해당 항목 삭제
console
.
log
(
'
카트에 담긴 항목을 삭제했습니다.
'
)
}
return
(
return
(
<
div
>
<
div
>
<
MainNav
/>
<
MainNav
/>
...
@@ -14,52 +33,32 @@ function ShoppingCart() {
...
@@ -14,52 +33,32 @@ function ShoppingCart() {
<
h3
className
=
"
my-5 font-weight-bold text-center
"
>
장바구니
<
/h3
>
<
h3
className
=
"
my-5 font-weight-bold text-center
"
>
장바구니
<
/h3
>
<
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
>
<
Card
>
<
Row
>
<
Col
>
<
input
className
=
"
mx-5
"
type
=
"
checkbox
"
id
=
"
exampleCheck1
"
><
/input
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
style
=
{{
width
:
'
20rem
'
}}
/
>
<
/Col
>
<
Col
md
=
{
6
}
>
<
Card
.
Body
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right
"
/>
<
Card
.
Title
className
=
"
font-weight-bold mt-3
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
옵션
<
/Card.Text
>
<
Card
.
Text
>
수량
<
/Card.Text
>
<
div
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
/>
<
input
type
=
"
text
"
placeholder
=
"
1
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
text-center align-middle mx-1
"
readOnly
><
/input
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/plus-math.png
"
/>
<
/div
>
<
/Card.Body
>
<
/Col
>
<
/Row
>
<
/Card
>
<
Card
>
<
Card
>
<
Row
>
<
Row
className
=
"
mx-1
"
>
<
Col
>
<
Col
xs
=
{
2
}
sm
=
{
2
}
className
=
"
text-center my-auto
"
>
<
input
className
=
"
mx-5
"
type
=
"
checkbox
"
id
=
"
exampleCheck1
"
><
/input
>
<
input
className
=
""
type
=
"
checkbox
"
id
=
"
exampleCheck1
"
/>
<
/Col
>
<
Col
className
=
"
text-center
"
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
style
=
{{
width
:
'
20rem
'
}}
/
>
<
Card
.
Img
className
=
"
img-fluid
"
variant
=
"
top
"
src
=
"
img/asd.jpg
"
style
=
{{
width
:
'
20rem
'
}}
/
>
<
/Col
>
<
/Col
>
<
Col
>
<
Col
md
=
{
6
}
className
=
"
p-2
"
>
<
Card
.
Body
>
<
Card
.
Body
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right
"
/>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png
"
className
=
"
float-right
"
onClick
=
{
deleteCart
}
/
>
<
Card
.
Title
className
=
"
font-weight-bold mt-3
"
>
제품명
<
/Card.Title
>
<
Card
.
Title
className
=
"
font-weight-bold mt-3
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
옵션
<
/Card.Text
>
<
Card
.
Text
>
옵션
<
/Card.Text
>
<
Card
.
Text
>
수량
<
/Card.Text
>
<
Card
.
Text
>
수량
<
/Card.Text
>
<
div
className
=
"
align-items-center
"
>
<
div
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
/>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/minus-math.png
"
className
=
"
align-middle
"
onClick
=
{
minusNum
}
/
>
<
input
type
=
"
text
"
placeholder
=
"
1
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
text-center align-middle mx-1
"
readOnly
><
/input
>
<
input
type
=
"
text
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
text-center align-middle mx-1
"
placeholder
=
"
1
"
value
=
{
num
}
readOnly
><
/input
>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/plus-math.png
"
/>
<
input
type
=
"
image
"
src
=
"
https://img.icons8.com/ios-glyphs/20/000000/plus-math.png
"
className
=
"
align-middle
"
onClick
=
{
plusNum
}
/
>
<
/div
>
<
/div
>
<
/Card.Body
>
<
/Card.Body
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
<
/Card
>
<
/Card
>
<
/div
>
<
/div
>
<
div
className
=
"
p-5 m-5
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
div
className
=
"
p-5 m-5
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
<
li
>
<
li
>
<
span
className
=
"
text-secondary
"
>
총
상품금액
<
/span
>
<
span
className
=
"
text-secondary
"
>
총
상품금액
<
/span
>
...
@@ -75,7 +74,7 @@ function ShoppingCart() {
...
@@ -75,7 +74,7 @@ function ShoppingCart() {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
text-center
"
>
<
div
className
=
"
text-center
"
>
<
Button
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
href
=
"
/payment
"
>
결제하기
<
/Button
>
<
Button
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
href
=
"
/payment
"
block
>
결제하기
<
/Button
>
<
/div
>
<
/div
>
<
/Container
>
<
/Container
>
...
...
client/src/Pages/Signup.js
View file @
7a918c31
...
@@ -2,78 +2,61 @@ import React, { useState, useEffect, useRef } from 'react';
...
@@ -2,78 +2,61 @@ import React, { useState, useEffect, useRef } from 'react';
import
{
Redirect
}
from
'
react-router-dom
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
Nav1
from
'
../Components/MainNav
'
;
import
Nav1
from
'
../Components/MainNav
'
;
import
Nav2
from
'
../Components/SubNav
'
;
import
Nav2
from
'
../Components/SubNav
'
;
import
{
Form
,
Col
,
Container
,
Button
,
Row
}
from
'
react-bootstrap
'
;
import
{
Form
,
Col
,
Container
,
Button
,
Row
,
Alert
}
from
'
react-bootstrap
'
import
DaumPostcode
from
"
react-daum-postcode
"
;
import
FormCheckInput
from
'
react-bootstrap/esm/FormCheckInput
'
;
const
INIT_USER
=
{
name
:
''
,
number
:
''
,
id
:
''
,
password
:
''
,
password2
:
''
,
tel
:
''
}
function
Signup
()
{
function
Signup
()
{
const
[
address
,
setAddress
]
=
useState
(
""
)
const
[
user
,
setUser
]
=
useState
(
true
)
//const [disabled, setDisabled] = useState(true)
const
handleComplete
=
(
data
)
=>
{
const
[
error
,
setError
]
=
useState
(
''
)
let
fullAddress
=
data
.
address
;
let
extraAddress
=
""
;
//useEffect(() => {
// const isUser = Object.values(user).every(el => Boolean(el))
console
.
log
(
data
)
// isUser ? setDisabled(false) : setDisabled(true)
//}, user)
if
(
data
.
addressType
===
"
R
"
)
{
if
(
data
.
bname
!==
""
)
{
function
handleChange
(
event
)
{
extraAddress
+=
data
.
bname
;
const
{
name
,
value
}
=
event
.
target
console
.
log
(
extraAddress
)
setUser
({
...
user
,
[
name
]:
value
})
}
if
(
data
.
buildingName
!==
""
)
{
extraAddress
+=
extraAddress
!==
""
?
`,
${
data
.
buildingName
}
`
:
data
.
buildingName
;
}
fullAddress
+=
extraAddress
!==
""
?
` (
${
extraAddress
}
)`
:
""
;
}
setAddress
({
full
:
fullAddress
,
zone
:
data
.
zonecode
});
console
.
log
(
fullAddress
);
}
const
Postcode
=
()
=>
{
return
(
<
DaumPostcode
onComplete
=
{
handleComplete
}
/
>
);
}
}
const
[
post
,
setPost
]
=
useState
([]);
function
postClick
()
{
if
(
post
.
length
!==
0
)
{
setPost
([])
}
else
{
setPost
(
<
div
>
<
DaumPostcode
style
=
{
postCodeStyle
}
onComplete
=
{
handleComplete
}
/
>
<
/div
>
)
}
}
const
postCodeStyle
=
{
position
:
"
absolute
"
,
width
:
"
400px
"
,
height
:
"
500px
"
,
padding
:
"
7px
"
,
};
const
[
validated
,
setValidated
]
=
useState
(
false
);
const
[
validated
,
setValidated
]
=
useState
(
false
);
const
handleSubmit
=
(
e
)
=>
{
async
function
handleSubmit
(
event
)
{
const
form
=
e
.
currentTarget
;
event
.
preventDefault
()
const
form
=
event
.
currentTarget
;
console
.
log
(
form
)
console
.
log
(
form
)
if
(
form
.
checkValidity
()
===
false
)
{
if
(
form
.
checkValidity
()
===
false
)
{
e
.
preventDefault
();
e
vent
.
preventDefault
();
e
.
stopPropagation
();
e
vent
.
stopPropagation
();
}
}
setValidated
(
true
);
setValidated
(
true
);
console
.
log
(
user
)
try
{
setError
(
''
)
const
response
=
await
fetch
(
'
/api/users/signup
'
,
{
method
:
'
POST
'
,
headers
:
{
'
Content-Type
'
:
'
application/json
'
},
body
:
JSON
.
stringify
(
user
)
})
const
data
=
await
response
.
json
()
console
.
log
(
data
)
}
catch
(
error
)
{
console
.
log
(
error
)
setError
(
'
다시 시도하세요.
'
)
}
}
}
return
(
return
(
...
@@ -81,32 +64,50 @@ function Signup() {
...
@@ -81,32 +64,50 @@ function Signup() {
<
Nav1
/>
<
Nav1
/>
<
Nav2
/>
<
Nav2
/>
<
Container
className
=
"
my-5
"
>
<
Container
className
=
"
my-5
"
>
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
<
/Alert>
}
<
Row
className
=
"
justify-content-center
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
md
=
{
6
}
xs
=
{
10
}
className
=
"
border
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
Col
md
=
{
6
}
xs
=
{
10
}
className
=
"
border
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
h2
className
=
"
text-center mt-5
"
>
Sign
Up
<
/h2
>
<
h2
className
=
"
text-center mt-5
"
>
Sign
Up
<
/h2
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
className
=
"
p-5
"
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
className
=
"
p-5
"
>
<
Form
.
Group
controlId
=
"
formBasicName
"
>
<
Form
.
Group
controlId
=
"
formBasicName
"
>
<
Form
.
Row
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
name
"
>
이
름
<
/
Form.Labe
l
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
id
"
>
이
름
<
/
Co
l
>
<
Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
<
Form
.
Control
required
type
=
"
text
"
required
name
=
"
name
"
type
=
"
text
"
id
=
"
n
ame
"
placeholder
=
"
N
ame
"
size
=
"
sm
"
placeholder
=
""
className
=
"
mx-sm-3
"
>
style
=
{{
width
:
'
160px
'
}}
<
/Form.Control
>
value
=
{
user
.
name
}
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
이름을
입력하세요
.
<
/Form.Control.Feedback
>
onChange
=
{
handleChange
}
/
>
<
/Col
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
이름을
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Row
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicNumber
"
>
<
Form
.
Group
controlId
=
"
formBasicNumber
"
>
<
Form
.
Row
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
number
"
>
주민등록번호
<
/Form.Label
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
number
"
>
주민등록번호
<
/Col
>
<
Col
as
=
{
Row
}
sm
=
{
8
}
xs
=
{
10
}
>
<
Col
as
=
{
Row
}
>
<
Form
.
Control
<
Form
.
Control
required
type
=
"
text
"
id
=
"
number1
"
size
=
"
sm
"
maxlength
=
"
6
"
className
=
"
mx-sm-3
"
style
=
{{
width
:
'
120px
'
}}
><
/Form.Control
>
required
type
=
"
text
"
name
=
"
number1
"
maxlength
=
"
6
"
className
=
"
mx-2
"
style
=
{{
width
:
'
17 0px
'
}}
value
=
{
user
.
number1
}
onChange
=
{
handleChange
}
>
<
/Form.Control
>
-
-
<
Form
.
Control
required
type
=
"
text
"
id
=
"
number2
"
size
=
"
sm
"
maxlength
=
"
1
"
className
=
"
mx-sm-3
"
style
=
{{
width
:
'
25px
'
}}
><
/Form.Control
>
<
Form
.
Control
required
type
=
"
text
"
name
=
"
number2
"
maxlength
=
"
1
"
className
=
"
mx-3
"
style
=
{{
width
:
'
50px
'
}}
value
=
{
user
.
number2
}
onChange
=
{
handleChange
}
>
<
/Form.Control
>
******
******
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
주민등록번호를
입력하세요
.
<
/Form.Control.Feedback
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
주민등록번호를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Col
>
...
@@ -114,64 +115,66 @@ function Signup() {
...
@@ -114,64 +115,66 @@ function Signup() {
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicId
"
>
<
Form
.
Group
controlId
=
"
formBasicId
"
>
<
Form
.
Row
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
id
"
>
아이디
<
/Form.Label
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
id
"
>
아이디
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
<
Col
>
required
<
Form
.
Control
required
type
=
"
text
"
id
=
"
id
"
size
=
"
sm
"
placeholder
=
"
ID
"
className
=
"
mx-sm-3
"
><
/Form.Control
>
type
=
"
text
"
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
아이디를
입력하세요
.
<
/Form.Control.Feedback
>
name
=
"
id
"
<
/Col
>
placeholder
=
"
ID
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
id
}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
아이디를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Row
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicPassword
"
>
<
Form
.
Group
controlId
=
"
formBasicPassword
"
>
<
Form
.
Row
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
password
"
>
비밀번호
<
/Form.Label
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
password
"
>
비밀번호
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
<
Col
>
type
=
"
password
"
<
Form
.
Control
required
type
=
"
password
"
id
=
"
password
"
size
=
"
sm
"
placeholder
=
"
Password
"
aria
-
describedby
=
"
passwordHelpBlock
"
className
=
"
mx-sm-3
"
><
/Form.Control
>
name
=
"
password
"
<
Form
.
Text
id
=
"
password
"
muted
>
8
-
15
자로
입력해주세요
.
<
/Form.Text
>
placeholder
=
"
Password
"
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
비밀번호를
입력하세요
.
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
password
}
required
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
className
=
"
text-center
"
type
=
"
invalid
"
>
비밀번호를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Row
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicPassword2
"
>
<
Form
.
Group
controlId
=
"
formBasicPassword2
"
>
<
Form
.
Row
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
password2
"
>
비밀번호
확인
<
/Form.Label
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
password
"
>
비밀번호
확인
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
<
Col
>
type
=
"
password
"
<
Form
.
Control
required
type
=
"
password
"
id
=
"
password2
"
size
=
"
sm
"
placeholder
=
""
className
=
"
mx-sm-3
"
><
/Form.Control
>
name
=
"
password2
"
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
비밀번호를
한번
더
입력하세요
.
placeholder
=
"
Password
"
style
=
{{
width
:
'
160px
'
}}
value
=
{
user
.
password2
}
required
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
비밀번호를
한번
더
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Row
>
<
/Form.Group
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicTel
"
>
<
Form
.
Group
controlId
=
"
formBasicTel
"
>
<
Form
.
Row
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
tel
"
>
휴대전화
<
/Form.Label
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
tel
"
>
휴대전화
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
<
Col
>
required
<
Form
.
Control
required
type
=
"
text
"
id
=
"
tel
"
size
=
"
sm
"
placeholder
=
""
className
=
"
mx-sm-3
"
><
/Form.Control
>
type
=
"
text
"
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
휴대전화를
입력하세요
.
<
/Form.Control.Feedback
>
name
=
"
tel
"
<
/Col
>
size
=
"
sm
"
style
=
{{
width
:
'
160px
'
}}
<
/Form.Row
>
value
=
{
user
.
tel
}
<
/Form.Group
>
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
휴대전화를
입력하세요
.
<
/Form.Control.Feedback
>
<
Form
.
Group
controlId
=
"
formBasicAdd
"
>
<
Form
.
Row
>
{
console
.
log
(
"
address=
"
,
address
)}
<
Form
.
Label
className
=
"
mx-3
"
>
주
소
<
/Form.Label
>
<
Form
.
Control
required
type
=
"
text
"
id
=
"
add
"
size
=
"
sm
"
style
=
{{
width
:
'
120px
'
}}
value
=
{
address
.
zone
}
disabled
=
{(
address
.
zone
==
null
)
?
false
:
true
}
><
/Form.Control>
<
Button
size
=
"
sm
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
className
=
"
mx-3
"
type
=
"
button
"
onClick
=
{
postClick
}
>
주소
찾기
<
/Button
>
{
post
}
<
Form
.
Control
required
type
=
"
text
"
id
=
"
add
"
size
=
"
sm
"
value
=
{
address
.
full
}
disabled
=
{(
address
.
zone
==
null
)
?
false
:
true
}
className
=
"
mx-3
"
style
=
{{
width
:
'
330px
'
}}
><
/Form.Control
>
<
Form
.
Control
required
type
=
"
text
"
id
=
"
add2
"
size
=
"
sm
"
placeholder
=
"
상세주소
"
className
=
"
mx-sm-3
"
><
/Form.Control
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
상세
주소를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Row
>
<
/Form.Group
>
<
/Form.Group
>
<
Button
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
type
=
"
submit
"
block
>
Sign
Up
<
/Button
>
<
Button
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
type
=
"
submit
"
block
>
Sign
Up
<
/Button
>
<
/Form
>
<
/Form
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
...
...
client/src/index.js
View file @
7a918c31
...
@@ -4,14 +4,15 @@ import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-d
...
@@ -4,14 +4,15 @@ import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-d
import
Home
from
'
./Pages/Home
'
;
import
Home
from
'
./Pages/Home
'
;
import
Login
from
'
./Pages/Login
'
;
import
Login
from
'
./Pages/Login
'
;
import
Signup
from
'
./Pages/Signup
'
;
import
Signup
from
'
./Pages/Signup
'
;
import
Product
from
"
./Pages/Product
s
"
;
import
Product
from
"
./Pages/Product
"
;
import
ProductsList
from
'
./Pages/ProductsList
'
;
import
ProductsList
from
"
./Pages/ProductsList
"
;
import
Admin
from
'
./Pages/Admin
'
;
import
Admin
from
'
./Pages/Admin
'
;
import
ProductsRegist
from
'
./Pages/ProductsRegist
'
;
import
ProductsRegist
from
'
./Pages/ProductsRegist
'
;
import
ShoppingCart
from
'
./Pages/ShoppingCart
'
;
import
ShoppingCart
from
'
./Pages/ShoppingCart
'
;
import
Payment
from
'
./Pages/Payment
'
;
import
Payment
from
'
./Pages/Payment
'
;
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
import
Account
from
'
./Pages/Account
'
;
ReactDOM
.
render
(
ReactDOM
.
render
(
<
React
.
StrictMode
>
<
React
.
StrictMode
>
...
@@ -22,10 +23,13 @@ ReactDOM.render(
...
@@ -22,10 +23,13 @@ ReactDOM.render(
<
Route
path
=
"
/signup
"
component
=
{
Signup
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
Signup
}
/
>
<
Route
path
=
"
/list
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/list
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/product
"
component
=
{
Product
}
/
>
<
Route
path
=
"
/product
"
component
=
{
Product
}
/
>
<
Route
path
=
"
/productslist
"
component
=
{
ProductsList
}
/
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
ProductsRegist
}
/
>
<
Route
path
=
"
/regist
"
component
=
{
ProductsRegist
}
/
>
<
Route
path
=
"
/shoppingcart
"
component
=
{
ShoppingCart
}
/
>
<
Route
path
=
"
/shoppingcart
"
component
=
{
ShoppingCart
}
/
>
<
Route
path
=
"
/payment
"
component
=
{
Payment
}
/
>
<
Route
path
=
"
/payment
"
component
=
{
Payment
}
/
>
<
Route
path
=
"
/account
"
component
=
{
Account
}
/
>
<
Route
path
=
'
/kakao
'
component
=
{()
=>
{
window
.
location
.
href
=
'
https://compmath.korea.ac.kr
'
;
return
null
;}}
/
>
<
Redirect
path
=
"
/
"
to
=
"
/
"
/>
<
Redirect
path
=
"
/
"
to
=
"
/
"
/>
<
/Switch
>
<
/Switch
>
<
/Router
>
<
/Router
>
...
...
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