Skip to content

GitLab

Commit f0e5bcdb authored by 우지원's avatar 우지원
Browse files

Merge remote-tracking branch 'origin/young' into jiweon827

parents e3e80e27 36320a85
Hide whitespace changes
Inline Side-by-side
client/.gitignore
View file @ f0e5bcdb
...@@ -22,7 +22,7 @@ npm-debug.log* ...@@ -22,7 +22,7 @@ npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
package-lock.json .env
.eslintcache .eslintcache
.package-lock.json
debug.log debug.log
.env
client/src/App.js
View file @ f0e5bcdb
...@@ -3,6 +3,7 @@ import './App.css'; ...@@ -3,6 +3,7 @@ import './App.css';
import Hello from './Hello'; import Hello from './Hello';
function App() { function App() {
console.log()
return ( return (
<Hello name='대기'/> <Hello name='대기'/>
); );
......
client/src/Components/Chat.js
View file @ f0e5bcdb
import React from 'react'; import React, { useEffect, useState } from 'react';
import { Form, Button } from 'react-bootstrap'; import { Form, Button, Row } from 'react-bootstrap';
import axios from "axios";
function Chat(props) { function Chat(props) {
const [username, setUsername] = useState('')
function handleChange(e) {
e.preventDefault()
props.setInner(e.target.value)
console.log(e.target.value)
}
function sendMsgCH(e) {
props.sendMsg(e)
}
async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
const userid = localStorage.getItem('user')
const response = await axios.post(`/users/${userid}`, { 'email': userid })
setUsername(response.data.username)
}
useEffect(() => {
getLoginedUser()
console.log('Chat에서 useEffect', username)
})
return ( return (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}> <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button> <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
<h2>현재 {props.roomName} 입니다.</h2>
{ props.chatmsg.map((value, index) => (
<Row key={index} className='ml-3'>
{props.roomName}에서 {username}님이 보낸 메세지 : {value}
</Row>
))}
<Form onSubmit={sendMsgCH}>
<Form.Control name='msg' type='text' onChange={handleChange} />
<Button variant="primary" type="submit">전송</Button>
</Form>
<Form> <Form>
<Form.Group> <Form.Group>
<Form.Control type="text" /> <Form.Control type="text" />
......
client/src/Components/ClosedList.js
View file @ f0e5bcdb
import React, { useState } from 'react' import React, { useState } from 'react'
import { ListGroup } from 'react-bootstrap'; import { ListGroup, Row, Col } from 'react-bootstrap';
function ClosedList() { function ClosedList(props) {
const [list, setList] = useState([ const [list, setList] = useState([
{ room: '테스트 방1', memnum: 5, admin: '가영' }, { room: '테스트 방1', memnum: 5, admin: '가영' },
{ room: '테스트 방2', memnum: 4, admin: '수현' }] { room: '테스트 방2', memnum: 4, admin: '수현' }]
); );
function enterChatroomCH(e) {
const roomName = e.target.name
props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
props.setRoomName(roomName)
props.clearChat()
}
return ( return (
<div> <div>
{list.map((list, index) => <Row>
<ListGroup key={index}> {list.map((list, index) =>
<ListGroup.Item action> <ListGroup key={index}>
<h2>{list.room}</h2> <ListGroup.Item action onClick={enterChatroomCH} name={list.room}>
</ListGroup.Item> {list.room}
</ListGroup> </ListGroup.Item>
)} </ListGroup>
)}
</Row>
<Col>
</Col>
</div> </div>
) )
} }
......
client/src/Hello.js
View file @ f0e5bcdb
...@@ -12,8 +12,8 @@ function Hello(props) { ...@@ -12,8 +12,8 @@ function Hello(props) {
<Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand> <Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand>
<div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div> <div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div>
<Nav className="mr-auto"> <Nav className="mr-auto">
<Nav.Link href="/homepage">Home</Nav.Link> <Nav.Link href="/home">Home</Nav.Link>
<Nav.Link href="/profilepage">Profile</Nav.Link> <Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link> <Nav.Link href="/hello">Hello</Nav.Link>
</Nav> </Nav>
{/* <Form inline> {/* <Form inline>
......
client/src/Pages/HomePage.js
View file @ f0e5bcdb
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import { Row, Col, Modal, Button, Navbar, Nav } from 'react-bootstrap';
import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
import Tabs from 'react-bootstrap/Tabs'; import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab'; import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList'; import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList'; import OpenList from '../Components/OpenList';
import Chat from '../Components/Chat'; import Chat from '../Components/Chat';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import catchErrors from '../utils/catchErrors';
// import styled from 'styled-components'; // import styled from 'styled-components';
import { io } from "socket.io-client"; //모듈 가져오기
// const List = styled.div` // const List = styled.div`
// background: #FFFAFA; // background: #FFFAFA;
// ` // `
const userName = "정연우";
const socket = io();
const INIT_CHATR = {
name: '',
interest: '',
isOpen: false
}
function Home() { function Home() {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [show2, setShow2] = useState(false); const [chat, setChat] = useState(false);
const [chat, setChat] = useState(false);
// const [checkedI, setCheckedI] = useState(false); const handleClose = () => setShow(false);
const [chatR, setChatR] = useState(INIT_CHATR); const handleShow = () => setShow(true);
const [disabled, setDisabled] = useState(true); const handleChato = () => setChat(true);
const [error, setError] = useState(''); const handleChatc = () => setChat(false);
// variant="pills"
const handleClose = () => setShow(false);
const handleShow = () => setShow(true); const [inner, setInner] = useState([''])
const handleChato = () => setChat(true); console.log('sendMsg2222', inner)
const handleChatc = () => setChat(false); const [chatmsg, setChatmsg] = useState([inner])
const handleClose2 = () => setShow2(false); const [roomName, setRoomName] = useState('dd') //방 선택이 방1을 눌럿다 방2를 누르면 전체로 전송됨
const handleShow2 = () => setShow2(true);
// variant="pills" function enterChatroom(roomName) { //방 입장하기
socket.emit('joinRoom', roomName)
useEffect(() => { console.log(`joinRoom : ${roomName} 입장`)
const isChatR = Object.values(chatR).every(el => Boolean(el)) }
isChatR ? setDisabled(false) : setDisabled(true)
}, [chatR]) const sendMsg = (e) => {
e.preventDefault()
function handleChange(event) { console.log('sendMsg', inner)
const { name, value } = event.target console.log(roomName)
setChatR({ ...chatR, [name]: value }) socket.emit("chat", {
} roomName: roomName,
msg: inner
async function handleSubmit(event) { });
event.preventDefault() }
try {
setError('') function clearChat() {
// const response = await fetch('chat/makeChat', { setChatmsg([])
// method: 'POST', }
// headers: {
// 'Content-Type': 'application/json' useEffect(() => {
// }, console.log('useeffect1')
// body: JSON.stringify(chatR) socket.on('broadcast', (msg) => {
// })
//const data = await response.json() console.log('msg', msg)
const response = await axios.post('chat/makeChat', chatR) console.log('inner :', inner)
setChatR(INIT_CHATR)
} catch (error){ setChatmsg([...chatmsg, msg])
catchErrors(error, setError) console.log('useeffect2', chatmsg)
} })
} console.log('useeffect2', chatmsg)
}, [chatmsg])
return (
<> return (
<Menu /> <>
<Row className="mr-0"> <Menu />
<Col className="list" md={5}> <Row className="mr-0">
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example"> <Col className="list" md={5}>
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} > <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<ClosedList /> <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
</Tab> <ClosedList enterChatroom={enterChatroom} setRoomName={setRoomName} clearChat={clearChat} />
<Tab eventKey="open" title="공개방" > </Tab>
<OpenList /> <Tab eventKey="open" title="공개방" >
</Tab> <OpenList />
</Tabs> </Tab>
</Col> </Tabs>
<Col style={{ padding: "0" }}> </Col>
{chat ? <Chat handleChatc={handleChatc} /> : null} <Col style={{ padding: "0" }}>
{chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} setInner={setInner} chatmsg={chatmsg} roomName={roomName} /> : null}
<div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShow} size="lg" block> <Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} >
생성 생성
</Button> </Button>
<Button variant="secondary" onClick={handleShow2} size="lg" block> <Modal show={show} onHide={handleClose}>
참가 <Modal.Header closeButton>
</Button> <Modal.Title>방 생성</Modal.Title>
</div> </Modal.Header>
<Modal.Body>여기에 form 입력</Modal.Body>
<Modal show={show} onHide={handleClose}> <Modal.Footer>
<Modal.Header closeButton> <Button variant="primary" onClick={handleClose}>
<Modal.Title>방 생성</Modal.Title> 생성
</Modal.Header> </Button>
{error && <Alert variant='danger'> </Modal.Footer>
{error} </Modal>
</Alert>} </Col>
<Modal.Body> </Row>
<Form onSubmit={handleSubmit}> </>
<Form.Group as={Row} controlId="chatName"> );
<Form.Label column sm={4}>방 이름</Form.Label>
<Col>
<Form.Control name='name' type='text' value={chatR.name} onChange={handleChange} />
</Col>
</Form.Group>
<Form.Group as={Row} controlId="chatInterest">
<Form.Label column sm={4}>관심 분야</Form.Label>
<Col>
<Form.Control as="select" defaultValue="Choose..." name='interest' type='text' value={chatR.interest} onChange={handleChange}>
<option>Choose...</option>
<option>과학</option>
<option>수학</option>
<option>예술</option>
<option>언어</option>
<option>취미</option>
</Form.Control>
{/* <Form.Control type="text" /> */}
</Col>
</Form.Group>
<Form.Group as={Row} controlId="chatIsOpen">
<Form.Label column sm={4}>공개방</Form.Label>
<Col>
<Form.Check
type="checkbox"
checked={chatR.isOpen}
name='isOpen'
onChange={() => setChatR({ ...chatR, isOpen: !chatR.isOpen })} />
</Col>
</Form.Group>
{
(chatR.isOpen)
? (<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>
<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>
</Col>
</Row>
</>
);
} }
export default Home; export default Home;
client/src/Pages/ProfilePage.js
View file @ f0e5bcdb
// import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
// import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
// import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
// import { Image, Button, Container, Form, FormControl, Navbar, Nav, Row, Col, Dropdown, Carousel } from 'react-bootstrap'; import { Image, Button, Container, Form, FormControl, Navbar, Nav, Row, Col, Dropdown, Carousel } from 'react-bootstrap';
// import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom'; import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
// import axios from 'axios' import axios from 'axios'
// // import userdefault from './KakaoTalk_20201230_153151693.png' import userdefault from './KakaoTalk_20201230_153151693.png'
// import userimg from './KakaoTalk_20201230_153151693.png' import img1 from './img_1.png'
// // import img1 from './img_1.png' import img2 from './img_2.png'
// // import img2 from './img_2.png' import img3 from './img_3.jpg'
// // import img3 from './img_3.jpg' import DropdownItem from 'react-bootstrap/esm/DropdownItem';
// import DropdownItem from 'react-bootstrap/esm/DropdownItem';
// const INIT_USER = { // const INIT_USER = {
...@@ -19,168 +18,244 @@ ...@@ -19,168 +18,244 @@
// nickname: '' // nickname: ''
// } // }
// function ProfilePage() { function ProfilePage() {
// const [user, setUser] = useState(INIT_USER) const [user, setUser] = useState('')
// // const [userimg, setUserimg] = useState(img2) const [userimg, setUserimg] = useState(img2)
// const [defaultImg, setDefaultImg] = useState(true) const [defaultImg, setDefaultImg] = useState(true)
// const [hidden, setHidden] = useState(true) const [hidden, setHidden] = useState(true)
// async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
// const userid = localStorage.getItem('user') const userid = localStorage.getItem('user')
// const response = await axios.post(`/users/${userid}`, { 'email': userid }) const response = await axios.post(`/users/${userid}`, { 'email': userid })
// setUser(response.data) setUser(response.data)
// } }
// function handleSubmit(e) { function handleSubmit(e) {
// e.preventDefault() e.preventDefault()
// if (hidden) { if (hidden) {
// setHidden(false) setHidden(false)
// } else { } else {
// setHidden(true) setHidden(true)
// } }
// console.log(document.cookie) console.log(document.cookie)
// } }
// function handleChange(e) { function handleChange(e) {
// setUser({ ...user, 'nickname': e.target.value }) setUser({ ...user, 'nickname': e.target.value })
// } }
// async function handleNicksave() { async function handleNicksave() {
// const userid = localStorage.getItem('user') const userid = localStorage.getItem('user')
// await axios.put(`/users/${userid}`, user) await axios.put(`/users/${userid}`, user)
// } }
// function setThumbnail(event) { //불러온 사진 <div id='image_container'>에 띄우기 function setThumbnail(event) { //불러온 사진 <div id='image_container'>에 띄우기
// let reader = new FileReader(); let reader = new FileReader();
// reader.onload = function (event) { reader.onload = function (event) {
// let img = document.createElement("img"); let img = document.createElement("img");
// img.setAttribute("src", event.target.result); img.setAttribute("src", event.target.result);
// img.setAttribute("id", "profileImg") img.setAttribute("id", "profileImg")
// img.setAttribute("style", 'height:300px; width:300px') img.setAttribute("style", 'height:300px; width:300px')
// img.setAttribute("class", "mb-3") img.setAttribute("class", "mb-3")
// // img.setAttribute("class","d-flex justify-content-center mb-3") // img.setAttribute("class","d-flex justify-content-center mb-3")
// document.querySelector("div#image_container").appendChild(img); document.querySelector("div#image_container").appendChild(img);
// }; };
// reader.readAsDataURL(event.target.files[0]); reader.readAsDataURL(event.target.files[0]);
// if (defaultImg) { //첫 이미지 업로드(default이미지 지우고 유저가 올린걸로 업로드) if (defaultImg) { //첫 이미지 업로드(default이미지 지우고 유저가 올린걸로 업로드)
// let del = document.getElementById("defaultImg") let del = document.getElementById("defaultImg")
// del.remove() del.remove()
// setDefaultImg(false) setDefaultImg(false)
// } }
// else { //기존에 올렸던 사진 지우고 재선택한 사진 업로드 else { //기존에 올렸던 사진 지우고 재선택한 사진 업로드
// let del2 = document.getElementById('profileImg') let del2 = document.getElementById('profileImg')
// del2.remove() del2.remove()
// reader.onload = function (event) { reader.onload = function (event) {
// let img = document.createElement("img"); let img = document.createElement("img");
// img.setAttribute("src", event.target.result); img.setAttribute("src", event.target.result);
// img.setAttribute("id", "profileImg") img.setAttribute("id", "profileImg")
// img.setAttribute("style", 'height:300px; width:300px') img.setAttribute("style", 'height:300px; width:300px')
// document.querySelector("div#image_container").appendChild(img); document.querySelector("div#image_container").appendChild(img);
// }; };
// } }
// } }
// useEffect(() => { useEffect(() => {
// if (localStorage.getItem('user')) { //id뿐만아니라 토큰같은거를 확인 못하나 + 이런식으로 확인해도 되는것도 맞나 if (localStorage.getItem('user')) { //id뿐만아니라 토큰같은거를 확인 못하나 + 이런식으로 확인해도 되는것도 맞나
// getLoginedUser() getLoginedUser()
// } }
// else { else {
// alert("로그인 후 이용하세요") alert("로그인 후 이용하세요")
// window.location.href = '/login' window.location.href = '/login'
// } }
// }, []) }, [])
// return ( return (
// <div> <div>
// <Menu /> <Menu />
// <Container className="d-flex justify-content-center"> <Container>
// <div className="mt-5 shadow w-75"> <Row><h1>ProfilePage</h1></Row>
// <h1 className="text-center mt-4 ml-5 mr-5 mb-3">Profile Page</h1> <Row><h2>{user.username}님 환영합니다 !</h2></Row>
// <h4 className="text-center mb-5">{user.username}님 환영합니다 !</h4> </Container>
<Container className="mt-5 shadow w-75">
// <div className="d-flex justify-content-center mb-3" id="defaultImg"> <Row>
// <Image src={userimg} width="300px" roundedCircle /> <Col sm={4}>
// </div> <Row>
// <Row className="d-flex justify-content-center"> <div className="d-flex justify-content-center mb-3" id="defaultImg">
<Image src={userimg} width="300px" roundedCircle />
// <Form className="d-flex justify-content-center"> </div>
// <Form.Group> </Row>
// <div id="image_container"></div> <Row>
// <Form.File label="프로필 사진 변경" accept="image/*" onChange={setThumbnail} /> <Form className="d-flex justify-content-center">
// </Form.Group> <Form.Group>
// </Form> <div id="image_container"></div>
// </Row> <Form.File label="프로필 사진 변경" accept="image/*" onChange={setThumbnail} />
// <Row className="d-flex justify-content-center"> </Form.Group>
// <Dropdown> </Form>
// <Dropdown.Toggle variant='success' id='dropdown-basic'> </Row>
// 프로필 사진 선택 <Row className="d-flex justify-content-center">
// </Dropdown.Toggle> <Dropdown>
// <Dropdown.Menu> <Dropdown.Toggle variant='success' id='dropdown-basic'>
// <Dropdown.Item as='button'>홈으로</Dropdown.Item> 프로필 사진 선택
// <Dropdown.Item href='/'>라이언</Dropdown.Item> </Dropdown.Toggle>
// <Dropdown.Item href='/'>어피치</Dropdown.Item> <Dropdown.Menu>
// </Dropdown.Menu> <Dropdown.Item as='button'>홈으로</Dropdown.Item>
// </Dropdown> <Dropdown.Item href='/'>라이언</Dropdown.Item>
// </Row> <Dropdown.Item href='/'>어피치</Dropdown.Item>
// {/* <Carousel className="d-flex justify-content-center" style={{ width: "300px", height: "300px" }}> </Dropdown.Menu>
// <Carousel.Item className="d-flex justify-content-center"> </Dropdown>
// <Image </Row>
// className="d-block w-100" </Col>
// src={img1} <Col sm={8}>
// />
// <Carousel.Caption> <Row className="m-3 justify-content-flex-start" style={{ fontWeight: "bold", fontSize: "x-large" }}>
// <p style={{color : 'black'}}>펭수입니다.</p> <Col sm={2.5}>이름 :</Col>
// </Carousel.Caption> <Col sm={8}>{user.username}</Col>
// </Carousel.Item> </Row>
// <Carousel.Item> <Row className="m-3 justify-content-flex-start" id="nickname">
// <Image <Form className="d-flex" onSubmit={handleSubmit} style={{ fontWeight: "bold", fontSize: "x-large" }}>
// className="d-block w-100"
// src={img2} <Row>
// /> <Col>별명 :</Col>
// <Carousel.Caption> <Col hidden={!hidden}>
// <p>라이언입니다.</p> {user.nickname}
// </Carousel.Caption> </Col>
// </Carousel.Item> <Col hidden={hidden}>
// <Carousel.Item> <Form.Control defaultValue={user.nickname} style={{width : "110%"}} onChange={handleChange} />
// <Image </Col>
// className="d-block w-100" <Col>
// src={img3} <Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button>
// /> </Col>
// <Carousel.Caption> </Row>
// <p>어피치 입니다.</p> </Form>
// </Carousel.Caption>
// </Carousel.Item> </Row>
// </Carousel> */} <Row className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>
// <div className="text-center"> <Col sm={2.5}>이메일 : </Col>
// <div className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>이름 : {user.username}</div> <Col sm={8}>{user.email}</Col>
// <div className="m-3" id="nickname"> </Row>
// <Form className="d-flex justify-content-center" onSubmit={handleSubmit} style={{ fontWeight: "bold", fontSize: "x-large" }}> <Row className='justify-content-center'>
// 별명 : <Form>
// <div hidden={!hidden}> <Button variant="outline-success" size="sm" className="mr-4" onClick={handleNicksave}>저장</Button>
// {user.nickname} <Link to='/'>
// </div> <Button variant="outline-success" size="sm" className="ml-4" >홈 화면으로</Button>
// <Form.Control defaultValue={user.nickname} style={{ width: "40%" }} size="sm" onChange={handleChange} hidden={hidden} /> </Link>
// <Button className="ml-3" variant="outline-primary" size="sm" type='submit'>수정</Button> </Form>
// </Form> </Row>
</Col>
// </div> </Row>
// <div className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>이메일 : {user.email}</div> </Container>
// </div>
// <div className="text-center m-5">
// <Form>
// <Button variant="outline-success" size="sm" className="mr-4" onClick={handleNicksave}>저장</Button>
// <Link to='/'> <Container className="d-flex justify-content-center">
// <Button variant="outline-success" size="sm" className="ml-4" >홈 화면으로</Button> <div className="mt-5 shadow w-75">
// </Link> <h1 className="text-center mt-4 ml-5 mr-5 mb-3">Profile Page</h1>
// </Form> <h4 className="text-center mb-5">{user.username}님 환영합니다 !</h4>
// </div>
// </div> <div className="d-flex justify-content-center mb-3" id="defaultImg">
// </Container> <Image src={userimg} width="300px" roundedCircle />
</div>
// </div> <Row 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>
</Row>
<Row className="d-flex justify-content-center">
<Dropdown>
<Dropdown.Toggle variant='success' id='dropdown-basic'>
프로필 사진 선택
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item as='button'>홈으로</Dropdown.Item>
<Dropdown.Item href='/'>라이언</Dropdown.Item>
<Dropdown.Item href='/'>어피치</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Row>
{/* <Carousel className="d-flex justify-content-center" style={{ width: "300px", height: "300px" }}>
<Carousel.Item className="d-flex justify-content-center">
<Image
className="d-block w-100"
src={img1}
/>
<Carousel.Caption>
<p style={{color : 'black'}}>펭수입니다.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src={img2}
/>
<Carousel.Caption>
<p>라이언입니다.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src={img3}
/>
<Carousel.Caption>
<p>어피치 입니다.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel> */}
<div className="text-center">
<div className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>이름 : {user.username}</div>
<div className="m-3" id="nickname">
<Form className="d-flex justify-content-center" onSubmit={handleSubmit} style={{ fontWeight: "bold", fontSize: "x-large" }}>
별명 :
<div hidden={!hidden}>
{user.nickname}
</div>
<Form.Control defaultValue={user.nickname} style={{ width: "40%" }} size="sm" onChange={handleChange} hidden={hidden} />
<Button className="ml-3" variant="outline-primary" size="sm" type='submit'>수정</Button>
</Form>
</div>
<div className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>이메일 : {user.email}</div>
</div>
<div className="text-center m-5">
<Form>
<Button variant="outline-success" size="sm" className="mr-4" onClick={handleNicksave}>저장</Button>
<Link to='/'>
<Button variant="outline-success" size="sm" className="ml-4" >홈 화면으로</Button>
</Link>
</Form>
</div>
</div>
</Container>
</div>
)
}
// export default ProfilePage export default ProfilePage
\ No newline at end of file
client/src/Pages/user_default.svg
View file @ f0e5bcdb
client/src/Pages/user_default.svg <?xml version="1.0" encoding="iso-8859-1"?>
\ No newline at end of file <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 53 53" style="enable-background:new 0 0 53 53;" xml:space="preserve">
<path style="fill:#E7ECED;" d="M18.613,41.552l-7.907,4.313c-0.464,0.253-0.881,0.564-1.269,0.903C14.047,50.655,19.998,53,26.5,53
c6.454,0,12.367-2.31,16.964-6.144c-0.424-0.358-0.884-0.68-1.394-0.934l-8.467-4.233c-1.094-0.547-1.785-1.665-1.785-2.888v-3.322
c0.238-0.271,0.51-0.619,0.801-1.03c1.154-1.63,2.027-3.423,2.632-5.304c1.086-0.335,1.886-1.338,1.886-2.53v-3.546
c0-0.78-0.347-1.477-0.886-1.965v-5.126c0,0,1.053-7.977-9.75-7.977s-9.75,7.977-9.75,7.977v5.126
c-0.54,0.488-0.886,1.185-0.886,1.965v3.546c0,0.934,0.491,1.756,1.226,2.231c0.886,3.857,3.206,6.633,3.206,6.633v3.24
C20.296,39.899,19.65,40.986,18.613,41.552z"/>
<g>
<path style="fill:#556080;" d="M26.953,0.004C12.32-0.246,0.254,11.414,0.004,26.047C-0.138,34.344,3.56,41.801,9.448,46.76
c0.385-0.336,0.798-0.644,1.257-0.894l7.907-4.313c1.037-0.566,1.683-1.653,1.683-2.835v-3.24c0,0-2.321-2.776-3.206-6.633
c-0.734-0.475-1.226-1.296-1.226-2.231v-3.546c0-0.78,0.347-1.477,0.886-1.965v-5.126c0,0-1.053-7.977,9.75-7.977
s9.75,7.977,9.75,7.977v5.126c0.54,0.488,0.886,1.185,0.886,1.965v3.546c0,1.192-0.8,2.195-1.886,2.53
c-0.605,1.881-1.478,3.674-2.632,5.304c-0.291,0.411-0.563,0.759-0.801,1.03V38.8c0,1.223,0.691,2.342,1.785,2.888l8.467,4.233
c0.508,0.254,0.967,0.575,1.39,0.932c5.71-4.762,9.399-11.882,9.536-19.9C53.246,12.32,41.587,0.254,26.953,0.004z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
client/src/index.js
View file @ f0e5bcdb
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css'; import './index.css';
// import App from './App'; // import App from './App';
import SignUpPage from './Pages/SignUpPage'; import SignUpPage from './Pages/SignUpPage';
......
client/src/utils/auth.js
View file @ f0e5bcdb
import axios from "axios" import axios from "axios"
//자동으로 localstorage에 login이 생성됨 //자동으로 localstorage에 login이 생성됨
export function handleLogin(userId) { export function handleLogin(props) {
localStorage.setItem('user', userId) localStorage.setItem('user', props.email)
// localStorage.setItem('user', JSON.stringify({email: props.email}))
} }
export async function handleLogout() { export async function handleLogout() {
localStorage.removeItem('user') localStorage.removeItem('user')
......
package.json
View file @ f0e5bcdb
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
"main": "index.js", "main": "index.js",
"type": "module", "type": "module",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "dev": "nodemon server/server.js",
"dev": "nodemon server/server.js" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
...@@ -21,7 +21,6 @@ ...@@ -21,7 +21,6 @@
"body-parser": "^1.19.0", "body-parser": "^1.19.0",
"cors": "^2.8.5", "cors": "^2.8.5",
"express": "^4.17.1", "express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.11.9", "mongoose": "^5.11.9",
"nanoid": "^3.1.20", "nanoid": "^3.1.20",
"nodemon": "^2.0.6", "nodemon": "^2.0.6",
......
server/controllers/profile.controller.js 0 → 100644
View file @ f0e5bcdb
import Profile from "../models/profile.js"
import bcrypt from "bcryptjs";
import jwt from 'jsonwebtoken'
import config from "../config.js"
const getimage = async (req, res) => {
const defaultimg = 'https://t1.daumcdn.net/cfile/tistory/2761AA4558A05CBE2A'
// const newImg = await new Profile({
// defaultimg
// //required를 하였기 때문에 이중 하나라도 없으면 에러 발생
// }).save()
}
export default { getimage }
\ No newline at end of file
server/controllers/user.controller.js
View file @ f0e5bcdb
import User from "../models/User.js" import User from "../models/User.js"
import isLength from 'validator/lib/isLength.js' import isLength from 'validator/lib/isLength.js'
import isEmail from 'validator/lib/isEmail.js' import isEmail from 'validator/lib/isEmail.js'
import bcrypt from 'bcryptjs' import bcrypt from "bcryptjs";
import jwt from 'jsonwebtoken'
import config from "../config.js"
//꼭 js붙여주기!! //꼭 js붙여주기!!
//sign validation해야됨 //sign validation해야됨
...@@ -12,17 +14,17 @@ const signup = async (req, res) => { ...@@ -12,17 +14,17 @@ const signup = async (req, res) => {
console.log(username, nickname, email, password) console.log(username, nickname, email, password)
try { try {
if (!isLength(username, {min: 3, max: 10})){ if (!isLength(username, { min: 3, max: 10 })) {
//이범위를 벗어나면 error발생 //이범위를 벗어나면 error발생
return res.status(422).send('이름은 3-10자 사이입니다') return res.status(422).send('이름은 3-10자 사이입니다')
//422 : 형식이 잘못되었다는 error발생 //422 : 형식이 잘못되었다는 error발생
} else if (!isLength(nickname, {min: 2, max: 10})) { } else if (!isLength(nickname, { min: 2, max: 10 })) {
return res.status(422).send('별명은 2-10자 사이입니다.') return res.status(422).send('별명은 2-10자 사이입니다.')
} else if (!isLength(password, {min: 6})) { } else if (!isLength(password, { min: 6 })) {
return res.status(422).send('비밀번호는 6자 이상입니다.') return res.status(422).send('비밀번호는 6자 이상입니다.')
} else if (!isEmail(email)) { } else if (!isEmail(email)) {
return res.status(422).send('유효하지 않은 이메일 형식입니다') return res.status(422).send('유효하지 않은 이메일 형식입니다')
} }
// else if (!isLength(nickname, { min: 3, max: 10 })) { // else if (!isLength(nickname, { min: 3, max: 10 })) {
// return res.status(422).send('Nickname must be 3-10 characters') // return res.status(422).send('Nickname must be 3-10 characters')
// } else if (!isEmail(email, { // } else if (!isEmail(email, {
...@@ -36,8 +38,8 @@ const signup = async (req, res) => { ...@@ -36,8 +38,8 @@ const signup = async (req, res) => {
// } // }
// 기존의 email이 있으면 나오는 error (unique) // 기존의 email이 있으면 나오는 error (unique)
const user = await User.findOne({email}) const user = await User.findOne({ email })
if(user) { if (user) {
return res.status(422).send(`${email}이 이미 사용중입니다.`) return res.status(422).send(`${email}이 이미 사용중입니다.`)
} }
...@@ -61,42 +63,32 @@ const signup = async (req, res) => { ...@@ -61,42 +63,32 @@ const signup = async (req, res) => {
console.log(error) console.log(error)
res.status(500).send('회원가입 에러발생하였습니다.') res.status(500).send('회원가입 에러발생하였습니다.')
} }
}
//newUSer (객체)를 json형식으로 바꿔서 객체열로 보냄 const hello = async (req, res) => {
//res : 응답하는 객체 let users = await User.find().select('name nickname email _id').exec()
//응답안할 시 browser에서 빙빙돌다 에러 발생 -> 꼭 붙여줘야됨! return res.json(users)
//res는 한번만 실행. 두번하면 에러 발생
} }
const loginNavbar = async (req, res) => {
const logineduser = async (req, res) => {
try { try {
let user = await User.findOne(req.body).select('username').exec() let user = await User.findOne(req.body).select('username email nickname').exec()
return res.json(user) return res.json(user)
} catch (error) { } catch (error) {
alert('올바르지 못한 접근입니다.') alert('올바르지 못한 접근입니다.')
} }
} }
// const loginNavbar = (req, res) => { const changenick = async (req, res) => {
// res.json(req.login) try {
// } const newnick = req.body.nickname
await User.update({ 'username': req.body.username }, { 'nickname': newnick })
// const userById = async (req, res, next, id) => { } catch (error) {
// try { alert('올바르지 못한 접근입니다.')
// const user = await User.findById(id) }
// if (!user) { }
// res.status(404).send('사용자를 찾을 수 없습니다.')
// }
// req.login = user
// //req에 profile을 만들어서 user를 저장해줌
// next()
// //다음 middleware로 이동시킴 / 없으면 멈춤
// } catch (error) {
// console.log(error)
// res.status(500).send('사용자 아이디 검색 실패')
// }
// }
export default { signup ,loginNavbar } export default { signup, hello, logineduser, changenick }
// {} : 객체로 return함 // {} : 객체로 return함
\ 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