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
butter-studio
Commits
50dbd99d
Commit
50dbd99d
authored
Aug 16, 2021
by
한규민
Browse files
비회원결제
parent
856a1a51
Changes
6
Hide whitespace changes
Inline
Side-by-side
client/src/pages/PaymentPage/PaymentPage.js
View file @
50dbd99d
...
...
@@ -9,7 +9,22 @@ import styles from './PaymentPage.module.scss'
const
Payment
=
({
location
})
=>
{
const
{
user
}
=
useAuth
()
const
[
guestInfo
,
setGuestInfo
]
=
useState
({})
const
[
guestInfo
,
setGuestInfo
]
=
useState
({
name
:
""
,
email
:
""
,
birth
:
""
,
phoneNumber
:
""
,
password
:
""
,
rePassword
:
""
})
const
[
errorMsg
,
setErrorMsg
]
=
useState
({
errorName
:
false
,
errorEmail
:
false
,
errorBirthday
:
false
,
errorMbnum
:
false
,
errorPassword
:
false
,
})
const
[
guestID
,
setGuestID
]
=
useState
()
const
[
userInfo
,
setUserInfo
]
=
useState
({
nickname
:
""
,
...
...
@@ -21,13 +36,19 @@ const Payment = ({ location }) => {
const
[
element
,
setElement
]
=
useState
()
const
[
error
,
setError
]
=
useState
(
""
)
const
[
startTime
,
setStartTime
]
=
useState
(
""
);
const
[
number
,
setNumber
]
=
useState
(
null
);
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
mbError
,
setMbError
]
=
useState
(
false
);
const
[
confirmMb
,
setConfirmMb
]
=
useState
(
false
);
useEffect
(()
=>
{
if
(
user
.
role
===
"
member
"
)
{
getUserInfo
()
}
},
[])
async
function
getUserInfo
()
{
const
getUserInfo
=
async
()
=>
{
try
{
setError
(
""
)
const
response
=
await
axios
.
post
(
`/api/auth/getuserinfo`
,
{
...
...
@@ -39,24 +60,89 @@ const Payment = ({ location }) => {
}
}
function
handleChangeGuest
(
e
)
{
setGuestInfo
({
...
guestInfo
,
[
e
.
target
.
name
]:
String
(
e
.
target
.
value
)
})
const
handleChangeGuest
=
(
e
)
=>
{
setGuestInfo
({
...
guestInfo
,
[
e
.
target
.
name
]:
String
(
e
.
target
.
value
)
})
if
(
e
.
target
.
name
===
"
birth
"
||
e
.
target
.
name
===
"
phoneNumber
"
)
{
setGuestInfo
({
...
guestInfo
,
[
e
.
target
.
name
]:
String
(
e
.
target
.
value
)
})
}
}
//인증번호
const
handleOnClickMbnum
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
setStartTime
(
""
);
setError
(
""
);
setLoading
(
true
)
const
phone
=
guestInfo
.
phoneNumber
;
const
message
=
await
authApi
.
confirmMbnum
(
phone
);
if
(
message
.
isSuccess
)
{
setMbError
(
"
보냄
"
);
setStartTime
(
message
.
startTime
);
}
}
catch
(
error
)
{
catchErrors
(
error
,
setError
);
}
finally
{
setLoading
(
false
);
}
}
const
handleOnChangeMb
=
(
e
)
=>
{
setNumber
(
String
(
e
.
target
.
value
));
}
async
function
handleClickGuest
()
{
const
handleOnClickMbConfirm
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
setError
(
""
);
setLoading
(
true
);
const
confirmNum
=
{
userMbnum
:
guestInfo
.
phoneNumber
,
number
:
number
,
startTime
:
startTime
};
const
message
=
await
authApi
.
confirmNum
(
confirmNum
);
setMbError
(
message
);
if
(
message
===
"
성공
"
)
{
setConfirmMb
(
true
);
}
}
catch
(
error
)
{
catchErrors
(
error
,
setError
);
}
finally
{
setLoading
(
false
);
}
}
//비밀번호 확인
const
validationPw
=
()
=>
{
if
(
guestInfo
.
password
!==
guestInfo
.
rePassword
)
return
false
;
else
return
true
;
}
const
handleClickGuest
=
async
()
=>
{
try
{
setError
(
""
)
const
response
=
await
axios
.
post
(
'
/api/auth/guest/save
'
,
{
...
guestInfo
})
setGuestID
(
response
.
data
.
id
)
alert
(
"
비회원 정보가 저장되었습니다.
"
)
setLoading
(
true
);
let
validPw
=
validationPw
();
if
(
confirmMb
)
{
if
(
validPw
)
{
const
response
=
await
authApi
.
saveGuestInfo
(
guestInfo
);
if
(
response
.
id
)
{
setGuestID
(
response
.
id
)
alert
(
"
비회원 정보가 저장되었습니다.
"
)
}
else
{
setErrorMsg
(
response
);
alert
(
"
형식에 맞게 다시 작성해주세요
"
);
}
}
else
throw
new
Error
(
"
비밀번호가 일치하지 않습니다.
"
);
}
else
throw
new
Error
(
"
핸드폰 번호를 인증해주세요.
"
);
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
function
kakaoBtnClick
()
{
const
kakaoBtnClick
=
()
=>
{
setElement
(
<
div
className
=
"
text-center
"
>
<
p
className
=
"
font-weight-bold
"
style
=
{{
display
:
'
inline
'
,
color
:
"
#FEDC00
"
}}
>
'
카카오페이
'
<
/p><p style={{ display: 'inline' }}>를 선택하셨습니다. </
p
>
...
...
@@ -66,7 +152,7 @@ const Payment = ({ location }) => {
setTicketInfo
({
...
ticketInfo
,
payment
:
"
카카오페이
"
})
}
async
function
reservationComplete
()
{
const
reservationComplete
=
async
()
=>
{
try
{
setError
(
""
)
if
(
user
.
role
===
"
member
"
)
{
...
...
@@ -127,7 +213,6 @@ const Payment = ({ location }) => {
}
}
return
(
<
div
className
=
"
container
"
style
=
{{
color
:
"
white
"
}}
>
<
div
className
=
"
row justify-content-center my-5
"
>
...
...
@@ -166,26 +251,63 @@ const Payment = ({ location }) => {
:
<
div
>
<
h5
className
=
"
mb-4 p-2
"
style
=
{{
backgroundColor
:
"
white
"
,
color
:
"
black
"
}}
>
비회원예매
정보입력
<
/h5
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
이름
<
/label
>
<
input
type
=
"
text
"
name
=
"
name
"
placeholder
=
"
이름
"
onChange
=
{
handleChangeGuest
}
required
/>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
이름
<
/label
>
<
input
type
=
"
text
"
name
=
"
name
"
placeholder
=
"
이름
"
onChange
=
{
handleChangeGuest
}
/
>
<
/div
>
{
errorMsg
.
errorName
&&
<
p
className
=
{
styles
.
errorMsg
}
>
이름을
입력해주세요
<
/p>
}
<
/div
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
이메일
<
/label
>
<
input
type
=
"
email
"
name
=
"
email
"
placeholder
=
"
이메일
"
onChange
=
{
handleChangeGuest
}
required
/>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
이메일
<
/label
>
<
input
type
=
"
email
"
name
=
"
email
"
placeholder
=
"
이메일
"
onChange
=
{
handleChangeGuest
}
/
>
<
/div
>
{
errorMsg
.
errorEmail
&&
<
p
className
=
{
styles
.
errorMsg
}
>
이메일을
입력해주세요
<
/p>
}
<
/div
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
생년월일
<
/label
>
<
input
type
=
"
number
"
name
=
"
birth
"
placeholder
=
"
생년월일
"
onChange
=
{
handleChangeGuest
}
maxLength
=
"
6
"
required
/>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
생년월일
<
/label
>
<
input
type
=
"
number
"
name
=
"
birth
"
placeholder
=
"
생년월일
"
onChange
=
{
handleChangeGuest
}
maxLength
=
"
6
"
/>
<
/div
>
{
errorMsg
.
errorBirthday
&&
<
p
className
=
{
styles
.
errorMsg
}
>
숫자
6
자리를
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
휴대폰
번호
<
/label
>
<
input
type
=
"
number
"
name
=
"
phoneNumber
"
placeholder
=
"
휴대폰 번호
"
onChange
=
{
handleChangeGuest
}
maxLength
=
"
11
"
required
/>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
휴대폰
번호
<
/label
>
<
input
type
=
"
number
"
name
=
"
phoneNumber
"
placeholder
=
"
휴대폰 번호
"
onChange
=
{
handleChangeGuest
}
maxLength
=
"
11
"
/>
<
button
type
=
"
button
"
disabled
=
{
loading
}
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
data
-
bs
-
toggle
=
"
collapse
"
data
-
bs
-
target
=
"
#collapseExample
"
aria
-
expanded
=
"
false
"
aria
-
controls
=
"
collapseExample
"
onClick
=
{
handleOnClickMbnum
}
>
인증번호받기
<
/button
>
<
/div
>
{
errorMsg
.
errorMbnum
&&
<
p
className
=
{
styles
.
errorMsg
}
>-
없이
숫자
11
자리를
입력해주세요
.
<
/p>
}
<
div
className
=
"
collapse
"
id
=
"
collapseExample
"
>
<
div
className
=
"
d-flex justify-content-center align-items-center mt-3
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
인증하기
<
/label
>
<
div
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
input2
}
`
}
type
=
"
number
"
placeholder
=
"
인증번호를 입력
"
onChange
=
{
handleOnChangeMb
}
/
>
<
button
type
=
"
button
"
className
=
{
`rounded-2 py-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickMbConfirm
}
>
확인
<
/button
>
<
button
type
=
"
button
"
className
=
{
`rounded-2 py-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickMbnum
}
>
재전송
<
/button
>
<
/div
>
<
/div
>
{(
mbError
===
"
재전송
"
)
&&
<
p
className
=
{
styles
.
errorMsg
}
>
유효시간이
만료되었습니다
.
재전송해주세요
.
<
/p>
}
{(
mbError
===
"
보냄
"
)
&&
<
p
className
=
{
styles
.
errorMsg
}
>
5
분이내에
입력해주세요
.
<
/p>
}
{(
mbError
===
"
성공
"
)
&&
<
p
className
=
{
styles
.
errorMsg
}
>
인증되었습니다
.
<
/p>
}
{(
mbError
===
"
실패
"
)
&&
<
p
className
=
{
styles
.
errorMsg
}
>
인증번호를
다시
입력해주세요
.
<
/p>
}
<
/div
>
<
/div
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
비밀번호
<
/label
>
<
input
type
=
"
password
"
name
=
"
password
"
placeholder
=
"
비밀번호
"
onChange
=
{
handleChangeGuest
}
required
style
=
{{
width
:
"
178px
"
}}
/
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
비밀번호
<
/label
>
<
input
type
=
"
password
"
name
=
"
password
"
placeholder
=
"
비밀번호
"
onChange
=
{
handleChangeGuest
}
style
=
{{
width
:
"
178px
"
}}
/
>
<
/div
>
{
errorMsg
.
errorPassword
&&
<
p
className
=
{
styles
.
errorMsg
}
>
8
~
11
자리
사이로
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
my-1
"
>
<
label
className
=
{
styles
.
labelStyle
}
>
비밀번호
확인
<
/label
>
<
input
type
=
"
password
"
name
=
"
rePassword
"
placeholder
=
"
비밀번호 확인
"
onChange
=
{
handleChangeGuest
}
style
=
{{
width
:
"
178px
"
}}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
m-2
"
>
<
p
className
=
{
`text-muted
${
styles
.
warningText
}
`
}
>
※
비회원
정보
오기입
시
예매
내역
확인
/
취소
및
티켓
발권이
어려울
수
있으니
다시
한번
확인해
주시기
바랍니다
.
...
...
client/src/pages/PaymentPage/PaymentPage.module.scss
View file @
50dbd99d
.labelStyle
{
display
:
inline-block
;
width
:
8
0px
;
width
:
10
0px
;
text-align
:
right
;
margin-right
:
1rem
;
}
.warningText
{
font-size
:
small
;
}
.input
{
margin
:
0
.5rem
0
0
0
;
border-radius
:
3px
;
text-align
:
center
;
}
.butterYellowAndBtn
{
color
:
black
;
background-color
:
#FEDC00
;
border
:
1px
solid
black
;
text-align
:
center
;
padding
:
none
;
}
.btnHover
:hover
{
background-color
:
black
;
color
:
#FEDC00
;
transition
:
ease-out
;
border
:
1px
solid
white
;
text-align
:
center
;
padding
:
none
;
}
.errorMsg
{
display
:
flex
;
justify-content
:
center
;
margin
:
0
.5rem
0
0
.5rem
0
;
text-align
:
end
;
font-size
:
13px
;
color
:
#FEDC00
;
}
\ No newline at end of file
server/controllers/reservation.controller.js
View file @
50dbd99d
...
...
@@ -108,7 +108,7 @@ const deleteReservation = async(req,res)=>{
userType
:
role
,
user
:
id
}
});
});
res
.
json
({
message
:
'
결제실패로 인한 예매DB삭제
'
})
}
catch
(
error
)
{
console
.
log
(
error
)
...
...
server/controllers/theater.controller.js
View file @
50dbd99d
...
...
@@ -42,7 +42,7 @@ const getTypes = async (req, res) => {
}
}
const
getTheater
=
async
(
req
,
res
,
next
)
=>
{
const
getTheater
=
async
(
req
,
res
)
=>
{
try
{
const
reservation
=
req
.
reservation
;
const
theaterId
=
reservation
.
map
(
movie
=>
movie
.
theaterId
);
...
...
@@ -65,41 +65,12 @@ const getTheater = async (req, res, next) => {
theatertypeId
:
theaterId
.
theatertypeId
}
})
// req.reservation = reservation;
res
.
json
(
reservation
)
}
catch
(
error
)
{
return
res
.
status
(
500
).
send
(
error
.
message
||
"
상영관 정보 불러오기 실패
"
)
}
}
const
getTheaterType
=
async
(
req
,
res
)
=>
{
try
{
const
reservation
=
req
.
reservation
;
const
theatertypeId
=
reservation
.
map
(
movie
=>
movie
.
theatertypeId
);
const
elements
=
await
Promise
.
all
(
theatertypeId
.
map
(
async
(
theatertypeId
)
=>
{
const
theaterType
=
await
TheaterType
.
findOne
({
where
:
{
id
:
theatertypeId
}
});
console
.
log
(
theaterType
)
const
theaterData
=
{
theaterTypeId
:
theaterType
.
id
,
theaterTypeName
:
theaterType
.
theaterTypeName
}
return
theaterData
})
);
console
.
log
(
"
elements :
"
,
elements
)
reservation
.
map
(
reservation
=>
{
const
theaterTypeName
=
elements
.
find
(
el
=>
reservation
.
theaterTypeId
===
el
.
theaterTypeId
);
reservation
.
dataValues
=
{
...
reservation
.
dataValues
,
theaterTypeName
:
theaterTypeName
.
theaterTypeName
,
}
})
res
.
json
(
reservation
);
}
catch
(
error
)
{
return
res
.
status
(
500
).
send
(
error
.
message
||
"
상영관 정보 불러오기 실패
"
)
}
}
const
submit
=
async
(
req
,
res
)
=>
{
try
{
const
{
id
,
theatertypeId
,
theaterName
,
rows
,
columns
}
=
req
.
body
...
...
@@ -135,7 +106,6 @@ export default {
getOne
,
getTypes
,
getTheater
,
getTheaterType
,
submit
,
remove
,
getTheaterInfo
...
...
server/controllers/user.controller.js
View file @
50dbd99d
...
...
@@ -186,7 +186,6 @@ const confirmMbnum = async (req, res) => {
const
confirm
=
await
ConfirmNum
.
findOne
({
where
:
{
phone
:
phoneNumber
}
});
if
(
confirm
)
{
await
confirm
.
destroy
();
// 5분 유효시간 설정
await
ConfirmNum
.
create
({
confirmNum
:
String
(
verifyCode
),
phone
:
phoneNumber
,
...
...
@@ -462,25 +461,46 @@ const getUserInfo = async (req, res) => {
const
saveGuestInfo
=
async
(
req
,
res
)
=>
{
try
{
const
{
name
,
email
,
birth
,
phoneNumber
,
password
}
=
req
.
body
const
newGuest
=
await
Guest
.
create
({
name
:
name
,
email
:
email
,
birth
:
birth
,
phoneNumber
:
phoneNumber
,
password
:
password
,
roleId
:
1
});
res
.
clearCookie
(
config
.
cookieName
);
const
token
=
jwt
.
sign
({
id
:
newGuest
.
id
,
role
:
"
guest
"
},
config
.
jwtSecret
,
{
expiresIn
:
config
.
jwtExpires
,
});
res
.
cookie
(
config
.
cookieName
,
token
,
{
maxAge
:
config
.
cookieMaxAge
,
path
:
"
/
"
,
httpOnly
:
config
.
env
===
"
production
"
,
secure
:
config
.
env
===
"
production
"
,
})
res
.
json
(
newGuest
);
let
errorMsg
=
{
errorName
:
false
,
errorEmail
:
false
,
errorNickName
:
false
,
errorMbnum
:
false
,
errorPassword
:
false
,
};
validation
(
errorMsg
,
name
,
1
,
10
,
"
errorName
"
);
validation
(
errorMsg
,
email
,
3
,
20
,
"
errorEmail
"
);
validation
(
errorMsg
,
birth
,
1
,
10
,
"
errorNickName
"
);
validation
(
errorMsg
,
phoneNumber
,
11
,
11
,
"
errorMbnum
"
);
validation
(
errorMsg
,
password
,
8
,
11
,
"
errorPassword
"
);
let
valid
=
!
(
Object
.
values
(
errorMsg
).
some
((
element
)
=>
(
element
)));
if
(
!
valid
){
res
.
json
(
errorMsg
);
}
else
{
const
newGuest
=
await
Guest
.
create
({
name
:
name
,
email
:
email
,
birth
:
birth
,
phoneNumber
:
phoneNumber
,
password
:
password
,
roleId
:
1
});
res
.
clearCookie
(
config
.
cookieName
);
const
token
=
jwt
.
sign
({
id
:
newGuest
.
id
,
role
:
"
guest
"
},
config
.
jwtSecret
,
{
expiresIn
:
config
.
jwtExpires
,
});
res
.
cookie
(
config
.
cookieName
,
token
,
{
maxAge
:
config
.
cookieMaxAge
,
path
:
"
/
"
,
httpOnly
:
config
.
env
===
"
production
"
,
secure
:
config
.
env
===
"
production
"
,
})
res
.
json
(
newGuest
);
}
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
"
비회원정보 등록 실패
"
);
}
...
...
server/routes/reservation.route.js
View file @
50dbd99d
...
...
@@ -15,10 +15,8 @@ router.route('/findonereservation')
reservationCtrl
.
findOneReservation
,
movieCtrl
.
getMovieById
,
timetableCtrl
.
getTimeTable
,
theaterCtrl
.
getTheater
,
// theaterCtrl.getTheaterType
theaterCtrl
.
getTheater
)
router
.
route
(
'
/save
'
)
.
post
(
reservationCtrl
.
saveReservation
)
...
...
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