Complete communication between server and client

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="a1e8140c-05b3-40e9-ab0b-098f82d0a906" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/tunnel_BE/server/routes/regiser.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/tunnel_BE/server/server.js" beforeDir="false" afterPath="$PROJECT_DIR$/tunnel_BE/server/server.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/turnel_FE/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/package.json" afterDir="false" />
+      <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" />
+      <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" />
+      <change beforePath="$PROJECT_DIR$/turnel_FE/src/setupProxy.js" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/src/setupProxy.js" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectId" id="21pIKstjdmdVo3FfVF9bTksUp4c" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="node.js.detected.package.eslint" value="true" />
+    <property name="node.js.detected.package.tslint" value="true" />
+    <property name="node.js.selected.package.eslint" value="(autodetect)" />
+    <property name="node.js.selected.package.tslint" value="(autodetect)" />
+    <property name="nodejs_interpreter_path" value="$PROJECT_DIR$/../../../../Program Files/nodejs/node" />
+    <property name="nodejs_package_manager_path" value="npm" />
+    <property name="settings.editor.selected.configurable" value="settings.nodejs" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="a1e8140c-05b3-40e9-ab0b-098f82d0a906" name="Changes" comment="" />
+      <created>1638631541267</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1638631541267</updated>
+      <workItem from="1638631542578" duration="3985000" />
+      <workItem from="1638641485255" duration="60000" />
+      <workItem from="1638641565668" duration="11802000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+    <option name="oldMeFiltersMigrated" value="true" />
+  </component>
+  <component name="XSLT-Support.FileAssociations.UIState">
+    <expand />
+    <select />
+  </component>
+</project>
\ No newline at end of file

@@ -2,26 +2,21 @@ const express = require("express");
 const bodyParser = require("body-parser");
 const bodyParser = require("body-parser");
 const router = express.Router();
 const router = express.Router();
 
 
-router.post('/',(req,res)=>{
-    console.log(req.body);
-    return res.status(200).json({
-        success: true
-    });
+router.get('/',(req,res)=>{
+    res.send('회원가입 페이지');
 });
 });
 
 
-router.get('/',(req,res)=>{
-    //res.json({id: "hi"});
-    //console.log(res.body);
+router.post('/',(req,res)=>{
+    console.log(req.body);
+    return res.json({a: "hi"});
 });
 });
 
 
 //라우트 매개변수사용 
 //라우트 매개변수사용 
 //뒤에 위치 요구
 //뒤에 위치 요구
-/*
 router.get("/:id",(req,res)=>{
 router.get("/:id",(req,res)=>{
     console.log(req.params, req.query);
     console.log(req.params, req.query);
-    //req.body;
+    req.body;
 });
 });
-*/
 
 
 
 
 
 

+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

@@ -19,14 +19,8 @@ function LoginPage(props) {
         event.preventDefault();
         event.preventDefault();
         console.log("ID", Id);
         console.log("ID", Id);
         console.log("Password", Password);
         console.log("Password", Password);
-        let body = {
-            email: Id,
-            password: Password
-        }
-    
     
     
     };  
     };  
-
     const goToRegister = () => {
     const goToRegister = () => {
         navigate('/register');
         navigate('/register');
     }
     }

-import React, {useState} from "react";
+import React, {useState, useCallback} from "react";
+import { useNavigate } from "react-router-dom";
 import "../style/RegisterPage.scss";
 import "../style/RegisterPage.scss";
 import { Button, Icon, Input } from "semantic-ui-react";
 import { Button, Icon, Input } from "semantic-ui-react";
 import Axios from 'axios'
 import Axios from 'axios'
 
 
-function RegisterPage() {
+function RegisterPage(props) {
+    const navigate = useNavigate();
     const [Id, setId] = useState("");
     const [Id, setId] = useState("");
     const [Password, setPassword] = useState("");
     const [Password, setPassword] = useState("");
     const [PasswordCheck,setPasswordCheck] = useState("");
     const [PasswordCheck,setPasswordCheck] = useState("");
@@ -22,7 +24,7 @@ function RegisterPage() {
         //비밀번호를 입력할때마다 password 를 검증하는 함수
         //비밀번호를 입력할때마다 password 를 검증하는 함수
         setPasswordCheck(event.currentTarget.value);
         setPasswordCheck(event.currentTarget.value);
     };
     };
-    const onSubmitHandler = (event) => {
+    const onSubmitHandler = useCallback((event) => {
         event.preventDefault();
         event.preventDefault();
         console.log("ID", Id);
         console.log("ID", Id);
         console.log("Password", Password);
         console.log("Password", Password);
@@ -30,13 +32,23 @@ function RegisterPage() {
         if (Password !== PasswordCheck) {
         if (Password !== PasswordCheck) {
             return alert('비밀번호가 일치하지 않습니다.')
             return alert('비밀번호가 일치하지 않습니다.')
         }
         }
-        let body = {
-            id: Id,
-            password: Password,
-            personality: Personality
+        else{
+            Axios.post('/api/register',{
+                Id, 
+                Password,
+                Personality
+            })
+            .then((res)=>{
+                if(res.status === 200){
+                    alert("회원가입에 성공하였습니다.")
+                    navigate('/login')
                 }
                 }
-       
+            }).catch((error) => {
+                console.log(error.response)
+            })
         }
         }
+       
+    },[Id, Password, Personality, PasswordCheck])
     return (
     return (
         <div id="Register">
         <div id="Register">
             <div className="register-form">
             <div className="register-form">

@@ -6,9 +6,7 @@ import App from './App';
 import 'semantic-ui-css/semantic.min.css'
 import 'semantic-ui-css/semantic.min.css'
 
 
 ReactDOM.render(
 ReactDOM.render(
-      
     <App />,
     <App />,
-      
   document.getElementById('root')
   document.getElementById('root')
 );
 );