오인제 / 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 112 additions and 106 deletions
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
47 <li><a href="#prerequisites">Prerequisites</a></li> 47 <li><a href="#prerequisites">Prerequisites</a></li>
48 </ul> 48 </ul>
49 </li> 49 </li>
50 + <li><a href="#DB Schema">DB Schema</a></li>
50 <li><a href="#usage">Usage</a></li> 51 <li><a href="#usage">Usage</a></li>
51 <li><a href="#roadmap">Roadmap</a></li> 52 <li><a href="#roadmap">Roadmap</a></li>
52 <li><a href="#contributing">Contributing</a></li> 53 <li><a href="#contributing">Contributing</a></li>
...@@ -90,22 +91,24 @@ ...@@ -90,22 +91,24 @@
90 91
91 ### Installation 92 ### Installation
92 93
93 -1. Clone repository 94 +* 1. Clone repository
94 - ```sh
95 - git clone http://khuhub.khu.ac.kr/2019102198/Tunnel.git
96 - ```
97 -2. Install NPM packages
98 ```sh 95 ```sh
96 + git clone http://khuhub.khu.ac.kr/2019102198/Tunnel.git
97 + ```
98 +
99 +
100 +* 2. Install NPM packages
101 + ```sh
99 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel> cd tunnel_BE 102 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel> cd tunnel_BE
100 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE> cd server 103 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE> cd server
101 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE\server> npm install 104 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE\server> npm install
102 - ``` 105 + ```
103 - ```sh 106 + ```sh
104 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE\server> cd .. 107 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE\server> cd ..
105 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE> cd.. 108 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\tunnel_BE> cd..
106 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel> cd turnel_FE 109 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel> cd turnel_FE
107 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\turnel_FE> npm install 110 PS C:\Users\seano\Desktop\git_OSS\OSS project\Tunnel\turnel_FE> npm install
108 - ``` 111 + ```
109 112
110 <p align="right">(<a href="#top">back to top</a>)</p> 113 <p align="right">(<a href="#top">back to top</a>)</p>
111 114
...@@ -138,22 +141,61 @@ ...@@ -138,22 +141,61 @@
138 mysql> CREATE SCHEMA tunnel DEFAULT CHARACTER SET utf8; 141 mysql> CREATE SCHEMA tunnel DEFAULT CHARACTER SET utf8;
139 Query OK, 1 row affected, 1 warning (0.04 sec) 142 Query OK, 1 row affected, 1 warning (0.04 sec)
140 ``` 143 ```
141 -* 내용 144 +* AWS 서버 설정
142 - ```sh 145 +
143 - 내용 146 +## DB Schema
144 - ``` 147 +> * users 사용자: utf-8
148 +
149 +|Column|Type|Information|
150 +|---|---|---|
151 +|id|int|key, 자동생성|
152 +|name|string|User가 작성한 Id|
153 +|pw|string||
154 +|mbti|CHAR(4)|16가지중 1개만 저장|
155 +|update|Bool|업데이트 여부(새 고민도착, 새 댓글 도착 여부)|
156 +
157 +> * posts 게시글: utf-8
158 +
159 +|Column|Type|Information|
160 +|---|---|---|
161 +|id|int|key, 자동생성|
162 +|userid|string|foreign key (users.name) / 부모 삭제시 삭제|
163 +|post|text|게시글|
164 +|title|text|제목|
165 +|update|Bool|업데이트 여부(새 댓글 작성 여부)|
166 +|created_at|time|작성시간|
167 +
168 +> * comment 댓글: utf-8
169 +
170 +|Column|Type|Information|
171 +|---|---|---|
172 +|id|int|key, 자동생성|
173 +|postid|int||
174 +|userid|text|foreign key (users.id) / 부모 삭제시 삭제|
175 +|comment|text|댓글 정보|
176 +|created_at|time|작성시간|
145 177
146 <!-- USAGE EXAMPLES --> 178 <!-- USAGE EXAMPLES -->
147 ## Usage 179 ## Usage
148 > ### 용도 설명 180 > ### 용도 설명
149 181
150 > #### 1. Login Page 182 > #### 1. Login Page
183 +> - http://localhost:3000/login
184 +
151 <img src="images/login.png" alt="Logo" width="100%" height="100%"> 185 <img src="images/login.png" alt="Logo" width="100%" height="100%">
152 186
153 > #### 2. Register Page 187 > #### 2. Register Page
188 +> - http://localhost:3000/register
189 +
154 <img src="images/register.png" alt="Logo" width="100%" height="100%"> 190 <img src="images/register.png" alt="Logo" width="100%" height="100%">
155 191
156 > #### 3. User board Page 192 > #### 3. User board Page
193 +> - http://localhost:3000/main
194 +
195 +<img src="images/main.png" alt="Logo" width="100%" height="100%">
196 +<img src="images/main_comment.png" alt="Logo" width="100%" height="100%">
197 +<img src="images/main_comment2.png" alt="Logo" width="100%" height="100%">
198 +<img src="images/main_comment3.png" alt="Logo" width="100%" height="100%">
157 199
158 <p align="right">(<a href="#top">back to top</a>)</p> 200 <p align="right">(<a href="#top">back to top</a>)</p>
159 201
...@@ -161,11 +203,17 @@ ...@@ -161,11 +203,17 @@
161 <!-- ROADMAP --> 203 <!-- ROADMAP -->
162 ## Roadmap 204 ## Roadmap
163 205
206 +> - 회원가입 기능 구현 (Id, mbti, password, password 재확인 입력)
207 +> - 중복된 Id 유무 확인, 중복시 재입력 요구
208 +> - password, password 재확인 일치 여부 확인
209 +> - 모든 문제 없다면, 회원정보 DB에 저장, 로그인 화면 이동
164 > - 로그인 기능 구현 210 > - 로그인 기능 구현
165 -> - 회원가입 기능 구현 (Id, mbti, password 입력) 211 +> - Id/Password 받아서 회원정보 DB에 Id로 탐색 후 Password 일치 여부 확인
212 +> - 모든 문제 없다면, 게시판 화면 이동
166 > - 사용자 게시판 구현 213 > - 사용자 게시판 구현
167 -> - [x] mbti 사용한 매칭 기능 214 +> - 내 계정정보, mbti 표시
168 -> - [o] 내용 215 +> - 내 게시글 시간순으로 나열
216 +> - 게시글 밑에 댓글 수 표시
169 217
170 <p align="right">(<a href="#top">back to top</a>)</p> 218 <p align="right">(<a href="#top">back to top</a>)</p>
171 219
...@@ -199,8 +247,8 @@ Distributed under the [MIT License](License). ...@@ -199,8 +247,8 @@ Distributed under the [MIT License](License).
199 ## Contact 247 ## Contact
200 248
201 > - 오인제 (seanoh@khu.ac.kr) 249 > - 오인제 (seanoh@khu.ac.kr)
202 -> - 정의왕 (@khu.ac.kr) 250 +> - 정의왕 (wang323@khu.ac.kr)
203 -> - 고병후 (@khu.ac.kr) 251 +> - 고병후 (gobyeonghu@khu.ac.kr)
204 252
205 Project Link: [http://khuhub.khu.ac.kr/2019102198/Tunnel.git](http://khuhub.khu.ac.kr/2019102198/Tunnel.git) 253 Project Link: [http://khuhub.khu.ac.kr/2019102198/Tunnel.git](http://khuhub.khu.ac.kr/2019102198/Tunnel.git)
206 254
......
...@@ -12,9 +12,7 @@ const {Comment}=require('../models'); ...@@ -12,9 +12,7 @@ const {Comment}=require('../models');
12 router.post('/reply',auth,(req,res)=>{ 12 router.post('/reply',auth,(req,res)=>{
13 13
14 Comment.findAll({ 14 Comment.findAll({
15 -
16 where:{postid: req.body.id}, 15 where:{postid: req.body.id},
17 -
18 order: [['created_at', 'ASC']], 16 order: [['created_at', 'ASC']],
19 }) 17 })
20 .then((result)=>{ 18 .then((result)=>{
...@@ -39,7 +37,6 @@ router.post('/write',auth,(req,res)=>{ ...@@ -39,7 +37,6 @@ router.post('/write',auth,(req,res)=>{
39 Comment.create({ 37 Comment.create({
40 userid : req.session.name, 38 userid : req.session.name,
41 postid : req.body.postid, 39 postid : req.body.postid,
42 -
43 comment : req.body.comment, 40 comment : req.body.comment,
44 }) 41 })
45 console.log("게시"); 42 console.log("게시");
...@@ -60,7 +57,4 @@ router.post('/write',auth,(req,res)=>{ ...@@ -60,7 +57,4 @@ router.post('/write',auth,(req,res)=>{
60 57
61 58
62 59
63 -
64 -
65 -
66 module.exports = router; 60 module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
1 import Axios from 'axios'; 1 import Axios from 'axios';
2 import React, { useState, useEffect} from 'react'; 2 import React, { useState, useEffect} from 'react';
3 import '../style/Board.scss' 3 import '../style/Board.scss'
4 -
5 -import BoardModal from "../Modal/BoardModal";
6 import ContentModal from '../Modal/ContentModal'; 4 import ContentModal from '../Modal/ContentModal';
7 5
8 function Board() { 6 function Board() {
...@@ -16,9 +14,6 @@ function Board() { ...@@ -16,9 +14,6 @@ function Board() {
16 },[viewContent]) 14 },[viewContent])
17 return ( 15 return (
18 <div className="Board"> 16 <div className="Board">
19 - <div className="write-button">
20 - <BoardModal/>
21 - </div>
22 <div className="contents"> 17 <div className="contents">
23 {viewContent&&viewContent.map(element =>{ 18 {viewContent&&viewContent.map(element =>{
24 return <div className="ui segment"> 19 return <div className="ui segment">
......
...@@ -4,6 +4,7 @@ import "../style/MainPage.scss"; ...@@ -4,6 +4,7 @@ import "../style/MainPage.scss";
4 import { useNavigate } from "react-router-dom"; 4 import { useNavigate } from "react-router-dom";
5 import Board from "../Board/Board" 5 import Board from "../Board/Board"
6 import React from "react"; 6 import React from "react";
7 +import BoardModal from "../Modal/BoardModal";
7 8
8 function MainPage(props) { 9 function MainPage(props) {
9 const navigate = useNavigate(); 10 const navigate = useNavigate();
...@@ -19,44 +20,22 @@ function MainPage(props) { ...@@ -19,44 +20,22 @@ function MainPage(props) {
19 return ( 20 return (
20 <div id="Main"> 21 <div id="Main">
21 <div className="Main-header"> 22 <div className="Main-header">
22 - <div className="title"> 23 + <div className="wrapper">
23 - <h1>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1> 24 + <div className="title">
25 + <h1 style={{color: 'white'}}>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
26 + </div>
27 + <div className="None-title">
28 + <Button className="ui right floated button" onClick={()=>onLogout()}>
29 + Logout
30 + </Button>
31 + </div>
24 </div> 32 </div>
25 - <div className="None-title"> 33 + <div className="write-btn">
26 - <Button className="ui right floated button" onClick={()=>onLogout()}> 34 + <BoardModal/>
27 - Logout
28 - </Button>
29 </div> 35 </div>
30 </div> 36 </div>
31 <div className="Main-body"> 37 <div className="Main-body">
32 <Board/> 38 <Board/>
33 - {/* <div className="user-container">
34 - <div className="userInfo">
35 - <h1>User ID</h1>
36 - </div>
37 - <div className="checkIssue-button">
38 - <Button className="ui animated button"
39 - tabIndex="0">
40 - <div className="visible content">도착한 글</div>
41 - <div className="hidden content">
42 - <i className="paper plane icon"></i>
43 - </div>
44 - </Button>
45 - </div>
46 - <div className="user">
47 - <div className="Answer">
48 - <div className="ui segment">
49 - <p>a</p>
50 - </div>
51 - <div className="ui segment">
52 - <p>a</p>
53 - </div>
54 - <div className="ui segment">
55 - <p>a</p>
56 - </div>
57 - </div>
58 - </div>
59 - </div> */}
60 </div> 39 </div>
61 </div> 40 </div>
62 ); 41 );
......
...@@ -51,12 +51,9 @@ function BoardModal() { ...@@ -51,12 +51,9 @@ function BoardModal() {
51 onClose={() => setOpen(false)} 51 onClose={() => setOpen(false)}
52 onOpen={() => setOpen(true)} 52 onOpen={() => setOpen(true)}
53 open={open} 53 open={open}
54 - trigger={<Button className="ui animated button" tabIndex="0"> 54 + trigger={<Button className="ui right floated button" tabIndex="0" >
55 - <div className="visible content">게시글 작성하기</div> 55 + 게시글 작성하기
56 - <div className="hidden content"> 56 + </Button>}
57 - <i className="pencil alternate icon"></i>
58 - </div>
59 - </Button>}
60 > 57 >
61 <Modal.Header>고민이 있나요?</Modal.Header> 58 <Modal.Header>고민이 있나요?</Modal.Header>
62 <Modal.Content > 59 <Modal.Content >
......
...@@ -42,8 +42,8 @@ function ContentModal({element}) { ...@@ -42,8 +42,8 @@ function ContentModal({element}) {
42 onClose={() => setOpen(false)} 42 onClose={() => setOpen(false)}
43 onOpen={() => setOpen(true)} 43 onOpen={() => setOpen(true)}
44 open={open} 44 open={open}
45 - trigger={<Button basic color='purple' className="ui animated button" tabIndex="0"> 45 + trigger={<Button basic color='purple' className="ui floated button" tabIndex="0">
46 - <div className="visible content">보기</div> 46 + 보기
47 </Button>} 47 </Button>}
48 > 48 >
49 <Modal.Header><h2>{element.title}</h2></Modal.Header> 49 <Modal.Header><h2>{element.title}</h2></Modal.Header>
...@@ -57,7 +57,7 @@ function ContentModal({element}) { ...@@ -57,7 +57,7 @@ function ContentModal({element}) {
57 <Modal.Content> 57 <Modal.Content>
58 {viewComment&&viewComment.map(elem =>{ 58 {viewComment&&viewComment.map(elem =>{
59 return <div className="ui segment"> 59 return <div className="ui segment">
60 - <h2>{elem.userid}</h2> 60 + <h4>{elem.userid}</h4>
61 <h4>{elem.comment}</h4> 61 <h4>{elem.comment}</h4>
62 </div>} 62 </div>}
63 )} 63 )}
......
...@@ -11,18 +11,22 @@ ...@@ -11,18 +11,22 @@
11 margin: 10px; 11 margin: 10px;
12 } 12 }
13 .write-button{ 13 .write-button{
14 + margin-bottom: 30px;
14 height: 70px; 15 height: 70px;
15 display: flex; 16 display: flex;
16 justify-content: center; 17 justify-content: center;
17 align-items: center; 18 align-items: center;
18 } 19 }
19 .contents{ 20 .contents{
21 + background-color: rgb(36, 83, 121);
20 width: 100%; 22 width: 100%;
21 display: flex; 23 display: flex;
22 flex-direction: column; 24 flex-direction: column;
23 align-items: center; 25 align-items: center;
24 .ui.segment{ 26 .ui.segment{
25 - width: 40%; 27 + padding: 20px;
28 + width: 67%;
29 + text-align: center;
26 30
27 } 31 }
28 } 32 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,5 +5,5 @@ ...@@ -5,5 +5,5 @@
5 } 5 }
6 .content{ 6 .content{
7 height: fit-content; 7 height: fit-content;
8 - text-align: center; 8 + text-align: left;
9 } 9 }
...\ No newline at end of file ...\ No newline at end of file
......
1 #Main{ 1 #Main{
2 - background-color: beige;
3 display: flex; 2 display: flex;
4 - flex-direction: column;
5 justify-content: center; 3 justify-content: center;
6 align-items: center; 4 align-items: center;
7 .Main-header{ 5 .Main-header{
6 + background-color: rgb(77, 62, 161);
7 + position: fixed;
8 + top: 0;
9 + left: 0;
10 + z-index: 10;
8 text-align: center; 11 text-align: center;
9 display: flex; 12 display: flex;
10 - flex-direction: row; 13 + flex-direction: column;
11 - height: 70px; 14 + justify-content: center;
12 - 15 + align-items: center;
16 + width: 100%;
17 + height: 120px;
18 + .wrapper{
19 + display: flex;
20 + flex-direction: row;
21 + margin-bottom: 20px;
22 + width:100%;
23 + }
13 .title{ 24 .title{
14 display: flex; 25 display: flex;
15 justify-content: center; 26 justify-content: center;
16 align-items: center; 27 align-items: center;
17 - width: 90%; 28 + width: 100%;
18 .h1{ 29 .h1{
19 font-family:Arial, Helvetica, sans-serif; 30 font-family:Arial, Helvetica, sans-serif;
20 font-size: 60px; 31 font-size: 60px;
...@@ -23,47 +34,25 @@ ...@@ -23,47 +34,25 @@
23 } 34 }
24 .None-title{ 35 .None-title{
25 display: flex; 36 display: flex;
26 - justify-content:start; 37 + justify-content:right;
27 align-items: center; 38 align-items: center;
28 width: 10%; 39 width: 10%;
29 .ui button{ 40 .ui button{
30 height: 40px; 41 height: 40px;
31 } 42 }
32 } 43 }
44 +
33 } 45 }
34 .Main-body{ 46 .Main-body{
47 + padding-top: 120px;
35 display: flex; 48 display: flex;
36 flex-direction: row; 49 flex-direction: row;
37 justify-content: center; 50 justify-content: center;
38 align-items: center; 51 align-items: center;
39 - width: 80%; 52 + width: 100%;
40 - height: 100vh;
41 - border: 3px solid black;
42 .Board{ 53 .Board{
43 - text-align: center;
44 - display: flex;
45 - justify-content: flex-start;
46 - flex-direction: column;
47 width: 100%; 54 width: 100%;
48 - height: 100%; 55 +
49 } 56 }
50 - .user-container{ 57 + }
51 - display: flex;
52 - flex-direction: column;
53 - width: 25%;
54 - border: 2px solid black;
55 - padding: 10px 0 30px 0;
56 - .userInfo{
57 - display: flex;
58 - justify-content: center;
59 - align-items: center;
60 - }
61 - .checkIssue-button{
62 - height: 70px;
63 - display: flex;
64 - justify-content: center;
65 - align-items: center;
66 - }
67 - }
68 - }
69 } 58 }
......