Merge pull request #58 from TeamBNBN/fe/UserRegisterPage

[Front-End] Fe/UserRegisterPage 추가

frontend/src/components/AuthForm/InputBox.jsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 import styles from './InputBox.module.css';
 
-const InputBox = forwardRef(({ title, id = null, type, children }, ref) => {
+const InputBox = forwardRef(({ title, id = null, type, hasError = null, children }, ref) => {
   return (
-    <div className={styles.inputBox}>
+    <div className={`${styles.inputBox} ${hasError && styles.errorBox}`}>
       <label
         htmlFor={id}
         className={styles.textBody}

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

@@ -11,3 +11,28 @@
   box-sizing: border-box;
   padding: 16px;
 }
+
+.textSubheading {
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.textBodyStrong {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+}
+
+.errorBox * {
+  color: var(--error-color);
+}
+
+.errorBox input {
+  outline: none;
+  border: 1px solid var(--error-border);
+}
+
+.dangerColor {
+  color: var(--error-color);
+}

frontend/src/pages/UserRegisterPage/UserRegisterPage.jsx

@@ -0,0 +1,75 @@
+import styles from './UserRegisterPage.module.css';
+import { useRef, useState } from 'react';
+import { AuthForm, InputBox } from '../../components/AuthForm';
+
+export default function UserRegisterPage() {
+  const idRef = useRef();
+  const nameRef = useRef();
+  const emailRef = useRef();
+  const passwordRef = useRef();
+  const passwordConfirmRef = useRef();
+
+  const [passwordMatch, setPasswordMatch] = useState(true);
+
+  const handleSubmit = () => {
+    // TODO: 회원가입 POST 기능 추가
+    if (passwordRef.current.value !== passwordConfirmRef.current.value) {
+      setPasswordMatch(false);
+    } else {
+      setPasswordMatch(true);
+    }
+  };
+
+  const linkProps = {
+    message: '이미 회원이신가요?',
+    path: '/',
+    title: '로그인',
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <AuthForm
+        submitFunction={handleSubmit}
+        title="회원가입"
+        buttonText="회원가입"
+        linkProps={linkProps}
+      >
+        <InputBox
+          title="ID"
+          type="text"
+          id="ID"
+          ref={idRef}
+        />
+        <InputBox
+          title="이름"
+          type="text"
+          id="name"
+          ref={nameRef}
+        />
+        <InputBox
+          title="이메일"
+          type="email"
+          id="email"
+          ref={emailRef}
+        />
+        <InputBox
+          title="비밀번호"
+          type="password"
+          id="password"
+          ref={passwordRef}
+        />
+        <InputBox
+          title="비밀번호 확인"
+          type="password"
+          id="passwordConfirm"
+          ref={passwordConfirmRef}
+          hasError={!passwordMatch}
+        >
+          {!passwordMatch && (
+            <div className={`${styles.textBodyStrong} ${styles.dangerColor}`}>비밀번호가 일치하지 않습니다</div>
+          )}
+        </InputBox>
+      </AuthForm>
+    </div>
+  );
+}

frontend/src/pages/UserRegisterPage/UserRegisterPage.module.css

@@ -0,0 +1,35 @@
+.wrapper {
+  padding-top: 120px;
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.RegisterForm {
+  max-width: 480px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 40px;
+  gap: 40px;
+}
+
+.RegisterText {
+  font-size: 36px;
+  line-height: 1.2;
+  font-weight: 900;
+}
+
+.textBodyStrong {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+}
+
+.secondaryColor {
+  color: var(--text-color-secondary);
+}
+
+.dangerColor {
+  color: var(--error-color);
+}