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()}> - + - 비밀번호가 재설정 되었습니다. + 비밀번호가 변경되었습니다. - 바뀐 비밀번호로 로그인하세요 + 바뀐 비밀번호로 로그인하세요. - - - 확인 - + + 확인 > - )} + )} 비밀번호 재설정 { marginTop: "64px", }} > - - - - + + + + props.modalTheme === ModalTheme.NORMAL ? "#7bab6e" : "#FF6B6B"}; font-weight: 700; - padding-bottom: 2px; + letter-spacing: -0.02em; `; export const ModalSubContent = styled.div` @@ -41,6 +41,7 @@ export const ModalSubContent = styled.div` font-weight: 400; color: ${(props) => props.modalTheme === ModalTheme.NORMAL ? "#7bab6e" : "#FF6B6B"}; + letter-spacing: -0.02em; `; export const ModalBtnWrapper = styled.div` diff --git a/src/components/pages/Main/Locker/LockerPrayerList.js b/src/components/pages/Main/Locker/LockerPrayerList.js index c0388740..05a26188 100644 --- a/src/components/pages/Main/Locker/LockerPrayerList.js +++ b/src/components/pages/Main/Locker/LockerPrayerList.js @@ -35,7 +35,7 @@ const S = { ); box-shadow: 0px 2px 8px var(--color-locker-content-shadow); border-radius: 16px; - margin: 12px 24px; + margin: 12px 24px 0px 24px; outline: ${({ isChecked }) => isChecked ? `2px solid var(--color-dark-green)` : `var(--color-white)`}; transition: all 0.3s ease-in-out; diff --git a/src/pages/Settings.js b/src/pages/Settings.js index 9e659787..64e6c579 100644 --- a/src/pages/Settings.js +++ b/src/pages/Settings.js @@ -173,7 +173,7 @@ const Settings = () => { iconSrc={"images/ic_logout.svg"} iconAlt={"icon_logout"} mainContent={"로그아웃 하시겠습니까?"} - subContent={"보다 안전하게 로그아웃을 진행해 드릴게요."} + subContent={"안전하게 로그아웃을 진행해 드릴게요."} btnContent={"로그아웃"} btnContent2={"취소"} onClickBtn={logout} diff --git a/src/utils/date.js b/src/utils/date.js index 1efc2539..504edaf9 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -25,8 +25,5 @@ export const getCalculatedDiff = (date) => { export const getDDayLabel = (date) => { const diff = getCalculatedDiff(date); - - if (diff === 0) return "D-Day"; - if (diff > 0) return `D-${diff}`; return `D+${Math.abs(diff)}`; };