feat: 패스워드변경 컴포넌트 추가
This commit is contained in:
parent
8ff950be83
commit
322e3768d8
@ -0,0 +1,75 @@
|
||||
import { useState, useRef } from 'react';
|
||||
import styles from './PasswordChangeForm.module.css';
|
||||
|
||||
export default function PasswordChangeForm() {
|
||||
const [errorConfirmMessage, setErrorConfirmMessage] = useState(false);
|
||||
const [errorSameMessage, setErrorSameMessage] = useState(false);
|
||||
const currentPasswordRef = useRef('');
|
||||
const newPasswordRef = useRef('');
|
||||
const confirmPasswordRef = useRef('');
|
||||
const userPassword = '1234';
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const currentPassword = currentPasswordRef.current.value;
|
||||
const newPassword = newPasswordRef.current.value;
|
||||
const confirmPassword = confirmPasswordRef.current.value;
|
||||
|
||||
if (currentPassword === userPassword) {
|
||||
setErrorSameMessage(false);
|
||||
} else {
|
||||
setErrorSameMessage(true);
|
||||
}
|
||||
if (newPassword === confirmPassword) {
|
||||
setErrorConfirmMessage(false);
|
||||
} else {
|
||||
setErrorConfirmMessage(true);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className={styles.passwordChangeForm}
|
||||
>
|
||||
<span className={styles.passwordText}>비밀번호 변경</span>
|
||||
<div className={styles.inputGroup}>
|
||||
<label htmlFor="currentPassword">현재 비밀번호</label>
|
||||
<input
|
||||
type="password"
|
||||
id="currentPassword"
|
||||
ref={currentPasswordRef}
|
||||
className={errorSameMessage ? styles.inputErrorBox : styles.inputBox}
|
||||
required
|
||||
/>
|
||||
{errorSameMessage && <div className={styles.errorMessage}>현재 비밀번호가 일치하지 않습니다.</div>}
|
||||
</div>
|
||||
<div className={styles.inputGroup}>
|
||||
<label htmlFor="newPassword">새 비밀번호</label>
|
||||
<input
|
||||
type="password"
|
||||
id="newPassword"
|
||||
ref={newPasswordRef}
|
||||
className={styles.inputBox}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.inputGroup}>
|
||||
<label htmlFor="confirmPassword">새 비밀번호 확인</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirmPassword"
|
||||
ref={confirmPasswordRef}
|
||||
className={errorConfirmMessage ? styles.inputErrorBox : styles.inputBox}
|
||||
required
|
||||
/>
|
||||
{errorConfirmMessage && <div className={styles.errorMessage}>비밀번호가 일치하지 않습니다.</div>}
|
||||
</div>
|
||||
<button
|
||||
className={styles.button}
|
||||
type="submit"
|
||||
>
|
||||
<div className={styles.buttonText}>비밀번호 변경</div>
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
@ -0,0 +1,61 @@
|
||||
.passwordChangeForm {
|
||||
width: 900px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.passwordText {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.inputGroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inputBox {
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
box-sizing: border-box;
|
||||
padding: 12px 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.inputErrorBox {
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--error-color);
|
||||
box-sizing: border-box;
|
||||
padding: 12px 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
color: var(--error-color);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.buttonText {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--primary-color);
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
align-self: end;
|
||||
}
|
1
frontend/src/components/PasswordChangeForm/index.js
Normal file
1
frontend/src/components/PasswordChangeForm/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default as PasswordChangeForm } from './PasswordChangeForm';
|
Loading…
Reference in New Issue
Block a user