From 843490d7e2db0eb15888c348773800cd1266c408 Mon Sep 17 00:00:00 2001 From: ahyexng Date: Tue, 12 Sep 2023 17:04:49 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20emailverification=20api=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 42 +++++++++-------- src/api/Auth/EmailVerificationApi.js | 18 +++++++ src/pages/Join/EmailVerification.js | 70 ++++++++++++++++++++++++++++ src/pages/Join/Join.js | 6 ++- 4 files changed, 115 insertions(+), 21 deletions(-) create mode 100644 src/api/Auth/EmailVerificationApi.js create mode 100644 src/pages/Join/EmailVerification.js diff --git a/src/App.js b/src/App.js index a11d15b..ae1c239 100644 --- a/src/App.js +++ b/src/App.js @@ -12,27 +12,31 @@ import MyPageEducation from './pages/MyPage/MyPageEducation'; import MyPageAccount from './pages/MyPage/MyPageAccount'; import Complete from './pages/Education/Complete'; import NotFound from './pages/Error/NotFound'; - +import EmailVerification from './pages/Join/EmailVerification'; function App() { return ( - - - -
- - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - + + + +
+ + } /> + } /> + } /> + } + /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + ); } diff --git a/src/api/Auth/EmailVerificationApi.js b/src/api/Auth/EmailVerificationApi.js new file mode 100644 index 0000000..aedcb0f --- /dev/null +++ b/src/api/Auth/EmailVerificationApi.js @@ -0,0 +1,18 @@ +// import { useEffect, useState } from 'react'; +// import { useParams } from 'react-router-dom'; +import { Axios } from '../Axios'; + +export const EmailVerificationApi = (verifyToken, callbackFunctions) => { + const { navigateSuccess, navigateError } = callbackFunctions; + console.log(verifyToken); + Axios.post(`/auth/email-verification?verifyToken=${verifyToken}`) + .then((res) => { + navigateSuccess(res); + console.log(res.data); + }) + .catch((error) => { + navigateError(error); + }); +}; + +export default EmailVerificationApi; diff --git a/src/pages/Join/EmailVerification.js b/src/pages/Join/EmailVerification.js new file mode 100644 index 0000000..d3013dc --- /dev/null +++ b/src/pages/Join/EmailVerification.js @@ -0,0 +1,70 @@ +import { useEffect, useState } from 'react'; +import styled from 'styled-components'; +import EmailVerificationApi from '../../api/Auth/EmailVerificationApi'; +import { useParams } from 'react-router-dom'; + +const EmailVerification = () => { + // const { verifyToken } = useParams(); + const [isVerified, setIsVerified] = useState(null); + const urlParams = new URLSearchParams(window.location.search); + const verifyToken = urlParams.get('verifyToken'); + // const verifyToken = '2f9ac20d-0b99-471b-9f8e-158f597f8f38'; + useEffect(() => { + // 이메일 인증을 처리하기 위한 API 호출 + EmailVerificationApi(verifyToken, callbackFunctions); + }); + const callbackFunctions = { + navigateSuccess: (res) => { + console.log(res); + setIsVerified(true); + }, + navigateError: (error) => { + console.log(error); + }, + }; + return ( + <> + + + + {isVerified === true && ( +

인증완료! 회원가입이 성공적으로 완료되었습니다.

+ )} + {isVerified === false && ( +

인증이 실패되었습니다. 다시 시도해주세요.

+ )} + {isVerified === null &&

인증을 확인하고 있습니다...

} + + + + + ); +}; + +const EmailVerificationWrap = styled.div` + display: flex; + justify-content: center; +`; +const EmailVerificationBox = styled.div` + background-color: pink; + margin-top: 80px; + height: 200px; + width: 600px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + box-shadow: rgb(0, 0, 0, 0.15) 0px 5px 10px 0px; + h1 { + font-size: 28px; + font-weight: 700; + margin: 50px; + } +`; + +const VerificationText = styled.p` + width: 500px; + font-weight: 900; + font-size: 25px; +`; +export default EmailVerification; diff --git a/src/pages/Join/Join.js b/src/pages/Join/Join.js index fff1b57..0cb09d5 100644 --- a/src/pages/Join/Join.js +++ b/src/pages/Join/Join.js @@ -23,8 +23,10 @@ const Join = () => { }; const callbackFunctions = { navigateSuccess: () => { - alert('회원가입 성공! 로그인화면으로 돌아갑니다.'); - navigate('/login'); + alert( + '이메일을 확인해주세요. 이메일 인증이 완료되면 회원가입이 완료됩니다!' + ); + navigate('/email-verification'); }, navigateError: (error) => { error.response && error.response.status === 409 From f21717e241807d34ea8431f645bdc17b100f7d62 Mon Sep 17 00:00:00 2001 From: ahyexng Date: Tue, 12 Sep 2023 18:27:21 +0900 Subject: [PATCH 2/7] feat: emailVerification api --- src/api/Auth/EmailVerificationApi.js | 1 - src/pages/Join/EmailVerification.js | 5 +---- src/pages/Join/Join.js | 2 +- src/pages/MyPage/MyPageAccount.js | 2 +- 4 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/api/Auth/EmailVerificationApi.js b/src/api/Auth/EmailVerificationApi.js index aedcb0f..9d001ab 100644 --- a/src/api/Auth/EmailVerificationApi.js +++ b/src/api/Auth/EmailVerificationApi.js @@ -4,7 +4,6 @@ import { Axios } from '../Axios'; export const EmailVerificationApi = (verifyToken, callbackFunctions) => { const { navigateSuccess, navigateError } = callbackFunctions; - console.log(verifyToken); Axios.post(`/auth/email-verification?verifyToken=${verifyToken}`) .then((res) => { navigateSuccess(res); diff --git a/src/pages/Join/EmailVerification.js b/src/pages/Join/EmailVerification.js index d3013dc..6a87124 100644 --- a/src/pages/Join/EmailVerification.js +++ b/src/pages/Join/EmailVerification.js @@ -4,15 +4,12 @@ import EmailVerificationApi from '../../api/Auth/EmailVerificationApi'; import { useParams } from 'react-router-dom'; const EmailVerification = () => { - // const { verifyToken } = useParams(); const [isVerified, setIsVerified] = useState(null); const urlParams = new URLSearchParams(window.location.search); const verifyToken = urlParams.get('verifyToken'); - // const verifyToken = '2f9ac20d-0b99-471b-9f8e-158f597f8f38'; useEffect(() => { - // 이메일 인증을 처리하기 위한 API 호출 EmailVerificationApi(verifyToken, callbackFunctions); - }); + }, [verifyToken]); const callbackFunctions = { navigateSuccess: (res) => { console.log(res); diff --git a/src/pages/Join/Join.js b/src/pages/Join/Join.js index 0cb09d5..4c718ac 100644 --- a/src/pages/Join/Join.js +++ b/src/pages/Join/Join.js @@ -26,7 +26,7 @@ const Join = () => { alert( '이메일을 확인해주세요. 이메일 인증이 완료되면 회원가입이 완료됩니다!' ); - navigate('/email-verification'); + // navigate('/email-verification'); }, navigateError: (error) => { error.response && error.response.status === 409 diff --git a/src/pages/MyPage/MyPageAccount.js b/src/pages/MyPage/MyPageAccount.js index dfa32f2..f310d4a 100644 --- a/src/pages/MyPage/MyPageAccount.js +++ b/src/pages/MyPage/MyPageAccount.js @@ -12,7 +12,7 @@ const MyPageAccount = () => { }; const deleteUserCheck = () => { if (confirm('정말로 탈퇴하시겠습니까?') === true) { - window.localStorage.setItem('loginState', false); + window.sessionStorage.setItem('loginState', false); DeleteUser(callbackFunction); } else return false; }; From 67c50aac9bb578a25e0c5e9889000e38cdda944e Mon Sep 17 00:00:00 2001 From: ahyexng Date: Tue, 12 Sep 2023 19:02:20 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?= =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=ED=9B=84=20btn=20navigate=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Join/EmailVerification.js | 53 ++++++++++++++++++++--------- src/pages/Join/Join.js | 2 +- 2 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/pages/Join/EmailVerification.js b/src/pages/Join/EmailVerification.js index 6a87124..05b92fd 100644 --- a/src/pages/Join/EmailVerification.js +++ b/src/pages/Join/EmailVerification.js @@ -1,9 +1,9 @@ import { useEffect, useState } from 'react'; import styled from 'styled-components'; import EmailVerificationApi from '../../api/Auth/EmailVerificationApi'; -import { useParams } from 'react-router-dom'; - +import { useNavigate } from 'react-router-dom'; const EmailVerification = () => { + const navigate = useNavigate(); const [isVerified, setIsVerified] = useState(null); const urlParams = new URLSearchParams(window.location.search); const verifyToken = urlParams.get('verifyToken'); @@ -23,15 +23,24 @@ const EmailVerification = () => { <> - - {isVerified === true && ( + {isVerified === true && ( +

인증완료! 회원가입이 성공적으로 완료되었습니다.

- )} - {isVerified === false && ( + + + )} + {isVerified === false && ( +

인증이 실패되었습니다. 다시 시도해주세요.

- )} - {isVerified === null &&

인증을 확인하고 있습니다...

} - + + + )} + {isVerified === null && ( + +

인증을 하고 있습니다...

+ + + )} @@ -43,10 +52,10 @@ const EmailVerificationWrap = styled.div` justify-content: center; `; const EmailVerificationBox = styled.div` - background-color: pink; + background-color: ${({ theme }) => theme.colors.BG_SKYBLUE}; margin-top: 80px; height: 200px; - width: 600px; + width: 700px; display: flex; flex-direction: column; align-items: center; @@ -58,10 +67,22 @@ const EmailVerificationBox = styled.div` margin: 50px; } `; - -const VerificationText = styled.p` - width: 500px; - font-weight: 900; - font-size: 25px; +const VerifiedBox = styled.div` + display: flex; + flex-direction: column; + align-items: center; + p { + font-size: 25px; + margin-bottom: 40px; + } + button { + background-color: ${({ theme }) => theme.colors.BLUE}; + padding: 10px; + height: 50px; + border-radius: 10px; + font-size: 24px; + color: white; + font-weight: 600; + } `; export default EmailVerification; diff --git a/src/pages/Join/Join.js b/src/pages/Join/Join.js index 4c718ac..0cb09d5 100644 --- a/src/pages/Join/Join.js +++ b/src/pages/Join/Join.js @@ -26,7 +26,7 @@ const Join = () => { alert( '이메일을 확인해주세요. 이메일 인증이 완료되면 회원가입이 완료됩니다!' ); - // navigate('/email-verification'); + navigate('/email-verification'); }, navigateError: (error) => { error.response && error.response.status === 409 From 01b7bd537107dd33664cdacb0d5eb516a9069ce4 Mon Sep 17 00:00:00 2001 From: ahyexng Date: Wed, 13 Sep 2023 21:00:30 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20email=20verification=20ui=20?= =?UTF-8?q?=E3=84=B1=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/email.png | Bin 0 -> 10902 bytes src/pages/Join/EmailVerification.js | 152 +++++++++++++++++++++++++--- 2 files changed, 138 insertions(+), 14 deletions(-) create mode 100644 src/assets/images/email.png diff --git a/src/assets/images/email.png b/src/assets/images/email.png new file mode 100644 index 0000000000000000000000000000000000000000..1ae4ff5ffa56a836fe7bccc8e2b3af929f7c2535 GIT binary patch literal 10902 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 { const navigate = useNavigate(); const [isVerified, setIsVerified] = useState(null); @@ -25,21 +27,57 @@ const EmailVerification = () => { {isVerified === true && ( -

인증완료! 회원가입이 성공적으로 완료되었습니다.

+ + surfingIcon + 인증이 완료되었습니다! + + + 회원가입이 성공적으로 완료되었습니다.
+ 이제 로그인 후 학습을 시작하실 수 있습니다. + )} {isVerified === false && ( - -

인증이 실패되었습니다. 다시 시도해주세요.

+ + mailIcon + 인증이 실패하였습니다 + + 인증메일의 인증코드가 만료되었는지 확인해주세요.
+ 만약 완료되었다면, 회원가입을 다시 시도해주세요. + + + 유의사항 +

+ 인증 메일은 발송 시점으로부터 5분 동안만 유효하며, 재발송 시 + 기존 인증코드는 만료됩니다. 반드시 마지막에 수신된 메일을 + 확인바랍니다. +

+ - + )} {isVerified === null && ( - -

인증을 하고 있습니다...

- - + + mailIcon + 인증 메일이 발송되었습니다 + + 메일함에서 인증 메일을 확인 바랍니다.
+ 이메일의 인증 버튼을 선택하면 회원가입이 완료됩니다. + + + 유의사항 +

+ 인증 메일은 발송 시점으로부터 5분 동안만 유효하며, 재발송 시 + 기존 인증코드는 만료됩니다. 반드시 마지막에 수신된 메일을 + 확인바랍니다. +

+ + 이메일을 잘못 입력하셨나요? + + )} @@ -50,16 +88,16 @@ const EmailVerification = () => { const EmailVerificationWrap = styled.div` display: flex; justify-content: center; + text-align: center; `; const EmailVerificationBox = styled.div` - background-color: ${({ theme }) => theme.colors.BG_SKYBLUE}; margin-top: 80px; - height: 200px; + /* height: 600px; */ width: 700px; display: flex; flex-direction: column; align-items: center; - justify-content: center; + box-shadow: rgb(0, 0, 0, 0.15) 0px 5px 10px 0px; h1 { font-size: 28px; @@ -71,9 +109,8 @@ const VerifiedBox = styled.div` display: flex; flex-direction: column; align-items: center; - p { - font-size: 25px; - margin-bottom: 40px; + img { + height: 70px; } button { background-color: ${({ theme }) => theme.colors.BLUE}; @@ -83,6 +120,93 @@ const VerifiedBox = styled.div` font-size: 24px; color: white; font-weight: 600; + margin-top: 30px; + margin-bottom: 50px; + } +`; +const EmailTrue = styled.div` + display: flex; + align-items: center; + margin-top: 20px; + p { + margin-top: 30px; + padding: 10px; + font-weight: 600; + font-size: 35px; + } +`; +const VerifiedFalse = styled.div` + display: flex; + flex-direction: column; + align-items: center; + img { + height: 80px; + width: 80px; + margin: 60px 0 30px 0; + } + button { + background-color: ${({ theme }) => theme.colors.BLUE}; + padding: 10px; + height: 50px; + border-radius: 10px; + font-size: 23px; + color: white; + font-weight: 600; + margin-top: 30px; + margin-bottom: 50px; + } +`; +const VerifiedNull = styled.div` + display: flex; + flex-direction: column; + align-items: center; + img { + height: 80px; + width: 80px; + margin: 60px 0 30px 0; } + button { + background-color: ${({ theme }) => theme.colors.BLUE}; + padding: 10px; + height: 50px; + border-radius: 10px; + font-size: 20px; + color: white; + font-weight: 600; + margin-top: 10px; + margin-bottom: 50px; + } +`; +const Note = styled.div` + background-color: #f8f9fa; + margin-top: 80px; + height: 100px; + padding: 25px; + display: flex; + flex-direction: column; + align-items: center; + font-size: 15px; + p { + font-size: 14px; + width: 500px; + margin-top: 8px; + color: ${({ theme }) => theme.colors.INPUT_GRAY}; + line-height: 20px; + } +`; +const EmailSendMsg = styled.p` + font-size: 30px; + margin-bottom: 30px; +`; +const EmailMsg = styled.p` + font-size: 18px; + width: 450px; + padding-left: 30px; + line-height: 26px; + color: ${({ theme }) => theme.colors.INPUT_GRAY}; +`; +const JoinAgain = styled.p` + color: ${({ theme }) => theme.colors.INPUT_GRAY}; + margin-top: 40px; `; export default EmailVerification; From 227535b88ea33d3f9b0e1499c056545a60efdb39 Mon Sep 17 00:00:00 2001 From: ahyexng Date: Wed, 13 Sep 2023 21:05:06 +0900 Subject: [PATCH 5/7] =?UTF-8?q?style:=20emailverification=20style=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Join/EmailVerification.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/Join/EmailVerification.js b/src/pages/Join/EmailVerification.js index 3982e92..6a93c24 100644 --- a/src/pages/Join/EmailVerification.js +++ b/src/pages/Join/EmailVerification.js @@ -69,8 +69,8 @@ const EmailVerification = () => { 유의사항

인증 메일은 발송 시점으로부터 5분 동안만 유효하며, 재발송 시 - 기존 인증코드는 만료됩니다. 반드시 마지막에 수신된 메일을 - 확인바랍니다. + 기존 인증코드는 만료됩니다.
반드시 마지막에 수신된 + 메일을 확인바랍니다.

이메일을 잘못 입력하셨나요? @@ -173,7 +173,7 @@ const VerifiedNull = styled.div` font-size: 20px; color: white; font-weight: 600; - margin-top: 10px; + margin-top: 15px; margin-bottom: 50px; } `; @@ -181,14 +181,14 @@ const Note = styled.div` background-color: #f8f9fa; margin-top: 80px; height: 100px; - padding: 25px; + padding: 20px; display: flex; flex-direction: column; align-items: center; font-size: 15px; p { font-size: 14px; - width: 500px; + width: 530px; margin-top: 8px; color: ${({ theme }) => theme.colors.INPUT_GRAY}; line-height: 20px; From d4c2fe5c604fb2604a25696003ba31d551baef26 Mon Sep 17 00:00:00 2001 From: ahyexng Date: Wed, 13 Sep 2023 21:13:09 +0900 Subject: [PATCH 6/7] =?UTF-8?q?style:=20email-verification=20btn=20style?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Join/EmailVerification.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Join/EmailVerification.js b/src/pages/Join/EmailVerification.js index 6a93c24..740e0ef 100644 --- a/src/pages/Join/EmailVerification.js +++ b/src/pages/Join/EmailVerification.js @@ -6,7 +6,7 @@ import MailIcon from '../../assets/images/email.png'; import SurfingLogo from '../../assets/images/surfing-logo.png'; const EmailVerification = () => { const navigate = useNavigate(); - const [isVerified, setIsVerified] = useState(null); + const [isVerified, setIsVerified] = useState(true); const urlParams = new URLSearchParams(window.location.search); const verifyToken = urlParams.get('verifyToken'); useEffect(() => { @@ -174,7 +174,7 @@ const VerifiedNull = styled.div` color: white; font-weight: 600; margin-top: 15px; - margin-bottom: 50px; + margin-bottom: 30px; } `; const Note = styled.div` From 4884d0742e102bf66ed6712f30348f4802dd12e6 Mon Sep 17 00:00:00 2001 From: ahyexng Date: Wed, 20 Sep 2023 15:03:03 +0900 Subject: [PATCH 7/7] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Join/EmailVerification.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Join/EmailVerification.js b/src/pages/Join/EmailVerification.js index 740e0ef..ff86e69 100644 --- a/src/pages/Join/EmailVerification.js +++ b/src/pages/Join/EmailVerification.js @@ -92,7 +92,6 @@ const EmailVerificationWrap = styled.div` `; const EmailVerificationBox = styled.div` margin-top: 80px; - /* height: 600px; */ width: 700px; display: flex; flex-direction: column;