보관함 디자인 수정

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 ? <NextArrowWhite/> : <NextArrowGray/>}
+              {isAllValid ? <NextArrowWhite /> : <NextArrowGray />}
             </Button>
           </div>
         </div>
@@ -190,6 +189,6 @@ const Wrapper = styled.div`
   align-items: center;
   background-color: #ffffff;
   z-index: 101;
-`
+`;
 
 export default ChangePw;

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,41 +113,52 @@ const PwResult = ({id}) => {
       setShowModal(false);
       console.log(e);
     }
-  }
+  };
 
   return (
     <AnimationContainer>
       {showModal && (
         <>
           <BlackScreen isModalOn={showModal} onClick={handleCloseModal} />
           <ModalContent onClick={(e) => e.stopPropagation()}>
-            <img src="images/lock.svg" alt="lock" style={{marginTop: "8px"}}/>
+            <img
+              src="images/lock.svg"
+              alt="lock"
+              style={{ marginTop: "8px" }}
+            />
             <div
               style={{
-                fontSize: "20px",
+                fontSize: "24px",
                 color: "#7BAB6E",
                 fontWeight: "700",
-                paddingBottom: "2px",
+                letterSpacing: "-0.02em",
               }}
             >
-              비밀번호가 재설정 되었습니다.
+              비밀번호가 변경되었습니다.
             </div>
             <div
               style={{
+                fontSize: "18px",
                 marginTop: "2px",
                 marginBottom: "28px",
+                letterSpacing: "-0.02em",
               }}
             >
-              바뀐 비밀번호로 로그인하세요
+              바뀐 비밀번호로 로그인하세요.
             </div>
-            <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "8px"}}>
-              <ModalButton1 onClick={handleCloseModal}>
-                확인
-              </ModalButton1>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                width: "100%",
+                gap: "8px",
+              }}
+            >
+              <ModalButton1 onClick={handleCloseModal}>확인</ModalButton1>
             </div>
           </ModalContent>
         </>
-        )}
+      )}
       <UserHeader>비밀번호 재설정</UserHeader>
       <div
         style={{
@@ -156,10 +167,39 @@ const PwResult = ({id}) => {
           marginTop: "64px",
         }}
       >
-         <div style={{padding: "0 16px", display: "flex", flexDirection: "column", gap: "24px"}}>
-          <Input label="비밀번호" type="password" value={pw} onChangeHandler={pwChangeHandler} isError={!!invalidPwInfo} description={invalidPwInfo}/>
-          <Input label="비밀번호 확인" type="password" value={matchingPw} onChangeHandler={matchingPwChangeHandler} isError={!!invalidMatchingPwInfo} description={invalidMatchingPwInfo}/>
-          <div style={{ position: "absolute", bottom: "40px", width: "calc(100% - 32px)", display: "flex", flexDirection: "column" }}>
+        <div
+          style={{
+            padding: "0 16px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "24px",
+          }}
+        >
+          <Input
+            label="비밀번호"
+            type="password"
+            value={pw}
+            onChangeHandler={pwChangeHandler}
+            isError={!!invalidPwInfo}
+            description={invalidPwInfo}
+          />
+          <Input
+            label="비밀번호 확인"
+            type="password"
+            value={matchingPw}
+            onChangeHandler={matchingPwChangeHandler}
+            isError={!!invalidMatchingPwInfo}
+            description={invalidMatchingPwInfo}
+          />
+          <div
+            style={{
+              position: "absolute",
+              bottom: "40px",
+              width: "calc(100% - 32px)",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
             <Button
               disabled={!isAllValid}
               buttonSize={ButtonSize.LARGE}

src/components/Modal/style.js

@@ -31,7 +31,7 @@ export const ModalMainContent = styled.div`
   color: ${(props) =>
     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`

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;

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}

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)}`;
 };