오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
정의왕
5e1e9aff 2 parents 0988447e b99fd765

fix file_client

Inline Side-by-side
Showing 20 changed files with 358 additions and 100 deletions
1 tunnel_BE/server/node_modules 1 tunnel_BE/server/node_modules
2 2
3 +<<<<<<< HEAD
3 # Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode 4 # Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode
4 # Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode 5 # Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode
6 +=======
7 +# dependencies
8 +tunnel_BE/server/node_modules
9 +/.pnp
10 +.pnp.js
11 +>>>>>>> board
5 12
6 ### VisualStudioCode ### 13 ### VisualStudioCode ###
7 .vscode/* 14 .vscode/*
......
1 +# Default ignored files
2 +/shelf/
3 +/workspace.xml
4 +# Editor-based HTTP Client requests
5 +/httpRequests/
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<module type="WEB_MODULE" version="4">
3 + <component name="NewModuleRootManager">
4 + <content url="file://$MODULE_DIR$">
5 + <excludeFolder url="file://$MODULE_DIR$/temp" />
6 + <excludeFolder url="file://$MODULE_DIR$/.tmp" />
7 + <excludeFolder url="file://$MODULE_DIR$/tmp" />
8 + </content>
9 + <orderEntry type="inheritedJdk" />
10 + <orderEntry type="sourceFolder" forTests="false" />
11 + </component>
12 +</module>
...\ No newline at end of file ...\ No newline at end of file
1 +<component name="InspectionProjectProfileManager">
2 + <profile version="1.0">
3 + <option name="myName" value="Project Default" />
4 + <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
5 + </profile>
6 +</component>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<project version="4">
3 + <component name="ProjectModuleManager">
4 + <modules>
5 + <module fileurl="file://$PROJECT_DIR$/.idea/OSSW.iml" filepath="$PROJECT_DIR$/.idea/OSSW.iml" />
6 + </modules>
7 + </component>
8 +</project>
...\ No newline at end of file ...\ No newline at end of file
...@@ -5,6 +5,7 @@ const auth = require("../obj/authorize"); ...@@ -5,6 +5,7 @@ const auth = require("../obj/authorize");
5 const {User}=require('../models'); 5 const {User}=require('../models');
6 6
7 7
8 +
8 //로그아웃 9 //로그아웃
9 router.post('/',(req,res)=>{ 10 router.post('/',(req,res)=>{
10 req.session.id = null; 11 req.session.id = null;
...@@ -15,6 +16,4 @@ router.post('/',(req,res)=>{ ...@@ -15,6 +16,4 @@ router.post('/',(req,res)=>{
15 console.log("Logout"); 16 console.log("Logout");
16 res.sendStatus(200); 17 res.sendStatus(200);
17 }) 18 })
18 -
19 -
20 - module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
19 +module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,37 +2,12 @@ const express = require("express"); ...@@ -2,37 +2,12 @@ const express = require("express");
2 const bodyParser = require("body-parser"); 2 const bodyParser = require("body-parser");
3 const router = express.Router(); 3 const router = express.Router();
4 4
5 -/////////////
6 -const {User}=require('../models');
7 -//////////
8 -
9 router.get('/',(req,res)=>{ 5 router.get('/',(req,res)=>{
10 res.send('회원가입 페이지'); 6 res.send('회원가입 페이지');
11 }); 7 });
12 8
13 -//회원가입
14 router.post('/',(req,res)=>{ 9 router.post('/',(req,res)=>{
15 - User.findOne({ 10 + return res.status(201).json({success: true})
16 - where:{name: req.body.Id}
17 - })
18 - .then((result)=>{
19 - //id가 중복되지 않는 경우
20 - if(result === null || result === undefined){
21 - User.create({
22 - name: req.body.Id,
23 - pw:req.body.Password,
24 - personality:req.body.Personality,
25 - status:false
26 - })
27 - console.log(req.body);
28 - return res.sendStatus(200);
29 - }
30 - //id중복
31 - else{
32 - console.log("중복된 id");
33 - return res.sendStatus(401);
34 - }
35 - })
36 }); 11 });
37 12
38 //라우트 매개변수사용 13 //라우트 매개변수사용
...@@ -41,4 +16,7 @@ router.get("/:id",(req,res)=>{ ...@@ -41,4 +16,7 @@ router.get("/:id",(req,res)=>{
41 console.log(req.params, req.query); 16 console.log(req.params, req.query);
42 req.body; 17 req.body;
43 }); 18 });
19 +
20 +
21 +
44 module.exports = router; 22 module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -13,11 +13,14 @@ dotenv.config(); ...@@ -13,11 +13,14 @@ dotenv.config();
13 const indexRouter = require('./routes/index.js'); 13 const indexRouter = require('./routes/index.js');
14 const loginRouter = require('./routes/login.js'); 14 const loginRouter = require('./routes/login.js');
15 const registerRouter = require('./routes/register.js'); 15 const registerRouter = require('./routes/register.js');
16 +<<<<<<< HEAD
16 const mainRouter = require('./routes/main.js'); 17 const mainRouter = require('./routes/main.js');
17 const logoutRouter = require('./routes/logout.js'); 18 const logoutRouter = require('./routes/logout.js');
18 const authRouter = require('./routes/auth.js'); 19 const authRouter = require('./routes/auth.js');
19 const userRouter = require('./routes/user.js'); 20 const userRouter = require('./routes/user.js');
20 const postRouter = require('./routes/post.js'); 21 const postRouter = require('./routes/post.js');
22 +=======
23 +>>>>>>> board
21 24
22 const app = express(); 25 const app = express();
23 app.set('port', process.env.PORT || 3001); 26 app.set('port', process.env.PORT || 3001);
...@@ -36,6 +39,10 @@ sequelize.sync({force: false}) ...@@ -36,6 +39,10 @@ sequelize.sync({force: false})
36 app.use(morgan('dev')); 39 app.use(morgan('dev'));
37 app.use(express.json()); //json형식으로 데이터 전달 40 app.use(express.json()); //json형식으로 데이터 전달
38 app.use(express.urlencoded({extende: false})); // url형식으로 형식으로 데이터 전달 41 app.use(express.urlencoded({extende: false})); // url형식으로 형식으로 데이터 전달
42 +<<<<<<< HEAD
43 +=======
44 +//app.use(bodyParser().json);
45 +>>>>>>> board
39 app.use(cookieParser(process.env.COOKIE_SECRET)); 46 app.use(cookieParser(process.env.COOKIE_SECRET));
40 app.use(session({ 47 app.use(session({
41 resave: false, 48 resave: false,
...@@ -58,6 +65,11 @@ app.use('/api/logout',logoutRouter);//로그아웃 ...@@ -58,6 +65,11 @@ app.use('/api/logout',logoutRouter);//로그아웃
58 app.use('/api/user',userRouter);//유저정보 응답 65 app.use('/api/user',userRouter);//유저정보 응답
59 app.use('/api/post',postRouter);//유저정보 응답 66 app.use('/api/post',postRouter);//유저정보 응답
60 67
68 +<<<<<<< HEAD
69 +=======
70 +//app.use('/',loginRouter); //로그인 페이지
71 +app.use('/api/register',registerRouter); // 회원가입 페이지
72 +>>>>>>> board
61 73
62 74
63 //에러처리 미들웨어 75 //에러처리 미들웨어
...@@ -65,7 +77,6 @@ app.use('/api/post',postRouter);//유저정보 응답 ...@@ -65,7 +77,6 @@ app.use('/api/post',postRouter);//유저정보 응답
65 app.use((req,res,next)=>{ 77 app.use((req,res,next)=>{
66 console.log("유저가 존재하지 않은 경로 접근"); 78 console.log("유저가 존재하지 않은 경로 접근");
67 res.status(404).send("NOT FOUND"); 79 res.status(404).send("NOT FOUND");
68 -
69 }); 80 });
70 81
71 //포트를 연다. 82 //포트를 연다.
......
...@@ -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",
...@@ -47,5 +49,6 @@ ...@@ -47,5 +49,6 @@
47 "last 1 firefox version", 49 "last 1 firefox version",
48 "last 1 safari version" 50 "last 1 safari version"
49 ] 51 ]
50 - } 52 + },
53 + "proxy": "http://localhost:3001"
51 } 54 }
......
1 +<<<<<<< HEAD
1 import React, {useState} from 'react'; 2 import React, {useState} from 'react';
2 import '../style/Board.scss' 3 import '../style/Board.scss'
3 import {CKEditor} from "@ckeditor/ckeditor5-react"; 4 import {CKEditor} from "@ckeditor/ckeditor5-react";
...@@ -24,10 +25,30 @@ function Board() { ...@@ -24,10 +25,30 @@ function Board() {
24 <div className="contents-container"> 25 <div className="contents-container">
25 {viewContent.map(element => 26 {viewContent.map(element =>
26 <div> 27 <div>
28 +=======
29 +import React, { useState} from 'react';
30 +import '../style/Board.scss'
31 +import ReactHtmlParser from 'react-html-parser';
32 +import BoardModal from "../Modal/BoardModal";
33 +
34 +function Board() {
35 + const [viewContent,setViewContent] = useState([]);
36 + const onViewContentHandler = (data) => {
37 + setViewContent((viewContent.concat({...data})))
38 + }
39 + return (
40 + <div className="Board">
41 + <div className="write-button">
42 + <BoardModal onViewContentHandler={onViewContentHandler}/>
43 + </div>
44 + {viewContent.map(element =>
45 + <div class="ui segment">
46 +>>>>>>> board
27 <h2>{element.title}</h2> 47 <h2>{element.title}</h2>
28 <div> 48 <div>
29 {ReactHtmlParser(element.content)} 49 {ReactHtmlParser(element.content)}
30 </div> 50 </div>
51 +<<<<<<< HEAD
31 </div>) 52 </div>)
32 } 53 }
33 </div> 54 </div>
...@@ -75,6 +96,10 @@ function Board() { ...@@ -75,6 +96,10 @@ function Board() {
75 </Button> 96 </Button>
76 </div> 97 </div>
77 </div> 98 </div>
99 +=======
100 + </div>
101 + )}
102 +>>>>>>> board
78 </div> 103 </div>
79 104
80 ); 105 );
......
...@@ -3,8 +3,13 @@ import "../style/LoginPage.scss"; ...@@ -3,8 +3,13 @@ import "../style/LoginPage.scss";
3 import Axios from 'axios' 3 import Axios from 'axios'
4 import { Icon, Input } from "semantic-ui-react" 4 import { Icon, Input } from "semantic-ui-react"
5 import { useNavigate } from "react-router-dom"; 5 import { useNavigate } from "react-router-dom";
6 +<<<<<<< HEAD
6 function LoginPage() { 7 function LoginPage() {
7 let navigate = useNavigate(); 8 let navigate = useNavigate();
9 +=======
10 +function LoginPage(props) {
11 + const navigate = useNavigate();
12 +>>>>>>> board
8 const [Id, setId] = useState(""); 13 const [Id, setId] = useState("");
9 const [Password, setPassword] = useState(""); 14 const [Password, setPassword] = useState("");
10 const onIdHandler = (event) => { 15 const onIdHandler = (event) => {
...@@ -17,6 +22,7 @@ function LoginPage() { ...@@ -17,6 +22,7 @@ function LoginPage() {
17 event.preventDefault(); 22 event.preventDefault();
18 console.log("ID", Id); 23 console.log("ID", Id);
19 console.log("Password", Password); 24 console.log("Password", Password);
25 +<<<<<<< HEAD
20 Axios.post('/api/login',{ 26 Axios.post('/api/login',{
21 Id, 27 Id,
22 Password, 28 Password,
...@@ -34,6 +40,9 @@ function LoginPage() { ...@@ -34,6 +40,9 @@ function LoginPage() {
34 alert("잘못된 비밀번호입니다.") 40 alert("잘못된 비밀번호입니다.")
35 } 41 }
36 }) 42 })
43 +=======
44 +
45 +>>>>>>> board
37 }; 46 };
38 const goToRegister = () => { 47 const goToRegister = () => {
39 navigate('/register'); 48 navigate('/register');
......
...@@ -2,8 +2,8 @@ import {Button} from "semantic-ui-react" ...@@ -2,8 +2,8 @@ import {Button} from "semantic-ui-react"
2 import Axios from'axios' 2 import Axios from'axios'
3 import "../style/MainPage.scss"; 3 import "../style/MainPage.scss";
4 import { useNavigate } from "react-router-dom"; 4 import { useNavigate } from "react-router-dom";
5 -import { CKEditor } from '@ckeditor/ckeditor5-react'; 5 +import Board from "../Board/Board"
6 -import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; 6 +import React from "react";
7 7
8 function MainPage(props) { 8 function MainPage(props) {
9 const navigate = useNavigate(); 9 const navigate = useNavigate();
...@@ -20,7 +20,7 @@ function MainPage(props) { ...@@ -20,7 +20,7 @@ function MainPage(props) {
20 <div id="Main"> 20 <div id="Main">
21 <div className="Main-header"> 21 <div className="Main-header">
22 <div className="title"> 22 <div className="title">
23 - <h1>Tunnel</h1> 23 + <h1>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
24 </div> 24 </div>
25 <div className="None-title"> 25 <div className="None-title">
26 <Button className="ui right floated button" onClick={()=>onLogout()}> 26 <Button className="ui right floated button" onClick={()=>onLogout()}>
...@@ -29,55 +29,17 @@ function MainPage(props) { ...@@ -29,55 +29,17 @@ function MainPage(props) {
29 </div> 29 </div>
30 </div> 30 </div>
31 <div className="Main-body"> 31 <div className="Main-body">
32 - <div className="contents-container"> 32 + <Board/>
33 - <div className="write-button"> 33 + {/* <div className="user-container">
34 - <Button className="ui animated button"
35 - tabIndex="0">
36 - <div className="visible content">새 고민 작성하기</div>
37 - <div className="hidden content">
38 - <i className="pencil alternate icon"></i>
39 - </div>
40 - </Button>
41 - </div>
42 - <div className="contents">
43 - <div className="ui segment">
44 - <CKEditor
45 - editor={ClassicEditor}
46 - data="<p>Hello from CKEditor 5!</p>"
47 - onReady={editor => {
48 - // You can store the "editor" and use when it is needed.
49 - console.log('Editor is ready to use!', editor);
50 - }}
51 - onChange={(event, editor) => {
52 - const data = editor.getData();
53 - console.log({ event, editor, data });
54 - }}
55 - onBlur={(event, editor) => {
56 - console.log('Blur.', editor);
57 - }}
58 - onFocus={(event, editor) => {
59 - console.log('Focus.', editor);
60 - }}
61 - />
62 - </div>
63 - <div className="ui segment">
64 - <p>a</p>
65 - </div>
66 - <div className="ui segment">
67 - <p>a</p>
68 - </div>
69 - </div>
70 - </div>
71 - <div className="user-container">
72 <div className="userInfo"> 34 <div className="userInfo">
73 <h1>User ID</h1> 35 <h1>User ID</h1>
74 </div> 36 </div>
75 <div className="checkIssue-button"> 37 <div className="checkIssue-button">
76 - <Button size="Big" className="ui animated button" 38 + <Button className="ui animated button"
77 tabIndex="0"> 39 tabIndex="0">
78 <div className="visible content">도착한 글</div> 40 <div className="visible content">도착한 글</div>
79 <div className="hidden content"> 41 <div className="hidden content">
80 - <i className="paper plane ic on"></i> 42 + <i className="paper plane icon"></i>
81 </div> 43 </div>
82 </Button> 44 </Button>
83 </div> 45 </div>
...@@ -94,7 +56,7 @@ function MainPage(props) { ...@@ -94,7 +56,7 @@ function MainPage(props) {
94 </div> 56 </div>
95 </div> 57 </div>
96 </div> 58 </div>
97 - </div> 59 + </div> */}
98 </div> 60 </div>
99 </div> 61 </div>
100 ); 62 );
......
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({onViewContentHandler}) {
7 + const handleClose = (event) => {
8 + event.preventDefault();
9 + setOpen(false);
10 + }
11 + const [open, setOpen] = useState(false)
12 + const [BoardContent, setBoardContent] = useState({
13 + title: '',
14 + content:''
15 + })
16 + const getValue = e => {
17 + const {name, value} = e.target;
18 + setBoardContent({
19 + ...BoardContent,
20 + [name]: value
21 + })
22 + console.log(BoardContent);
23 + }
24 + return (
25 + <Modal
26 + onClose={() => setOpen(false)}
27 + onOpen={() => setOpen(true)}
28 + open={open}
29 + trigger={<Button className="ui animated button" tabIndex="0">
30 + <div className="visible content">게시글 작성하기</div>
31 + <div className="hidden content">
32 + <i className="pencil alternate icon"></i>
33 + </div>
34 + </Button>}
35 + >
36 + <Modal.Header>고민이 있나요?</Modal.Header>
37 + <Modal.Content content>
38 + <Modal.Description>
39 + <div className="form=wrapper">
40 + <input className="title-input"
41 + type='text'
42 + placeholder='제목'
43 + onChange={getValue}
44 + name = 'title'
45 + />
46 + <CKEditor
47 + editor={ClassicEditor}
48 + data=""
49 + onReady={editor => {
50 + // You can store the "editor" and use when it is needed.
51 + console.log('Editor is ready to use!', editor);
52 + }}
53 + onChange={(event, editor) => {
54 + const data = editor.getData();
55 + console.log({ event, editor, data });
56 + setBoardContent({
57 + ...BoardContent,
58 + content: data,
59 + })
60 + console.log(BoardContent);
61 + }}
62 + onBlur={(event, editor) => {
63 + console.log('Blur.', editor);
64 + }}
65 + onFocus={(event, editor) => {
66 + console.log('Focus.', editor);
67 + }}
68 + />
69 + </div>
70 + </Modal.Description>
71 + </Modal.Content>
72 + <Modal.Actions>
73 + <div onClick={handleClose}>
74 + <Button color='black'>
75 + 작성 취소
76 + </Button>
77 + <Button
78 + content="글 작성하기"
79 + labelPosition='right'
80 + icon='checkmark'
81 + onClick={()=> onViewContentHandler(BoardContent)}
82 + positive
83 + />
84 + </div>
85 + </Modal.Actions>
86 + </Modal>
87 + )
88 +}
89 +
90 +export default BoardModal
...\ No newline at end of file ...\ No newline at end of file
1 +.contents-container{
2 + display: flex;
3 + flex-direction: column;
4 + justify-content: center;
5 + align-items: center;
6 + padding: 10px 0 30px 0;
7 +}
8 +.title-input{
9 + width: 500px;
10 + height: 40px;
11 + margin: 10px;
12 +}
13 +.write-button{
14 + height: 70px;
15 + display: flex;
16 + justify-content: center;
17 + align-items: center;
18 +}
19 +.contents{
20 + width: 100%;
21 + display: flex;
22 + flex-direction: column;
23 + align-items: center;
24 + border-radius: 30px;
25 + border: 2px solid #333;
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
1 #Main{ 1 #Main{
2 - margin-top: 30px; 2 + background-color: beige;
3 display: flex; 3 display: flex;
4 flex-direction: column; 4 flex-direction: column;
5 .Main-header{ 5 .Main-header{
6 display: flex; 6 display: flex;
7 flex-direction: row; 7 flex-direction: row;
8 + height: 70px;
8 .title{ 9 .title{
9 display: flex; 10 display: flex;
10 justify-content: center; 11 justify-content: center;
12 + align-items: center;
11 width: 90%; 13 width: 90%;
12 - height: 60px;
13 .h1{ 14 .h1{
15 + font-family:Arial, Helvetica, sans-serif;
14 font-size: 60px; 16 font-size: 60px;
15 font-weight: bold; 17 font-weight: bold;
16 } 18 }
17 } 19 }
18 .None-title{ 20 .None-title{
21 + display: flex;
22 + justify-content: center;
23 + align-items: center;
19 width: 10%; 24 width: 10%;
20 .ui button{ 25 .ui button{
21 height: 40px; 26 height: 40px;
...@@ -26,36 +31,21 @@ ...@@ -26,36 +31,21 @@
26 display: flex; 31 display: flex;
27 flex-direction: row; 32 flex-direction: row;
28 height: 100vh; 33 height: 100vh;
29 - .contents-container{ 34 + border: 3px solid black;
35 + .Board{
36 + text-align: center;
30 display: flex; 37 display: flex;
31 justify-content: flex-start; 38 justify-content: flex-start;
32 flex-direction: column; 39 flex-direction: column;
33 - width: 75%; 40 + width: 100%;
34 height: 100%; 41 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 } 42 }
54 .user-container{ 43 .user-container{
55 display: flex; 44 display: flex;
56 flex-direction: column; 45 flex-direction: column;
57 width: 25%; 46 width: 25%;
58 border: 2px solid black; 47 border: 2px solid black;
48 + padding: 10px 0 30px 0;
59 .userInfo{ 49 .userInfo{
60 display: flex; 50 display: flex;
61 justify-content: center; 51 justify-content: center;
......
...@@ -3,12 +3,17 @@ import ReactDOM from 'react-dom'; ...@@ -3,12 +3,17 @@ import ReactDOM from 'react-dom';
3 import './index.css'; 3 import './index.css';
4 import App from './App'; 4 import App from './App';
5 import 'semantic-ui-css/semantic.min.css' 5 import 'semantic-ui-css/semantic.min.css'
6 +<<<<<<< HEAD
6 7
7 ReactDOM.render( 8 ReactDOM.render(
8 <App />, 9 <App />,
9 document.getElementById('root') 10 document.getElementById('root')
11 +=======
12 +ReactDOM.render(
13 + <App />,
14 + document.getElementById('root')
15 +>>>>>>> board
10 ); 16 );
11 -
12 // If you want to start measuring performance in your app, pass a function 17 // If you want to start measuring performance in your app, pass a function
13 // to log results (for example: reportWebVitals(console.log)) 18 // to log results (for example: reportWebVitals(console.log))
14 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 // 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
......
1 const { createProxyMiddleware } = require('http-proxy-middleware'); 1 const { createProxyMiddleware } = require('http-proxy-middleware');
2 module.exports = function(app) { 2 module.exports = function(app) {
3 app.use( 3 app.use(
4 +<<<<<<< HEAD
4 createProxyMiddleware('/api',{ 5 createProxyMiddleware('/api',{
6 +=======
7 + createProxyMiddleware('/api',{
8 +>>>>>>> board
5 target: 'http://localhost:3001', 9 target: 'http://localhost:3001',
6 changeOrigin: true, 10 changeOrigin: true,
7 }) 11 })
......