오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
고병후
fcab6ffa 2 parents ecb220a6 6b8e5f3f

Merge branch 'master' of http://khuhub.khu.ac.kr/2019102198/Tunnel into server

Expand all
Inline Side-by-side
Showing 16 changed files with 205 additions and 113 deletions
This diff is collapsed. Click to expand it.
......@@ -3,14 +3,23 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^31.0.0",
"@ckeditor/ckeditor5-react": "^3.0.3",
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.24.0",
"http-proxy-middleware": "^2.0.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"redux": "^4.1.2",
"redux-promise": "^0.6.0",
"redux-promise-middleware": "^6.1.2",
"redux-thunk": "^2.4.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.4",
"web-vitals": "^1.1.2"
......
......@@ -9,21 +9,6 @@
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
......
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
//import React, {useState} from "react";
import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
import MainPage from "./component/views/LandingPage/MainPage";
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import MainPage from "./component/views/MainPage/MainPage";
import LoginPage from "./component/views/LoginPage/LoginPage";
import RegisterPage from "./component/views/RegisterPage/RegisterPage";
import "./static/fonts/font.css";
import LandingPage from "./component/views/LandingPage/LandingPage";
function App () {
return (
<Router>
<div>
{}
<Routes>
<Route exact path = "/main" element={<MainPage/>}/>
<Route exact path = "/login" element={<LoginPage/>}/>
<Route exact path = "/register" element={<RegisterPage/>}/>
<Route exact path = "/" element={<LandingPage/>}/>
<Route exact path = "/login" element={<LoginPage/>}/>
<Route exact path = "/main" element={<MainPage/>}/>
<Route exact path = "/register" element={<RegisterPage/>}/>
</Routes>
</div>
</Router>
......
export const LOGIN_USER = "login_user";
export const REGISTER_USER = "register_user";
\ No newline at end of file
import Axios from 'axios';
import { LOGIN_USER, REGISTER_USER } from './types';
export function loginUser(dataToSubmit) {
const request = Axios.post('/api/users/login', dataToSubmit)
.then( response => response.data )
return {
type: LOGIN_USER,
payload: request
}
}
export function registerUser(dataToSubmit) {
const request = Axios.post('/api/users/register', dataToSubmit)
.then( response => response.data )
return {
type: REGISTER_USER,
payload: request
}
}
\ No newline at end of file
import { combineReducers } from 'redux';
import user from './user_reducer';
const rootReducer = combineReducers({
user
})
export default rootReducer;
import {
LOGIN_USER, REGISTER_USER
} from '../_actions/types';
export default function (state = {}, action) {
switch (action.type) {
case LOGIN_USER:
return { ...state, loginSuccess: action.payload }
break;
case REGISTER_USER:
return {...state, registerSuccess: action.payload}
break;
default:
return state;
}
}
\ No newline at end of file
import React from 'react'
//import axios from 'axios'
// import { response } from 'express'
function LandingPage() {
// useEffect(() => {
// axios.get('/api/hello')
// .then(response => console.log(response.data))
// }, [])
return (
<div>
LandingPage
</div>
)
}
export default LandingPage
import React, { useState } from "react";
import React, {useState} from "react";
import "../style/LoginPage.scss";
import { Icon, Input } from "semantic-ui-react"
import { useNavigate } from "react-router-dom";
import {useDispatch} from "react-redux";
import { loginUser } from '../../../_actions/user_action'
function LoginPage() {
function LoginPage(props) {
const dispatch = useDispatch();
const navigate = useNavigate();
const [Email, setEmail] = useState("");
const [Id, setId] = useState("");
const [Password, setPassword] = useState("");
const onIdHandler = (event) => {
setEmail(event.currentTarget.value);
setId(event.currentTarget.value);
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value);
};
const onSubmitHandler = (event) => {
event.preventDefault();
console.log("Email", Email);
console.log("ID", Id);
console.log("Password", Password);
let body = {
email: Id,
password: Password
}
dispatch(loginUser(body))
.then(response => {
if (response.payload.loginSuccess) {
props.history.push('/main')
}
else{
alert('Error')
}
})
};
const goToRegister = () => {
navigate('/register');
}
return (
<div id="body">
<div className="login-form">
......@@ -34,9 +50,9 @@ function LoginPage() {
<Input
icon={<Icon name='at'/>}
iconPosition='left'
placeholder="Email"
placeholder="ID"
type="text"
value={Email}
value={Id}
autoComplete="off"
onChange={onIdHandler}/>
</div>
......
import {Button, Grid, Image, Segment} from "semantic-ui-react"
import {Button} from "semantic-ui-react"
import "../style/MainPage.scss";
import { useNavigate } from "react-router-dom";
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
function MainPage() {
const navigate = useNavigate();
const goToLogin = () =>{
navigate('/login');
}
return (
<div id="Main">
<div className="Main-header">
......@@ -8,7 +16,7 @@ function MainPage() {
<h1>Tunnel</h1>
</div>
<div className="None-title">
<Button className="ui right floated button">
<Button className="ui right floated button" onClick={()=>goToLogin()}>
Logout
</Button>
</div>
......@@ -26,7 +34,24 @@ function MainPage() {
</div>
<div className="contents">
<div className="ui segment">
<p>a</p>
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
onReady={editor => {
// You can store the "editor" and use when it is needed.
console.log('Editor is ready to use!', editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
}}
onBlur={(event, editor) => {
console.log('Blur.', editor);
}}
onFocus={(event, editor) => {
console.log('Focus.', editor);
}}
/>
</div>
<div className="ui segment">
<p>a</p>
......@@ -45,7 +70,7 @@ function MainPage() {
tabIndex="0">
<div className="visible content">도착한 글</div>
<div className="hidden content">
<i className="pencil alternate icon"></i>
<i className="paper plane ic on"></i>
</div>
</Button>
</div>
......
import React, {useCallback, useState} from "react";
import React, {useState} from "react";
import "../style/RegisterPage.scss";
import { Form, Message, Button, Icon, Input } from "semantic-ui-react";
import backgroundImg from "../images/register_background.png";
import { Button, Icon, Input } from "semantic-ui-react";
import {useDispatch} from "react-redux";
import { registerUser } from '../../../_actions/user_action'
function RegisterPage() {
const [Email, setEmail] = useState("");
function RegisterPage(props) {
const dispatch = useDispatch();
const [Id, setId] = useState("");
const [Password, setPassword] = useState("");
const [PasswordCheck,setPasswordCheck] = useState("");
const [Personality, setPersonality] = useState("");
const [PasswordError,setPasswordError] = useState(false);
const onIdHandler = (event) => {
setEmail(event.currentTarget.value);
setId(event.currentTarget.value);
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value);
......@@ -19,22 +20,32 @@ function RegisterPage() {
const onPersonalityHandler = (event) => {
setPersonality(event.currentTarget.value);
};
const onPasswordChkHandler = useCallback((event) => {
const onPasswordChkHandler = (event) => {
//비밀번호를 입력할때마다 password 를 검증하는 함수
setPasswordCheck(event.currentTarget.value);
},[PasswordCheck]);
const onSubmitHandler = useCallback((event) => {
};
const onSubmitHandler = (event) => {
event.preventDefault();
if(Password !== PasswordCheck){
return setPasswordError(true);
console.log("ID", Id);
console.log("Password", Password);
console.log("MBTI", Personality);
if (Password !== PasswordCheck) {
return alert('비밀번호가 일치하지 않습니다.')
}
else{
return setPasswordError(false);
let body = {
id: Id,
password: Password,
personality: Personality
}
console.log("Email",Email);
console.log("Password", Password);
},[Password,PasswordCheck]);
dispatch(registerUser(body))
.then(response => {
if (response.payload.registerSuccess) {
props.history.push('/login')
} else {
alert('Failed to sign up')
}
})
}
return (
<div id="Register">
<div className="register-form">
......@@ -42,34 +53,33 @@ function RegisterPage() {
<h1>Tunnel</h1>
<div className="input-area">
<Input
icon={<Icon name='at'/>}
icon={<Icon name="id badge"/>}
iconPosition='left'
placeholder="Email"
placeholder="ID"
type="text"
value={Email}
value={Id}
autoComplete="off"
required onChange={onIdHandler}/>
</div>
<div className="input-area">
<Input
icon={<Icon name='heart'/>}
iconPosition='left'
placeholder="Your MBTI"
type="text"
value={Personality}
autoComplete="off"
onChange={onPersonalityHandler}/>
</div>
<div className="input-area">
<Input
icon={<Icon name='lock'/>}
iconPosition='left'
placeholder="Password"
type="password"
value={Password}
autoComplete="off"
onChange={onPasswordHandler}
onFocus={()=>setPasswordError(false)}/>
{PasswordError &&
<Form error>
<Message
error
header='Action Forbidden'
content='You can only sign up for an account once with a given e-mail address.'
/>
<Button>Submit</Button>
</Form>
}
onChange={onPasswordHandler}/>
</div>
<div className="input-area">
<Input
......@@ -79,32 +89,17 @@ function RegisterPage() {
type="password"
value={PasswordCheck}
autoComplete="off"
onChange={onPasswordChkHandler}
onFocus={()=>setPasswordError(false)}/>
</div>
<div className="input-area">
<Input
icon={<Icon name='heart'/>}
iconPosition='left'
placeholder="Your MBTI"
type="text"
value={Personality}
autoComplete="off"
onChange={onPersonalityHandler}/>
onChange={onPasswordChkHandler}/>
</div>
<div className="btn-area" >
<Button className='register-btn'
content='Sign up'
icon='signup'
size='small'
iconPosition='left'/>
size='small'/>
</div>
</form>
</div>
</div>
);
}
export default RegisterPage;
......
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from "react-redux";
import './index.css';
import App from './App';
import 'semantic-ui-css/semantic.min.css'
import {applyMiddleware, createStore} from "redux";
import promiseMiddleware from 'redux-promise-middleware'
import ReduxThunk from 'redux-thunk'
import Reducer from './_reducers';
const createStoreWithMiddleWare = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
<Provider store={createStoreWithMiddleWare(Reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)}>
<App />
</Provider>,
document.getElementById('root')
);
......
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:3000',
changeOrigin: true,
})
);
};
\ No newline at end of file