오인제 / 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 @@ ...@@ -10924,6 +10924,67 @@
10924 } 10924 }
10925 } 10925 }
10926 }, 10926 },
10927 + "node-html-parser": {
10928 + "version": "5.1.0",
10929 + "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-5.1.0.tgz",
10930 + "integrity": "sha512-l6C1Gf1o7YuxeMGa17PypEez/rj+ii3q4/NZG37nRmWSLDjHyB0WNrlE4h2UW92D0JSfUSfu+lOvxThttVe7Jw==",
10931 + "requires": {
10932 + "css-select": "^4.1.3",
10933 + "he": "1.2.0"
10934 + },
10935 + "dependencies": {
10936 + "css-select": {
10937 + "version": "4.1.3",
10938 + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
10939 + "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
10940 + "requires": {
10941 + "boolbase": "^1.0.0",
10942 + "css-what": "^5.0.0",
10943 + "domhandler": "^4.2.0",
10944 + "domutils": "^2.6.0",
10945 + "nth-check": "^2.0.0"
10946 + }
10947 + },
10948 + "css-what": {
10949 + "version": "5.1.0",
10950 + "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
10951 + "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw=="
10952 + },
10953 + "dom-serializer": {
10954 + "version": "1.3.2",
10955 + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
10956 + "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
10957 + "requires": {
10958 + "domelementtype": "^2.0.1",
10959 + "domhandler": "^4.2.0",
10960 + "entities": "^2.0.0"
10961 + }
10962 + },
10963 + "domelementtype": {
10964 + "version": "2.2.0",
10965 + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
10966 + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
10967 + },
10968 + "domutils": {
10969 + "version": "2.8.0",
10970 + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
10971 + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
10972 + "requires": {
10973 + "dom-serializer": "^1.0.1",
10974 + "domelementtype": "^2.2.0",
10975 + "domhandler": "^4.2.0"
10976 + }
10977 + },
10978 + "nth-check": {
10979 + "version": "2.0.1",
10980 + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
10981 + "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
10982 + "requires": {
10983 + "boolbase": "^1.0.0"
10984 + }
10985 + }
10986 + }
10987 + },
10927 "node-int64": { 10988 "node-int64": {
10928 "version": "0.4.0", 10989 "version": "0.4.0",
10929 "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz", 10990 "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
...@@ -13193,6 +13254,52 @@ ...@@ -13193,6 +13254,52 @@
13193 "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", 13254 "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
13194 "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" 13255 "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
13195 }, 13256 },
13257 + "react-html-parser": {
13258 + "version": "2.0.2",
13259 + "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
13260 + "integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
13261 + "requires": {
13262 + "htmlparser2": "^3.9.0"
13263 + },
13264 + "dependencies": {
13265 + "domhandler": {
13266 + "version": "2.4.2",
13267 + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
13268 + "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
13269 + "requires": {
13270 + "domelementtype": "1"
13271 + }
13272 + },
13273 + "entities": {
13274 + "version": "1.1.2",
13275 + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
13276 + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
13277 + },
13278 + "htmlparser2": {
13279 + "version": "3.10.1",
13280 + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
13281 + "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
13282 + "requires": {
13283 + "domelementtype": "^1.3.1",
13284 + "domhandler": "^2.3.0",
13285 + "domutils": "^1.5.1",
13286 + "entities": "^1.1.1",
13287 + "inherits": "^2.0.1",
13288 + "readable-stream": "^3.1.1"
13289 + }
13290 + },
13291 + "readable-stream": {
13292 + "version": "3.6.0",
13293 + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
13294 + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
13295 + "requires": {
13296 + "inherits": "^2.0.3",
13297 + "string_decoder": "^1.1.1",
13298 + "util-deprecate": "^1.0.1"
13299 + }
13300 + }
13301 + }
13302 + },
13196 "react-is": { 13303 "react-is": {
13197 "version": "16.13.1", 13304 "version": "16.13.1",
13198 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", 13305 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
......
...@@ -10,9 +10,11 @@ ...@@ -10,9 +10,11 @@
10 "@testing-library/user-event": "^12.8.3", 10 "@testing-library/user-event": "^12.8.3",
11 "axios": "^0.24.0", 11 "axios": "^0.24.0",
12 "http-proxy-middleware": "^2.0.1", 12 "http-proxy-middleware": "^2.0.1",
13 + "node-html-parser": "^5.1.0",
13 "node-sass": "^6.0.1", 14 "node-sass": "^6.0.1",
14 "react": "^17.0.2", 15 "react": "^17.0.2",
15 "react-dom": "^17.0.2", 16 "react-dom": "^17.0.2",
17 + "react-html-parser": "^2.0.2",
16 "react-redux": "^7.2.6", 18 "react-redux": "^7.2.6",
17 "react-router-dom": "^6.0.2", 19 "react-router-dom": "^6.0.2",
18 "react-scripts": "4.0.3", 20 "react-scripts": "4.0.3",
......
1 +import React, {useState} from 'react';
2 +import '../style/Board.scss'
3 +import {CKEditor} from "@ckeditor/ckeditor5-react";
4 +import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
5 +import {Button} from "semantic-ui-react";
6 +import ReactHtmlParser from 'react-html-parser';
7 +
8 +function Board() {
9 + const [BoardContent, setBoardContent] = useState({
10 + title: '',
11 + content:''
12 + })
13 + const [viewContent,setViewContent] = useState([]);
14 + const getValue = e => {
15 + const {name, value} = e.target;
16 + setBoardContent({
17 + ...BoardContent,
18 + [name]: value
19 + })
20 + console.log(BoardContent);
21 + }
22 + return (
23 + <div className="Board">
24 + <div className="contents-container">
25 + {viewContent.map(element =>
26 + <div>
27 + <h2>{element.title}</h2>
28 + <div>
29 + {ReactHtmlParser(element.content)}
30 + </div>
31 + </div>)
32 + }
33 + </div>
34 + <div className="form=wrapper">
35 + <input className="title-input"
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>
78 + </div>
79 +
80 + );
81 +};
82 +
83 +export default Board;
...\ No newline at end of file ...\ No newline at end of file
1 import {Button} from "semantic-ui-react" 1 import {Button} from "semantic-ui-react"
2 import "../style/MainPage.scss"; 2 import "../style/MainPage.scss";
3 import { useNavigate } from "react-router-dom"; 3 import { useNavigate } from "react-router-dom";
4 -import { CKEditor } from '@ckeditor/ckeditor5-react'; 4 +import Board from "../Board/Board"
5 -import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; 5 +import React from "react";
6 6
7 function MainPage() { 7 function MainPage() {
8 const navigate = useNavigate(); 8 const navigate = useNavigate();
...@@ -22,55 +22,17 @@ function MainPage() { ...@@ -22,55 +22,17 @@ function MainPage() {
22 </div> 22 </div>
23 </div> 23 </div>
24 <div className="Main-body"> 24 <div className="Main-body">
25 - <div className="contents-container"> 25 + <Board/>
26 - <div className="write-button">
27 - <Button className="ui animated button"
28 - tabIndex="0">
29 - <div className="visible content">새 고민 작성하기</div>
30 - <div className="hidden content">
31 - <i className="pencil alternate icon"></i>
32 - </div>
33 - </Button>
34 - </div>
35 - <div className="contents">
36 - <div className="ui segment">
37 - <CKEditor
38 - editor={ClassicEditor}
39 - data="<p>Hello from CKEditor 5!</p>"
40 - onReady={editor => {
41 - // You can store the "editor" and use when it is needed.
42 - console.log('Editor is ready to use!', editor);
43 - }}
44 - onChange={(event, editor) => {
45 - const data = editor.getData();
46 - console.log({ event, editor, data });
47 - }}
48 - onBlur={(event, editor) => {
49 - console.log('Blur.', editor);
50 - }}
51 - onFocus={(event, editor) => {
52 - console.log('Focus.', editor);
53 - }}
54 - />
55 - </div>
56 - <div className="ui segment">
57 - <p>a</p>
58 - </div>
59 - <div className="ui segment">
60 - <p>a</p>
61 - </div>
62 - </div>
63 - </div>
64 <div className="user-container"> 26 <div className="user-container">
65 <div className="userInfo"> 27 <div className="userInfo">
66 <h1>User ID</h1> 28 <h1>User ID</h1>
67 </div> 29 </div>
68 <div className="checkIssue-button"> 30 <div className="checkIssue-button">
69 - <Button size="Big" className="ui animated button" 31 + <Button className="ui animated button"
70 tabIndex="0"> 32 tabIndex="0">
71 <div className="visible content">도착한 글</div> 33 <div className="visible content">도착한 글</div>
72 <div className="hidden content"> 34 <div className="hidden content">
73 - <i className="paper plane ic on"></i> 35 + <i className="paper plane icon"></i>
74 </div> 36 </div>
75 </Button> 37 </Button>
76 </div> 38 </div>
......
1 +.contents-container{
2 + display: flex;
3 + flex-direction: column;
4 + justify-content: center;
5 + align-items: center;
6 + border: 2px solid #333;
7 + padding: 10px 0 30px 0;
8 + border-radius: 30px;
9 +}
10 +.title-input{
11 + width: 500px;
12 + height: 40px;
13 + margin: 10px;
14 +}
15 +.write-button{
16 + height: 70px;
17 + display: flex;
18 + justify-content: center;
19 + align-items: center;
20 +}
21 +.contents{
22 + display: flex;
23 + flex-direction: column;
24 + justify-content: center;
25 + align-items: center;
26 +}
...\ No newline at end of file ...\ No newline at end of file
1 +.title-input{
2 + width: 500px;
3 + height: 40px;
4 + margin: 10px;
5 +}
6 +.write-button{
7 + height: 70px;
8 + display: flex;
9 + justify-content: center;
10 + align-items: center;
11 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -26,36 +26,21 @@ ...@@ -26,36 +26,21 @@
26 display: flex; 26 display: flex;
27 flex-direction: row; 27 flex-direction: row;
28 height: 100vh; 28 height: 100vh;
29 - .contents-container{ 29 + border: 3px solid black;
30 + .Board{
31 + text-align: center;
30 display: flex; 32 display: flex;
31 justify-content: flex-start; 33 justify-content: flex-start;
32 flex-direction: column; 34 flex-direction: column;
33 width: 75%; 35 width: 75%;
34 height: 100%; 36 height: 100%;
35 - border: 2px solid black;
36 - .write-button{
37 - height: 70px;
38 - display: flex;
39 - justify-content: center;
40 - align-items: center;
41 - }
42 - .contents{
43 - display: flex;
44 - flex-direction: column;
45 - justify-content: center;
46 - align-items: center;
47 - .Grid{
48 - display: flex;
49 - justify-content: center;
50 - align-items: center;
51 - }
52 - }
53 } 37 }
54 .user-container{ 38 .user-container{
55 display: flex; 39 display: flex;
56 flex-direction: column; 40 flex-direction: column;
57 width: 25%; 41 width: 25%;
58 border: 2px solid black; 42 border: 2px solid black;
43 + padding: 10px 0 30px 0;
59 .userInfo{ 44 .userInfo{
60 display: flex; 45 display: flex;
61 justify-content: center; 46 justify-content: center;
......