오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
정의왕
9762ca35 1 parent 6b8e5f3f

Board ver1.0

Inline Side-by-side
Showing 7 changed files with 238 additions and 62 deletions
......@@ -10924,6 +10924,67 @@
}
}
},
"node-html-parser": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-5.1.0.tgz",
"integrity": "sha512-l6C1Gf1o7YuxeMGa17PypEez/rj+ii3q4/NZG37nRmWSLDjHyB0WNrlE4h2UW92D0JSfUSfu+lOvxThttVe7Jw==",
"requires": {
"css-select": "^4.1.3",
"he": "1.2.0"
},
"dependencies": {
"css-select": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
"integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
"requires": {
"boolbase": "^1.0.0",
"css-what": "^5.0.0",
"domhandler": "^4.2.0",
"domutils": "^2.6.0",
"nth-check": "^2.0.0"
}
},
"css-what": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
"integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw=="
},
"dom-serializer": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
"integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^4.2.0",
"entities": "^2.0.0"
}
},
"domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
"integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
},
"domutils": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
"requires": {
"dom-serializer": "^1.0.1",
"domelementtype": "^2.2.0",
"domhandler": "^4.2.0"
}
},
"nth-check": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
"integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
"requires": {
"boolbase": "^1.0.0"
}
}
}
},
"node-int64": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
......@@ -13193,6 +13254,52 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"react-html-parser": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
"integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
"requires": {
"htmlparser2": "^3.9.0"
},
"dependencies": {
"domhandler": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
"requires": {
"domelementtype": "1"
}
},
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
},
"htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
"integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
"requires": {
"domelementtype": "^1.3.1",
"domhandler": "^2.3.0",
"domutils": "^1.5.1",
"entities": "^1.1.1",
"inherits": "^2.0.1",
"readable-stream": "^3.1.1"
}
},
"readable-stream": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
"requires": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
"util-deprecate": "^1.0.1"
}
}
}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
......
......@@ -10,9 +10,11 @@
"@testing-library/user-event": "^12.8.3",
"axios": "^0.24.0",
"http-proxy-middleware": "^2.0.1",
"node-html-parser": "^5.1.0",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-html-parser": "^2.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
......
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';
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);
}
return (
<div className="Board">
<div className="contents-container">
{viewContent.map(element =>
<div>
<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>
</div>
);
};
export default Board;
\ No newline at end of file
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';
import Board from "../Board/Board"
import React from "react";
function MainPage() {
const navigate = useNavigate();
......@@ -22,55 +22,17 @@ function MainPage() {
</div>
</div>
<div className="Main-body">
<div className="contents-container">
<div className="write-button">
<Button className="ui animated button"
tabIndex="0">
<div className="visible content">새 고민 작성하기</div>
<div className="hidden content">
<i className="pencil alternate icon"></i>
</div>
</Button>
</div>
<div className="contents">
<div className="ui segment">
<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>
</div>
<div className="ui segment">
<p>a</p>
</div>
</div>
</div>
<Board/>
<div className="user-container">
<div className="userInfo">
<h1>User ID</h1>
</div>
<div className="checkIssue-button">
<Button size="Big" className="ui animated button"
<Button className="ui animated button"
tabIndex="0">
<div className="visible content">도착한 글</div>
<div className="hidden content">
<i className="paper plane ic on"></i>
<i className="paper plane icon"></i>
</div>
</Button>
</div>
......
.contents-container{
display: flex;
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;
height: 40px;
margin: 10px;
}
.write-button{
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.contents{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
\ No newline at end of file
.title-input{
width: 500px;
height: 40px;
margin: 10px;
}
.write-button{
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
\ No newline at end of file
......@@ -26,36 +26,21 @@
display: flex;
flex-direction: row;
height: 100vh;
.contents-container{
border: 3px solid black;
.Board{
text-align: center;
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 75%;
height: 100%;
border: 2px solid black;
.write-button{
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.contents{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.Grid{
display: flex;
justify-content: center;
align-items: center;
}
}
}
.user-container{
display: flex;
flex-direction: column;
width: 25%;
border: 2px solid black;
padding: 10px 0 30px 0;
.userInfo{
display: flex;
justify-content: center;
......