Comment connect with DB

@@ -3,7 +3,6 @@ tunnel_BE/server/node_modules
 # dependencies
 /.pnp
 .pnp.js
->>>>>>> board
 
 ### VisualStudioCode ###
 .vscode/*

@@ -3,6 +3,7 @@ import React, { useState, useEffect} from 'react';
 import '../style/Board.scss'
 import ReactHtmlParser from 'react-html-parser';
 import BoardModal from "../Modal/BoardModal";
+import ContentModal from '../Modal/ContentModal';
 
 function Board() {
     const [viewContent,setViewContent] = useState([]);
@@ -22,9 +23,8 @@ function Board() {
              {viewContent&&viewContent.map(element =>{
                 return <div className="ui segment">
                             <h2>{element.title}</h2>
-                            <div>
-                                {ReactHtmlParser(element.post)}
-                            </div>
+                            <h4>{element.created_at.slice(0,10)+" " +element.created_at.slice(11,16)}</h4>
+                            <ContentModal element={element}/>
                         </div>}
                     )} 
             </div>

+import React, {useState, useEffect} from 'react'
+import Axios from 'axios'
+import ReactHtmlParser from 'react-html-parser';
+import { Button, Modal, Comment, Form } from 'semantic-ui-react'
+import '../style/ContentModal.scss'
+
+function ContentModal({element}) {
+    const [viewComment,setviewComment] = useState([]);
+    useEffect(()=>{
+        Axios.get('/api/comment/'+element.id).then((response)=>{
+          setviewComment(response.data);
+        })
+      },[viewComment])
+
+    const handleClose = (event) => {
+        event.preventDefault();
+        setOpen(false);
+    }
+    const [open, setOpen] = useState(false)
+    const [BoardComment, setBoardComment] = useState({
+        id: null,
+        content:''
+    })
+    const onCommentHandler = (event) => {
+        setBoardComment(event.currentTarget.value)
+        console.log(BoardComment)
+    }
+    const onSubmitHandler = () => {
+        Axios.post('/api/comment',{
+                    id: element.id,
+                    content: BoardComment
+                })
+                .then((res)=>{
+                    if(res.status === 200){
+                        alert("댓글 작성을 완료하였습니다.")
+                    }
+                }).catch((error) => {
+                    console.log(error.response)
+                    alert("댓글 작성을 실패하였습니다.")
+                })
+            }
+    return (
+        <Modal
+            onClose={() => setOpen(false)}
+            onOpen={() => setOpen(true)}
+            open={open}
+            trigger={<Button basic color='purple' className="ui animated button" tabIndex="0">
+                <div className="visible content">보기</div>
+            </Button>}
+        >
+            <Modal.Header><h2>{element.title}</h2></Modal.Header>
+            <Modal.Content>
+                <Modal.Description>
+                    <div className="problems">
+                        {ReactHtmlParser(element.post)}
+                    </div>
+                </Modal.Description>
+            </Modal.Content>
+            <Modal.Content>
+                {viewComment&&viewComment.map(elem =>{
+                    return <div className="ui segment">
+                                <h2>{elem.title}</h2>
+                                <h4>{elem.created_at.slice(0,10)+" " +elem.created_at.slice(11,16)}</h4>
+                            </div>}
+                        )}
+            </Modal.Content>
+            <Modal.Actions>
+                <Comment>
+                <Form reply>
+                    <Form.TextArea onChange={onCommentHandler}/>
+                    <div onClick={handleClose}>
+                        <Button content='댓글 남기기' labelPosition='left' icon='edit' primary onSubmit={onSubmitHandler}/>
+                        <Button color='black'>닫기</Button>
+                    </div>
+                </Form>
+                </Comment>
+            </Modal.Actions>
+        </Modal>
+    )
+}
+export default ContentModal
\ No newline at end of file

 import React, {useState, useCallback} from "react";
 import { useNavigate } from "react-router-dom";
 import "../style/RegisterPage.scss";
-import { Button, Icon, Input } from "semantic-ui-react";
+import { Button, Dropdown, Icon, Input} from "semantic-ui-react";
 import Axios from 'axios'
 function RegisterPage(props) {
     const navigate = useNavigate();
@@ -16,7 +16,7 @@ function RegisterPage(props) {
         setPassword(event.currentTarget.value);
     };
     const onPersonalityHandler = (event) => {
-        setPersonality(event.currentTarget.value);
+        setPersonality(event.currentTarget.value.toUpperCase());
     };
     const onPasswordChkHandler = (event) => {
         //비밀번호를 입력할때마다 password 를 검증하는 함수
@@ -30,6 +30,11 @@ function RegisterPage(props) {
         if (Password !== PasswordCheck) {
             return alert('비밀번호가 일치하지 않습니다.')
         }
+        else if((Personality[0] !== 'I' && Personality[0] !== 'E') || (Personality[1] !== 'S' && Personality[1] !== 'N')
+        || (Personality[2] !== 'F' && Personality[2] !== 'T') || (Personality[3] !== 'J' && Personality[3] !== 'P'))
+        { 
+            return alert('올바르지 않은 MBTI입니다.')
+        }
         else{
             Axios.post('/api/register',{
                 Id, 
@@ -67,6 +72,7 @@ function RegisterPage(props) {
                             icon={<Icon name='heart'/>}
                             iconPosition='left'
                             placeholder="Your MBTI"
+                            maxlength='4'
                             type="text"
                             value={Personality}
                             autoComplete="off"

@@ -21,6 +21,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-radius: 30px;
-  border: 2px solid #333;
+  .ui.segment{
+    width: 40%;
+
+  }
 }
\ 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

+.header{
+    text-align: center;
+    display: flex;
+
+}
+.content{
+    height: fit-content;
+    text-align: center;
+}
\ No newline at end of file

@@ -2,10 +2,14 @@
   background-color: beige;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
   .Main-header{
+    text-align: center;
     display: flex;
     flex-direction: row;
     height: 70px;
+    width: 100%;
     .title{
       display: flex;
       justify-content: center;
@@ -19,7 +23,7 @@
     }
     .None-title{
       display: flex;
-      justify-content: center;
+      justify-content:start;
       align-items: center;
       width: 10%;
       .ui button{
@@ -30,6 +34,9 @@
   .Main-body{
     display: flex;
     flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 80%;
     height: 100vh;
     border: 3px solid black;
     .Board{

@@ -43,6 +43,16 @@
       color: white;
       outline: none;
     }
+    .dropdown{
+      width: 75%;
+      padding: 15px .8em .8em;
+      background-color: transparent;
+      border: 2px solid white;
+      border-radius: 30px;
+      font-size: 18px;
+      color: white;
+      outline: none;
+    }
 
     label {
       position: absolute;