Register ver1.0

-import React, { useState } from "react";
+import React, {useCallback, useState} from "react";
 import "../style/RegisterPage.scss";
 import "../style/RegisterPage.scss";
-import { Icon, Input } from "semantic-ui-react"
+import { Button, Icon, Input } from "semantic-ui-react"
 
 
 function RegisterPage() {
 function RegisterPage() {
     const [Email, setEmail] = useState("");
     const [Email, setEmail] = useState("");
     const [Password, setPassword] = useState("");
     const [Password, setPassword] = useState("");
+    const [PasswordCheck,setPasswordCheck] = useState("");
+    const [Personality, setPersonality] = useState("");
+    const [PasswordError,setPasswordError] = useState(false);
 
 
     const onIdHandler = (event) => {
     const onIdHandler = (event) => {
         setEmail(event.currentTarget.value);
         setEmail(event.currentTarget.value);
@@ -12,11 +15,22 @@ function RegisterPage() {
     const onPasswordHandler = (event) => {
     const onPasswordHandler = (event) => {
         setPassword(event.currentTarget.value);
         setPassword(event.currentTarget.value);
     };
     };
-    const onSubmitHandler = (event) => {
+    const onPersonalityHandler = (event) => {
+        setPersonality(event.currentTarget.value);
+    };
+    const onPasswordChkHandler = useCallback((event) => {
+        //비밀번호를 입력할때마다 password 를 검증하는 함수
+        setPasswordError(event.currentTarget.value !== Password);
+        setPasswordCheck(event.currentTarget.value);
+    },[PasswordCheck]);
+    const onSubmitHandler = useCallback((event) => {
         event.preventDefault();
         event.preventDefault();
+        if(Password !== PasswordCheck){
+            return setPasswordError(true);
+        }
         console.log("Email",Email);
         console.log("Email",Email);
         console.log("Password", Password);
         console.log("Password", Password);
-    };
+    },[Password,PasswordCheck]);
     return (
     return (
         <div id="body">
         <div id="body">
             <div className="register-form">
             <div className="register-form">
@@ -30,7 +44,7 @@ function RegisterPage() {
                             type="text"
                             type="text"
                             value={Email}
                             value={Email}
                             autoComplete="off"
                             autoComplete="off"
-                            onChange={onIdHandler}/>
+                            required onChange={onIdHandler}/>
                     </div>
                     </div>
                     <div className="input-area">
                     <div className="input-area">
                         <Input
                         <Input
@@ -41,9 +55,34 @@ function RegisterPage() {
                             value={Password}
                             value={Password}
                             autoComplete="off"
                             autoComplete="off"
                             onChange={onPasswordHandler}/>
                             onChange={onPasswordHandler}/>
+                        {PasswordError && <div style={{color : 'red'}}>!</div>}
+                    </div>
+                    <div className="input-area">
+                        <Input
+                            icon={<Icon name='check'/>}
+                            iconPosition='left'
+                            placeholder="Check your Password"
+                            type="password"
+                            value={PasswordCheck}
+                            autoComplete="off"
+                            onChange={onPasswordChkHandler}/>
+                    </div>
+                    <div className="input-area">
+                        <Input
+                            icon={<Icon name='heart'/>}
+                            iconPosition='left'
+                            placeholder="Your MBTI"
+                            type="text"
+                            value={Personality}
+                            autoComplete="off"
+                            onChange={onPersonalityHandler}/>
                     </div>
                     </div>
-                    <div className="btn-area">
-                        <button className="register-btn" >Register</button>
+                    <div className="btn-area" >
+                        <Button className='register-btn'
+                                content='Sign up'
+                                icon='signup'
+                                size='small'
+                                iconPosition='left'/>
                     </div>
                     </div>
                 </form>
                 </form>
             </div>
             </div>

@@ -8,7 +8,7 @@
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
   height: 100vh;
   height: 100vh;
-  background-image: url("../images/login_background.png");
+  background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url("../images/register_background.png");
   background-repeat: no-repeat;
   background-repeat: no-repeat;
   background-position: center;
   background-position: center;
   .register-form {
   .register-form {
@@ -62,8 +62,8 @@
     margin-top: 30px;
     margin-top: 30px;
 
 
     .register-btn {
     .register-btn {
-      width: 150px;
-      height: 50px;
+      width: 170px;
+      height: 55px;
       background-color: transparent;
       background-color: transparent;
       font-size: 20px;
       font-size: 20px;
       color: white;
       color: white;