오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
정의왕
2515151b 2 parents 53368f58 89fa03dd

Merge branch 'login' into 'master' 

Login UI



See merge request !1
Expand all
Inline Side-by-side
Showing 24 changed files with 338 additions and 58 deletions
App.js
\ No newline at end of file
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>
\ No newline at end of file
......
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
......@@ -6,9 +6,13 @@
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.4",
"web-vitals": "^1.1.2"
},
"scripts": {
......
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
import logo from './logo.svg';
import './App.css';
function App() {
//import React, {useState} from "react";
import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
import LandingPage from "./component/views/LandingPage/LandingPage";
import LoginPage from "./component/views/LoginPage/LoginPage";
import RegisterPage from "./component/views/RegisterPage/RegisterPage";
import "./static/fonts/font.css";
function App () {
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>
<Router>
<div>
{}
<Routes>
<Route exact path = "/" element={<LandingPage/>}/>
<Route exact path = "/login" element={<LoginPage/>}/>
<Route exact path = "/register" element={<RegisterPage/>}/>
</Routes>
</div>
</Router>
);
}
......
// React, {useEffect} from 'react';
//import axios from 'axios';
function LandingPage() {
return (
<div>
<input type="password"/>
</div>
);
}
export default LandingPage;
import React, { useState } from "react";
import "../style/LoginPage.scss";
import { Icon, Input } from "semantic-ui-react"
function LoginPage() {
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const onIdHandler = (event) => {
setEmail(event.currentTarget.value);
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value);
};
const onSubmitHandler = (event) => {
event.preventDefault();
console.log("Email", Email);
console.log("Password", Password);
};
return (
<div id="body">
<div className="login-form">
<form onSubmit={onSubmitHandler}>
<h1>Tunnel</h1>
<div className="input-area">
<Input
icon={<Icon name='at'/>}
iconPosition='left'
placeholder="Email"
type="text"
value={Email}
autoComplete="off"
onChange={onIdHandler}/>
</div>
<div className="input-area">
<Input
icon={<Icon name='lock'/>}
iconPosition='left'
placeholder="Password"
type="password"
value={Password}
autoComplete="off"
onChange={onPasswordHandler}/>
</div>
<div className="btn-area">
<button className="login-btn" >Login</button>
<button className="register-btn" >Register</button>
</div>
</form>
</div>
</div>
);
}
export default LoginPage;
import React, { useState } from "react";
import "../style/RegisterPage.scss";
import { Icon, Input } from "semantic-ui-react"
function RegisterPage() {
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const onIdHandler = (event) => {
setEmail(event.currentTarget.value);
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value);
};
const onSubmitHandler = (event) => {
event.preventDefault();
console.log("Email",Email);
console.log("Password", Password);
};
return (
<div id="body">
<div className="register-form">
<form onSubmit={onSubmitHandler}>
<h1>Tunnel</h1>
<div className="input-area">
<Input
icon={<Icon name='at'/>}
iconPosition='left'
placeholder="Email"
type="text"
value={Email}
autoComplete="off"
onChange={onIdHandler}/>
</div>
<div className="input-area">
<Input
icon={<Icon name='lock'/>}
iconPosition='left'
placeholder="Password"
type="password"
value={Password}
autoComplete="off"
onChange={onPasswordHandler}/>
</div>
<div className="btn-area">
<button className="register-btn" >Register</button>
</div>
</form>
</div>
</div>
);
}
export default RegisterPage;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url("../images/login_background.png");
background-repeat: no-repeat;
background-position: center;
.login-form {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
width: 500px;
height: 620px;
box-shadow: 0px 0px 20px #000;
}
h1 {
font-size: 40px;
color: white;
font-weight: bold;
text-align: center;
margin-bottom: 60px ;
}
.input-area {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
position: relative;
margin-top: 20px;
font-weight: bold;
font-size: medium;
input {
width: 75%;
padding: 15px .8em .8em;
background-color: transparent;
border: 2px solid white;
border-radius: 30px;
font-size: 18px;
color: white;
outline: none;
}
label {
position: absolute;
left: 10px;
top: -2px;
font-size: 14px;
color: white;
}
}
.btn-area {
display: flex;
justify-content: space-evenly;
margin-top: 30px;
.login-btn {
width: 150px;
height: 50px;
background-color: transparent;
font-size: 20px;
color: white;
border: 2px solid white;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
}
.register-btn {
width: 150px;
height: 50px;
background-color: transparent;
font-size: 20px;
color: white;
border: 2px solid white;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url("../images/login_background.png");
background-repeat: no-repeat;
background-position: center;
.register-form {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
width: 500px;
height: 620px;
box-shadow: 0px 0px 20px #000;
}
h1 {
font-size: 40px;
color: white;
font-weight: bold;
text-align: center;
margin-bottom: 60px ;
}
.input-area {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
position: relative;
margin-top: 20px;
font-weight: bold;
font-size: medium;
input {
width: 75%;
padding: 15px .8em .8em;
background-color: transparent;
border: 2px solid white;
border-radius: 30px;
font-size: 18px;
color: white;
outline: none;
}
label {
position: absolute;
left: 10px;
top: -2px;
font-size: 14px;
color: white;
}
}
.btn-area {
display: flex;
justify-content: space-evenly;
margin-top: 30px;
.register-btn {
width: 150px;
height: 50px;
background-color: transparent;
font-size: 20px;
color: white;
border: 2px solid white;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
}
}
}
......@@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'semantic-ui-css/semantic.min.css'
ReactDOM.render(
<React.StrictMode>
......
No preview for this file type
No preview for this file type
@font-face {
font-family: NotoSansKR-Black;
src: url("./NotoSansKR-Black.eot");
}
@font-face {
font-family: NotoSansKR-Bold;
src: url("./NotoSansKR-Bold.eot");
}
@font-face {
font-family: NotoSansKR-Light;
src: url("./NotoSansKR-Light.eot");
}
@font-face {
font-family: NotoSansKR-Medium;
src: url("./NotoSansKR-Medium.eot");
}
@font-face {
font-family: NotoSansKR-Regular;
src: url("./NotoSansKR-Regular.eot");
}
@font-face {
font-family: NotoSansKR-Thin;
src: url("./NotoSansKR-Thin.eot");
}
\ No newline at end of file