[Add] LoginPage View

 import './App.css';
 import './App.css';
 import RegisterPage from './component/views/RegisterPage/RegisterPage';
 import RegisterPage from './component/views/RegisterPage/RegisterPage';
+import LoginPage from './component/views/LoginPage/LoginPage';
 
 
 function App() {
 function App() {
   return (
   return (
     <div>
     <div>
-      <RegisterPage />
+      <LoginPage />
     </div>
     </div>
   );
   );
 }
 }

+import React, { useCallback, useState } from "react";
+import "../style/LoginPage.scss"
+
+function LoginPage(props) {
+  
+  const [Id, setId] = useState("");
+  const [Password, setPassword] = useState("");
+
+  const [checkIdError, setCheckIdError] = useState(false);
+  const [checkPasswordError, setCheckPasswordError] = useState(false);
+  const [checkLoginError, setCheckLoginError] = 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 onPasswordHandler = useCallback((event) => {
+    setPassword(event.currentTarget.value);
+
+    // 비밀번호 유효성 검사
+    if (!passwordRegex.test(event.currentTarget.value)) {
+      setCheckPasswordError(true);
+    }
+    else {
+      setCheckPasswordError(false);
+    }
+  }, [checkPasswordError]);
+
+  const onSubmitHandler = useCallback((event) => {
+    event.preventDefault();
+
+    if (checkIdError || Id === "") {
+      setCheckLoginError(true);
+    }
+    else if (checkPasswordError || Password === "") {
+      setCheckLoginError(true);
+    }
+    else {
+      setCheckLoginError(false);
+    }
+
+    if (!checkLoginError) {
+      const UserData = {
+        id: Id,
+        password: Password,
+      };
+    }
+
+  }, [checkIdError, checkPasswordError, Password]);
+
+  return (
+    <div id = "body">
+      <div className="login-box">
+        <h2>로그인</h2>
+        <div className="input-area">
+          <input 
+            placeholder="아이디"
+            type="text"
+            value={Id}
+            onChange={onIdHandler}
+          />
+        </div>
+        <div className="check-variable">
+          {checkIdError && <div style={{color : 'red'}}>아이디는 6자리 이상 14자리 이하 소문자와 숫자로 입력해주세요.</div>}
+        </div>
+        <div className="input-area">
+          <input 
+            placeholder="비밀번호"
+            type="text"
+            value={Password}
+            onChange={onPasswordHandler}
+          />
+        </div>
+        <div className="check-variable">
+          {checkPasswordError && <div style={{color : 'red'}}>알파벳과 숫자, 특수문자를 포함하여 8자리 이상 입력해주세요.</div>}
+        </div>
+        <div className="btn-area" onClick={onSubmitHandler}>
+          <button 
+            className="login-btn"
+          >
+            로그인
+          </button>
+        </div>
+        <div className="check-variable">
+          {checkLoginError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
+        </div>
+      </div>
+    </div>
+  );
+
+}
+
+export default LoginPage;
\ No newline at end of file

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: rgb(245, 235, 223);
+}
+#body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 2px solid;
+  border-bottom: 2px solid;
+
+  .login-box {
+    border: 2px solid;
+    width: 35%;
+    height: 60%;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    h2 {
+      text-align: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+  .input-area {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 5px;
+    
+    input {
+      padding: 10px 0.1rem;
+      background-color: rgb(255, 255, 255);
+    }
+  }
+  .check-variable {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 5px;
+  }
+  .btn-area {
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+    margin-bottom: 35px;
+
+    button {
+      width: 120px;
+      height: 40px;
+      font-size: large;
+      font-weight: bold;
+      background-color:rgb(255, 253, 238);
+      cursor: pointer;
+    }
+  }
+}