Skip to content

GitLab

Commit 09af2954 authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

Merge remote-tracking branch 'origin/young' into soo-12-28

parents b7b9b6c2 c4848cf1
Hide whitespace changes
Inline Side-by-side
client/.gitignore
View file @ 09af2954
......@@ -25,4 +25,4 @@ yarn-error.log*
package-lock.json
.eslintcache
debug.log
.env
\ No newline at end of file
.env
client/package.json
View file @ 09af2954
......@@ -37,5 +37,6 @@
"last 1 firefox version",
"last 1 safari version"
]
}
},
"proxy": "http://localhost:3030"
}
client/src/Components/Chat.js 0 → 100644
View file @ 09af2954
import React from 'react';
import { Form, Button } from 'react-bootstrap';
function Chat(props) {
return (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
<Form>
<Form.Group>
<Form.Control type="text" />
</Form.Group>
<Button variant="primary" type="submit">
전송
</Button>
</Form>
</div>
);
}
export default Chat;
client/src/Components/ClosedList.js 0 → 100644
View file @ 09af2954
import React, { useState } from 'react'
import { ListGroup } from 'react-bootstrap';
function ClosedList() {
const [list, setList] = useState([
{ room: '테스트 방1', memnum: 5, admin: '가영' },
{ room: '테스트 방2', memnum: 4, admin: '수현' }]
);
return (
<div>
{list.map((list, index) =>
<ListGroup key={index}>
<ListGroup.Item action>
<h2>{list.room}</h2>
</ListGroup.Item>
</ListGroup>
)}
</div>
)
}
export default ClosedList
client/src/Components/Menu.js 0 → 100644
View file @ 09af2954
import React from 'react'
import { Navbar, Nav, Button } from 'react-bootstrap';
function Menu() {
const userName = "정연우";
return (
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
<div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div>
<Nav className="mr-auto">
<Nav.Link href="/home">Home</Nav.Link>
<Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link>
</Nav>
<Button variant="light" className="ml-3">Logout</Button>
</Navbar>
)
}
export default Menu
client/src/Components/OpenList.js 0 → 100644
View file @ 09af2954
import React, { useState } from 'react'
import { ListGroup } from 'react-bootstrap';
function OpenList() {
const [list, setList] = useState([
{ room: '테스트 방3', memnum: 7, admin: '가영2' },
{ room: '테스트 방4', memnum: 2, admin: '수현2' }]
);
return (
<div>
{list.map((list, index) =>
<ListGroup key={index}>
<ListGroup.Item action>
<h2>{list.room}</h2>
</ListGroup.Item>
</ListGroup>
)}
</div>
)
}
export default OpenList
client/src/Hello.js
View file @ 09af2954
import { Button, Navbar, Nav, Form, FormControl } from 'react-bootstrap';
import React from 'react'
const userName = "정연우";
function Hello(props) {
console.log(props)
return (
<>
<h1>Hello</h1>
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand>
<div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div>
<Nav className="mr-auto">
<Nav.Link href="/homepage">Home</Nav.Link>
<Nav.Link href="/profilepage">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link>
</Nav>
{/* <Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-info">Search</Button>
</Form> */}
<Button variant="light" className="ml-3">Logout</Button>
</Navbar>
<h1>hello</h1>
<div>
안녕하세요. {props.name}님
안녕하세요.{props.name}
</div>
<input/>
<input className="input" />
</>
)
}
export default Hello
// import React from 'react'
// function Hello(props) {
}
// }
\ No newline at end of file
export default Hello;
client/src/Pages/HomePage.js
View file @ 09af2954
import React, { useState } from 'react';
import { ListGroup, Col, Row, Modal, Button, Form, Alert } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import randCode from '../randCode'
// import randomN from './RandomN';
import { Row, Col, Modal, Button } from 'react-bootstrap';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList';
import Chat from '../Components/Chat';
import Menu from '../Components/Menu';
// import styled from 'styled-components';
function Home() {
const [list, setList] = useState([
{ room: '테스트 방1', memnum: 5, admin: '가영' },
{ room: '테스트 방2', memnum: 4, admin: '수현' }]
);
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [show2, setShow2] = useState(false);
const handleClose2 = () => setShow2(false);
const handleShow2 = () => setShow2(true);
const [checkedI, setCheckedI] = useState(false);
const codeClose = () => setCheckedI(false);
const codeShow = () => setCheckedI(true);
// const List = styled.div`
// background: #FFFAFA;
// `
const [showCode, setCode] = useState(false);
const handleCloseCode = () => setCode(false);
const handleShowCode = () => setCode(true);
return (
<div className="container">
<div className="list">
<Col md={6}>
{list.map(list =>
<ListGroup>
<ListGroup.Item action>
<h2>{list.room}</h2>
<p></p>
</ListGroup.Item>
</ListGroup>
)}
</Col>
</div>
<div className="right">
<button variant="primary" onClick={handleShow}>
생성
</button>
<button variant="primary" onClick={handleShow2}>
참가
</button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>방 생성</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit = {handleShowCode}>
<Form.Group as={Row} controlId="formChatTitle">
<Form.Label column sm={4}>방 이름</Form.Label>
<Col>
<Form.Control type="text" />
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formInterest">
<Form.Label column sm={4}>관심 분야</Form.Label>
<Col>
<Form.Control as="select" defaultValue="Choose...">
<option>Choose...</option>
<option>과학</option>
<option>수학</option>
<option>예술</option>
<option>언어</option>
<option>취미</option>
</Form.Control>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formBasicCheckbox">
<Form.Label column sm={4}>공개방</Form.Label>
<Col>
<Form.Check
type="checkbox"
checked={checkedI}
onChange={() => setCheckedI(!checkedI)} />
</Col>
</Form.Group>
{
(checkedI)
? (<p><b>공개방</b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</p>)
: (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
}
<Form.Group as={Row}>
<Col sm={{ span: 5, offset: 4 }}>
<Button type="submit" >방 생성</Button>
</Col>
</Form.Group>
</Form>
</Modal.Body>
</Modal>
{(showCode)? (alert('참여코드'), setCode(false)):null}
<Modal show={show2} onHide={handleClose2}>
<Modal.Header closeButton>
<Modal.Title>참여 코드로 채팅 참가</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={() => { console.log('제출') }}>
<Form.Group as={Row} controlId="formCodeE">
<Form.Label column sm={4}>참여 코드</Form.Label>
<Col>
<Form.Control type="text" />
</Col>
</Form.Group>
<Form.Group as={Row}>
<Col sm={{ span: 5, offset: 4 }}>
<Button type="submit">참가</Button>
</Col>
</Form.Group>
</Form>
</Modal.Body>
</Modal>
</div>
</div >
);
function Home() {
const [show, setShow] = useState(false);
const [chat, setChat] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const handleChato = () => setChat(true);
const handleChatc = () => setChat(false);
// variant="pills"
return (
<>
<Menu />
<Row className="mr-0">
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<ClosedList />
</Tab>
<Tab eventKey="open" title="공개방" >
<OpenList />
</Tab>
</Tabs>
</Col>
<Col style={{ padding: "0" }}>
{chat ? <Chat handleChatc={handleChatc} /> : null}
<Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} >
생성
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>방 생성</Modal.Title>
</Modal.Header>
<Modal.Body>여기에 form 입력</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={handleClose}>
생성
</Button>
</Modal.Footer>
</Modal>
</Col>
</Row>
</>
);
}
export default Home;
\ No newline at end of file
export default Home;
client/src/Pages/LogInPage.js 0 → 100644
View file @ 09af2954
import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Menu from '../Components/Menu';
function LogIn() {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<>
<Menu />
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
<h2 className="text-center ">로그인</h2>
<Form.Group controlId="formGroupEmail">
<Form.Label>이메일</Form.Label>
<Form.Control
required
type="text"
placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formGroupPassword">
<Form.Label>비밀번호</Form.Label>
<Form.Control
required
type="text"
placeholder="비밀번호를 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 비밀번호를 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Link to="./homepage">
<Button type="submit" variant="outline-success" size="lg" className="mr-4" block>로그인</Button>
</Link>
<Link to="./signuppage">
<h6 type="button" className="text-right mt-2" style={{ cursor: 'pointer' }}>회원가입</h6>
</Link>
</div>
</Container>
</Form>
</>
);
}
//render(<LogIn />);
export default LogIn
\ No newline at end of file
client/src/Pages/ProfilePage.js 0 → 100644
View file @ 09af2954
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Menu from '../Components/Menu';
import { Image, Button, Container, Form, FormControl, Navbar, Nav } from 'react-bootstrap';
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
import userdefault from './KakaoTalk_20201230_153151693.png'
const userName = "정연우";
const userEmail = "dusdn8455@korea.ac.kr";
let userNickname = "가나다라마바사";
function editNickname1() { //수정버튼 누르면 재입력하게 함
const html = (
<Form>
<div className="d-flex justify-content-center">
별명 : <Form.Control className="" id="editBlock" style={{ width: "40%" }} size="sm" type="id" defaultValue={userNickname} />
<Button className="ml-3" variant="outline-primary" size="sm" onClick={editNickname2}>수정</Button>
</div>
{/*
<div>
<Image src={pic} width="300px" roundedCircle />
</div> */}
</Form>
)
ReactDOM.render(html, document.getElementById("nickname"))
}
function editNickname2() { //수정버튼 누르면 다시 원래대로 돌아가게 함
changeNickname()
const html = (
<div>
별명 : {userNickname}
<Button className="ml-3" variant="outline-primary" size="sm" onClick={editNickname1}>수정</Button>
</div>
)
ReactDOM.render(html, document.getElementById("nickname"))
}
function changeNickname() { //수정버튼 누르면 닉네임 변경해줌
let editedNickname = document.getElementById("editBlock")
userNickname = editedNickname.value
}
function ProfilePage() {
const [tohome, setTohome] = useState(false)
const [defaultImg, setDefaultImg] = useState(true)
function goHome() {
return (setTohome(true))
}
function setThumbnail(event) { //불러온 사진 <div id='image_container'>에 띄우기
let reader = new FileReader();
reader.onload = function (event) {
let img = document.createElement("img");
img.setAttribute("src", event.target.result);
img.setAttribute("id", "profileImg")
img.setAttribute("style",'height:300px; width:300px')
img.setAttribute("class","mb-3")
// img.setAttribute("class","d-flex justify-content-center mb-3")
document.querySelector("div#image_container").appendChild(img);
};
reader.readAsDataURL(event.target.files[0]);
if (defaultImg) { //첫 이미지 업로드(default이미지 지우고 유저가 올린걸로 업로드)
let del = document.getElementById("defaultImg")
del.remove()
setDefaultImg(false)
}
else { //기존에 올렸던 사진 지우고 재선택한 사진 업로드
let del2= document.getElementById('profileImg')
del2.remove()
reader.onload = function (event) {
let img = document.createElement("img");
img.setAttribute("src", event.target.result);
img.setAttribute("id", "profileImg")
img.setAttribute("style",'height:300px; width:300px')
document.querySelector("div#image_container").appendChild(img);
};
}
}
return (
<div>
<Menu />
{tohome ? <Redirect to='/homepage' /> : ''}
<Container className="d-flex justify-content-center">
<div className="mt-5 shadow w-75">
<h1 className="text-center mt-4 ml-5 mr-5 mb-3">Profile Page</h1>
<h4 className="text-center mb-5">{userName}님 환영합니다 !</h4>
<div className="d-flex justify-content-center mb-3" id="defaultImg">
<Image src={userdefault} width="300px" roundedCircle />
</div>
<div className="d-flex justify-content-center">
<Form className="d-flex justify-content-center">
<Form.Group>
<div id="image_container"></div>
<Form.File label="프로필 사진 변경" accept="image/*" onChange={setThumbnail} />
</Form.Group>
</Form>
</div>
<div className="text-center">
<div className="m-3">이름 : {userName}</div>
<div className="m-3" id="nickname">별명 : {userNickname}
<Button className="ml-3" variant="outline-primary" size="sm" onClick={editNickname1}>수정</Button>
</div>
<div className="m-3">이메일 : {userEmail}</div>
</div>
<div className="text-center m-5">
<span>
<Button variant="outline-success" size="sm" className="mr-4">저장</Button>
<Button variant="outline-success" size="sm" className="ml-4" onClick={goHome}>홈 화면으로</Button>
</span>
</div>
</div>
</Container>
</div>
)
}
export default ProfilePage
client/src/Pages/SignUpPage.js 0 → 100644
View file @ 09af2954
import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Menu from '../Components/Menu';
function SingUp() {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<>
<Menu />
<div>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
<h2 className="text-center ">회원가입</h2>
<Form.Group controlId="formGroupUsername">
<Form.Label>이름</Form.Label>
<Form.Control
required
type="text"
placeholder="이름을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이름을 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formGroupNickname">
<Form.Label>별명</Form.Label>
<Form.Control
required
type="text"
placeholder="별명을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 별명을 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formGroupEmail">
<Form.Label>이메일</Form.Label>
<Form.Control
required
type="text"
placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formGroupPassword">
<Form.Label>비밀번호</Form.Label>
<Form.Control
required
type="text"
placeholder="비밀번호를 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 비밀번호를 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Link to="./">
<Button type="submit" variant="outline-success" size="lg" className="mr-4" block>가입</Button>
</Link>
</div>
</Container>
</Form>
</div >
</>
)
}
export default SingUp
\ No newline at end of file
client/src/Pages/user_default.png 0 → 100644
View file @ 09af2954
client/src/Pages/user_default.png
\ No newline at end of file
client/src/Pages/user_default.svg 0 → 100644
View file @ 09af2954
client/src/Pages/user_default.svg
\ No newline at end of file
client/src/index.js
View file @ 09af2954
......@@ -2,15 +2,29 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
// import Hello from './Hello'
import Home from './Pages/HomePage'
import SignUpPage from './Pages/SignUpPage';
import ProfilePage from './Pages/ProfilePage';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import LogInPage from './Pages/LogInPage';
// import LoginForm from './Pages/LoginForm';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import Hello from './Hello'
import HomePage from './Pages/HomePage'
ReactDOM.render(
<React.StrictMode>
<Home />
</React.StrictMode>,
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/login" component={LogInPage} />
<Route path="/signup" component={SignUpPage} />
<Route path="/profile" component={ProfilePage} />
<Route path="/hello" component={Hello} />
<Route path="/home" component={HomePage} />
<Redirect path='/hello' to='/hello' />
</Switch>
</Router>,
document.getElementById('root')
);
......
server/config.js
View file @ 09af2954
const config = {
env: process.env.NODE_ENV || 'development',
port: process.env.PORT || 3001,
port: process.env.PORT || 3030,
jwtSecret: process.env.JWT_SECRET || 'My_Secret_Key',
mongoDbUri : process.env.MONGODB_URI || 'mongodb://localhost/react_test'
mongoDbUri: process.env.MONGODB_URI || 'mongodb://localhost/messenger'
}
export default config
\ No newline at end of file
server/controllers/user.controller.js 0 → 100644
View file @ 09af2954
import User from "../models/User.js"
import isLength from 'validator/lib/isLength.js'
import isEmail from 'validator/lib/isEmail.js'
//꼭 js붙여주기!!
//isEmail
//sign validation해야됨
const signup = async (req, res) => {
const { name, nickname, email, password } = req.body
//req.body를 구조분해하여 각각 보이게함 -> 모든정보들이 한줄에 보임
console.log(name, nickname, email, password)
try {
if (!isLength(name, { min: 3, max: 10 })) {
//이범위를 벗어나면 error발생
return res.status(422).send('Name must be 3-10 characters')
//422 : 형식이 잘못되었다는 error발생
} else if (!isLength(nickname, { min: 3, max: 10 })) {
return res.status(422).send('Nickname must be 3-10 characters')
} else if (!isEmail(email, {
allow_display_name: true,
require_display_name: true,
allow_utf8_local_part: false,
})) {
return res.status(422).send('Email does not fit the format')
} else if (!isLength(password, { min: 6, max: 25 })) {
return res.status(422).send('Nickname must be 6-25 characters')
}
const newUser = await new User({
name,
nickname,
email,
password,
//required를 하였기 때문에 이중 하나라도 없으면 에러 발생
}).save()
//save시 user schema형식에 맞는지 확인후 틀리면 error발생 맞으면 mongooDb로 들어감
//save(promise)붙일 시 fuction 앞에 await 붙여주기 + async 함수 앞에 붙여주기
console.log(newUser)
res.json(newUser)
} catch (error) {
//알수없는 모든 에러발생시 처리
console.log(error)
res.status(500).send('User signup error')
}
//newUSer (객체)를 json형식으로 바꿔서 객체열로 보냄
//res : 응답하는 객체
//응답안할 시 browser에서 빙빙돌다 에러 발생 -> 꼭 붙여줘야됨!
//res는 한번만 실행. 두번하면 에러 발생
}
const hello = (req, res) => {
res.send('Hello from users controller')
}
export default { signup, hello }
// {} : 객체로 return함
\ No newline at end of file
server/models/User.js
View file @ 09af2954
//주고받는 형식을 정의함.
import mongoose from 'mongoose'
const {String} = mongoose.Schema.Types
//원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
//object의 id를 쓸때에도 추가시켜줘야됨.
//형식을 정의함.
const UserSchema = new mongoose.Schema({
name: {
type: String,
required: true,
},
nickname: {
type: String,
required: true,
},
email: {
type: String,
required: true,
select: false
unique: true,
//unique: 같은 email을 두번넣으면 error발생함
},
role: {
password: {
type: String,
required: true,
default: 'user',
enum: ['user', 'admin', 'root']
}
}, {
select: false,
//정보를 찾을때 찾지 않게함
//플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨)
},
// role: {
// type: String,
// required: true,
// default: 'user',
// enum: ['user', 'admin', 'root'],
// //열거, 배열 : role이라는 것이 'user', 'admin', 'root'중 하나를 쓰임
// //사용자에 역할을 줄 때 사용함.
//}
},{
//옵셥을 정의함.
timestamps: true
//기본이 false로 되어있음
//user가 추가될때마다 createdAt(만들어진 시간 저장)과 updatedAt(수정될때 시간이 변경되어 저장)가 추가되어 시간을 저장함.
})
export default mongoose.models.User || mongoose.model('User', UserSchema)
\ No newline at end of file
export default mongoose.models.User || mongoose.model('User', UserSchema)
//user라는 이름이 있으면 앞을 return하고 없으면 뒤를 실행함
server/routes/user.routes.js 0 → 100644
View file @ 09af2954
import express from 'express'
import userCtrl from '../controllers/user.controller.js'
const router = express.Router()
//router의 역할 : './주소'부분을 처리하는 역할함.
router.route('/api/users/signup')
.post(userCtrl.signup)
.get(userCtrl.hello)
// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
//post를 띄우고 싶으면 앱에서 ARC실행해서 post를 실행하게 만들면됨.
//객체에 접근할때는 .을 찍고 접근함/ ex) .hello
//express middleware : (req, res) => {}
//node(req(client의 정보), res)를 넘겨줌.
export default router
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment