정의왕

Complete communication between server and client

1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<project version="4">
3 + <component name="AutoImportSettings">
4 + <option name="autoReloadType" value="SELECTIVE" />
5 + </component>
6 + <component name="ChangeListManager">
7 + <list default="true" id="a1e8140c-05b3-40e9-ab0b-098f82d0a906" name="Changes" comment="">
8 + <change beforePath="$PROJECT_DIR$/tunnel_BE/server/routes/regiser.js" beforeDir="false" />
9 + <change beforePath="$PROJECT_DIR$/tunnel_BE/server/server.js" beforeDir="false" afterPath="$PROJECT_DIR$/tunnel_BE/server/server.js" afterDir="false" />
10 + <change beforePath="$PROJECT_DIR$/turnel_FE/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/package.json" afterDir="false" />
11 + <change beforePath="$PROJECT_DIR$/turnel_FE/src/_actions/user_action.js" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/src/_actions/user_action.js" afterDir="false" />
12 + <change beforePath="$PROJECT_DIR$/turnel_FE/src/component/views/LoginPage/LoginPage.js" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/src/component/views/LoginPage/LoginPage.js" afterDir="false" />
13 + <change beforePath="$PROJECT_DIR$/turnel_FE/src/setupProxy.js" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/src/setupProxy.js" afterDir="false" />
14 + </list>
15 + <option name="SHOW_DIALOG" value="false" />
16 + <option name="HIGHLIGHT_CONFLICTS" value="true" />
17 + <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
18 + <option name="LAST_RESOLUTION" value="IGNORE" />
19 + </component>
20 + <component name="Git.Settings">
21 + <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
22 + </component>
23 + <component name="ProjectId" id="21pIKstjdmdVo3FfVF9bTksUp4c" />
24 + <component name="ProjectViewState">
25 + <option name="hideEmptyMiddlePackages" value="true" />
26 + <option name="showLibraryContents" value="true" />
27 + </component>
28 + <component name="PropertiesComponent">
29 + <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
30 + <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
31 + <property name="WebServerToolWindowFactoryState" value="false" />
32 + <property name="last_opened_file_path" value="$PROJECT_DIR$" />
33 + <property name="node.js.detected.package.eslint" value="true" />
34 + <property name="node.js.detected.package.tslint" value="true" />
35 + <property name="node.js.selected.package.eslint" value="(autodetect)" />
36 + <property name="node.js.selected.package.tslint" value="(autodetect)" />
37 + <property name="nodejs_interpreter_path" value="$PROJECT_DIR$/../../../../Program Files/nodejs/node" />
38 + <property name="nodejs_package_manager_path" value="npm" />
39 + <property name="settings.editor.selected.configurable" value="settings.nodejs" />
40 + <property name="vue.rearranger.settings.migration" value="true" />
41 + </component>
42 + <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
43 + <component name="TaskManager">
44 + <task active="true" id="Default" summary="Default task">
45 + <changelist id="a1e8140c-05b3-40e9-ab0b-098f82d0a906" name="Changes" comment="" />
46 + <created>1638631541267</created>
47 + <option name="number" value="Default" />
48 + <option name="presentableId" value="Default" />
49 + <updated>1638631541267</updated>
50 + <workItem from="1638631542578" duration="3985000" />
51 + <workItem from="1638641485255" duration="60000" />
52 + <workItem from="1638641565668" duration="11802000" />
53 + </task>
54 + <servers />
55 + </component>
56 + <component name="TypeScriptGeneratedFilesManager">
57 + <option name="version" value="3" />
58 + </component>
59 + <component name="Vcs.Log.Tabs.Properties">
60 + <option name="TAB_STATES">
61 + <map>
62 + <entry key="MAIN">
63 + <value>
64 + <State />
65 + </value>
66 + </entry>
67 + </map>
68 + </option>
69 + <option name="oldMeFiltersMigrated" value="true" />
70 + </component>
71 + <component name="XSLT-Support.FileAssociations.UIState">
72 + <expand />
73 + <select />
74 + </component>
75 +</project>
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,26 +2,21 @@ const express = require("express"); ...@@ -2,26 +2,21 @@ 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 -router.post('/',(req,res)=>{ 5 +router.get('/',(req,res)=>{
6 - console.log(req.body); 6 + res.send('회원가입 페이지');
7 - return res.status(200).json({
8 - success: true
9 - });
10 }); 7 });
11 8
12 -router.get('/',(req,res)=>{ 9 +router.post('/',(req,res)=>{
13 - //res.json({id: "hi"}); 10 + console.log(req.body);
14 - //console.log(res.body); 11 + return res.json({a: "hi"});
15 }); 12 });
16 13
17 //라우트 매개변수사용 14 //라우트 매개변수사용
18 //뒤에 위치 요구 15 //뒤에 위치 요구
19 -/*
20 router.get("/:id",(req,res)=>{ 16 router.get("/:id",(req,res)=>{
21 console.log(req.params, req.query); 17 console.log(req.params, req.query);
22 - //req.body; 18 + req.body;
23 }); 19 });
24 -*/
25 20
26 21
27 22
......
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
...@@ -19,14 +19,8 @@ function LoginPage(props) { ...@@ -19,14 +19,8 @@ function LoginPage(props) {
19 event.preventDefault(); 19 event.preventDefault();
20 console.log("ID", Id); 20 console.log("ID", Id);
21 console.log("Password", Password); 21 console.log("Password", Password);
22 - let body = {
23 - email: Id,
24 - password: Password
25 - }
26 -
27 22
28 }; 23 };
29 -
30 const goToRegister = () => { 24 const goToRegister = () => {
31 navigate('/register'); 25 navigate('/register');
32 } 26 }
......
1 -import React, {useState} from "react"; 1 +import React, {useState, useCallback} from "react";
2 +import { useNavigate } from "react-router-dom";
2 import "../style/RegisterPage.scss"; 3 import "../style/RegisterPage.scss";
3 import { Button, Icon, Input } from "semantic-ui-react"; 4 import { Button, Icon, Input } from "semantic-ui-react";
4 import Axios from 'axios' 5 import Axios from 'axios'
5 6
6 -function RegisterPage() { 7 +function RegisterPage(props) {
8 + const navigate = useNavigate();
7 const [Id, setId] = useState(""); 9 const [Id, setId] = useState("");
8 const [Password, setPassword] = useState(""); 10 const [Password, setPassword] = useState("");
9 const [PasswordCheck,setPasswordCheck] = useState(""); 11 const [PasswordCheck,setPasswordCheck] = useState("");
...@@ -22,7 +24,7 @@ function RegisterPage() { ...@@ -22,7 +24,7 @@ function RegisterPage() {
22 //비밀번호를 입력할때마다 password 를 검증하는 함수 24 //비밀번호를 입력할때마다 password 를 검증하는 함수
23 setPasswordCheck(event.currentTarget.value); 25 setPasswordCheck(event.currentTarget.value);
24 }; 26 };
25 - const onSubmitHandler = (event) => { 27 + const onSubmitHandler = useCallback((event) => {
26 event.preventDefault(); 28 event.preventDefault();
27 console.log("ID", Id); 29 console.log("ID", Id);
28 console.log("Password", Password); 30 console.log("Password", Password);
...@@ -30,13 +32,23 @@ function RegisterPage() { ...@@ -30,13 +32,23 @@ function RegisterPage() {
30 if (Password !== PasswordCheck) { 32 if (Password !== PasswordCheck) {
31 return alert('비밀번호가 일치하지 않습니다.') 33 return alert('비밀번호가 일치하지 않습니다.')
32 } 34 }
33 - let body = { 35 + else{
34 - id: Id, 36 + Axios.post('/api/register',{
35 - password: Password, 37 + Id,
36 - personality: Personality 38 + Password,
39 + Personality
40 + })
41 + .then((res)=>{
42 + if(res.status === 200){
43 + alert("회원가입에 성공하였습니다.")
44 + navigate('/login')
37 } 45 }
38 - 46 + }).catch((error) => {
47 + console.log(error.response)
48 + })
39 } 49 }
50 +
51 + },[Id, Password, Personality, PasswordCheck])
40 return ( 52 return (
41 <div id="Register"> 53 <div id="Register">
42 <div className="register-form"> 54 <div className="register-form">
......
...@@ -6,9 +6,7 @@ import App from './App'; ...@@ -6,9 +6,7 @@ import App from './App';
6 import 'semantic-ui-css/semantic.min.css' 6 import 'semantic-ui-css/semantic.min.css'
7 7
8 ReactDOM.render( 8 ReactDOM.render(
9 -
10 <App />, 9 <App />,
11 -
12 document.getElementById('root') 10 document.getElementById('root')
13 ); 11 );
14 12
......