고병후

Complete board

......@@ -8,29 +8,34 @@ const {Post}=require('../models'); //게시물정보 db연결
//현재 로그인된 사용자의 게시물 배열 응답
router.get('/',auth,(req,res)=>{
Post.findAll({
where:{userid: req.session.name}
//where:{userid: req.session.name}
})
.then((result)=>{
//console.log(result);
res.send(result);
//게시물이 0개인 경우
if(result === null || result === undefined){
console.log("해당유저의 게시물이 없습니다.")
res.status(401).send("null");
}
else{
console.log(result.length);
res.sendStatus(200);
}
})
// if(result === null || result === undefined){
// console.log("해당유저의 게시물이 없습니다.")
// res.status(401).send("null");
// }
// else{
// console.log(result.length);
// res.sendStatus(200);
// }
})
});
//게시물 작성
router.post('/',auth,(req,res)=>{
try{
Post.create({
userid : req.session.name,
title : "프로트랑 맞추기",
post:"프론트랑 맞추기",
title : req.body.title,
post: req.body.content,
status: false
})
console.log("게시");
......
import React, { useState} from 'react';
import Axios from 'axios';
import React, { useState, useEffect} from 'react';
import '../style/Board.scss'
import ReactHtmlParser from 'react-html-parser';
import BoardModal from "../Modal/BoardModal";
function Board() {
const [viewContent,setViewContent] = useState([]);
const onViewContentHandler = (data) => {
setViewContent((viewContent.concat({...data})))
}
useEffect(()=>{
Axios.get('/api/post').then((response)=>{
//console.log(response.data);
setViewContent(response.data);
})
},[viewContent])
return (
<div className="Board">
<div className="write-button">
<BoardModal onViewContentHandler={onViewContentHandler}/>
<BoardModal/>
</div>
<div className="contents">
{viewContent&&viewContent.map(element =>{
return <div className="ui segment">
<h2>{element.title}</h2>
<div>
{ReactHtmlParser(element.post)}
</div>
</div>}
)}
</div>
{viewContent.map(element =>
<div class="ui segment">
<h2>{element.title}</h2>
<div>
{ReactHtmlParser(element.content)}
</div>
</div>
)}
</div>
);
};
export default Board;
\ No newline at end of file
export default Board;
......
import React, {useState} from 'react'
import { Button, Header, Image, Modal } from 'semantic-ui-react'
import Axios from 'axios'
import { Button, Modal } from 'semantic-ui-react'
import {CKEditor} from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
function BoardModal({onViewContentHandler}) {
function BoardModal() {
const handleClose = (event) => {
event.preventDefault();
setOpen(false);
......@@ -11,7 +12,7 @@ function BoardModal({onViewContentHandler}) {
const [open, setOpen] = useState(false)
const [BoardContent, setBoardContent] = useState({
title: '',
content:''
content:'',
})
const getValue = e => {
const {name, value} = e.target;
......@@ -21,6 +22,29 @@ function BoardModal({onViewContentHandler}) {
})
console.log(BoardContent);
}
const onSubmitHandler = () => {
Axios.post('/api/post',{
title: BoardContent.title,
content: BoardContent.content,
})
.then((res)=>{
if(res.status === 200){
alert("게시글 작성을 완료하였습니다.")
}
}).catch((error) => {
console.log(error.response)
alert("게시글 작성을 실패하였습니다.")
})
// console.log("ID", Id);
// console.log("Password", Password);
// console.log("MBTI", Personality);
// if (Password !== PasswordCheck) {
// return alert('비밀번호가 일치하지 않습니다.')
// }
// else{
//
// }
}
return (
<Modal
onClose={() => setOpen(false)}
......@@ -34,7 +58,7 @@ function BoardModal({onViewContentHandler}) {
</Button>}
>
<Modal.Header>고민이 있나요?</Modal.Header>
<Modal.Content content>
<Modal.Content >
<Modal.Description>
<div className="form=wrapper">
<input className="title-input"
......@@ -70,18 +94,18 @@ function BoardModal({onViewContentHandler}) {
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<div onClick={handleClose}>
<Button color='black'>
작성 취소
</Button>
<Button
content="글 작성하기"
labelPosition='right'
icon='checkmark'
onClick={()=> onViewContentHandler(BoardContent)}
positive
/>
</div>
<div onClick={handleClose}>
<Button color='black'>
작성 취소
</Button>
<Button
content="글 작성하기"
labelPosition='right'
icon='checkmark'
onClick={onSubmitHandler}
positive
/>
</div>
</Modal.Actions>
</Modal>
)
......