diff --git a/src/components/ChangeInfo/ChangePw.js b/src/components/ChangeInfo/ChangePw.js index 85325ebb..8f8ce433 100644 --- a/src/components/ChangeInfo/ChangePw.js +++ b/src/components/ChangeInfo/ChangePw.js @@ -9,7 +9,6 @@ import Modal from "../Modal/Modal"; import { ReactComponent as NextArrowGray } from "../../images/ic_next_arrow_gray.svg"; import { ReactComponent as NextArrowWhite } from "../../images/ic_next_arrow_white.svg"; - const ModalContent = styled.div` position: fixed; top: 50%; @@ -40,7 +39,7 @@ const ModalButton1 = styled.button` font-size: 18px; `; -const ChangePw = ({setShowChangePw}) => { +const ChangePw = ({ setShowChangePw }) => { const [pw, setPw] = useState(""); const [matchingPw, setMatchingPw] = useState(""); const [invalidPwInfo, setInvalidPwInfo] = useState(""); @@ -111,7 +110,7 @@ const ChangePw = ({setShowChangePw}) => { // isModalOn={showModal} iconSrc={"images/lock.svg"} iconAlt={"lock"} - mainContent={"비밀번호가 재설정되었습니다."} + mainContent={"비밀번호가 변경되었습니다."} subContent={"바뀐 비밀번호로 로그인하세요."} btnContent={"확인"} onClickBtn={handleCloseModal} @@ -168,7 +167,7 @@ const ChangePw = ({setShowChangePw}) => { }} > 재설정하기 - {isAllValid ? : } + {isAllValid ? : } @@ -190,6 +189,6 @@ const Wrapper = styled.div` align-items: center; background-color: #ffffff; z-index: 101; -` +`; export default ChangePw; diff --git a/src/components/Find/PwResult.js b/src/components/Find/PwResult.js index b9f487b0..97be5ec8 100644 --- a/src/components/Find/PwResult.js +++ b/src/components/Find/PwResult.js @@ -2,7 +2,7 @@ import { useState } from "react"; import Button, { ButtonSize, ButtonTheme } from "../Button/Button"; import Input from "../Input/Input"; import UserHeader from "../UserHeader"; -import styled, { keyframes } from 'styled-components'; +import styled, { keyframes } from "styled-components"; import BlackScreen from "../BlackScreen/BlackScreen"; import publicapi from "../../api/publicapi"; import { useNavigate } from "react-router-dom"; @@ -19,7 +19,6 @@ const ModalContent = styled.div` justify-content: center; align-items: center; background-color: white; - gap: 8px; border-radius: 16px; padding: 16px; color: #7bab6e; @@ -37,20 +36,20 @@ const AnimationContainer = styled.div` display: flex; flex-direction: column; align-items: center; - background-color: #FFFFFF; + background-color: #ffffff; `; const ModalButton1 = styled.button` flex-grow: 1; flex-basis: 0; - background-color: #7BAB6E; + background-color: #7bab6e; border-style: none; border-radius: 16px; padding: 16px 0; - color: #FFFFFF; + color: #ffffff; font-size: 18px; `; -const PwResult = ({id}) => { +const PwResult = ({ id }) => { const [pw, setPw] = useState(""); const [matchingPw, setMatchingPw] = useState(""); const [invalidPwInfo, setInvalidPwInfo] = useState(""); @@ -59,18 +58,19 @@ const PwResult = ({id}) => { const navigate = useNavigate(); - const handleCloseModal = () =>{ + const handleCloseModal = () => { setShowModal(false); - navigate('/login'); + navigate("/login"); }; - const isAllValid = pw && matchingPw && !invalidPwInfo && !invalidMatchingPwInfo; + const isAllValid = + pw && matchingPw && !invalidPwInfo && !invalidMatchingPwInfo; const pwRegEx = /^[a-zA-Z0-9!@#$%^&*()_+{}|:"<>?~\[\]\\;',./]{8,16}$/; const pwCheck = (pw) => { return pwRegEx.test(pw); - } + }; const pwChangeHandler = (e) => { setPw(e.target.value); @@ -113,7 +113,7 @@ const PwResult = ({id}) => { setShowModal(false); console.log(e); } - } + }; return ( @@ -121,33 +121,44 @@ const PwResult = ({id}) => { <> e.stopPropagation()}> - lock + lock
- 비밀번호가 재설정 되었습니다. + 비밀번호가 변경되었습니다.
- 바뀐 비밀번호로 로그인하세요 + 바뀐 비밀번호로 로그인하세요.
-
- - 확인 - +
+ 확인
- )} + )} 비밀번호 재설정
{ marginTop: "64px", }} > -
- - -
+
+ + +