오인제 / 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 133 additions and 116 deletions
1 -import React, {useState} from 'react'; 1 +import React, {useCallback, useState} from 'react';
2 import '../style/Board.scss' 2 import '../style/Board.scss'
3 import {CKEditor} from "@ckeditor/ckeditor5-react"; 3 import {CKEditor} from "@ckeditor/ckeditor5-react";
4 import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; 4 import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
5 import {Button} from "semantic-ui-react"; 5 import {Button} from "semantic-ui-react";
6 import ReactHtmlParser from 'react-html-parser'; 6 import ReactHtmlParser from 'react-html-parser';
7 +import BoardModal from "../Modal/BoardModal";
7 8
8 function Board() { 9 function Board() {
9 - const [BoardContent, setBoardContent] = useState({
10 - title: '',
11 - content:''
12 - })
13 const [viewContent,setViewContent] = useState([]); 10 const [viewContent,setViewContent] = useState([]);
14 - const getValue = e => { 11 + const onViewContentHandler = (data) => {
15 - const {name, value} = e.target; 12 + setViewContent((viewContent.concat({...data})))
16 - setBoardContent({
17 - ...BoardContent,
18 - [name]: value
19 - })
20 - console.log(BoardContent);
21 } 13 }
22 return ( 14 return (
23 <div className="Board"> 15 <div className="Board">
24 <div className="contents-container"> 16 <div className="contents-container">
25 {viewContent.map(element => 17 {viewContent.map(element =>
26 - <div> 18 + <div className="contents" >
27 <h2>{element.title}</h2> 19 <h2>{element.title}</h2>
28 <div> 20 <div>
29 {ReactHtmlParser(element.content)} 21 {ReactHtmlParser(element.content)}
30 </div> 22 </div>
31 - </div>) 23 + </div>
32 - } 24 + )}
33 </div> 25 </div>
34 - <div className="form=wrapper"> 26 + <div className="write-button">
35 - <input className="title-input" 27 + <BoardModal viewContent = {viewContent} onViewContentHandler={onViewContentHandler}/>
36 - type='text'
37 - placeholder='제목'
38 - onChange={getValue}
39 - name = 'title'
40 - />
41 - <CKEditor
42 - editor={ClassicEditor}
43 - data=""
44 - onReady={editor => {
45 - // You can store the "editor" and use when it is needed.
46 - console.log('Editor is ready to use!', editor);
47 - }}
48 - onChange={(event, editor) => {
49 - const data = editor.getData();
50 - console.log({ event, editor, data });
51 - setBoardContent({
52 - ...BoardContent,
53 - content: data
54 - })
55 - console.log(BoardContent);
56 - }}
57 - onBlur={(event, editor) => {
58 - console.log('Blur.', editor);
59 - }}
60 - onFocus={(event, editor) => {
61 - console.log('Focus.', editor);
62 - }}
63 - />
64 - <div className="write-button">
65 - <Button className="ui animated button"
66 - tabIndex="0"
67 - onClick={() =>{
68 - setViewContent(viewContent.concat({...BoardContent}));
69 - }}
70 - >
71 - <div className="visible content">새 고민 작성하기</div>
72 - <div className="hidden content">
73 - <i className="pencil alternate icon"></i>
74 - </div>
75 - </Button>
76 - </div>
77 </div> 28 </div>
78 </div> 29 </div>
79 30
......
...@@ -2,16 +2,10 @@ import React, {useState} from "react"; ...@@ -2,16 +2,10 @@ import React, {useState} from "react";
2 import "../style/LoginPage.scss"; 2 import "../style/LoginPage.scss";
3 import { Icon, Input } from "semantic-ui-react" 3 import { Icon, Input } from "semantic-ui-react"
4 import { useNavigate } from "react-router-dom"; 4 import { useNavigate } from "react-router-dom";
5 -import {useDispatch} from "react-redux";
6 -import { loginUser } from '../../../_actions/user_action'
7 -
8 function LoginPage(props) { 5 function LoginPage(props) {
9 - const dispatch = useDispatch();
10 const navigate = useNavigate(); 6 const navigate = useNavigate();
11 -
12 const [Id, setId] = useState(""); 7 const [Id, setId] = useState("");
13 const [Password, setPassword] = useState(""); 8 const [Password, setPassword] = useState("");
14 -
15 const onIdHandler = (event) => { 9 const onIdHandler = (event) => {
16 setId(event.currentTarget.value); 10 setId(event.currentTarget.value);
17 }; 11 };
...@@ -22,19 +16,7 @@ function LoginPage(props) { ...@@ -22,19 +16,7 @@ function LoginPage(props) {
22 event.preventDefault(); 16 event.preventDefault();
23 console.log("ID", Id); 17 console.log("ID", Id);
24 console.log("Password", Password); 18 console.log("Password", Password);
25 - let body = { 19 +
26 - id: Id,
27 - password: Password
28 - }
29 - dispatch(loginUser(body))
30 - .then(response => {
31 - if (response.payload.loginSuccess) {
32 - props.history.push('/main')
33 - }
34 - else{
35 - alert('Error')
36 - }
37 - })
38 }; 20 };
39 const goToRegister = () => { 21 const goToRegister = () => {
40 navigate('/register'); 22 navigate('/register');
...@@ -73,5 +55,4 @@ function LoginPage(props) { ...@@ -73,5 +55,4 @@ function LoginPage(props) {
73 </div> 55 </div>
74 ); 56 );
75 } 57 }
76 - 58 +export default LoginPage;
77 -export default LoginPage;
...\ No newline at end of file ...\ No newline at end of file
......
1 +import React, {useState} from 'react'
2 +import { Button, Header, Image, Modal } from 'semantic-ui-react'
3 +import {CKEditor} from "@ckeditor/ckeditor5-react";
4 +import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
5 +
6 +function BoardModal({viewContent, onViewContentHandler}) {
7 + const handleClose = (event) => {
8 + event.preventDefault();
9 + setOpen(false);
10 + }
11 + const [open, setOpen] = useState(false)
12 + const [BoardContent, setBoardContent] = useState({
13 + id: 0,
14 + title: '',
15 + content:''
16 + })
17 + const initialBoard = () => {
18 + setBoardContent()
19 + }
20 + const getValue = e => {
21 + const {name, value} = e.target;
22 + setBoardContent({
23 + ...BoardContent,
24 + [name]: value
25 + })
26 + console.log(BoardContent);
27 + }
28 + return (
29 + <Modal
30 + onClose={() => setOpen(false)}
31 + onOpen={() => setOpen(true)}
32 + open={open}
33 + trigger={<Button className="ui animated button" tabIndex="0">
34 + <div className="visible content">게시글 작성하기</div>
35 + <div className="hidden content">
36 + <i className="pencil alternate icon"></i>
37 + </div>
38 + </Button>}
39 + >
40 + <Modal.Header>고민이 있나요?</Modal.Header>
41 + <Modal.Content content>
42 + <Modal.Description>
43 + <div className="form=wrapper">
44 + <input className="title-input"
45 + type='text'
46 + placeholder='제목'
47 + onChange={getValue}
48 + name = 'title'
49 + />
50 + <CKEditor
51 + editor={ClassicEditor}
52 + data=""
53 + onReady={editor => {
54 + // You can store the "editor" and use when it is needed.
55 + console.log('Editor is ready to use!', editor);
56 + }}
57 + onChange={(event, editor) => {
58 + const data = editor.getData();
59 + console.log({ event, editor, data });
60 + setBoardContent({
61 + ...BoardContent,
62 + content: data,
63 + })
64 +
65 + console.log(BoardContent);
66 + }}
67 + onBlur={(event, editor) => {
68 + console.log('Blur.', editor);
69 + }}
70 + onFocus={(event, editor) => {
71 + console.log('Focus.', editor);
72 + }}
73 + />
74 + </div>
75 + </Modal.Description>
76 + </Modal.Content>
77 + <Modal.Actions>
78 + <div onClick={handleClose}>
79 + <Button color='black'>
80 + 작성 취소
81 + </Button>
82 + <Button
83 + content="글 작성하기"
84 + labelPosition='right'
85 + icon='checkmark'
86 + onClick={()=> onViewContentHandler(BoardContent)}
87 + positive
88 + />
89 + </div>
90 + </Modal.Actions>
91 + </Modal>
92 + )
93 +}
94 +
95 +export default BoardModal
...\ No newline at end of file ...\ No newline at end of file
1 -import React, {useState} from "react"; 1 +import React, {useState, useCallback} from "react";
2 +import { useNavigate } from "react-router-dom";
2 import "../style/RegisterPage.scss"; 3 import "../style/RegisterPage.scss";
3 import { Button, Icon, Input } from "semantic-ui-react"; 4 import { Button, Icon, Input } from "semantic-ui-react";
4 -import {useDispatch} from "react-redux"; 5 +import Axios from 'axios'
5 -import { registerUser } from '../../../_actions/user_action'
6 -
7 function RegisterPage(props) { 6 function RegisterPage(props) {
8 - const dispatch = useDispatch(); 7 + const navigate = useNavigate();
9 const [Id, setId] = useState(""); 8 const [Id, setId] = useState("");
10 const [Password, setPassword] = useState(""); 9 const [Password, setPassword] = useState("");
11 const [PasswordCheck,setPasswordCheck] = useState(""); 10 const [PasswordCheck,setPasswordCheck] = useState("");
12 const [Personality, setPersonality] = useState(""); 11 const [Personality, setPersonality] = useState("");
13 -
14 const onIdHandler = (event) => { 12 const onIdHandler = (event) => {
15 setId(event.currentTarget.value); 13 setId(event.currentTarget.value);
16 }; 14 };
...@@ -24,7 +22,7 @@ function RegisterPage(props) { ...@@ -24,7 +22,7 @@ function RegisterPage(props) {
24 //비밀번호를 입력할때마다 password 를 검증하는 함수 22 //비밀번호를 입력할때마다 password 를 검증하는 함수
25 setPasswordCheck(event.currentTarget.value); 23 setPasswordCheck(event.currentTarget.value);
26 }; 24 };
27 - const onSubmitHandler = (event) => { 25 + const onSubmitHandler = useCallback((event) => {
28 event.preventDefault(); 26 event.preventDefault();
29 console.log("ID", Id); 27 console.log("ID", Id);
30 console.log("Password", Password); 28 console.log("Password", Password);
...@@ -32,20 +30,23 @@ function RegisterPage(props) { ...@@ -32,20 +30,23 @@ function RegisterPage(props) {
32 if (Password !== PasswordCheck) { 30 if (Password !== PasswordCheck) {
33 return alert('비밀번호가 일치하지 않습니다.') 31 return alert('비밀번호가 일치하지 않습니다.')
34 } 32 }
35 - let body = { 33 + else{
36 - id: Id, 34 + Axios.post('/api/register',{
37 - password: Password, 35 + Id,
38 - personality: Personality 36 + Password,
39 - } 37 + Personality
40 - dispatch(registerUser(body))
41 - .then(response => {
42 - if (response.payload.success) {
43 - props.history.push('/login')
44 - } else {
45 - alert('Failed to sign up')
46 - }
47 }) 38 })
48 - } 39 + .then((res)=>{
40 + if(res.status === 200){
41 + alert("회원가입에 성공하였습니다.")
42 + navigate('/login')
43 + }
44 + }).catch((error) => {
45 + console.log(error.response)
46 + })
47 + }
48 +
49 + },[Id, Password, Personality, PasswordCheck])
49 return ( 50 return (
50 <div id="Register"> 51 <div id="Register">
51 <div className="register-form"> 52 <div className="register-form">
...@@ -102,4 +103,4 @@ function RegisterPage(props) { ...@@ -102,4 +103,4 @@ function RegisterPage(props) {
102 </div> 103 </div>
103 ); 104 );
104 } 105 }
105 -export default RegisterPage; 106 +export default RegisterPage;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -19,8 +19,10 @@ ...@@ -19,8 +19,10 @@
19 align-items: center; 19 align-items: center;
20 } 20 }
21 .contents{ 21 .contents{
22 + width: 100%;
22 display: flex; 23 display: flex;
23 flex-direction: column; 24 flex-direction: column;
24 - justify-content: center;
25 align-items: center; 25 align-items: center;
26 + border-radius: 30px;
27 + border: 2px solid #333;
26 } 28 }
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from 'react'; 1 import React from 'react';
2 import ReactDOM from 'react-dom'; 2 import ReactDOM from 'react-dom';
3 -import {Provider} from "react-redux";
4 import './index.css'; 3 import './index.css';
5 import App from './App'; 4 import App from './App';
6 import 'semantic-ui-css/semantic.min.css' 5 import 'semantic-ui-css/semantic.min.css'
7 -import {applyMiddleware, createStore} from "redux";
8 -import promiseMiddleware from 'redux-promise-middleware'
9 -import ReduxThunk from 'redux-thunk'
10 -import Reducer from './_reducers';
11 -
12 -const createStoreWithMiddleWare = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)
13 ReactDOM.render( 6 ReactDOM.render(
14 - <Provider store={createStoreWithMiddleWare(Reducer, 7 + <App />,
15 - window.__REDUX_DEVTOOLS_EXTENSION__ && 8 + document.getElementById('root')
16 - window.__REDUX_DEVTOOLS_EXTENSION__()
17 - )}>
18 - <App />
19 - </Provider>,
20 - document.getElementById('root')
21 ); 9 );
22 -
23 // If you want to start measuring performance in your app, pass a function 10 // If you want to start measuring performance in your app, pass a function
24 // to log results (for example: reportWebVitals(console.log)) 11 // to log results (for example: reportWebVitals(console.log))
25 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 12 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
...\ No newline at end of file ...\ No newline at end of file
......