feat: 로그인 페이지 구현

@@ -2,6 +2,7 @@ import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 
 import EditorPage from "pages/Editor";
 import EditorPage from "pages/Editor";
+import LoginPage from "pages/Login";
 
 
 import "./App.css";
 import "./App.css";
 
 
@@ -10,7 +11,8 @@ function App() {
     <div className="App">
     <div className="App">
       <Router>
       <Router>
         <Switch>
         <Switch>
-          <Route path="/" component={EditorPage} />
+          <Route path="/editor" component={EditorPage} />
+          <Route path="/" component={LoginPage} />
         </Switch>
         </Switch>
       </Router>
       </Router>
     </div>
     </div>

+.login-page {
+  width: 50%;
+  margin: auto;
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  padding: 70px 50px;
+  margin-top: 100px;
+  border-radius: 20px;
+
+  .login-field {
+    input {
+      display: block;
+      margin: auto;
+      margin-bottom: 10px;
+      width: 200px;
+      height: 30px;
+      font-size: 14px;
+      border-radius: 5px;
+      border: 1px solid lightgray;
+      padding-left: 10px;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  p {
+    font-size: 13px;
+    margin-top: 30px;
+
+    button {
+      border: none;
+      cursor: pointer;
+
+      &:hover {
+        color: darkslateblue;
+        transition: 0.2s;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .login-page {
+    width: 90%;
+    margin: 10px auto;
+    padding: 20px 0;
+  }
+}
\ No newline at end of file

+import React, { useState } from "react";
+
+import "./LoginPage.scss";
+
+function LoginPage() {
+  const [loginMode, setLoginMode]: [boolean, Function] = useState(true);
+  const [id, setId] = useState('');
+  const [password, setPassword] = useState('');
+
+  return (
+    <div className="login-page">
+      {loginMode ? (
+        <>
+          <h2>로그인</h2>
+          <div className="login-field">
+            <input type="text" placeholder="아이디" value={id} onChange={e => setId(e.target.value)}/>
+            <input type="password" placeholder="패스워드" value={password} onChange={e => setPassword(e.target.value)} />
+          </div>
+          <button>로그인</button>
+          <p>아직 회원이 아니라면 <button onClick={() => setLoginMode(false)}>회원가입</button>을 먼저 진행해주세요.</p>
+        </>
+      ) : (
+        <>
+          <h2>회원가입</h2>
+          <button onClick={() => setLoginMode(true)}>로그인하기</button>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default LoginPage;
\ No newline at end of file

+export { default } from "./LoginPage";
\ No newline at end of file