오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
고병후
2fa0d4fc 2 parents 64f56d0b 28fa0de5

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

Inline Side-by-side
Showing 14 changed files with 98 additions and 92 deletions
......@@ -47,6 +47,7 @@
<li><a href="#prerequisites">Prerequisites</a></li>
</ul>
</li>
<li><a href="#DB Schema">DB Schema</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#roadmap">Roadmap</a></li>
<li><a href="#contributing">Contributing</a></li>
......@@ -90,11 +91,13 @@
### Installation
1. Clone repository
* 1. Clone repository
```sh
git clone http://khuhub.khu.ac.kr/2019102198/Tunnel.git
```
2. Install NPM packages
* 2. Install NPM packages
```sh
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
......@@ -138,22 +141,61 @@
mysql> CREATE SCHEMA tunnel DEFAULT CHARACTER SET utf8;
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
> ### 용도 설명
> #### 1. Login Page
> - http://localhost:3000/login
<img src="images/login.png" alt="Logo" width="100%" height="100%">
> #### 2. Register Page
> - http://localhost:3000/register
<img src="images/register.png" alt="Logo" width="100%" height="100%">
> #### 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>
......@@ -161,11 +203,17 @@
<!-- 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>
......@@ -199,8 +247,8 @@ Distributed under the [MIT License](License).
## Contact
> - 오인제 (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)
......
......@@ -12,9 +12,7 @@ const {Comment}=require('../models');
router.post('/reply',auth,(req,res)=>{
Comment.findAll({
where:{postid: req.body.id},
order: [['created_at', 'ASC']],
})
.then((result)=>{
......@@ -39,7 +37,6 @@ router.post('/write',auth,(req,res)=>{
Comment.create({
userid : req.session.name,
postid : req.body.postid,
comment : req.body.comment,
})
console.log("게시");
......@@ -60,7 +57,4 @@ router.post('/write',auth,(req,res)=>{
module.exports = router;
\ No newline at end of file
......
import Axios from 'axios';
import React, { useState, useEffect} from 'react';
import '../style/Board.scss'
import BoardModal from "../Modal/BoardModal";
import ContentModal from '../Modal/ContentModal';
function Board() {
......@@ -16,9 +14,6 @@ function Board() {
},[viewContent])
return (
<div className="Board">
<div className="write-button">
<BoardModal/>
</div>
<div className="contents">
{viewContent&&viewContent.map(element =>{
return <div className="ui segment">
......
......@@ -4,6 +4,7 @@ import "../style/MainPage.scss";
import { useNavigate } from "react-router-dom";
import Board from "../Board/Board"
import React from "react";
import BoardModal from "../Modal/BoardModal";
function MainPage(props) {
const navigate = useNavigate();
......@@ -19,8 +20,9 @@ function MainPage(props) {
return (
<div id="Main">
<div className="Main-header">
<div className="wrapper">
<div className="title">
<h1>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
<h1 style={{color: 'white'}}>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
</div>
<div className="None-title">
<Button className="ui right floated button" onClick={()=>onLogout()}>
......@@ -28,35 +30,12 @@ function MainPage(props) {
</Button>
</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 className="ui segment">
<p>a</p>
</div>
<div className="ui segment">
<p>a</p>
</div>
</div>
</div>
</div> */}
<div className="Main-body">
<Board/>
</div>
</div>
);
......
......@@ -51,11 +51,8 @@ function BoardModal() {
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
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>}
>
<Modal.Header>고민이 있나요?</Modal.Header>
......
......@@ -42,8 +42,8 @@ function ContentModal({element}) {
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
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>}
>
<Modal.Header><h2>{element.title}</h2></Modal.Header>
......@@ -57,7 +57,7 @@ function ContentModal({element}) {
<Modal.Content>
{viewComment&&viewComment.map(elem =>{
return <div className="ui segment">
<h2>{elem.userid}</h2>
<h4>{elem.userid}</h4>
<h4>{elem.comment}</h4>
</div>}
)}
......
......@@ -11,18 +11,22 @@
margin: 10px;
}
.write-button{
margin-bottom: 30px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.contents{
background-color: rgb(36, 83, 121);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.ui.segment{
width: 40%;
padding: 20px;
width: 67%;
text-align: center;
}
}
\ No newline at end of file
......
......@@ -5,5 +5,5 @@
}
.content{
height: fit-content;
text-align: center;
text-align: left;
}
\ No newline at end of file
......
#Main{
background-color: beige;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.Main-header{
background-color: rgb(77, 62, 161);
position: fixed;
top: 0;
left: 0;
z-index: 10;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 120px;
.wrapper{
display: flex;
flex-direction: row;
height: 70px;
margin-bottom: 20px;
width:100%;
}
.title{
display: flex;
justify-content: center;
align-items: center;
width: 90%;
width: 100%;
.h1{
font-family:Arial, Helvetica, sans-serif;
font-size: 60px;
......@@ -23,47 +34,25 @@
}
.None-title{
display: flex;
justify-content:start;
justify-content:right;
align-items: center;
width: 10%;
.ui button{
height: 40px;
}
}
}
.Main-body{
padding-top: 120px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 80%;
height: 100vh;
border: 3px solid black;
width: 100%;
.Board{
text-align: center;
display: flex;
justify-content: flex-start;
flex-direction: column;
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;
}
}
}
}
......