오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
정의왕
e296f01d 1 parent 275dea4d

Comment connect with DB

Inline Side-by-side
Showing 10 changed files with 123 additions and 20 deletions
...@@ -3,7 +3,6 @@ tunnel_BE/server/node_modules ...@@ -3,7 +3,6 @@ tunnel_BE/server/node_modules
3 # dependencies 3 # dependencies
4 /.pnp 4 /.pnp
5 .pnp.js 5 .pnp.js
6 ->>>>>>> board
7 6
8 ### VisualStudioCode ### 7 ### VisualStudioCode ###
9 .vscode/* 8 .vscode/*
......
...@@ -3,6 +3,7 @@ import React, { useState, useEffect} from 'react'; ...@@ -3,6 +3,7 @@ import React, { useState, useEffect} from 'react';
3 import '../style/Board.scss' 3 import '../style/Board.scss'
4 import ReactHtmlParser from 'react-html-parser'; 4 import ReactHtmlParser from 'react-html-parser';
5 import BoardModal from "../Modal/BoardModal"; 5 import BoardModal from "../Modal/BoardModal";
6 +import ContentModal from '../Modal/ContentModal';
6 7
7 function Board() { 8 function Board() {
8 const [viewContent,setViewContent] = useState([]); 9 const [viewContent,setViewContent] = useState([]);
...@@ -22,9 +23,8 @@ function Board() { ...@@ -22,9 +23,8 @@ function Board() {
22 {viewContent&&viewContent.map(element =>{ 23 {viewContent&&viewContent.map(element =>{
23 return <div className="ui segment"> 24 return <div className="ui segment">
24 <h2>{element.title}</h2> 25 <h2>{element.title}</h2>
25 - <div> 26 + <h4>{element.created_at.slice(0,10)+" " +element.created_at.slice(11,16)}</h4>
26 - {ReactHtmlParser(element.post)} 27 + <ContentModal element={element}/>
27 - </div>
28 </div>} 28 </div>}
29 )} 29 )}
30 </div> 30 </div>
......
1 +import React, {useState, useEffect} from 'react'
2 +import Axios from 'axios'
3 +import ReactHtmlParser from 'react-html-parser';
4 +import { Button, Modal, Comment, Form } from 'semantic-ui-react'
5 +import '../style/ContentModal.scss'
6 +
7 +function ContentModal({element}) {
8 + const [viewComment,setviewComment] = useState([]);
9 + useEffect(()=>{
10 + Axios.get('/api/comment/'+element.id).then((response)=>{
11 + setviewComment(response.data);
12 + })
13 + },[viewComment])
14 +
15 + const handleClose = (event) => {
16 + event.preventDefault();
17 + setOpen(false);
18 + }
19 + const [open, setOpen] = useState(false)
20 + const [BoardComment, setBoardComment] = useState({
21 + id: null,
22 + content:''
23 + })
24 + const onCommentHandler = (event) => {
25 + setBoardComment(event.currentTarget.value)
26 + console.log(BoardComment)
27 + }
28 + const onSubmitHandler = () => {
29 + Axios.post('/api/comment',{
30 + id: element.id,
31 + content: BoardComment
32 + })
33 + .then((res)=>{
34 + if(res.status === 200){
35 + alert("댓글 작성을 완료하였습니다.")
36 + }
37 + }).catch((error) => {
38 + console.log(error.response)
39 + alert("댓글 작성을 실패하였습니다.")
40 + })
41 + }
42 + return (
43 + <Modal
44 + onClose={() => setOpen(false)}
45 + onOpen={() => setOpen(true)}
46 + open={open}
47 + trigger={<Button basic color='purple' className="ui animated button" tabIndex="0">
48 + <div className="visible content">보기</div>
49 + </Button>}
50 + >
51 + <Modal.Header><h2>{element.title}</h2></Modal.Header>
52 + <Modal.Content>
53 + <Modal.Description>
54 + <div className="problems">
55 + {ReactHtmlParser(element.post)}
56 + </div>
57 + </Modal.Description>
58 + </Modal.Content>
59 + <Modal.Content>
60 + {viewComment&&viewComment.map(elem =>{
61 + return <div className="ui segment">
62 + <h2>{elem.title}</h2>
63 + <h4>{elem.created_at.slice(0,10)+" " +elem.created_at.slice(11,16)}</h4>
64 + </div>}
65 + )}
66 + </Modal.Content>
67 + <Modal.Actions>
68 + <Comment>
69 + <Form reply>
70 + <Form.TextArea onChange={onCommentHandler}/>
71 + <div onClick={handleClose}>
72 + <Button content='댓글 남기기' labelPosition='left' icon='edit' primary onSubmit={onSubmitHandler}/>
73 + <Button color='black'>닫기</Button>
74 + </div>
75 + </Form>
76 + </Comment>
77 + </Modal.Actions>
78 + </Modal>
79 + )
80 +}
81 +export default ContentModal
...\ No newline at end of file ...\ No newline at end of file
1 import React, {useState, useCallback} from "react"; 1 import React, {useState, useCallback} from "react";
2 import { useNavigate } from "react-router-dom"; 2 import { useNavigate } from "react-router-dom";
3 import "../style/RegisterPage.scss"; 3 import "../style/RegisterPage.scss";
4 -import { Button, Icon, Input } from "semantic-ui-react"; 4 +import { Button, Dropdown, Icon, Input} from "semantic-ui-react";
5 import Axios from 'axios' 5 import Axios from 'axios'
6 function RegisterPage(props) { 6 function RegisterPage(props) {
7 const navigate = useNavigate(); 7 const navigate = useNavigate();
...@@ -16,7 +16,7 @@ function RegisterPage(props) { ...@@ -16,7 +16,7 @@ function RegisterPage(props) {
16 setPassword(event.currentTarget.value); 16 setPassword(event.currentTarget.value);
17 }; 17 };
18 const onPersonalityHandler = (event) => { 18 const onPersonalityHandler = (event) => {
19 - setPersonality(event.currentTarget.value); 19 + setPersonality(event.currentTarget.value.toUpperCase());
20 }; 20 };
21 const onPasswordChkHandler = (event) => { 21 const onPasswordChkHandler = (event) => {
22 //비밀번호를 입력할때마다 password 를 검증하는 함수 22 //비밀번호를 입력할때마다 password 를 검증하는 함수
...@@ -30,6 +30,11 @@ function RegisterPage(props) { ...@@ -30,6 +30,11 @@ function RegisterPage(props) {
30 if (Password !== PasswordCheck) { 30 if (Password !== PasswordCheck) {
31 return alert('비밀번호가 일치하지 않습니다.') 31 return alert('비밀번호가 일치하지 않습니다.')
32 } 32 }
33 + else if((Personality[0] !== 'I' && Personality[0] !== 'E') || (Personality[1] !== 'S' && Personality[1] !== 'N')
34 + || (Personality[2] !== 'F' && Personality[2] !== 'T') || (Personality[3] !== 'J' && Personality[3] !== 'P'))
35 + {
36 + return alert('올바르지 않은 MBTI입니다.')
37 + }
33 else{ 38 else{
34 Axios.post('/api/register',{ 39 Axios.post('/api/register',{
35 Id, 40 Id,
...@@ -67,6 +72,7 @@ function RegisterPage(props) { ...@@ -67,6 +72,7 @@ function RegisterPage(props) {
67 icon={<Icon name='heart'/>} 72 icon={<Icon name='heart'/>}
68 iconPosition='left' 73 iconPosition='left'
69 placeholder="Your MBTI" 74 placeholder="Your MBTI"
75 + maxlength='4'
70 type="text" 76 type="text"
71 value={Personality} 77 value={Personality}
72 autoComplete="off" 78 autoComplete="off"
......
...@@ -21,6 +21,8 @@ ...@@ -21,6 +21,8 @@
21 display: flex; 21 display: flex;
22 flex-direction: column; 22 flex-direction: column;
23 align-items: center; 23 align-items: center;
24 - border-radius: 30px; 24 + .ui.segment{
25 - border: 2px solid #333; 25 + width: 40%;
26 +
27 + }
26 } 28 }
...\ No newline at end of file ...\ No newline at end of file
......
1 -.title-input{
2 - width: 500px;
3 - height: 40px;
4 - margin: 10px;
5 -}
6 -.write-button{
7 - height: 70px;
8 - display: flex;
9 - justify-content: center;
10 - align-items: center;
11 -}
...\ No newline at end of file ...\ No newline at end of file
1 +.header{
2 + text-align: center;
3 + display: flex;
4 +
5 +}
6 +.content{
7 + height: fit-content;
8 + text-align: center;
9 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,10 +2,14 @@ ...@@ -2,10 +2,14 @@
2 background-color: beige; 2 background-color: beige;
3 display: flex; 3 display: flex;
4 flex-direction: column; 4 flex-direction: column;
5 + justify-content: center;
6 + align-items: center;
5 .Main-header{ 7 .Main-header{
8 + text-align: center;
6 display: flex; 9 display: flex;
7 flex-direction: row; 10 flex-direction: row;
8 height: 70px; 11 height: 70px;
12 + width: 100%;
9 .title{ 13 .title{
10 display: flex; 14 display: flex;
11 justify-content: center; 15 justify-content: center;
...@@ -19,7 +23,7 @@ ...@@ -19,7 +23,7 @@
19 } 23 }
20 .None-title{ 24 .None-title{
21 display: flex; 25 display: flex;
22 - justify-content: center; 26 + justify-content:start;
23 align-items: center; 27 align-items: center;
24 width: 10%; 28 width: 10%;
25 .ui button{ 29 .ui button{
...@@ -30,6 +34,9 @@ ...@@ -30,6 +34,9 @@
30 .Main-body{ 34 .Main-body{
31 display: flex; 35 display: flex;
32 flex-direction: row; 36 flex-direction: row;
37 + justify-content: center;
38 + align-items: center;
39 + width: 80%;
33 height: 100vh; 40 height: 100vh;
34 border: 3px solid black; 41 border: 3px solid black;
35 .Board{ 42 .Board{
......
...@@ -43,6 +43,16 @@ ...@@ -43,6 +43,16 @@
43 color: white; 43 color: white;
44 outline: none; 44 outline: none;
45 } 45 }
46 + .dropdown{
47 + width: 75%;
48 + padding: 15px .8em .8em;
49 + background-color: transparent;
50 + border: 2px solid white;
51 + border-radius: 30px;
52 + font-size: 18px;
53 + color: white;
54 + outline: none;
55 + }
46 56
47 label { 57 label {
48 position: absolute; 58 position: absolute;
......