Commit e4ac840b authored by 우지원's avatar 우지원
Browse files

Merge remote-tracking branch 'origin/young' into jiweon827

parents 15c49ccb c4848cf1
...@@ -21,7 +21,5 @@ ...@@ -21,7 +21,5 @@
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
package-lock.json package-lock.json
.eslintcache .eslintcache
\ No newline at end of file
debug.log
\ No newline at end of file
...@@ -7,12 +7,12 @@ ...@@ -7,12 +7,12 @@
"@testing-library/react": "^11.2.2", "@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0", "@testing-library/user-event": "^12.6.0",
"bootstrap": "^4.5.3", "bootstrap": "^4.5.3",
"joi-browser": "^13.4.0",
"react": "^17.0.1", "react": "^17.0.1",
"react-bootstrap": "^1.4.0", "react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.1", "react-scripts": "4.0.1",
"styled-components": "^5.2.1",
"web-vitals": "^0.2.4" "web-vitals": "^0.2.4"
}, },
"scripts": { "scripts": {
......
...@@ -7,7 +7,7 @@ function App() { ...@@ -7,7 +7,7 @@ function App() {
<header className="App-header"> <header className="App-header">
<img src={logo} className="App-logo" alt="logo" /> <img src={logo} className="App-logo" alt="logo" />
<p> <p>
안녕하세요. 안녕하세요
</p> </p>
<a <a
className="App-link" className="App-link"
......
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 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 Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab'; import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList'; import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList'; import OpenList from '../Components/OpenList';
import Chat from '../Components/Chat'; import Chat from '../Components/Chat';
import Menu from '../Components/Menu';
// import styled from 'styled-components'; // import styled from 'styled-components';
// const List = styled.div` // const List = styled.div`
// background: #FFFAFA; // background: #FFFAFA;
// ` // `
const userName = "정연우";
function Home() { function Home() {
...@@ -25,20 +25,7 @@ function Home() { ...@@ -25,20 +25,7 @@ function Home() {
return ( return (
<> <>
<Navbar bg="dark" variant="dark"> <Menu />
<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>
<Row className="mr-0"> <Row className="mr-0">
<Col className="list" md={5}> <Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example"> <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
......
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap'; import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Menu from '../Components/Menu';
function LogIn() { function LogIn() {
const [validated, setValidated] = useState(false); const [validated, setValidated] = useState(false);
...@@ -17,10 +18,7 @@ function LogIn() { ...@@ -17,10 +18,7 @@ function LogIn() {
return ( return (
<> <>
<Navbar bg="dark" variant="dark"> <Menu />
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar>
<Form noValidate validated={validated} onSubmit={handleSubmit}> <Form noValidate validated={validated} onSubmit={handleSubmit}>
<Container className="d-flex justify-content-center"> <Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75"> <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 React, { useState } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import Menu from '../Components/Menu';
import { Image, Button, Container, Form, FormControl, Navbar, Nav } from 'react-bootstrap'; import { Image, Button, Container, Form, FormControl, Navbar, Nav } from 'react-bootstrap';
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom'; import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
...@@ -89,16 +89,7 @@ function ProfilePage() { ...@@ -89,16 +89,7 @@ function ProfilePage() {
return ( return (
<div> <div>
<Navbar bg="dark" variant="dark"> <Menu />
<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>
{tohome ? <Redirect to='/homepage' /> : ''} {tohome ? <Redirect to='/homepage' /> : ''}
<Container className="d-flex justify-content-center"> <Container className="d-flex justify-content-center">
......
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap'; import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Menu from '../Components/Menu';
function SingUp() { function SingUp() {
const [validated, setValidated] = useState(false); const [validated, setValidated] = useState(false);
...@@ -17,9 +18,7 @@ function SingUp() { ...@@ -17,9 +18,7 @@ function SingUp() {
return ( return (
<> <>
<Navbar bg="dark" variant="dark"> <Menu />
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar>
<div> <div>
<Form noValidate validated={validated} onSubmit={handleSubmit}> <Form noValidate validated={validated} onSubmit={handleSubmit}>
......
...@@ -7,6 +7,7 @@ import ProfilePage from './Pages/ProfilePage'; ...@@ -7,6 +7,7 @@ import ProfilePage from './Pages/ProfilePage';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import LogInPage from './Pages/LogInPage'; import LogInPage from './Pages/LogInPage';
import LoginForm from './Pages/LoginForm';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import Hello from './Hello' import Hello from './Hello'
import HomePage from './Pages/HomePage' import HomePage from './Pages/HomePage'
...@@ -15,11 +16,12 @@ import HomePage from './Pages/HomePage' ...@@ -15,11 +16,12 @@ import HomePage from './Pages/HomePage'
ReactDOM.render( ReactDOM.render(
<Router> <Router>
<Switch> <Switch>
<Route exact path="/" component={LogInPage} /> <Route exact path="/" component={HomePage} />
<Route path="/signuppage" component={SignUpPage} /> <Route path="/login" component={LogInPage} />
<Route path="/profilepage" component={ProfilePage} /> <Route path="/signup" component={SignUpPage} />
<Route path="/profile" component={ProfilePage} />
<Route path="/hello" component={Hello} /> <Route path="/hello" component={Hello} />
<Route path="/homepage" component={HomePage} /> <Route path="/home" component={HomePage} />
<Redirect path='/hello' to='/hello' /> <Redirect path='/hello' to='/hello' />
</Switch> </Switch>
</Router>, </Router>,
......
...@@ -3,13 +3,6 @@ ...@@ -3,13 +3,6 @@
"version": "1.0.0", "version": "1.0.0",
"description": "Messenger 2020 Winter", "description": "Messenger 2020 Winter",
"main": "index.js", "main": "index.js",
"dependencies": {
"express": "^4.17.1",
"mongoose": "^5.11.9",
"nodemon": "^2.0.6",
"validator": "^13.5.2"
},
"devDependencies": {},
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "nodemon server/server.js", "dev": "nodemon server/server.js",
...@@ -21,5 +14,11 @@ ...@@ -21,5 +14,11 @@
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
"license": "ISC" "license": "ISC",
"dependencies": {
"express": "^4.17.1",
"mongoose": "^5.11.9",
"nodemon": "^2.0.6",
"validator": "^13.5.2"
}
} }
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