오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
정의왕
aa38b227 1 parent 014383b5

Create BoardModal ver1.0

Inline Side-by-side
Showing 7 changed files with 127 additions and 110 deletions
import React, {useState} from 'react';
import React, {useCallback, useState} from 'react';
import '../style/Board.scss'
import {CKEditor} from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import {Button} from "semantic-ui-react";
import ReactHtmlParser from 'react-html-parser';
import BoardModal from "../Modal/BoardModal";
function Board() {
const [BoardContent, setBoardContent] = useState({
title: '',
content:''
})
const [viewContent,setViewContent] = useState([]);
const getValue = e => {
const {name, value} = e.target;
setBoardContent({
...BoardContent,
[name]: value
})
console.log(BoardContent);
const onViewContentHandler = (data) => {
setViewContent((viewContent.concat({...data})))
}
return (
<div className="Board">
<div className="contents-container">
{viewContent.map(element =>
<div>
<div className="contents" >
<h2>{element.title}</h2>
<div>
{ReactHtmlParser(element.content)}
</div>
</div>)
}
</div>
<div className="form=wrapper">
<input className="title-input"
type='text'
placeholder='제목'
onChange={getValue}
name = 'title'
/>
<CKEditor
editor={ClassicEditor}
data=""
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 });
setBoardContent({
...BoardContent,
content: data
})
console.log(BoardContent);
}}
onBlur={(event, editor) => {
console.log('Blur.', editor);
}}
onFocus={(event, editor) => {
console.log('Focus.', editor);
}}
/>
<div className="write-button">
<Button className="ui animated button"
tabIndex="0"
onClick={() =>{
setViewContent(viewContent.concat({...BoardContent}));
}}
>
<div className="visible content">새 고민 작성하기</div>
<div className="hidden content">
<i className="pencil alternate icon"></i>
</div>
</Button>
)}
</div>
<div className="write-button">
<BoardModal viewContent = {viewContent} onViewContentHandler={onViewContentHandler}/>
</div>
</div>
......
......@@ -2,16 +2,10 @@ 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(props) {
const dispatch = useDispatch();
const navigate = useNavigate();
const [Id, setId] = useState("");
const [Password, setPassword] = useState("");
const onIdHandler = (event) => {
setId(event.currentTarget.value);
};
......@@ -22,19 +16,7 @@ function LoginPage(props) {
event.preventDefault();
console.log("ID", Id);
console.log("Password", Password);
let body = {
id: Id,
password: Password
}
dispatch(loginUser(body))
.then(response => {
if (response.payload.loginSuccess) {
props.history.push('/main')
}
else{
alert('Error')
}
})
};
const goToRegister = () => {
navigate('/register');
......@@ -73,5 +55,4 @@ function LoginPage(props) {
</div>
);
}
export default LoginPage;
\ No newline at end of file
......
import React, {useState} from 'react'
import { Button, Header, Image, Modal } from 'semantic-ui-react'
import {CKEditor} from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
function BoardModal({viewContent, onViewContentHandler}) {
const handleClose = (event) => {
event.preventDefault();
setOpen(false);
}
const [open, setOpen] = useState(false)
const [BoardContent, setBoardContent] = useState({
id: 0,
title: '',
content:''
})
const initialBoard = () => {
setBoardContent()
}
const getValue = e => {
const {name, value} = e.target;
setBoardContent({
...BoardContent,
[name]: value
})
console.log(BoardContent);
}
return (
<Modal
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
open={open}
trigger={<Button className="ui animated button" tabIndex="0">
<div className="visible content">게시글 작성하기</div>
<div className="hidden content">
<i className="pencil alternate icon"></i>
</div>
</Button>}
>
<Modal.Header>고민이 있나요?</Modal.Header>
<Modal.Content content>
<Modal.Description>
<div className="form=wrapper">
<input className="title-input"
type='text'
placeholder='제목'
onChange={getValue}
name = 'title'
/>
<CKEditor
editor={ClassicEditor}
data=""
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 });
setBoardContent({
...BoardContent,
content: data,
})
console.log(BoardContent);
}}
onBlur={(event, editor) => {
console.log('Blur.', editor);
}}
onFocus={(event, editor) => {
console.log('Focus.', editor);
}}
/>
</div>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<div onClick={handleClose}>
<Button color='black'>
작성 취소
</Button>
<Button
content="글 작성하기"
labelPosition='right'
icon='checkmark'
onClick={()=> onViewContentHandler(BoardContent)}
positive
/>
</div>
</Modal.Actions>
</Modal>
)
}
export default BoardModal
\ No newline at end of file
import React, {useState} from "react";
import React, {useState, useCallback} from "react";
import { useNavigate } from "react-router-dom";
import "../style/RegisterPage.scss";
import { Button, Icon, Input } from "semantic-ui-react";
import {useDispatch} from "react-redux";
import { registerUser } from '../../../_actions/user_action'
import Axios from 'axios'
function RegisterPage(props) {
const dispatch = useDispatch();
const navigate = useNavigate();
const [Id, setId] = useState("");
const [Password, setPassword] = useState("");
const [PasswordCheck,setPasswordCheck] = useState("");
const [Personality, setPersonality] = useState("");
const onIdHandler = (event) => {
setId(event.currentTarget.value);
};
......@@ -24,7 +22,7 @@ function RegisterPage(props) {
//비밀번호를 입력할때마다 password 를 검증하는 함수
setPasswordCheck(event.currentTarget.value);
};
const onSubmitHandler = (event) => {
const onSubmitHandler = useCallback((event) => {
event.preventDefault();
console.log("ID", Id);
console.log("Password", Password);
......@@ -32,20 +30,23 @@ function RegisterPage(props) {
if (Password !== PasswordCheck) {
return alert('비밀번호가 일치하지 않습니다.')
}
let body = {
id: Id,
password: Password,
personality: Personality
}
dispatch(registerUser(body))
.then(response => {
if (response.payload.success) {
props.history.push('/login')
} else {
alert('Failed to sign up')
else{
Axios.post('/api/register',{
Id,
Password,
Personality
})
.then((res)=>{
if(res.status === 200){
alert("회원가입에 성공하였습니다.")
navigate('/login')
}
}).catch((error) => {
console.log(error.response)
})
}
},[Id, Password, Personality, PasswordCheck])
return (
<div id="Register">
<div className="register-form">
......
......@@ -19,8 +19,10 @@
align-items: center;
}
.contents{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 30px;
border: 2px solid #333;
}
\ No newline at end of file
......
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(
<Provider store={createStoreWithMiddleWare(Reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)}>
<App />
</Provider>,
<App />,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
\ No newline at end of file
......