Merge pull request #70 from TeamBNBN/fe/PasswordChangeForm

[Front-end] feat: 패스워드변경 컴포넌트 추가

frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx

@@ -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>
+  );
+}

frontend/src/components/PasswordChangeForm/PasswordChangeForm.module.css

@@ -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;
+}

frontend/src/components/PasswordChangeForm/index.js

@@ -0,0 +1 @@
+export { default as PasswordChangeForm } from './PasswordChangeForm';