오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
정의왕
86226244 1 parent 7b09fe58

Design last UI

Inline Side-by-side
Showing 10 changed files with 47 additions and 99 deletions
...@@ -35,9 +35,5 @@ module.exports = class Post extends Sequelize.Model { ...@@ -35,9 +35,5 @@ module.exports = class Post extends Sequelize.Model {
35 35
36 static associate(db) { 36 static associate(db) {
37 db.Post.belongsTo(db.User,{foreignKey: 'userid', targetKey:'name' }); 37 db.Post.belongsTo(db.User,{foreignKey: 'userid', targetKey:'name' });
38 -<<<<<<< HEAD
39 - //db.Post.hasMany(db.Post,{foreignKey: 'postid', sourceKey:'id' });
40 -=======
41 ->>>>>>> a7a00ce3dcec95df5fd17594f215fe752568dfa5
42 } 38 }
43 }; 39 };
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -12,11 +12,7 @@ const {Comment}=require('../models'); ...@@ -12,11 +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 -<<<<<<< HEAD
16 - where:{postid: req.params.id},
17 -=======
18 where:{postid: req.body.id}, 15 where:{postid: req.body.id},
19 ->>>>>>> a7a00ce3dcec95df5fd17594f215fe752568dfa5
20 order: [['created_at', 'ASC']], 16 order: [['created_at', 'ASC']],
21 }) 17 })
22 .then((result)=>{ 18 .then((result)=>{
...@@ -40,11 +36,7 @@ router.post('/write',auth,(req,res)=>{ ...@@ -40,11 +36,7 @@ router.post('/write',auth,(req,res)=>{
40 try{ 36 try{
41 Comment.create({ 37 Comment.create({
42 userid : req.session.name, 38 userid : req.session.name,
43 -<<<<<<< HEAD
44 - postid : req.body.id,
45 -=======
46 postid : req.body.postid, 39 postid : req.body.postid,
47 ->>>>>>> a7a00ce3dcec95df5fd17594f215fe752568dfa5
48 comment : req.body.comment, 40 comment : req.body.comment,
49 }) 41 })
50 console.log("게시"); 42 console.log("게시");
......
...@@ -10,11 +10,7 @@ const {Post}=require('../models'); //게시물정보 db연결 ...@@ -10,11 +10,7 @@ const {Post}=require('../models'); //게시물정보 db연결
10 router.get('/',auth,(req,res)=>{ 10 router.get('/',auth,(req,res)=>{
11 Post.findAll({ 11 Post.findAll({
12 // where:{userid: req.session.name}, 12 // where:{userid: req.session.name},
13 -<<<<<<< HEAD
14 - // order: [['created_at', 'DESC']],
15 -=======
16 order: [['created_at', 'DESC']], 13 order: [['created_at', 'DESC']],
17 ->>>>>>> a7a00ce3dcec95df5fd17594f215fe752568dfa5
18 }) 14 })
19 .then((result)=>{ 15 .then((result)=>{
20 //console.log(result); 16 //console.log(result);
......
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 }
......