[Add] RegisterPage Files

-import logo from './logo.svg';
 import './App.css';
 import './App.css';
+import RegisterPage from './component/views/RegisterPage/RegisterPage';
 
 
 function App() {
 function App() {
   return (
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <RegisterPage />
     </div>
     </div>
   );
   );
 }
 }

+import React, { useCallback, useState } from "react";
+
+function RegisterPage(props) {
+  
+  const [Name, setName] = useState("");
+  const [Sex, setSex] = useState("");
+  const [Id, setId] = useState("");
+  const [Password, setPassword] = useState("");
+  const [PasswordCheck, setPasswordCheck] = useState("");
+  const [PasswordError, setPasswordError] = useState(false);
+
+  const [checkNameError, setCheckNameError] = useState(false);
+  const [checkSexError, setCheckSexError] = useState(false);
+  const [checkIdError, setCheckIdError] = useState(false);
+  const [checkPasswordError, setCheckPasswordError] = useState(false);
+  const [checkRegisterError, setCheckRegisterError] = useState(false);
+
+  const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
+  const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;
+
+  const onIdHandler = useCallback((event) => {
+    setId(event.currentTarget.value);
+
+    // 아이디 유효성 검사
+    if (!idRegex.test(event.currentTarget.value)) {
+      setCheckIdError(true);
+    }
+    else {
+      setCheckIdError(false);
+    }
+
+  }, [checkIdError]);
+
+  const onNameHandler = useCallback((event) => {
+    setName(event.currentTarget.value);
+
+    // 이름 유효성 검사
+    if (event.currentTarget.value.length < 2) {
+      setCheckNameError(true);
+    }
+    else {
+      setCheckNameError(false);
+    }
+  }, [checkNameError]);
+
+  const onSexHandler = useCallback((event) => {
+    setSex(event.currentTarget.value);
+  }, [checkSexError]);
+
+  const onPasswordHandler = useCallback((event) => {
+    setPassword(event.currentTarget.value);
+
+    // 비밀번호 유효성 검사
+    if (!passwordRegex.test(event.currentTarget.value)) {
+      setCheckPasswordError(true);
+    }
+    else {
+      setCheckPasswordError(false);
+    }
+  }, [checkPasswordError]);
+
+  const onPasswordCheckHandler = useCallback((event) => {
+    //비밀번호를 입력할때마다 password 를 검증하는 함수
+    setPasswordError(event.currentTarget.value !== Password);
+    setPasswordCheck(event.currentTarget.value);
+  },[PasswordError]);
+
+
+  return (
+    <div id = "body">
+      <div className="register-box">
+        <h2>회원가입</h2>
+        <div className="input-area">
+          <input 
+            placeholder="이름"
+            type="text"
+            value={Name}
+            onChange={onNameHandler}
+          />
+        </div>
+        {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
+        <div className="input-area">
+          <input 
+            placeholder="아이디"
+            type="text"
+            value={Id}
+            onChange={onIdHandler}
+          />
+        </div>
+        {checkIdError && <div style={{color : 'red'}}>아이디는 6자리 이상 14자리 이하 알파벳 소문자와 숫자로 입력해주세요.</div>}
+        <div className="input-area">
+          <input 
+            placeholder="비밀번호"
+            type="text"
+            value={Password}
+            onChange={onPasswordHandler}
+          />
+        </div>
+        {checkPasswordError && <div style={{color : 'red'}}>알파벳과 숫자, 특수문자를 포함하여 8자리 이상 입력해주세요.</div>}
+        <div className="input-area">
+          <input 
+            placeholder="비밀번호 재입력"
+            type="text"
+            value={PasswordCheck}
+            onChange={onPasswordCheckHandler}
+          />
+        </div>
+        {PasswordError && <div style={{color : 'red'}}>비밀번호가 일치하지 않습니다.</div>}
+      </div>
+      <div className="input-area">
+          <input 
+            type="radio" 
+            value = "0"
+            checked = {Sex === "0"}
+            onChange={onSexHandler}
+          />남
+          <input 
+            type="radio" 
+            value = "1"
+            checked = {Sex === "1"}
+            onChange={onSexHandler}
+          />여
+        </div>
+      <div className="btn-area">
+        <button 
+          className="register-btn"
+          content="Sign up">
+          회원가입
+        </button>
+      </div>
+    </div>
+  );
+
+}
+
+export default RegisterPage;
\ No newline at end of file

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
\ No newline at end of file