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
b968abb5
Commit
b968abb5
authored
Jan 04, 2021
by
박상호
🎼
Browse files
Merge remote-tracking branch 'origin/ourMaster' into who
parents
9a9c2a56
8f4248c2
Changes
13
Show whitespace changes
Inline
Side-by-side
.gitignore
0 → 100644
View file @
b968abb5
node_modules
\ No newline at end of file
client/.gitignore
View file @
b968abb5
...
...
@@ -22,4 +22,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
.eslintcache
.yarn.lock
client/package.json
View file @
b968abb5
...
...
@@ -9,6 +9,7 @@
"bootstrap"
:
"^4.5.3"
,
"react"
:
"^17.0.1"
,
"react-bootstrap"
:
"^1.4.0"
,
"react-daum-postcode"
:
"^2.0.2"
,
"react-dom"
:
"^17.0.1"
,
"react-router-dom"
:
"^5.2.0"
,
"react-scripts"
:
"4.0.1"
,
...
...
client/src/App.js
View file @
b968abb5
import
logo
from
'
./logo.svg
'
;
import
'
./App.css
'
;
import
{
Button
}
from
'
react-bootstrap
'
;
import
{
Router
}
from
'
react-router-dom
'
;
import
Login
from
'
./Login
'
import
LogoutButton
from
'
./LogoutButton
'
import
{
signIn
}
from
'
./auth
'
function
App
()
{
return
(
<
div
className
=
"
App
"
>
<
header
className
=
"
App-header
"
>
<
img
src
=
{
logo
}
className
=
"
App-logo
"
alt
=
"
logo
"
/>
<
p
>
Edit
<
code
>
src
/
App
.
js
<
/code> and save to reload
.
<
/p
>
<
a
className
=
"
App-link
"
href
=
"
https://reactjs.org
"
target
=
"
_blank
"
rel
=
"
noopener noreferrer
"
>
Learn
React
<
/a
>
<
/header
>
<
/div
>
);
const
[
user
,
setUser
]
=
useState
(
null
);
const
authenticated
=
user
!=
null
;
const
login
=
({
id
,
password
})
=>
setUser
(
signIn
({
id
,
password
}));
const
logout
=
()
=>
setUser
(
null
);
}
export
default
App
;
client/src/Auth.js
0 → 100644
View file @
b968abb5
const
users
=
[
{
id
:
'
wodus
'
,
password
:
'
123
'
},
{
id
:
'
kim
'
,
password
:
'
456
'
},
]
export
function
signIn
({
id
,
password
}){
const
user
=
users
.
find
(
user
=>
user
.
id
===
id
&&
user
.
password
===
password
);
if
(
user
===
undefined
)
throw
new
Error
();
return
user
;
}
\ No newline at end of file
client/src/AuthRoute.js
0 → 100644
View file @
b968abb5
import
React
from
'
react
'
import
{
Route
,
Redirect
}
from
"
react-router-dom
"
function
AuthRoute
({})
\ No newline at end of file
client/src/Pages/Login.js
View file @
b968abb5
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
function
Login
()
{
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
;
import
Nav1
from
'
../Components/MainNav
'
;
import
Nav2
from
'
../Components/SubNav
'
;
import
{
Form
,
Col
,
Container
,
Button
,
Row
}
from
'
react-bootstrap
'
;
function
Login
(){
const
[
validated
,
setValidated
]
=
useState
(
false
);
const
handleSubmit
=
(
e
)
=>
{
const
form
=
e
.
currentTarget
;
console
.
log
(
form
)
if
(
form
.
checkValidity
()
===
false
){
e
.
preventDefault
();
e
.
stopPropagation
();
}
setValidated
(
true
);
}
return
(
<
div
>
<
MainNav
/>
<
SubNav
/>
<
Nav1
/>
<
Nav2
/>
<
Container
className
=
"
my-5
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
md
=
{
5
}
xs
=
{
10
}
className
=
"
border
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
h3
className
=
"
text-center mt-5
"
>
Login
<
/h3
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
className
=
"
p-5
"
>
<
Form
.
Group
controlId
=
"
formBasicId
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
id
"
>
아이디
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
required
type
=
"
text
"
id
=
"
id
"
placeholder
=
"
ID
"
style
=
{{
width
:
'
160px
'
}}
>
<
/Col
>
<
Form
.
Control
.
Feedback
className
=
"
text-center
"
type
=
"
invalid
"
>
아이디를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicPassword
"
>
<
Form
.
Row
>
<
Col
sm
=
{
4
}
xs
=
{
6
}
as
=
{
Form
.
Label
}
for
=
"
password
"
>
비밀번호
<
/Col
>
<
Col
sm
=
{
8
}
xs
=
{
12
}
as
=
{
Form
.
Control
}
type
=
"
password
"
id
=
"
password
"
placeholder
=
"
Password
"
style
=
{{
width
:
'
160px
'
}}
required
/>
<
Form
.
Control
.
Feedback
className
=
"
text-center
"
type
=
"
invalid
"
>
비밀번호를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Form.Row
>
<
/Form.Group
>
<
Button
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
type
=
"
submit
"
block
>
Login
<
/Button
>
<
div
className
=
"
loginLine
"
>
<
Link
to
=
"
/signup
"
style
=
{{
color
:
'
#91877F
'
}}
>
회원이
아니십니까
?
<
/Link
>
<
/div
>
<
/Form
>
<
/Col
>
<
/Row
>
<
/Container
>
<
/div
>
)
}
...
...
client/src/Pages/LogoutButton.js
0 → 100644
View file @
b968abb5
import
React
from
'
react
'
import
{
withRouter
}
from
'
react-router-dom
'
function
LogoutButton
({
logout
,
history
}){
const
handleClick
=
()
=>
{
logout
()
history
.
push
(
"
/
"
)
}
return
<
button
onClick
=
{
handleClick
}
>
Logout
<
/button
>
}
export
default
withRouter
(
LogoutButton
)
\ No newline at end of file
client/src/Pages/Payment.js
View file @
b968abb5
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
DaumPostcode
from
"
react-daum-postcode
"
;
import
{
Container
,
Card
,
Row
,
Col
,
Button
,
Form
}
from
'
react-bootstrap
'
;
function
Payment
()
{
const
[
paymentWay
,
setPaymentWay
]
=
useState
([])
const
[
isAddress
,
setIsAddress
]
=
useState
(
""
);
const
[
isZoneCode
,
setIsZoneCode
]
=
useState
();
const
[
isPostOpen
,
setIsPostOpen
]
=
useState
();
const
[
post
,
setPost
]
=
useState
([])
function
postClick
()
{
if
(
post
.
length
!==
0
)
{
setPost
([])
}
else
{
setPost
(
<
div
>
<
DaumPostcode
style
=
{
postCodeStyle
}
onComplete
=
{
handleComplete
}
/
>
<
/div
>
)
}
}
const
handleComplete
=
(
data
)
=>
{
let
fullAddress
=
data
.
address
;
let
extraAddress
=
""
;
if
(
data
.
addressType
===
"
R
"
)
{
if
(
data
.
bname
!==
""
)
{
extraAddress
+=
data
.
bname
;
}
if
(
data
.
buildingName
!==
""
)
{
extraAddress
+=
extraAddress
!==
""
?
`,
${
data
.
buildingName
}
`
:
data
.
buildingName
;
}
fullAddress
+=
extraAddress
!==
""
?
` (
${
extraAddress
}
)`
:
""
;
}
setIsZoneCode
(
data
.
zonecode
);
setIsAddress
(
fullAddress
);
setIsPostOpen
(
false
);
};
const
postCodeStyle
=
{
display
:
"
block
"
,
position
:
"
absolute
"
,
// top: "50%",
width
:
"
400px
"
,
height
:
"
500px
"
,
padding
:
"
7px
"
,
};
function
handleClick
()
{
if
(
paymentWay
.
length
!==
0
)
{
setPaymentWay
([])
}
...
...
@@ -40,7 +87,6 @@ function Payment() {
function
handleClick2
()
{
if
(
paymentWay
.
length
!==
0
)
{
setPaymentWay
([])
// paymentWay=[]
}
}
...
...
@@ -49,9 +95,9 @@ function Payment() {
<
MainNav
/>
<
SubNav
/>
<
Container
>
<
h3
className
=
"
my-5 font-weight-bold text-center
"
style
=
{{
color
:
'
#F2A400
'
}}
>
주문
/
결제
<
/h3
>
<
h3
className
=
"
my-5 font-weight-bold text-center
"
>
주문
/
결제
<
/h3
>
<
div
>
<
h5
className
=
"
bg-light
font-weight-bold py-3 border-top border-bottom text-center
"
>
주문자
정보
<
/h5
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문자
정보
<
/h5
>
<
Form
>
<
Form
.
Group
controlId
=
"
formBasicName
"
>
<
Form
.
Label
>
이름
<
/Form.Label
>
...
...
@@ -70,11 +116,18 @@ function Payment() {
<
/div
>
<
div
>
<
h5
className
=
"
bg-light font-weight-bold py-3 border-top border-bottom text-center
"
>
배송지
정보
<
/h5
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
배송지
정보
<
/h5
>
<
Row
>
<
Col
>
<
Button
className
=
"
my-3
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
onClick
=
{
postClick
}
>
우편번호
<
/Button
>
<
/Col
>
<
/Row
>
{
post
}
<
/div
>
<
div
>
<
h5
className
=
"
bg-light
font-weight-bold py-3 border-top border-bottom text-center
"
>
주문상품정보
<
/h5
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문상품정보
<
/h5
>
<
Card
>
<
Row
>
<
Col
className
=
"
text-center align-self-center
"
>
...
...
@@ -90,10 +143,10 @@ function Payment() {
<
Card
.
Title
className
=
"
font-weight-bold mt-3
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
옵션
<
/Card.Text
>
<
div
>
<
Button
variant
=
"
outline-dark
"
size
=
"
sm
"
>-<
/Button
>
<
input
type
=
"
text
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
align-middle mx-1
"
readOnly
><
/input
>
<
Button
variant
=
"
outline-dark
"
size
=
"
sm
"
>+<
/Button
>
<
div
className
=
"
align-items-center
"
>
<
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
>
...
...
@@ -101,7 +154,7 @@ function Payment() {
<
/Card
>
<
/div
>
<
div
className
=
"
bg-light p-5 m-5
"
>
<
div
className
=
"
p-5 m-5
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
<
li
>
<
span
className
=
"
text-secondary
"
>
총
상품금액
<
/span
>
...
...
@@ -118,7 +171,7 @@ function Payment() {
<
/div
>
<
div
>
<
h5
className
=
"
bg-light
font-weight-bold py-3 border-top border-bottom text-center
"
>
결제수단
<
/h5
>
<
h5
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
결제수단
<
/h5
>
<
div
className
=
"
text-center
"
>
<
Button
variant
=
"
success
"
onClick
=
{
handleClick
}
>
무통장입금
<
/Button
>
<
Button
variant
=
"
warning
"
style
=
{{
color
:
'
#ffffff
'
}}
onClick
=
{
handleClick2
}
>
카카오페이
<
/Button
>
...
...
client/src/Pages/Products.js
View file @
b968abb5
...
...
@@ -4,9 +4,20 @@ 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
"
>
...
...
@@ -33,32 +44,34 @@ function Products() {
<
div
><
/div
>
<
/Col
>
<
/Row
>
<
div
className
=
"
m-5
"
>
<
h6
style
=
{{
borderBottom
:
"
1px solid
"
,
paddingBottom
:
"
5px
"
,
marginBottom
:
"
1em
"
}}
>
회원님이
선호할만한
상품
추천
<
/h6
>
<
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
"
/>
<
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
"
/>
<
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
"
/>
<
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
"
/>
<
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
>
...
...
client/src/Pages/ProductsRegist.js
View file @
b968abb5
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
Nav1
from
'
../Components/MainNav
'
;
import
Nav2
from
'
../Components/SubNav
'
;
import
{
Row
,
Col
,
Button
,
Form
,
Container
}
from
'
react-bootstrap
'
;
function
ProductsRegist
()
{
function
ProductsRegist
()
{
return
(
<
div
>
<
MainNav
/>
<
SubNav
/>
<
Nav1
/>
<
Nav2
/>
<
Container
>
<
Row
className
=
"
justify-content-md-center
"
>
<
Col
md
=
{
6
}
className
=
"
border m-5 p-3
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
h2
className
=
"
text-center mt-5 font-weight-bold
"
>
상품등록
<
/h2
>
<
Form
className
=
"
p-5
"
>
<
Form
.
Group
controlId
=
"
productNameform
"
>
<
Form
.
Label
>
상품명
<
/Form.Label
>
<
Form
.
Control
type
=
"
text
"
placeholder
=
"
상품명
"
/>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productAmountform
"
>
<
Form
.
Label
>
수량
<
/Form.Label
>
<
Form
.
Control
type
=
"
text
"
placeholder
=
"
숫자만 입력해주세요
"
/>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productPriceform
"
>
<
Form
.
Label
>
가격
<
/Form.Label
>
<
Form
.
Control
type
=
"
text
"
placeholder
=
"
숫자만 입력해주세요
"
/>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
분류
<
/Form.Label
>
<
Row
>
<
Col
md
=
{
6
}
>
<
Form
.
Control
as
=
"
select
"
placeholder
=
"
상위분류
"
>
<
option
>
Pants
<
/option
>
<
option
>
Skirt
<
/option
>
<
option
>
Outer
<
/option
>
<
/Form.Control
>
<
/Col
>
<
Col
md
=
{
6
}
>
<
Form
.
Control
as
=
"
select
"
placeholder
=
"
하위분류
"
>
<
option
>
긴바지
<
/option
>
<
option
>
반바지
<
/option
>
<
option
>
청바지
<
/option
>
<
/Form.Control
>
<
/Col
>
<
/Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
productDescriptionform
"
>
<
Form
.
Label
>
상품설명
<
/Form.Label
>
<
Form
.
Control
as
=
"
textarea
"
rows
=
{
3
}
placeholder
=
"
상품을 설명해주세요
"
/>
<
/Form.Group
>
<
Form
.
Group
>
<
Form
.
Label
>
대표이미지
<
/Form.Label
>
<
Form
.
File
id
=
"
productImageform
"
/>
<
/Form.Group
>
<
Button
className
=
"
float-right
"
variant
=
"
primary
"
type
=
"
submit
"
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
>
등록
<
/Button
>
<
/Form
>
<
/Col
>
<
/Row
>
<
/Container
>
<
/div
>
)
}
...
...
client/src/Pages/ShoppingCart.js
View file @
b968abb5
...
...
@@ -11,9 +11,9 @@ function ShoppingCart() {
<
MainNav
/>
<
SubNav
/>
<
Container
className
=
"
justify-content-center
"
>
<
h3
className
=
"
my-5 font-weight-bold text-center
"
style
=
{{
color
:
'
#F2A400
'
}}
>
장바구니
<
/h3
>
<
h3
className
=
"
my-5 font-weight-bold text-center
"
>
장바구니
<
/h3
>
<
div
>
<
h4
className
=
"
bg-light
font-weight-bold py-3 border-top border-bottom text-center
"
>
주문상품정보
<
/h4
>
<
h4
className
=
"
font-weight-bold py-3 border-top border-bottom text-center
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
주문상품정보
<
/h4
>
<
Card
>
<
Row
>
<
Col
>
...
...
@@ -22,15 +22,15 @@ function ShoppingCart() {
<
/Col
>
<
Col
md
=
{
6
}
>
<
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
"
/>
<
Card
.
Title
className
=
"
font-weight-bold mt-3
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
옵션
<
/Card.Text
>
<
Card
.
Text
>
수량
<
/Card.Text
>
<
div
>
<
Button
variant
=
"
outline-dark
"
size
=
"
sm
"
>-<
/Button
>
<
input
type
=
"
text
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
align-middle mx-1
"
readOnly
><
/input
>
<
Button
variant
=
"
outline-dark
"
size
=
"
sm
"
>+<
/Button
>
<
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
>
...
...
@@ -44,22 +44,22 @@ function ShoppingCart() {
<
/Col
>
<
Col
>
<
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
"
/>
<
Card
.
Title
className
=
"
font-weight-bold mt-3
"
>
제품명
<
/Card.Title
>
<
Card
.
Text
>
가격
<
/Card.Text
>
<
Card
.
Text
>
옵션
<
/Card.Text
>
<
Card
.
Text
>
수량
<
/Card.Text
>
<
div
>
<
Button
variant
=
"
outline-dark
"
size
=
"
sm
"
>-<
/Button
>
<
input
type
=
"
text
"
style
=
{{
width
:
'
30px
'
}}
className
=
"
align-middle mx-1
"
readOnly
><
/input
>
<
Button
variant
=
"
outline-dark
"
size
=
"
sm
"
>+<
/Button
>
<
div
className
=
"
align-items-center
"
>
<
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
>
<
/div
>
<
div
className
=
"
bg-light p-5 m-5
"
>
<
div
className
=
"
p-5 m-5
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
ul
className
=
"
pl-0
"
style
=
{{
listStyle
:
'
none
'
}}
>
<
li
>
<
span
className
=
"
text-secondary
"
>
총
상품금액
<
/span
>
...
...
@@ -75,7 +75,7 @@ function ShoppingCart() {
<
/div
>
<
/div
>
<
div
className
=
"
text-center
"
>
<
Button
className
=
"
px-5
"
>
결제하기
<
/Button
>
<
Button
className
=
"
px-5
"
style
=
{{
background
:
"
#91877F
"
,
borderColor
:
'
#91877F
'
}}
href
=
"
/payment
"
>
결제하기
<
/Button
>
<
/div
>
<
/Container
>
...
...
client/src/Pages/Signup.js
View file @
b968abb5
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
MainNav
from
'
../Components/MainNav
'
;
import
SubNav
from
'
../Components/SubNav
'
;
import
Nav1
from
'
../Components/MainNav
'
;
import
Nav2
from
'
../Components/SubNav
'
;
import
{
Form
,
Col
,
Container
,
Button
,
Row
}
from
'
react-bootstrap
'
;
import
DaumPostcode
from
"
react-daum-postcode
"
;
function
Signup
()
{
const
[
address
,
setAddress
]
=
useState
(
""
)
const
handleComplete
=
(
data
)
=>
{
let
fullAddress
=
data
.
address
;
let
extraAddress
=
""
;
return
(
<
div
class
=
"
form-container
"
>
<
MainNav
/>
<
SubNav
/>
<
form
id
=
"
form
"
class
=
"
form
"
>
<
h1
>
회원가입
<
/h1
>
<
div
class
=
"
form-control
"
>
<
label
for
=
"
id
"
>
아이디
<
/label
>
<
input
type
=
"
text
"
id
=
"
id
"
placeholder
=
"
아이디를 입력하세요
"
><
/input
>
console
.
log
(
data
)
<
label
for
=
"
name
"
>
본명
<
/label
>
<
input
type
=
"
text
"
id
=
"
name
"
placeholder
=
"
본명을 입력하세요
"
><
/input
>
if
(
data
.
addressType
===
"
R
"
)
{
if
(
data
.
bname
!==
""
)
{
extraAddress
+=
data
.
bname
;
console
.
log
(
extraAddress
)
}
if
(
data
.
buildingName
!==
""
)
{
extraAddress
+=
extraAddress
!==
""
?
`,
${
data
.
buildingName
}
`
:
data
.
buildingName
;
}
fullAddress
+=
extraAddress
!==
""
?
` (
${
extraAddress
}
)`
:
""
;
}
setAddress
({
full
:
fullAddress
,
zone
:
data
.
zonecode
});
<
label
for
=
"
password
"
>
비밀번호
<
/label
>
<
input
type
=
"
password
"
id
=
"
password
"
placeholder
=
"
비밀번호를 입력하세요
"
><
/input
>
console
.
log
(
fullAddress
);
}
<
label
for
=
"
password2
"
>
비밀번호
확인
<
/label
>
<
input
type
=
"
password
"
id
=
"
password2
"
placeholder
=
"
비밀번호를 한번 더 입력하세요
"
><
/input
>
const
Postcode
=
()
=>
{
<
label
for
=
"
tel
"
>
휴대폰
번호
<
/label
>
<
input
type
=
"
text
"
id
=
"
tel
"
placeholder
=
"
휴대폰 번호를 입력하세요
"
><
/input
>
<
label
for
=
"
add
"
>
주소
<
/label
>
<
/div
>
<
/form
>
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
handleSubmit
=
(
e
)
=>
{
const
form
=
e
.
currentTarget
;
console
.
log
(
form
)
if
(
form
.
checkValidity
()
===
false
)
{
e
.
preventDefault
();
e
.
stopPropagation
();
}
setValidated
(
true
);
}
return
(
<
div
>
<
Nav1
/>
<
Nav2
/>
<
Container
className
=
"
my-5
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
md
=
{
6
}
xs
=
{
10
}
className
=
"
border
"
style
=
{{
background
:
'
#F7F3F3
'
}}
>
<
h2
className
=
"
text-center mt-5
"
>
Sign
Up
<
/h2
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
className
=
"
p-5
"
>
<
Form
.
Group
controlId
=
"
formBasicName
"
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
name
"
>
이
름
<
/Form.Label
>
<
Col
>
<
Form
.
Control
required
type
=
"
text
"
id
=
"
name
"
size
=
"
sm
"
placeholder
=
""
className
=
"
mx-sm-3
"
>
<
/Form.Control
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
이름을
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicNumber
"
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
number
"
>
주민등록번호
<
/Form.Label
>
<
Col
as
=
{
Row
}
>
<
Form
.
Control
required
type
=
"
text
"
id
=
"
number1
"
size
=
"
sm
"
maxlength
=
"
6
"
className
=
"
mx-sm-3
"
style
=
{{
width
:
'
120px
'
}}
><
/Form.Control
>
-
<
Form
.
Control
required
type
=
"
text
"
id
=
"
number2
"
size
=
"
sm
"
maxlength
=
"
1
"
className
=
"
mx-sm-3
"
style
=
{{
width
:
'
25px
'
}}
><
/Form.Control
>
******
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
주민등록번호를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicId
"
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
id
"
>
아이디
<
/Form.Label
>
<
Col
>
<
Form
.
Control
required
type
=
"
text
"
id
=
"
id
"
size
=
"
sm
"
placeholder
=
"
ID
"
className
=
"
mx-sm-3
"
><
/Form.Control
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
아이디를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicPassword
"
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
password
"
>
비밀번호
<
/Form.Label
>
<
Col
>
<
Form
.
Control
required
type
=
"
password
"
id
=
"
password
"
size
=
"
sm
"
placeholder
=
"
Password
"
aria
-
describedby
=
"
passwordHelpBlock
"
className
=
"
mx-sm-3
"
><
/Form.Control
>
<
Form
.
Text
id
=
"
password
"
muted
>
8
-
15
자로
입력해주세요
.
<
/Form.Text
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
비밀번호를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicPassword2
"
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
password2
"
>
비밀번호
확인
<
/Form.Label
>
<
Col
>
<
Form
.
Control
required
type
=
"
password
"
id
=
"
password2
"
size
=
"
sm
"
placeholder
=
""
className
=
"
mx-sm-3
"
><
/Form.Control
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
비밀번호를
한번
더
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formBasicTel
"
>
<
Form
.
Row
>
<
Form
.
Label
for
=
"
tel
"
>
휴대전화
<
/Form.Label
>
<
Col
>
<
Form
.
Control
required
type
=
"
text
"
id
=
"
tel
"
size
=
"
sm
"
placeholder
=
""
className
=
"
mx-sm-3
"
><
/Form.Control
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
휴대전화를
입력하세요
.
<
/Form.Control.Feedback
>
<
/Col
>
<
/Form.Row
>
<
/Form.Group
>
<
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.Group
>
<
Button
style
=
{{
background
:
'
#91877F
'
,
borderColor
:
'
#91877F
'
}}
type
=
"
submit
"
block
>
Sign
Up
<
/Button
>
<
/Form
>
<
/Col
>
<
/Row
>
<
/Container
>
<
/div
>
)
}
...
...
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