승인 요청 이메일이 발송되었습니다.
-
- {email}(으)로 인증 이메일이 발송 되었습니다.
-
- 이메일에서 코드 6자리를 아래 박스에 입력해주세요.
-
- 혹시 이메일을 못받으셨나요? 메일 다시 보내기 -
-비밀번호 찾기
- -
- {step === 0 &&
- );
-};
-
-export default FindPWProcess;
diff --git a/src/pages/Login/FindPassword/EmailAuth.tsx b/src/pages/Login/FindPassword/EmailAuth.tsx
new file mode 100644
index 00000000..a793e3b7
--- /dev/null
+++ b/src/pages/Login/FindPassword/EmailAuth.tsx
@@ -0,0 +1,377 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import CotatoPanel from '@components/CotatoPanel';
+import panelText from '@assets/find_password_auth_code_panel_text.svg';
+import CotatoButton from '@components/CotatoButton';
+import api from '@/api/api';
+import { media } from '@theme/media';
+import { CotatoThemeType } from '@theme/theme';
+
+//
+//
+//
+
+interface EmailAuthProps {
+ goToNextStep: () => void;
+ email: string;
+}
+
+type InputRefType = (HTMLInputElement | null)[];
+
+//
+//
+//
+
+const CODE_LENGTH = 6;
+
+//
+//
+//
+
+const EmailAuth: React.FC+ 이메일에서 코드 {CODE_LENGTH}자리를 아래 박스에 입력해주세요. +
+ 재발송 시 기본 인증코드는 만료됩니다. +
인증번호를 받지 못하셨나요?
+ 다시받기 +
+ {step === 0 && (
+
+ );
+};
+
+export default FindPWProcess;
diff --git a/src/pages/Login/FindPassword/ResetPassword.tsx b/src/pages/Login/FindPassword/ResetPassword.tsx
new file mode 100644
index 00000000..2b57317e
--- /dev/null
+++ b/src/pages/Login/FindPassword/ResetPassword.tsx
@@ -0,0 +1,359 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import CotatoPanel from '@components/CotatoPanel';
+import panelText from '@assets/find_password_reset_password_panel_text.svg';
+import CotatoIcon from '@components/CotatoIcon';
+import CotatoButton from '@components/CotatoButton';
+import { Box } from '@mui/material';
+import api from '@/api/api';
+import { useNavigate } from 'react-router-dom';
+import { media } from '@theme/media';
+import { CotatoThemeType } from '@theme/theme';
+
+//
+//
+//
+
+const PASSWORD_LENGTH = /^.{8,16}$/;
+const PASSWORD_REGEX = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*(),.?":{}|<>]).+$/;
+
+//
+//
+//
+
+const ResetPassword = () => {
+ const [password, setPassword] = useState('');
+ const [passwordCheck, setPasswordCheck] = useState('');
+ const [isPassword, setIsPassword] = useState(false);
+ const [mismatchError, setMismatchError] = useState(false);
+ const [errorMsg, setErrorMsg] = useState('');
+ const [isPasswordLength, setIsPasswordLength] = useState(false);
+ const [isPasswordRegex, setIsPasswordRegex] = useState(false);
+ const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+ const navigate = useNavigate();
+
+ /**
+ *
+ */
+ const handlePasswordChange = (e: React.ChangeEvent setIsPasswordVisible(!isPasswordVisible)}>
+ theme.colors.gray60}
+ />
+
+ );
+ };
+
+ /**
+ *
+ */
+ const renderPasswordValidation = () => {
+ return (
+