Merge branch 'master' of http://khuhub.khu.ac.kr/2019102198/Tunnel

@@ -47,6 +47,7 @@
         <li><a href="#prerequisites">Prerequisites</a></li>
         <li><a href="#prerequisites">Prerequisites</a></li>
       </ul>
       </ul>
     </li>
     </li>
+    <li><a href="#DB Schema">DB Schema</a></li>
     <li><a href="#usage">Usage</a></li>
     <li><a href="#usage">Usage</a></li>
     <li><a href="#roadmap">Roadmap</a></li>
     <li><a href="#roadmap">Roadmap</a></li>
     <li><a href="#contributing">Contributing</a></li>
     <li><a href="#contributing">Contributing</a></li>
@@ -90,11 +91,13 @@
 
 
 ### Installation
 ### Installation
 
 
-1. Clone repository
+* 1. Clone repository
    ```sh
    ```sh
     git clone http://khuhub.khu.ac.kr/2019102198/Tunnel.git
     git clone http://khuhub.khu.ac.kr/2019102198/Tunnel.git
    ``` 
    ``` 
-2. Install NPM packages
+   
+
+* 2. Install NPM packages
   ```sh
   ```sh
     PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel> cd tunnel_BE
     PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel> cd tunnel_BE
     PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE> cd server
     PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE> cd server
@@ -138,22 +141,61 @@
     mysql> CREATE SCHEMA tunnel DEFAULT CHARACTER SET utf8;
     mysql> CREATE SCHEMA tunnel DEFAULT CHARACTER SET utf8;
     Query OK, 1 row affected, 1 warning (0.04 sec)
     Query OK, 1 row affected, 1 warning (0.04 sec)
    ```
    ```
-* 내용
-  ```sh
-  내용
-  ```
+* AWS 서버 설정
+
+## DB Schema
+> * users 사용자: utf-8
+
+|Column|Type|Information|
+|---|---|---|
+|id|int|key, 자동생성|
+|name|string|User가 작성한 Id|
+|pw|string||
+|mbti|CHAR(4)|16가지중 1개만 저장|
+|update|Bool|업데이트 여부(새 고민도착, 새 댓글 도착 여부)|
+
+> * posts 게시글: utf-8
+
+|Column|Type|Information|
+|---|---|---|
+|id|int|key, 자동생성|
+|userid|string|foreign key (users.name) / 부모 삭제시 삭제|
+|post|text|게시글|
+|title|text|제목|
+|update|Bool|업데이트 여부(새 댓글 작성 여부)|
+|created_at|time|작성시간|
+
+> * comment 댓글: utf-8
+
+|Column|Type|Information|
+|---|---|---|
+|id|int|key, 자동생성|
+|postid|int||
+|userid|text|foreign key (users.id) / 부모 삭제시 삭제|
+|comment|text|댓글 정보|
+|created_at|time|작성시간|
 
 
 <!-- USAGE EXAMPLES -->
 <!-- USAGE EXAMPLES -->
 ## Usage
 ## Usage
 > ### 용도 설명
 > ### 용도 설명
 
 
 > #### 1. Login Page
 > #### 1. Login Page
+> - http://localhost:3000/login
+
 <img src="images/login.png" alt="Logo" width="100%" height="100%">
 <img src="images/login.png" alt="Logo" width="100%" height="100%">
 
 
 > #### 2. Register Page
 > #### 2. Register Page
+> - http://localhost:3000/register
+
 <img src="images/register.png" alt="Logo" width="100%" height="100%">
 <img src="images/register.png" alt="Logo" width="100%" height="100%">
 
 
 > #### 3. User board Page
 > #### 3. User board Page
+> - http://localhost:3000/main
+
+<img src="images/main.png" alt="Logo" width="100%" height="100%">
+<img src="images/main_comment.png" alt="Logo" width="100%" height="100%">
+<img src="images/main_comment2.png" alt="Logo" width="100%" height="100%">
+<img src="images/main_comment3.png" alt="Logo" width="100%" height="100%">
 
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 <p align="right">(<a href="#top">back to top</a>)</p>
 
 
@@ -161,11 +203,17 @@
 <!-- ROADMAP -->
 <!-- ROADMAP -->
 ## Roadmap
 ## Roadmap
 
 
+> - 회원가입 기능 구현 (Id, mbti, password, password 재확인 입력)
+>    - 중복된 Id 유무 확인, 중복시 재입력 요구
+>    - password, password 재확인 일치 여부 확인
+>    - 모든 문제 없다면, 회원정보 DB에 저장, 로그인 화면 이동
 > - 로그인 기능 구현
 > - 로그인 기능 구현
-> - 회원가입 기능 구현 (Id, mbti, password 입력)
+>    - Id/Password 받아서 회원정보 DB에 Id로 탐색 후 Password 일치 여부 확인
+>    - 모든 문제 없다면, 게시판 화면 이동
 > - 사용자 게시판 구현
 > - 사용자 게시판 구현
->    - [x] mbti 사용한 매칭 기능
->    - [o] 내용
+>    - 내 계정정보, mbti 표시
+>    - 내 게시글 시간순으로 나열
+>    - 게시글 밑에 댓글 수 표시
 
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 <p align="right">(<a href="#top">back to top</a>)</p>
 
 
@@ -199,8 +247,8 @@ Distributed under the [MIT License](License).
 ## Contact
 ## Contact
 
 
 > - 오인제 (seanoh@khu.ac.kr)
 > - 오인제 (seanoh@khu.ac.kr)
-> - 정의왕 (@khu.ac.kr)
-> - 고병후 (@khu.ac.kr)
+> - 정의왕 (wang323@khu.ac.kr)
+> - 고병후 (gobyeonghu@khu.ac.kr)
 
 
 Project Link: [http://khuhub.khu.ac.kr/2019102198/Tunnel.git](http://khuhub.khu.ac.kr/2019102198/Tunnel.git)
 Project Link: [http://khuhub.khu.ac.kr/2019102198/Tunnel.git](http://khuhub.khu.ac.kr/2019102198/Tunnel.git)
 
 

@@ -12,9 +12,7 @@ const {Comment}=require('../models');
 router.post('/reply',auth,(req,res)=>{
 router.post('/reply',auth,(req,res)=>{
 
 
     Comment.findAll({
     Comment.findAll({
-
         where:{postid: req.body.id},
         where:{postid: req.body.id},
-
         order: [['created_at', 'ASC']],
         order: [['created_at', 'ASC']],
      })
      })
      .then((result)=>{
      .then((result)=>{
@@ -39,7 +37,6 @@ router.post('/write',auth,(req,res)=>{
     Comment.create({
     Comment.create({
         userid : req.session.name,
         userid : req.session.name,
         postid : req.body.postid,
         postid : req.body.postid,
-
         comment : req.body.comment,
         comment : req.body.comment,
     })
     })
     console.log("게시");
     console.log("게시");
@@ -60,7 +57,4 @@ router.post('/write',auth,(req,res)=>{
 
 
      
      
 
 
-
-
-
 module.exports = router;
 module.exports = router;
\ No newline at end of file

 import Axios from 'axios';
 import Axios from 'axios';
 import React, { useState, useEffect} from 'react';
 import React, { useState, useEffect} from 'react';
 import '../style/Board.scss'
 import '../style/Board.scss'
-
-import BoardModal from "../Modal/BoardModal";
 import ContentModal from '../Modal/ContentModal';
 import ContentModal from '../Modal/ContentModal';
 
 
 function Board() {
 function Board() {
@@ -16,9 +14,6 @@ function Board() {
       },[viewContent])
       },[viewContent])
     return (
     return (
         <div className="Board">
         <div className="Board">
-            <div className="write-button">
-                <BoardModal/>
-            </div>
             <div className="contents">
             <div className="contents">
              {viewContent&&viewContent.map(element =>{
              {viewContent&&viewContent.map(element =>{
                 return <div className="ui segment">
                 return <div className="ui segment">

@@ -4,6 +4,7 @@ import "../style/MainPage.scss";
 import { useNavigate } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import Board from "../Board/Board"
 import Board from "../Board/Board"
 import React from "react";
 import React from "react";
+import BoardModal from "../Modal/BoardModal";
 
 
 function MainPage(props) {
 function MainPage(props) {
     const navigate = useNavigate();
     const navigate = useNavigate();
@@ -19,8 +20,9 @@ function MainPage(props) {
     return (
     return (
         <div id="Main">
         <div id="Main">
             <div className="Main-header">
             <div className="Main-header">
+                <div className="wrapper">
                     <div className="title">
                     <div className="title">
-                    <h1>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
+                        <h1 style={{color: 'white'}}>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
                     </div>
                     </div>
                     <div className="None-title">
                     <div className="None-title">
                         <Button className="ui right floated button" onClick={()=>onLogout()}>
                         <Button className="ui right floated button" onClick={()=>onLogout()}>
@@ -28,35 +30,12 @@ function MainPage(props) {
                         </Button>
                         </Button>
                     </div>
                     </div>
                 </div>
                 </div>
-            <div className="Main-body">
-                <Board/>
-                {/* <div className="user-container">
-                    <div className="userInfo">
-                        <h1>User ID</h1>
-                    </div>
-                    <div className="checkIssue-button">
-                        <Button className="ui animated button"
-                                tabIndex="0">
-                            <div className="visible content">도착한 글</div>
-                            <div className="hidden content">
-                                <i className="paper plane icon"></i>
-                            </div>
-                        </Button>
-                    </div>
-                    <div className="user">
-                        <div className="Answer">
-                            <div className="ui segment">
-                                <p>a</p>
+                <div className="write-btn">
+                    <BoardModal/>
                 </div>
                 </div>
-                            <div className="ui segment">
-                                <p>a</p>
             </div>
             </div>
-                            <div className="ui segment">
-                                <p>a</p>
-                            </div>
-                        </div>
-                    </div>
-                </div> */}
+            <div className="Main-body">
+                <Board/>
             </div>
             </div>
         </div>
         </div>
     );
     );

@@ -51,11 +51,8 @@ function BoardModal() {
             onClose={() => setOpen(false)}
             onClose={() => setOpen(false)}
             onOpen={() => setOpen(true)}
             onOpen={() => setOpen(true)}
             open={open}
             open={open}
-            trigger={<Button className="ui animated button" tabIndex="0">
-                <div className="visible content">게시글 작성하기</div>
-                <div className="hidden content">
-                    <i className="pencil alternate icon"></i>
-                </div>
+            trigger={<Button className="ui right floated button" tabIndex="0" >
+                게시글 작성하기
             </Button>}  
             </Button>}  
         >
         >
             <Modal.Header>고민이 있나요?</Modal.Header>
             <Modal.Header>고민이 있나요?</Modal.Header>

@@ -42,8 +42,8 @@ function ContentModal({element}) {
             onClose={() => setOpen(false)}
             onClose={() => setOpen(false)}
             onOpen={() => setOpen(true)}
             onOpen={() => setOpen(true)}
             open={open}
             open={open}
-            trigger={<Button basic color='purple' className="ui animated button" tabIndex="0">
-                <div className="visible content">보기</div>
+            trigger={<Button basic color='purple' className="ui floated button" tabIndex="0">
+                보기
             </Button>}
             </Button>}
         >
         >
             <Modal.Header><h2>{element.title}</h2></Modal.Header>
             <Modal.Header><h2>{element.title}</h2></Modal.Header>
@@ -57,7 +57,7 @@ function ContentModal({element}) {
             <Modal.Content>
             <Modal.Content>
                 {viewComment&&viewComment.map(elem =>{  
                 {viewComment&&viewComment.map(elem =>{  
                     return <div className="ui segment">
                     return <div className="ui segment">
-                                <h2>{elem.userid}</h2>
+                                <h4>{elem.userid}</h4>
                                  <h4>{elem.comment}</h4>
                                  <h4>{elem.comment}</h4>
                             </div>}
                             </div>}
                         )}
                         )}

@@ -11,18 +11,22 @@
   margin: 10px;
   margin: 10px;
 }
 }
 .write-button{
 .write-button{
+  margin-bottom: 30px;
   height: 70px;
   height: 70px;
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
 }
 }
 .contents{
 .contents{
+  background-color: rgb(36, 83, 121);
   width: 100%;
   width: 100%;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
   .ui.segment{
   .ui.segment{
-    width: 40%;
+    padding: 20px;
+    width: 67%;
+    text-align: center;
 
 
   }
   }
 }
 }
\ No newline at end of file

@@ -5,5 +5,5 @@
 }
 }
 .content{
 .content{
     height: fit-content;
     height: fit-content;
-    text-align: center;
+    text-align: left;
 }
 }
\ No newline at end of file

 #Main{
 #Main{
-  background-color: beige;
   display: flex;
   display: flex;
-  flex-direction: column;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
   .Main-header{
   .Main-header{
+    background-color: rgb(77, 62, 161);
+    position: fixed;  
+    top: 0; 
+    left: 0;
+    z-index: 10;
     text-align: center;
     text-align: center;
     display: flex;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 120px;
+    .wrapper{
+      display: flex;
       flex-direction: row;
       flex-direction: row;
-    height: 70px;
-    
+      margin-bottom: 20px;
+      width:100%;
+    }
     .title{
     .title{
       display: flex;
       display: flex;
       justify-content: center;
       justify-content: center;
       align-items: center;
       align-items: center;
-      width: 90%;
+      width: 100%;
       .h1{
       .h1{
         font-family:Arial, Helvetica, sans-serif;
         font-family:Arial, Helvetica, sans-serif;
         font-size: 60px;
         font-size: 60px;
@@ -23,47 +34,25 @@
     }
     }
     .None-title{
     .None-title{
       display: flex;
       display: flex;
-      justify-content:start;
+      justify-content:right;
       align-items: center;
       align-items: center;
       width: 10%;
       width: 10%;
       .ui button{
       .ui button{
         height: 40px;
         height: 40px;
       }
       }
     }
     }
+    
   }
   }
   .Main-body{
   .Main-body{
+    padding-top: 120px;
     display: flex;
     display: flex;
     flex-direction: row;
     flex-direction: row;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
-    width: 80%;
-    height: 100vh;
-    border: 3px solid black;
+    width: 100%;
     .Board{
     .Board{
-      text-align: center;
-      display: flex;
-      justify-content: flex-start;
-      flex-direction: column;
       width: 100%;
       width: 100%;
-      height: 100%;
-    }
-    .user-container{
-      display: flex;
-      flex-direction: column;
-      width: 25%;
-      border: 2px solid black;
-      padding: 10px 0 30px 0;
-      .userInfo{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .checkIssue-button{
-        height: 70px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+      
     }
     }
   }  
   }  
 }
 }