feat: AuthForm 컴포넌트 inputBox 제거 및 기능변경

frontend/src/components/AuthForm/AuthForm.jsx

@@ -1,72 +1,39 @@
 import styles from './AuthForm.module.css';
-import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
-export default function AuthForm() {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+export default function AuthForm({ children, title, buttonText, linkProps = null, submitFunction }) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    submitFunction();
+  };
 
   return (
-    <form className={styles.loginForm}>
-      <span className={styles.loginText}>로그인</span>
+    <form
+      onSubmit={handleSubmit}
+      className={styles.loginForm}
+    >
+      <span className={styles.loginText}>{title}</span>
 
-      <div className={styles.formGroup}>
-        <div className={styles.inputBox}>
-          <label
-            htmlFor="username"
-            className={styles.textBody}
-          >
-            ID
-          </label>
-          <input
-            type="text"
-            id="username"
-            className={`${styles.input} ${styles.textSubheading}`}
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            required
-          />
-        </div>
-        <div className={styles.inputBox}>
-          <label
-            htmlFor="password"
-            className={styles.textBody}
-          >
-            비밀번호
-          </label>
-          <input
-            className={`${styles.input} ${styles.textSubheading}`}
-            type="password"
-            id="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
-          <Link
-            to="/"
-            className={`${styles.textBodyStrong} ${styles.secondaryColor}`}
-          >
-            비밀번호를 잊으셨나요?
-          </Link>
-        </div>
-      </div>
+      <div className={styles.formGroup}>{children}</div>
       <div className={styles.loginBox}>
         <button
           className={`${styles.loginButton} ${styles.textBodyStrong}`}
           type="submit"
         >
-          로그인
+          {buttonText}
           {/* 로그인 버튼 색깔이랑 글자 색깔 바꿔야함. */}
         </button>
-        <span className={styles.textBody}>
-          아직 회원이 아니신가요?&nbsp;&nbsp;
-          <Link
-            to="/"
-            className={styles.textBodyStrong}
-          >
-            회원가입
-          </Link>
-        </span>
+        {linkProps && (
+          <span className={styles.textBody}>
+            {linkProps.message}&nbsp;&nbsp;
+            <Link
+              to={linkProps.path}
+              className={styles.textBodyStrong}
+            >
+              {linkProps.title}
+            </Link>
+          </span>
+        )}
       </div>
     </form>
   );

frontend/src/components/AuthForm/AuthForm.module.css

@@ -21,20 +21,6 @@
   width: 100%;
 }
 
-.inputBox {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.input {
-  border-radius: 8px;
-  width: 100%;
-  border: 1px solid var(--border-color);
-  box-sizing: border-box;
-  padding: 16px;
-}
-
 .loginButton {
   width: 100%;
   background-color: var(--primary-color);