Merge pull request #51 from TeamBNBN/fe/LoginPage

[Front-End] feat: Fe/LoginPage 추가

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);

frontend/src/components/AuthForm/InputBox.jsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+import styles from './InputBox.module.css';
+
+const InputBox = forwardRef(({ title, id = null, type, children }, ref) => {
+  return (
+    <div className={styles.inputBox}>
+      <label
+        htmlFor={id}
+        className={styles.textBody}
+      >
+        {title}
+      </label>
+      <input
+        type={type}
+        id={id}
+        className={`${styles.input} ${styles.textSubheading}`}
+        ref={ref}
+        required
+      />
+      {children}
+    </div>
+  );
+});
+InputBox.displayName = 'InputBox';
+
+export default InputBox;

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

@@ -0,0 +1,13 @@
+.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;
+}

frontend/src/components/AuthForm/index.js

@@ -1 +1,2 @@
 export { default as AuthForm } from './AuthForm';
+export { default as InputBox } from './InputBox';

frontend/src/pages/LoginPage/LoginPage.jsx

@@ -0,0 +1,52 @@
+import { AuthForm, InputBox } from '../../components/AuthForm';
+import { useRef } from 'react';
+import { Link } from 'react-router-dom';
+import styles from './LoginPage.module.css';
+
+export default function LoginPage() {
+  const idRef = useRef('');
+  const passwordRef = useRef('');
+  // linkProps : 버튼 아래 나오는 링크(회원가입 등)에 대한 props object
+  const linkProps = {
+    message: '아직 회원이 아니신가요?',
+    path: '/',
+    title: '회원가입',
+  };
+
+  const findPasswordPath = '/';
+
+  const handleSubmit = () => {
+    // TODO: 로그인 POST 기능 추가
+    console.log('로그인', idRef.current.value, passwordRef.current.value);
+  };
+  return (
+    <div className={styles.wrapper}>
+      <AuthForm
+        submitFunction={handleSubmit}
+        title="로그인"
+        buttonText="로그인"
+        linkProps={linkProps}
+      >
+        <InputBox
+          title="ID"
+          id="id"
+          type="text"
+          ref={idRef}
+        />
+        <InputBox
+          title="비밀번호"
+          type="password"
+          id="password"
+          ref={passwordRef}
+        >
+          <Link
+            to={findPasswordPath}
+            className={`${styles.textBodyStrong} ${styles.secondaryColor}`}
+          >
+            비밀번호를 잊으셨나요?
+          </Link>
+        </InputBox>
+      </AuthForm>
+    </div>
+  );
+}

frontend/src/pages/LoginPage/LoginPage.module.css

@@ -0,0 +1,15 @@
+.wrapper {
+  padding-top: 120px;
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.textBodyStrong {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+}
+
+.secondaryColor {
+  color: var(--text-color-secondary);
+}