Skip to content

GitLab

Commit 50dbd99d authored by 한규민's avatar 한규민
Browse files

비회원결제

parent 856a1a51
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' ...@@ -9,7 +9,22 @@ import styles from './PaymentPage.module.scss'
const Payment = ({ location }) => { const Payment = ({ location }) => {
const { user } = useAuth() 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 [guestID, setGuestID] = useState()
const [userInfo, setUserInfo] = useState({ const [userInfo, setUserInfo] = useState({
nickname: "", nickname: "",
...@@ -21,13 +36,19 @@ const Payment = ({ location }) => { ...@@ -21,13 +36,19 @@ const Payment = ({ location }) => {
const [element, setElement] = useState() const [element, setElement] = useState()
const [error, setError] = 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(() => { useEffect(() => {
if (user.role === "member") { if (user.role === "member") {
getUserInfo() getUserInfo()
} }
}, []) }, [])
async function getUserInfo() { const getUserInfo = async () => {
try { try {
setError("") setError("")
const response = await axios.post(`/api/auth/getuserinfo`, { const response = await axios.post(`/api/auth/getuserinfo`, {
...@@ -39,24 +60,89 @@ const Payment = ({ location }) => { ...@@ -39,24 +60,89 @@ const Payment = ({ location }) => {
} }
} }
function handleChangeGuest(e) { const handleChangeGuest = (e) => {
setGuestInfo({ ...guestInfo, [e.target.name]: String(e.target.value) }) 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 { try {
setError("") setError("")
const response = await axios.post('/api/auth/guest/save', { setLoading(true);
...guestInfo let validPw = validationPw();
}) if (confirmMb) {
setGuestID(response.data.id) if (validPw) {
alert("비회원 정보가 저장되었습니다.") 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) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
function kakaoBtnClick() { const kakaoBtnClick = () => {
setElement( setElement(
<div className="text-center"> <div className="text-center">
<p className=" font-weight-bold" style={{ display: 'inline', color: "#FEDC00" }}>'카카오페이'</p><p style={{ display: 'inline' }}>를 선택하셨습니다. </p> <p className=" font-weight-bold" style={{ display: 'inline', color: "#FEDC00" }}>'카카오페이'</p><p style={{ display: 'inline' }}>를 선택하셨습니다. </p>
...@@ -66,7 +152,7 @@ const Payment = ({ location }) => { ...@@ -66,7 +152,7 @@ const Payment = ({ location }) => {
setTicketInfo({ ...ticketInfo, payment: "카카오페이" }) setTicketInfo({ ...ticketInfo, payment: "카카오페이" })
} }
async function reservationComplete() { const reservationComplete = async () => {
try { try {
setError("") setError("")
if (user.role === "member") { if (user.role === "member") {
...@@ -127,7 +213,6 @@ const Payment = ({ location }) => { ...@@ -127,7 +213,6 @@ const Payment = ({ location }) => {
} }
} }
return ( return (
<div className="container" style={{ color: "white" }}> <div className="container" style={{ color: "white" }}>
<div className="row justify-content-center my-5"> <div className="row justify-content-center my-5">
...@@ -166,26 +251,63 @@ const Payment = ({ location }) => { ...@@ -166,26 +251,63 @@ const Payment = ({ location }) => {
: :
<div> <div>
<h5 className="mb-4 p-2" style={{ backgroundColor: "white", color: "black" }}>비회원예매 정보입력</h5> <h5 className="mb-4 p-2" style={{ backgroundColor: "white", color: "black" }}>비회원예매 정보입력</h5>
<div className="my-1"> <div className="d-flex flex-column">
<label className={styles.labelStyle}>이름</label> <div className="my-1">
<input type="text" name="name" placeholder="이름" onChange={handleChangeGuest} required /> <label className={styles.labelStyle}>이름</label>
<input type="text" name="name" placeholder="이름" onChange={handleChangeGuest} />
</div>
{errorMsg.errorName && <p className={styles.errorMsg}>이름을 입력해주세요</p>}
</div> </div>
<div className="my-1"> <div className="d-flex flex-column">
<label className={styles.labelStyle}>이메일</label> <div className="my-1">
<input type="email" name="email" placeholder="이메일" onChange={handleChangeGuest} required /> <label className={styles.labelStyle}>이메일</label>
<input type="email" name="email" placeholder="이메일" onChange={handleChangeGuest} />
</div>
{errorMsg.errorEmail && <p className={styles.errorMsg}>이메일을 입력해주세요</p>}
</div> </div>
<div className="my-1"> <div className="d-flex flex-column">
<label className={styles.labelStyle}>생년월일</label> <div className="my-1">
<input type="number" name="birth" placeholder="생년월일" onChange={handleChangeGuest} maxLength="6" required /> <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>
<div className="my-1"> <div className="d-flex flex-column">
<label className={styles.labelStyle}>휴대폰 번호</label> <div className="my-1">
<input type="number" name="phoneNumber" placeholder="휴대폰 번호" onChange={handleChangeGuest} maxLength="11" required /> <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>
<div className="my-1"> <div className="d-flex flex-column">
<label className={styles.labelStyle}>비밀번호</label> <div className="my-1">
<input type="password" name="password" placeholder="비밀번호" onChange={handleChangeGuest} required style={{ width: "178px" }} /> <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>
<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"> <div className="m-2">
<p className={`text-muted ${styles.warningText}`}> <p className={`text-muted ${styles.warningText}`}>
※ 비회원 정보 오기입 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다. ※ 비회원 정보 오기입 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다.
......
client/src/pages/PaymentPage/PaymentPage.module.scss
View file @ 50dbd99d
.labelStyle { .labelStyle {
display: inline-block; display: inline-block;
width: 80px; width: 100px;
text-align: right; text-align: right;
margin-right: 1rem; margin-right: 1rem;
} }
.warningText { .warningText {
font-size: small; 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)=>{ ...@@ -108,7 +108,7 @@ const deleteReservation = async(req,res)=>{
userType: role, userType: role,
user: id user: id
} }
}); });
res.json({ message: '결제실패로 인한 예매DB삭제' }) res.json({ message: '결제실패로 인한 예매DB삭제' })
} catch (error) { } catch (error) {
console.log(error) console.log(error)
......
server/controllers/theater.controller.js
View file @ 50dbd99d
...@@ -42,7 +42,7 @@ const getTypes = async (req, res) => { ...@@ -42,7 +42,7 @@ const getTypes = async (req, res) => {
} }
} }
const getTheater = async (req, res, next) => { const getTheater = async (req, res) => {
try { try {
const reservation = req.reservation; const reservation = req.reservation;
const theaterId = reservation.map(movie => movie.theaterId); const theaterId = reservation.map(movie => movie.theaterId);
...@@ -65,41 +65,12 @@ const getTheater = async (req, res, next) => { ...@@ -65,41 +65,12 @@ const getTheater = async (req, res, next) => {
theatertypeId: theaterId.theatertypeId 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); res.json(reservation);
} catch (error) { } catch (error) {
return res.status(500).send(error.message || "상영관 정보 불러오기 실패") return res.status(500).send(error.message || "상영관 정보 불러오기 실패")
} }
} }
const submit = async (req, res) => { const submit = async (req, res) => {
try { try {
const { id, theatertypeId, theaterName, rows, columns } = req.body const { id, theatertypeId, theaterName, rows, columns } = req.body
...@@ -135,7 +106,6 @@ export default { ...@@ -135,7 +106,6 @@ export default {
getOne, getOne,
getTypes, getTypes,
getTheater, getTheater,
getTheaterType,
submit, submit,
remove, remove,
getTheaterInfo getTheaterInfo
......
server/controllers/user.controller.js
View file @ 50dbd99d
...@@ -186,7 +186,6 @@ const confirmMbnum = async (req, res) => { ...@@ -186,7 +186,6 @@ const confirmMbnum = async (req, res) => {
const confirm = await ConfirmNum.findOne({ where: { phone: phoneNumber } }); const confirm = await ConfirmNum.findOne({ where: { phone: phoneNumber } });
if (confirm) { if (confirm) {
await confirm.destroy(); await confirm.destroy();
// 5분 유효시간 설정
await ConfirmNum.create({ await ConfirmNum.create({
confirmNum: String(verifyCode), confirmNum: String(verifyCode),
phone: phoneNumber, phone: phoneNumber,
...@@ -462,25 +461,46 @@ const getUserInfo = async (req, res) => { ...@@ -462,25 +461,46 @@ const getUserInfo = async (req, res) => {
const saveGuestInfo = async (req, res) => { const saveGuestInfo = async (req, res) => {
try { try {
const { name, email, birth, phoneNumber, password } = req.body const { name, email, birth, phoneNumber, password } = req.body
const newGuest = await Guest.create({
name: name, let errorMsg = {
email: email, errorName: false,
birth: birth, errorEmail: false,
phoneNumber: phoneNumber, errorNickName: false,
password: password, errorMbnum: false,
roleId:1 errorPassword: false,
}); };
res.clearCookie(config.cookieName);
const token = jwt.sign({id: newGuest.id, role: "guest"}, config.jwtSecret, { validation(errorMsg, name, 1, 10, "errorName");
expiresIn: config.jwtExpires, validation(errorMsg, email, 3, 20, "errorEmail");
}); validation(errorMsg, birth, 1, 10, "errorNickName");
res.cookie(config.cookieName,token , { validation(errorMsg, phoneNumber, 11, 11, "errorMbnum");
maxAge: config.cookieMaxAge, validation(errorMsg, password, 8, 11, "errorPassword");
path: "/",
httpOnly: config.env === "production", let valid = !(Object.values(errorMsg).some((element) => (element)));
secure: config.env === "production",
}) if(!valid){
res.json(newGuest); 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) { } catch (error) {
res.status(500).send("비회원정보 등록 실패"); res.status(500).send("비회원정보 등록 실패");
} }
......
server/routes/reservation.route.js
View file @ 50dbd99d
...@@ -15,10 +15,8 @@ router.route('/findonereservation') ...@@ -15,10 +15,8 @@ router.route('/findonereservation')
reservationCtrl.findOneReservation, reservationCtrl.findOneReservation,
movieCtrl.getMovieById, movieCtrl.getMovieById,
timetableCtrl.getTimeTable, timetableCtrl.getTimeTable,
theaterCtrl.getTheater, theaterCtrl.getTheater
// theaterCtrl.getTheaterType
) )
router.route('/save') router.route('/save')
.post(reservationCtrl.saveReservation) .post(reservationCtrl.saveReservation)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment