Commit c4848cf1 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

이거 병합하세요

parent 7d7cf27a
import React from 'react'
import { Navbar, Nav, Button } from 'react-bootstrap';
function Menu() {
const userName = "정연우";
return (
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
<div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 환영합니다</div>
<Nav className="mr-auto">
<Nav.Link href="/home">Home</Nav.Link>
<Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link>
</Nav>
<Button variant="light" className="ml-3">Logout</Button>
</Navbar>
)
}
export default Menu
import React, { useState } from 'react';
import { Row, Col, Modal, Button, Navbar, Nav } from 'react-bootstrap';
import { Row, Col, Modal, Button } from 'react-bootstrap';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList';
import Chat from '../Components/Chat';
import Menu from '../Components/Menu';
// import styled from 'styled-components';
// const List = styled.div`
// background: #FFFAFA;
// `
const userName = "정연우";
function Home() {
......@@ -25,20 +25,7 @@ function Home() {
return (
<>
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand>
<div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 환영합니다</div>
<Nav className="mr-auto">
<Nav.Link href="/homepage">Home</Nav.Link>
<Nav.Link href="/profilepage">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link>
</Nav>
{/* <Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-info">Search</Button>
</Form> */}
<Button variant="light" className="ml-3">Logout</Button>
</Navbar>
<Menu />
<Row className="mr-0">
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
......
import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Menu from '../Components/Menu';
function LogIn() {
const [validated, setValidated] = useState(false);
......@@ -17,10 +18,7 @@ function LogIn() {
return (
<>
<Navbar bg="dark" variant="dark">
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar>
<Menu />
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
......
import React, { useState } from "react";
import Joi, { validate } from "joi-browser";
const LoginForm = () => {
const userSchema = {
username: Joi.string().required(),
password: Joi.string().required(),
};
const [userInfo, setUserInfo] = useState({
username: "",
password: "",
});
const handleSubmit = (e) => {
e.preventDefault(); // 기본 동작 방지
};
const handleChange = (e) => {
// e.target.id: 변경이 일어난 input 태그의 id
// e.target.value: 변경이 일어난 input 태그의 값
const { id, value } = e.target;
const errors = { ...userInfo.errors };
/* 입력받은 값 유효성 검증 */
const obj = { [id]: value }; // 입력받은 값에
const schema = { [id]: userSchema[id] }; // Joi 스키마를 적용하여
const { error } = validate(obj, schema); // 유효성 검증
if(error) errors[id] = error;
else delete errors[id];
/* 입력받은 username 및 password를 state에 저장 */
const data = userInfo;
data[id] = value; // 점(.) 표기법을 대괄호([]) 표기법으로 사용
setUserInfo({ ...data, errors });
};
const buttonValidate = () => {
const options = { abortEarly: false, allowUnknown:true };
const { error } = Joi.validate(userInfo, userSchema, options);
// 에러 미발생 시 null 반환
if (!error) return null;
// 에러 발생 시 에러 정보 반환
const errors = {};
for (let item of error.details) {
errors[item.path[0]] = item.message;
}
return errors;
}
const handleClick = (e) => {
e.preventDefault();
const validUsername = 'ingyeo';
const validPassword = '1234';
if(validUsername === userInfo.username && validPassword === userInfo.password)
alert('로그인 성공!')
else
alert('로그인 실패...');
}
return (
<div>
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="username">Username</label>{" "}
{/* 이 label 태그는 아래 input 태그를 참조함 */}
<input
onChange={handleChange}
id="username"
type="text"
className="form-control"
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
onChange={handleChange}
id="password"
type="password"
className="form-control"
/>
</div>
<button
disabled={buttonValidate()}
onClick={handleClick}
className="btn btn-primary">Login</button>
</form>
</div>
);
};
export default LoginForm;
\ No newline at end of file
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Menu from '../Components/Menu';
import { Image, Button, Container, Form, FormControl, Navbar, Nav } from 'react-bootstrap';
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
......@@ -89,16 +89,7 @@ function ProfilePage() {
return (
<div>
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand>
<div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 환영합니다</div>
<Nav className="mr-auto">
<Nav.Link href="/homepage">Home</Nav.Link>
<Nav.Link href="/profilepage">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link>
</Nav>
<Button variant="light" className="ml-3">Logout</Button>
</Navbar>
<Menu />
{tohome ? <Redirect to='/homepage' /> : ''}
<Container className="d-flex justify-content-center">
......
import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Menu from '../Components/Menu';
function SingUp() {
const [validated, setValidated] = useState(false);
......@@ -17,9 +18,7 @@ function SingUp() {
return (
<>
<Navbar bg="dark" variant="dark">
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar>
<Menu />
<div>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
......
......@@ -7,7 +7,7 @@ import ProfilePage from './Pages/ProfilePage';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import LogInPage from './Pages/LogInPage';
import LoginForm from './Pages/LoginForm';
// import LoginForm from './Pages/LoginForm';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import Hello from './Hello'
import HomePage from './Pages/HomePage'
......@@ -16,11 +16,12 @@ import HomePage from './Pages/HomePage'
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/" component={LogInPage} />
<Route path="/signuppage" component={SignUpPage} />
<Route path="/profilepage" component={ProfilePage} />
<Route exact path="/" component={HomePage} />
<Route path="/login" component={LogInPage} />
<Route path="/signup" component={SignUpPage} />
<Route path="/profile" component={ProfilePage} />
<Route path="/hello" component={Hello} />
<Route path="/homepage" component={HomePage} />
<Route path="/home" component={HomePage} />
<Redirect path='/hello' to='/hello' />
</Switch>
</Router>,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment