정의왕

Board UI ver1.0(Board + BoardModal)

const express = require("express");
const bodyParser = require("body-parser");
const router = express.Router();
const {User}=require('../models');
router.get('/',(req,res)=>{
});
//로그아웃
router.post('/',(req,res)=>{
req.session.id = null;
req.session.name = null;
req.session.personality = null;
req.session.status = null;
req.session.isAuthorized = null;
console.log("Logout");
res.sendStatus(200);
})
module.exports = router;
\ No newline at end of file
import React, {useCallback, useState} from 'react';
import React, { 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";
......@@ -13,19 +10,17 @@ function Board() {
}
return (
<div className="Board">
<div className="contents-container">
{viewContent.map(element =>
<div className="contents" >
<div className="write-button">
<BoardModal onViewContentHandler={onViewContentHandler}/>
</div>
{viewContent.map(element =>
<div class="ui segment">
<h2>{element.title}</h2>
<div>
{ReactHtmlParser(element.content)}
</div>
</div>
)}
</div>
<div className="write-button">
<BoardModal viewContent = {viewContent} onViewContentHandler={onViewContentHandler}/>
</div>
</div>
);
......
......@@ -13,7 +13,7 @@ function MainPage() {
<div id="Main">
<div className="Main-header">
<div className="title">
<h1>Tunnel</h1>
<h1>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
</div>
<div className="None-title">
<Button className="ui right floated button" onClick={()=>goToLogin()}>
......@@ -23,7 +23,7 @@ function MainPage() {
</div>
<div className="Main-body">
<Board/>
<div className="user-container">
{/* <div className="user-container">
<div className="userInfo">
<h1>User ID</h1>
</div>
......@@ -49,7 +49,7 @@ function MainPage() {
</div>
</div>
</div>
</div>
</div> */}
</div>
</div>
);
......
......@@ -3,7 +3,7 @@ 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}) {
function BoardModal({onViewContentHandler}) {
const handleClose = (event) => {
event.preventDefault();
setOpen(false);
......@@ -57,7 +57,6 @@ function BoardModal({viewContent, onViewContentHandler}) {
...BoardContent,
content: data,
})
console.log(BoardContent);
}}
onBlur={(event, editor) => {
......
......@@ -3,9 +3,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid #333;
padding: 10px 0 30px 0;
border-radius: 30px;
}
.title-input{
width: 500px;
......
#Main{
margin-top: 30px;
background-color: beige;
display: flex;
flex-direction: column;
.Main-header{
display: flex;
flex-direction: row;
height: 70px;
.title{
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 60px;
.h1{
font-family:Arial, Helvetica, sans-serif;
font-size: 60px;
font-weight: bold;
}
}
.None-title{
display: flex;
justify-content: center;
align-items: center;
width: 10%;
.ui button{
height: 40px;
......@@ -32,7 +37,7 @@
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 75%;
width: 100%;
height: 100%;
}
.user-container{
......