퍼블리싱수정

bsideproject · Dec 22, 2023 · 530e761 · 530e761
1 parent db26c89
commit 530e761
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 58 deletions.
diff --git a/src/assets/pages/auth/mypage.css b/src/assets/pages/auth/mypage.css
@@ -4,3 +4,9 @@
 .withdrawal-box:hover {
   font-weight: 800;
 }
+.wgary09 {
+  color: var(--wgray09);
+}
+.wgary12 {
+  color: var(--wgray12);
+}
diff --git a/src/assets/pages/auth/passwordCheck.css b/src/assets/pages/auth/passwordCheck.css
@@ -1,10 +1,10 @@
-.pw-check-whole-wrap{
+.pw-check-whole-wrap {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
 
-.pw-check-wrap{
+.pw-check-wrap {
   flex-grow: 1;
   flex: 1;
   margin: 0 16px;
@@ -13,48 +13,49 @@
   margin-bottom: 8px;
   padding-top: 32px;
 }
-.pw-check-text{
+.pw-check-text {
   margin-bottom: 32px;
 }
 /* pw-check 영역 */
-.pw-check-input-wrap{
+.pw-check-input-wrap {
   position: relative;
 }
-.pw-check-label{
+.pw-check-label {
   display: block;
   margin-bottom: 8px;
   font-size: 14px;
   font-weight: 700;
   line-height: 20px;
   letter-spacing: -0.025em;
+  color: var(--wgray13);
 }
-.pw-check-input{
+.pw-check-input {
   width: 100%;
   height: 48px;
   border-radius: 8px;
   padding: 14px 12px 14px 12px;
-  border: 1px solid #E9E7E2;
+  border: 1px solid #e9e7e2;
 }
 .pw-check-input::placeholder {
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   letter-spacing: -0.025em;
-  color: #7A7670;
+  color: #7a7670;
 }
-.pw-check-btn{
+.pw-check-btn {
   margin-top: 32px;
   width: 100%;
 }
-.pw-check-error-before-area{
+.pw-check-error-before-area {
   height: 16px;
 }
-.pw-check-color-error{
+.pw-check-color-error {
   font-size: 10px;
   font-weight: 700;
   line-height: 12px;
   letter-spacing: -0.025em;
   text-align: left;
   color: var(--error);
   margin-top: 4px;
-}
+}
diff --git a/src/assets/pages/auth/register.css b/src/assets/pages/auth/register.css
@@ -314,7 +314,12 @@
 }
 
 .register-gender-box:disabled {
-  background-color: #c9c6c0;
+  background-color: white;
+  border: 2px solid #c9c6c0 !important;
+}
+.register-gender-box:checked:disabled {
+  background-color: white;
+  border: 4.5px solid #c9c6c0 !important;
 }
 
 .register-gender-box:checked {
@@ -331,6 +336,7 @@
   font-weight: 400;
   color: var(--wgray12);
 }
+
 .register-selectBox {
   width: 100%;
 }

diff --git a/src/pages/mypage/Mypage.tsx b/src/pages/mypage/Mypage.tsx
@@ -12,6 +12,7 @@ import fetch from "utils/fetch";
 import AlertTextPopup from "components/AlertTextPopup";
 import "assets/pages/auth/mypage.css";
 
+
 const Mypage: React.FC = () => {
   //헤더설정
   const { setHeaderText, setIsNavigation } = useDefaultSets();
@@ -378,6 +379,7 @@ const Mypage: React.FC = () => {
                   className="register-gender-label body3-regular wgray12"
                   style={{
                     color: !isInfoChange === true ? "#7A7670" : "#3D3938",
+
                   }}
                 >
                   여성
@@ -434,7 +436,7 @@ const Mypage: React.FC = () => {
                 />
               </div>
             </div>
-            <div className="register-flex-row-gap0 margintop-32">
+            <div className="register-flex-row-gap0 margintop-32" style={{ alignItems: "center" }}>
               <input
                 type="checkbox"
                 className="check-btn"
@@ -443,15 +445,16 @@ const Mypage: React.FC = () => {
                 checked={emailAgree}
                 onChange={handleEmailAgree}
                 disabled={!isInfoChange}
+                style={{ width: "24px", height: "24px" }}
               />
               <label
                 htmlFor="emailAgree"
-                className="body3-regular marginleft-7"
+                className="body3-regular marginleft-7 wgary12"
               >
                 이메일 수신 동의(선택)
               </label>
             </div>
-            <div className="caption1-regular margintop-8">
+            <div className="caption1-regular margintop-8 wgary09">
               *이메일 수신을 동의하시면, 매월 말 월간 회고를 위한 월간고밍을
               보내드립니다.
             </div>
@@ -467,7 +470,7 @@ const Mypage: React.FC = () => {
             </div>
             {isInfoChange === false ? (
               <button
-                className="register-button margintop-48"
+                className="body3-bold register-button margintop-48"
                 style={{ width: "100%" }}
                 onClick={() => {
                   navigate("/password-check");
@@ -479,7 +482,7 @@ const Mypage: React.FC = () => {
               <>
                 <button
                   type="submit"
-                  className="register-button margintop-48"
+                  className="body3-bold register-button margintop-48"
                   style={{ width: "100%" }}
                 >
                   수정하기

diff --git a/src/pages/mypage/PasswordCheck.tsx b/src/pages/mypage/PasswordCheck.tsx
@@ -7,6 +7,7 @@ import "assets/pages/auth/passwordCheck.css";
 import useDefaultSets from "store/modules/Defaults";
 import Footer from "components/Footer";
 import fetch from "utils/fetch";
+import AlertTextPopup from "components/AlertTextPopup";
 /**
  * @설명 마이페이지 - 비밀번호 확인
  * @작성자 김상훈
@@ -33,43 +34,29 @@ const PasswordCheck: React.FC = () => {
   }, []);
 
   //유효성 검사 이벤트
-  const handlePassword = (): void => {
-    if (password.length < 4) {
-      setPasswrodVerify(false);
-    } else {
-      setPasswrodVerify(true);
-    }
-  };
+
 
   //유효성 검사 -> 계정정보 확인 프로세스
   const verifyCheck = async (): Promise<void> => {
-    if (!passwordVerify) {
-      alert("비밀번호는 4자리 이상입니다.");
+
+    //계정정보 확인
+    const rst = await fetch.post("/api/users/passwordConfirm", {
+      eml: userInfo.eml,
+      password: password,
+    });
+    console.log(rst);
+    if (rst.data === true) {
+      //일치확인
+      updateInfoChangeStatus(true);
+      navigate("/MyPage", { replace: true }); //해당 history를 제거
+      setPasswordChecked(false);
     } else {
-      //계정정보 확인
-      const rst = await fetch.post("/api/users/passwordConfirm", {
-        eml: userInfo.eml,
-        password: password,
-      });
-      console.log(rst);
-      if (rst.data === true) {
-        //일치확인
-        updateInfoChangeStatus(true);
-        navigate("/MyPage", { replace: true }); //해당 history를 제거
-      } else {
-        alert("비밀번호가 일치하지 않습니다.");
-      }
-
-      /**
-       * 임시구현,
-       */
-      // eslint-disable-next-line no-restricted-globals
-      // const rs = confirm("비밀번호가 틀린경우? 예/아니오");
-      // if (rs) {
-      //   setPasswordChecked(false);
-      // } else {
-      //   setPasswordChecked(true);
-      // }
+
+
+      setPasswordChecked(false);
+
+
+
     }
   };
 
@@ -86,7 +73,7 @@ const PasswordCheck: React.FC = () => {
           </p>
 
           <div className="pw-check-input-area">
-            <label className="pw-check-label" htmlFor="password">
+            <label className="pw-check-label " htmlFor="password">
               비밀번호
             </label>
             <div className="pw-check-input-wrap">
@@ -95,15 +82,16 @@ const PasswordCheck: React.FC = () => {
                 id="password"
                 className="pw-check-input"
                 value={password}
-                onKeyUp={handlePassword}
+
                 onChange={(e) => setPassword(e.target.value)}
                 style={{
-                  border: "1px solid" + !passwordVerify ? "" : "tomato",
+                  border: passwordChecked ? "" : "1px solid tomato",
                 }}
-                onBlur={handlePassword}
+
                 maxLength={30}
                 placeholder="현재 비밀번호를 입력해주세요."
               />
+
               {/* <button type="button">
               
             </button> */}
@@ -112,9 +100,15 @@ const PasswordCheck: React.FC = () => {
             {passwordChecked ? (
               <p className="pw-check-error-before-area">&nbsp;</p>
             ) : (
-              <p className="pw-check-color-error">
-                비밀번호가 일치하지 않습니다. 다시 입력해주세요.
-              </p>
+              <>
+                <p className="pw-check-color-error">
+                  비밀번호가 일치하지 않습니다. 다시 입력해주세요.
+                </p>
+                <AlertTextPopup
+                  text={"비밀번호가 일치하지 않습니다."}
+                  callbackFunction={() => setPasswordChecked(true)}
+                />
+              </>
             )}
           </div>
           <button