Skip to content

Commit d7453fb

Browse files
marinesnow34marinesnow34
authored
Merge pull request #296 from readyvery/test
수정사항 반영
2 parents 150fa5f + 73d9e35 commit d7453fb

File tree

14 files changed

+238
-185
lines changed

14 files changed

+238
-185
lines changed

‎src/components/Authentication/UserInputNumber.jsx

Lines changed: 21 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,39 @@
11
import { message } from "antd";
2-
import axios from "axios";
32
import { useState } from "react";
4-
import { useNavigate } from "react-router-dom";
3+
import useFetchUserPhoneNumber from "../../hooks/useFetchUserPhoneNumber";
4+
import useSendSms from "../../hooks/useSendSms";
55
import RedButton from "./RedButton";
66
import "./UserInputNumber.css";
77
import UserInputNumberMessage from "./UserInputNumberMessage";
88

99
const TIMER_DURATION = 180; //타이머 시간 설정(3분)
1010

11-
1211
const UserInputNumber = () => {
1312
const [chkButton, setChkButton] = useState(false); // 인증버튼 클릭 여부
1413
const [Phonenumber, setPhonenumber] = useState(""); // 전화번호 상태
1514
const [verifyState, setVerifyState] = useState(false); //전화번호 인증 상태
16-
const [postmessage, setPostmessage] = useState(false); // 인증 번호 발송 성공 여부
17-
const navigate = useNavigate();
18-
const apiRoot = process.env.REACT_APP_API_ROOT;
19-
const apiVer = "api/v1";
20-
const apiUrl1 = `${apiRoot}/${apiVer}/sms/send`;
21-
const apiUrl2 = `${apiRoot}/${apiVer}/sms/authority`;
22-
const token = localStorage.getItem("accessToken");
15+
const [postmessage, setPostmessage] = useState(false); // 인증 번호 발송 여부
16+
const { handleFetchUserPhoneNumber } = useFetchUserPhoneNumber();
17+
const { handleSendSms } = useSendSms();
18+
19+
const handleCheckSendSem = (send) => {
20+
setPostmessage(send);
21+
};
2322

2423
const handleButtonClick = () => {
2524
if (/^\d+$/.test(Phonenumber) && Phonenumber.length === 11) {
25+
setChkButton(true);
2626
if (!postmessage) {
27-
handlePostmessage();
27+
handleSendSms(Phonenumber, handleCheckSendSem);
2828
} else {
2929
setPostmessage(false);
30-
handlePostmessage();
30+
handleSendSms(Phonenumber, handleCheckSendSem);
3131
}
3232
} else {
3333
message.info("전화번호를 올바르게 입력해주세요.");
3434
}
3535
};
3636

37-
const handlePostmessage = async () => {
38-
try {
39-
setChkButton(true);
40-
const response = await axios.post(
41-
apiUrl1,
42-
{
43-
phoneNumber: Phonenumber,
44-
},
45-
{
46-
headers: {
47-
Authorization: `Bearer ${token}`,
48-
},
49-
}
50-
);
51-
console.log(response);
52-
53-
if (response.data.success) {
54-
message.success("인증번호를 발송했습니다.");
55-
setPostmessage(true);
56-
} else {
57-
message.error("인증번호를 발송에 실패했습니다.");
58-
setPostmessage(false);
59-
}
60-
} catch (error) {
61-
console.error(error);
62-
message.error("인증번호를 발송에 실패했습니다.");
63-
setPostmessage(false);
64-
}
65-
};
66-
67-
// 주석 풀기
68-
const renderUserInputNumberMessage = () => {
69-
if (postmessage) {
70-
return (
71-
<UserInputNumberMessage
72-
phoneNumber={Phonenumber}
73-
initialTimer={TIMER_DURATION}
74-
onAuthSuccess={handleAuthSuccess}
75-
/>
76-
);
77-
}
78-
return null;
79-
};
80-
8137
const handlePhoneChange = (event) => {
8238
setPhonenumber(event.target.value);
8339
};
@@ -86,33 +42,9 @@ const UserInputNumber = () => {
8642
setVerifyState(success);
8743
};
8844

89-
const handleRegisterClick = async () => {
45+
const handleRegisterClick = () => {
9046
if (verifyState) {
91-
try {
92-
const response = await axios.post(
93-
apiUrl2,
94-
{
95-
phoneNumber: Phonenumber,
96-
},
97-
{
98-
headers: {
99-
Authorization: `Bearer ${token}`,
100-
},
101-
}
102-
);
103-
console.log(response);
104-
105-
if (response.data.success) {
106-
message.success("전화번호 등록 성공했습니다.");
107-
navigate("/");
108-
} else {
109-
console.log("전화번호 등록 실패", response.data);
110-
message.info("전화번호 등록에 실패하셨습니다.");
111-
}
112-
} catch (error) {
113-
console.error(error);
114-
message.info("전화번호 등록에 실패하셨습니다.");
115-
}
47+
handleFetchUserPhoneNumber(Phonenumber);
11648
} else {
11749
message.info("전화번호 인증부터 진행해주세요.");
11850
}
@@ -138,7 +70,13 @@ const UserInputNumber = () => {
13870
인증
13971
</button>
14072
</div>
141-
{renderUserInputNumberMessage()}
73+
{postmessage && (
74+
<UserInputNumberMessage
75+
phoneNumber={Phonenumber}
76+
initialTimer={TIMER_DURATION}
77+
onAuthSuccess={handleAuthSuccess}
78+
/>
79+
)}
14280
<RedButton
14381
type="submit"
14482
onClick={handleRegisterClick}

‎src/components/Authentication/UserInputNumberMessage.jsx

Lines changed: 37 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,37 @@
1-
import axios from "axios";
2-
import React, { useEffect, useState } from "react";
1+
import React, { useState } from "react";
2+
import useAuthVerification from "../../hooks/useAuthVerification";
3+
import useTimer from "../../hooks/useTimer";
34
import LoginChkAlrm from "./LoginChkAlrm";
45
import "./UserInputNumberMessage.css";
56
const Timer = ({ minutes, seconds }) => (
67
<div className="timer">
78
{minutes}:{seconds < 10 ? `0${seconds}` : seconds}
89
</div>
910
);
10-
function useTimer(initialSeconds) {
11-
const [timer, setTimer] = useState(initialSeconds);
12-
useEffect(() => {
13-
const interval = setInterval(() => {
14-
setTimer((prevTimer) => (prevTimer > 0 ? prevTimer - 1 : 0));
15-
}, 1000);
1611

17-
return () => clearInterval(interval);
18-
}, [setTimer]);
19-
return { timer };
20-
}
2112
function UserInputNumberMessage({ phoneNumber, onAuthSuccess, initialTimer }) {
22-
const token = localStorage.getItem("accessToken");
2313
const [chkNum, setChkNum] = useState("");
24-
const [isAuth, setIsAuth] = useState();
25-
const apiUrl = process.env.REACT_APP_API_ROOT;
2614
const { timer } = useTimer(initialTimer);
27-
const handleInputText = async (e) => {
15+
const [isCheck, setIsCheck] = useState(false);
16+
const { handleAuthVerificationNumer } = useAuthVerification();
17+
18+
// 번호 인증 성공 여부 확인
19+
const handleCheckInputNumber = (success) => {
20+
setIsCheck(success);
21+
onAuthSuccess(success);
22+
};
23+
24+
const handleInputText = (e) => {
2825
const newChkNum = e.target.value;
2926
setChkNum(newChkNum);
30-
// equlChknum(newChkNum, AUTH_CODE);
3127
if (newChkNum.length === 6) {
32-
try {
33-
const response = await axios.post(
34-
`${apiUrl}/api/v1/sms/verify`,
35-
{
36-
phoneNumber: phoneNumber,
37-
verifyNumber: newChkNum,
38-
},
39-
{
40-
headers: {
41-
Authorization: `Bearer ${token}`,
42-
},
43-
}
44-
);
45-
46-
if (response.data.success) {
47-
onAuthSuccess(true);
48-
setIsAuth(true);
49-
} else {
50-
onAuthSuccess(false);
51-
setIsAuth(false);
52-
}
53-
} catch (error) {
54-
console.log("통신에러", error);
55-
}
56-
} else {
57-
onAuthSuccess(false);
58-
setIsAuth(false);
59-
}
60-
};
61-
62-
const renderMessage = () => {
63-
if (timer <= 0) {
64-
return (
65-
<LoginChkAlrm icon={"X"} paddingSize={"0.45rem"}>
66-
인증 시간이 초과되었습니다.
67-
</LoginChkAlrm>
68-
);
69-
} else if (timer > 0 && !isAuth) {
70-
return (
71-
<LoginChkAlrm icon={"X"} paddingSize={"0.45rem"}>
72-
인증번호가 일치하지 않습니다.
73-
</LoginChkAlrm>
74-
);
75-
} else if (timer > 0 && isAuth) {
76-
return (
77-
<LoginChkAlrm icon={""} paddingSize={"0.45rem"}>
78-
인증이 완료되었습니다.
79-
</LoginChkAlrm>
28+
handleAuthVerificationNumer(
29+
phoneNumber,
30+
newChkNum,
31+
handleCheckInputNumber
8032
);
33+
} else {
34+
handleCheckInputNumber(false);
8135
}
8236
};
8337

@@ -89,17 +43,31 @@ function UserInputNumberMessage({ phoneNumber, onAuthSuccess, initialTimer }) {
8943
type="text"
9044
placeholder="인증번호"
9145
value={chkNum}
92-
autocomplete="off" //자동완성 없애기
46+
autoComplete="one-time-code" //1번씩 자동완성(인증번호)
9347
onChange={handleInputText}
9448
maxLength="6"
95-
// readOnly={isAuth}
9649
/>
9750
{timer > 0 && (
98-
<Timer minutes={Math.floor(timer / 60)} seconds={timer % 60} />
51+
<Timer minutes={Math.floor(timer / 60)} seconds={timer % 60} />
9952
)}
10053
</div>
54+
10155
<div style={{ width: "100%", marginTop: "0.37rem" }}>
102-
{renderMessage()}
56+
{timer > 0 && chkNum.length === 6 ? (
57+
isCheck ? (
58+
<LoginChkAlrm icon={""} paddingSize={"0.45rem"}>
59+
인증이 완료되었습니다.
60+
</LoginChkAlrm>
61+
) : (
62+
<LoginChkAlrm icon={"X"} paddingSize={"0.45rem"}>
63+
인증번호가 일치하지 않습니다.
64+
</LoginChkAlrm>
65+
)
66+
) : timer <= 0 ? (
67+
<LoginChkAlrm icon={"X"} paddingSize={"0.45rem"}>
68+
인증 시간이 초과되었습니다.
69+
</LoginChkAlrm>
70+
) : null}
10371
</div>
10472
</>
10573
);

‎src/hooks/useAuthVerification.jsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import commonApis from "../utils/commonApis";
2+
3+
// 인증번호 확인
4+
const useAuthVerification = () => {
5+
const apiUrl = `/sms/verify`;
6+
const token = localStorage.getItem("accessToken");
7+
const handleAuthVerificationNumer = async (
8+
phoneNumber,
9+
verifyNumber,
10+
handleCheckInputNumber
11+
) => {
12+
try {
13+
const response = await commonApis.post(
14+
apiUrl,
15+
{
16+
phoneNumber: phoneNumber,
17+
verifyNumber: verifyNumber,
18+
},
19+
{
20+
headers: {
21+
Authorization: `Bearer ${token}`,
22+
},
23+
}
24+
);
25+
if (response.data.success) {
26+
handleCheckInputNumber(true);
27+
} else {
28+
handleCheckInputNumber(false);
29+
}
30+
} catch (error) {
31+
console.log("통신에러", error);
32+
handleCheckInputNumber(false);
33+
}
34+
};
35+
return { handleAuthVerificationNumer };
36+
};
37+
export default useAuthVerification;

‎src/hooks/useFetchCoupons.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import commonApis from "../utils/commonApis";
44
const apiUrl = `/coupon`;
55

66
const useFetchCoupons = () => {
7-
const [coupons, setCoupons] = useState([]);
7+
const [coupons, setCoupons] = useState(null); // null || []
88
const token = localStorage.getItem("accessToken");
99

1010
useEffect(() => {
1111
const fetchCoupons = async () => {
1212
try {
1313
const response = await commonApis.get(apiUrl, {
1414
headers: {
15-
Authorization: `Bearer ${token}`
16-
}
15+
Authorization: `Bearer ${token}`,
16+
},
1717
});
1818
setCoupons(response.data.coupons);
1919
} catch (error) {

‎src/hooks/useFetchUserPhoneNumber.jsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { message } from "antd";
2+
import { useNavigate } from "react-router-dom";
3+
import commonApis from "../utils/commonApis";
4+
5+
// 인증번호 발송
6+
const useFetchUserPhoneNumber = () => {
7+
const navigate = useNavigate();
8+
const apiUrl = `/sms/authority`;
9+
const token = localStorage.getItem("accessToken");
10+
const handleFetchUserPhoneNumber = async (phoneNumber) => {
11+
try {
12+
const response = await commonApis.post(
13+
apiUrl,
14+
{
15+
phoneNumber: phoneNumber,
16+
},
17+
{
18+
headers: {
19+
Authorization: `Bearer ${token}`,
20+
},
21+
}
22+
);
23+
if (response.data.success) {
24+
message.success("전화번호 등록 성공했습니다.");
25+
navigate("/");
26+
} else {
27+
message.error("전화번호 등록 실패했습니다.");
28+
}
29+
} catch (error) {
30+
console.error(error);
31+
message.info("전화번호 등록에 실패하셨습니다.");
32+
}
33+
};
34+
return { handleFetchUserPhoneNumber };
35+
};
36+
export default useFetchUserPhoneNumber;

‎src/hooks/useGetPointHistory.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const useGetPointHistory = () => {
1616
Authorization: `Bearer ${token}`,
1717
},
1818
});
19-
setPointHistory(res.data.history);
19+
setPointHistory(res.data.history.reverse());
2020
} catch (error) {
2121
console.error("Error fetching new order history:", error);
2222
} finally {

0 commit comments

Comments
 (0)