비회원결제

client/src/pages/PaymentPage/PaymentPage.js

@@ -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));
+    }
+
+    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;
     }
 
-    async function handleClickGuest() {
+    const handleClickGuest = async () => {
         try {
             setError("")
-            const response = await axios.post('/api/auth/guest/save', {
-                ...guestInfo
-            })
-            setGuestID(response.data.id)
+            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="d-flex flex-column">
                                 <div className="my-1">
                                     <label className={styles.labelStyle}>이름</label>
-                                <input type="text" name="name" placeholder="이름" onChange={handleChangeGuest} required />
+                                    <input type="text" name="name" placeholder="이름" onChange={handleChangeGuest} />
+                                </div>
+                                {errorMsg.errorName && <p className={styles.errorMsg}>이름을 입력해주세요</p>}
                             </div>
+                            <div className="d-flex flex-column">
                                 <div className="my-1">
                                     <label className={styles.labelStyle}>이메일</label>
-                                <input type="email" name="email" placeholder="이메일" onChange={handleChangeGuest} required />
+                                    <input type="email" name="email" placeholder="이메일" onChange={handleChangeGuest} />
                                 </div>
+                                {errorMsg.errorEmail && <p className={styles.errorMsg}>이메일을 입력해주세요</p>}
+                            </div>
+                            <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" required />
+                                    <input type="number" name="birth" placeholder="생년월일" onChange={handleChangeGuest} maxLength="6" />
+                                </div>
+                                {errorMsg.errorBirthday && <p className={styles.errorMsg}>숫자 6자리를 입력해주세요.</p>}
                             </div>
+                                <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" required />
+                                    <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="d-flex flex-column">
                                 <div className="my-1">
                                     <label className={styles.labelStyle}>비밀번호</label>
-                                <input type="password" name="password" placeholder="비밀번호" onChange={handleChangeGuest} required style={{ width: "178px" }} />
+                                    <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

 .labelStyle {
     display: inline-block;
-    width: 80px;
+    width: 100px;
     text-align: right;
     margin-right: 1rem;
 }
@@ -8,3 +8,38 @@
 .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/theater.controller.js

@@ -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

@@ -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,6 +461,26 @@ const getUserInfo = async (req, res) => {
 const saveGuestInfo = async (req, res) => {
     try {
         const { name, email, birth, phoneNumber, password } = req.body
+
+        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,
@@ -481,6 +500,7 @@ const saveGuestInfo = async (req, res) => {
                 secure: config.env === "production",
             })
             res.json(newGuest);
+        }
     } catch (error) {
         res.status(500).send("비회원정보 등록 실패");
     }

server/routes/reservation.route.js

@@ -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)