Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat. authenticationNumber #78 이메일 인증 기능,CSS완성 #83

Closed
wants to merge 6 commits into from
Closed

Feat. authenticationNumber #78 이메일 인증 기능,CSS완성 #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3e96328
Feat. authenticationNumber #78 이메일 인증부분, 확인버튼 구현 안됨
Feb 28, 2023
12cd7c0
Feat. authenticationNumber #78 이메일 인증 기능,CSS완성
Mar 1, 2023
8b0c18f
Feat.Sort #82 메인정렬CSS
Mar 1, 2023
8933edc
Merge branch 'dev/passwordChange' into dev/sort
Mar 1, 2023
e6be3d6
#78 이메일 인증 기능,CSS완성 2
Mar 1, 2023
5bbf485
Merge branch 'dev' into passwordChange
haruharuganda Mar 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/api/LoginApi.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,12 @@ export const LoginApi = {
console.log("카카오 페이로드", payload);
return await instance.post("kakao/login", payload);
},

SendEmailAuthenticationNumber: async (payload) => {
return await instance.post("/auth/password", payload);
},

SendAuthenticationNumber: async (payload) => {
return await instance.patch("/auth/code", payload);
},
};
2 changes: 1 addition & 1 deletion src/components/follow/SearchCards.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const SearchCards = ({ userInfo }) => {
<div className="flex w-[119px] items-center">{userInfo.username}</div>
</div>
{isFollowed || (
<div className="flex items-center w-[62px] h-[39px] justify-center text-sm rounded-[4px] text-white bg-[#002C51]">
<div className="flex items-center w-[62px] h-[39px] justify-center text-sm rounded-[4px] text-white bg-[#002C51] cursor-pointer">
<span onClick={handleClick}>{isFollowed || "팔로우"}</span>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/follow/UserSearch.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const UserSearch = () => {
placeholder="찾고자 하는 사용자 이름을 입력해 주세요."
></input>
<img
className="absolute top-[20px] right-[40px]"
className="absolute top-[15px] right-[40px]"
src={searchIcon}
alt="돋보기 아이콘"
/>
Expand Down
3 changes: 3 additions & 0 deletions src/components/layout/Layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ const Layout = ({ children }) => {
case "/editProfile":
setHeader(() => <TopNavTitleBar>프로필 변경</TopNavTitleBar>);
break;
case "/login/auth/InputEmail":
setHeader(() => <TopNavTitleBar>이메일 입력</TopNavTitleBar>);
break;
default:
setHeader(null);
break;
Expand Down
4 changes: 2 additions & 2 deletions src/components/layout/input/LoginSignupInputBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ const LoginSignupInputBox = forwardRef((props, ref) => {
const { type, placeholder, onChange, id, bgColor, shadow } = props;
return (
<>
<div className={`${shadow}`}>
<div>
<input
// className={`w-full px-3 h-[50px] ${bgColor} focus:bg-inputBoxFocus placeholder-inputText `}
className={`w-full px-3 h-[50px] ${bgColor} placeholder-inputPlaceHoldText`}
className={`w-full px-3 h-[50px] ${bgColor} ${shadow} placeholder-inputPlaceHoldText`}
type={type}
id={id}
ref={ref}
Expand Down
7 changes: 4 additions & 3 deletions src/components/login/EmailLogin.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ const EmailLogin = () => {
shadowEmail: "",
shadowPassword: "",
});
const { isLoading } = useSelector((state) => state.LoginSlice);

console.log(isLoading);
//서버에 전달하기 위한 input Ref 생성
const userEmailRef = useRef();
const userPasswordRef = useRef();
Expand Down Expand Up @@ -209,7 +207,10 @@ const EmailLogin = () => {
</form>
<div className="mt-[26px] grid grid-cols-2 text-center">
<div className="border-4 border-indigo-600">
<button className="text-textBlack text-[16px] font-[400] px-[30px] py-[10px]">
<button
className="text-textBlack text-[16px] font-[400] px-[30px] py-[10px]"
onClick={() => navigate("/login/auth/InputEmail")}
>
비밀번호 재설정
</button>
</div>
Expand Down
202 changes: 202 additions & 0 deletions src/components/login/InputEmail.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
import React, { useState } from "react";
import Label from "../layout/Label";
import LoginSignupInputBox from "../layout/input/LoginSignupInputBox";
import IsModal from "../modal/Modal";
import { useRef } from "react";
import { LoginApi } from "../../api/LoginApi";

const InputEmail = () => {
const emailRef = useRef();
const authenticationNumberRef = useRef();
const [style, setStyle] = useState({
bgColorEmail: "bg-inputBox",
shadowEmail: "",
bgColorAuthenticationNumber: "bg-inputBox",
shadowAuthenticationNumber: "",
});
const [regulation, setRegulation] = useState("");
const [isOpen, setOpen] = useState(false);
const [ModalStr, setModalStr] = useState({
modalTitle: "",
modalMessage: "",
});
const [isLoding, setIsLoding] = useState(false);
const [InputCheck, setInputCheck] = useState(false);
const onModalOpen = () => {
setOpen({ isOpen: true });
};
const onMoalClose = () => {
setOpen({ isOpen: false });
};

const onInputColor = (event) => {
const { id, value } = event.target;
if (id === "email") {
console.log("email입니다");
setStyle(() => ({
...style,
bgColorEmail: "bg-inputBoxFocus",
shadowEmail: "drop-shadow-inputBoxShadow",
}));
if (value.trim() === "") {
setStyle(() => ({
...style,
bgColorEmail: "bg-inputBox",
shadowEmail: "",
}));
}
} else {
setStyle(() => ({
...style,
bgColorAuthenticationNumber: "bg-inputBoxFocus",
shadowAuthenticationNumber: "drop-shadow-inputBoxShadow",
}));
if (value.trim() === "") {
setStyle(() => ({
...style,
bgColorAuthenticationNumber: "bg-inputBox",
shadowAuthenticationNumber: "",
}));
}
}
};

const onSendEmail = () => {
const email = emailRef.current;
if (email.value.trim() === "") {
setRegulation(() => "이메일을 입력해주세요");
} else {
setRegulation(() => "");
}
sendEmail({ email: email.value });
};

const sendEmail = async (payload) => {
try {
setIsLoding(() => true);
onModalOpen();
const data = await LoginApi.SendEmailAuthenticationNumber(payload);
setIsLoding(() => false);
setModalStr({
modalTitle: "이메일함을 확인해주세요",
modalMessage: "인증번호를 입력해주세요",
});
setInputCheck(() => true);
} catch (error) {
console.log(error.response);
const { data } = error.response;
if (data.status === 400) {
setIsLoding(() => false);
setModalStr({
modalTitle: data.message,
modalMessage: "이메일을 확인해주세요.",
});
}
}
};

const onSubmitNextPage = () => {
const email = emailRef.current;
const authenticationNumber = authenticationNumberRef.current;

if (email.value.trim() === "") {
setRegulation(() => "이메일을 입력해주세요");
email.focus();
return;
} else if (authenticationNumber.value.trim() === "") {
setRegulation(() => "인증번호를 입력해주세요");
authenticationNumber.focus();
return;
}

if (InputCheck) {
onSubmitNextPageAxios({
email: email.value,
code: authenticationNumber.value,
});
}
};

const onSubmitNextPageAxios = async (payload) => {
try {
setIsLoding(() => true);
onModalOpen();
const data = await LoginApi.SendAuthenticationNumber(payload);
setIsLoding(() => false);
console.log(data);
} catch (error) {
console.log(error.response);
const { data } = error.response;
if (data.status === 400) {
setIsLoding(() => false);
setModalStr({
modalTitle: "인증번호 실패",
modalMessage: `인증번호가 잘못 입력되었습니다. \n 인증요청을 재시도 해주세요.`,
});
}
}
};

return (
<div className="container ">
<div className=" grid grid-flow-row ml-[20px] mr-[20px] mt-[55px]">
<div className="mb-[4px]">
<Label>비밀번호를 분실한 아이디를 입력해주세요</Label>
</div>
<div className="w-full">
<div className="flex flex-col gap-[12px]">
<div className="flex items-center gap-[20px] w-full">
<input
id="email"
type={"email"}
ref={emailRef}
onChange={onInputColor}
autoComplete="off"
placeholder="아이디(이메일) 입니다."
className={`w-[234px] px-3 h-[50px] ${style.bgColorEmail} ${style.shadowEmail} placeholder-inputPlaceHoldText`}
/>
<div
onClick={onSendEmail}
className=" bg-[#FFFFFF] flex items-center h-[50px] p-[5px] border-solid border-2 text-[16px] font-[600] border-[#002C51] rounded-[4px] leading-[28px] cursor-pointer"
>
인증 요청
</div>
</div>
<div className="flex items-center h-[20px]">
<p className=" w-full font-[500] text-[16px] text-[#DE0D0D] flex items-center">
{regulation}
</p>
</div>
<div className="h-[full]">
<LoginSignupInputBox
id="AuthenticationNumber"
type="text"
placeholder="인증번호 입력"
onChange={onInputColor}
bgColor={style.bgColorAuthenticationNumber}
shadow={style.shadowAuthenticationNumber}
ref={authenticationNumberRef}
/>
</div>
</div>
<div>
<button
className="mt-[65px] w-full bg-[#002C51] h-[40px] rounded-[4px] font-[600] text-[#fff]"
onClick={onSubmitNextPage}
>
확인
</button>
</div>
</div>
<IsModal
isModalOpen={isOpen.isOpen}
onMoalClose={onMoalClose}
message={{ ModalStr }}
isLoding={isLoding}
/>
</div>
</div>
);
};

export default InputEmail;
6 changes: 3 additions & 3 deletions src/components/main/Main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ const Main = () => {
console.log(schedules);
const [nickName, setNickname] = useState(sessionStorage.getItem("nickname"));
useEffect(() => {
const getemail = sessionStorage.getItem("email");
const getNickname = sessionStorage.getItem("nickname");
const getprofilImg = sessionStorage.getItem("profileImage");
const userId = sessionStorage.getItem("userId");

if (nickName && getemail) {
if (getNickname && userId) {
if (getprofilImg) {
setProfileImg(getprofilImg);
dispatch(__getSchedule(userId));
}
} else {
navigate(`/login`);
}
}, [navigate, nickName]);
}, [navigate, nickName, dispatch]);

return (
<>
Expand Down
48 changes: 32 additions & 16 deletions src/components/modal/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import Modal from "react-modal";

const IsModal = ({ isModalOpen, onMoalClose, message }) => {
import MoonLoader from "react-spinners/MoonLoader";
const IsModal = ({ isModalOpen, onMoalClose, message, isLoding }) => {
const modalStr = message.ModalStr;

const [modalIsOpen, setModalIsOpen] = useState(false);
Expand Down Expand Up @@ -43,20 +43,36 @@ const IsModal = ({ isModalOpen, onMoalClose, message }) => {
onRequestClose={() => setModalIsOpen(false)}
>
<div className="grid grid-flow-row gap-[20px] text-center">
<div className="flex flex-col items-center gap-[14px] mt-[10px]">
<h1 className="px-[10px] text-[#12396F] text-[18px] font-[700] whitespace-pre-line">
{modalStr.modalTitle}
</h1>
<p className="font-[400] text-[14px] text-[#12396F] whitespace-pre">
{modalStr.modalMessage}
</p>
</div>
<button
className=" w-full bg-[#002C51] h-[40px] rounded-[4px] font-[600] text-[#fff]"
onClick={onMoalClose}
>
확인
</button>
{isLoding ? (
<div className="flex flex-col items-center mt-[35px]">
<MoonLoader
color="#36a6d6"
cssOverride={{}}
loading
size={50}
speedMultiplier={1}
/>
</div>
) : (
<>
<div className="flex flex-col items-center gap-[14px] mt-[10px]">
<h1 className="px-[10px] text-[#12396F] text-[18px] font-[700] whitespace-pre-line">
{modalStr.modalTitle}
</h1>
<div className="h-[20px]">
<p className="font-[400] text-[14px] text-[#12396F] whitespace-pre">
{modalStr.modalMessage}
</p>
</div>
</div>
<button
className=" w-full bg-[#002C51] h-[40px] rounded-[4px] font-[600] text-[#fff]"
onClick={onMoalClose}
>
확인
</button>
</>
)}
</div>
</Modal>
);
Expand Down
Loading