Skip to content

GitLab

Commit 36320a85 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

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

parents 7bd4eef0 46f894d9
Show whitespace changes
Inline Side-by-side
client/.gitignore
View file @ 36320a85
......@@ -21,5 +21,8 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
.env
.eslintcache
.package-lock.json
debug.log
client/src/App.js
View file @ 36320a85
import logo from './logo.svg';
import './App.css';
import Hello from './Hello';
function App() {
console.log()
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
안녕하세요
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<Hello name='대기'/>
);
}
......
client/src/Components/Chat.js
View file @ 36320a85
import React from 'react';
import { Form, Button } from 'react-bootstrap';
import React, { useEffect, useState } from 'react';
import { Form, Button, Row } from 'react-bootstrap';
import axios from "axios";
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 (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
<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.Group>
<Form.Control type="text" />
......
client/src/Components/ClosedList.js
View file @ 36320a85
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([
{ room: '테스트 방1', memnum: 5, admin: '가영' },
{ room: '테스트 방2', memnum: 4, admin: '수현' }]
);
function enterChatroomCH(e) {
const roomName = e.target.name
props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
props.setRoomName(roomName)
props.clearChat()
}
return (
<div>
<Row>
{list.map((list, index) =>
<ListGroup key={index}>
<ListGroup.Item action>
<h2>{list.room}</h2>
<ListGroup.Item action onClick={enterChatroomCH} name={list.room}>
{list.room}
</ListGroup.Item>
</ListGroup>
)}
</Row>
<Col>
</Col>
</div>
)
}
......
client/src/Components/Menu.js
View file @ 36320a85
import React from 'react'
import { Navbar, Nav, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { handleLogout } from '../utils/auth';
function Menu() {
const userName = "정연우";
......@@ -13,7 +15,9 @@ function Menu() {
<Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link>
</Nav>
<Button variant="light" className="ml-3">Logout</Button>
<Link to="./login">
<Button onClick={() => handleLogout()} variant="light" className="ml-3">Logout</Button>
</Link>
</Navbar>
)
}
......
client/src/Hello.js
View file @ 36320a85
import { Button, Navbar, Nav, Form, FormControl } from 'react-bootstrap';
import { Button, Navbar, Nav } from 'react-bootstrap';
import React from 'react'
const userName = "정연우";
......@@ -12,8 +12,8 @@ function Hello(props) {
<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="/home">Home</Nav.Link>
<Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link>
</Nav>
{/* <Form inline>
......
client/src/Pages/HomePage.js
View file @ 36320a85
import React, { useState } from 'react';
import { Row, Col, Modal, Button } from 'react-bootstrap';
import React, { useState, useEffect } from 'react';
import { Row, Col, Modal, Button, Navbar, Nav } from 'react-bootstrap';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList';
......@@ -7,10 +7,14 @@ import OpenList from '../Components/OpenList';
import Chat from '../Components/Chat';
import Menu from '../Components/Menu';
// import styled from 'styled-components';
import { io } from "socket.io-client"; //모듈 가져오기
// const List = styled.div`
// background: #FFFAFA;
// `
const userName = "정연우";
const socket = io();
function Home() {
......@@ -23,6 +27,52 @@ function Home() {
const handleChatc = () => setChat(false);
// variant="pills"
///////////////////////////////////////////////////////////////
const [inner, setInner] = useState([''])
console.log('sendMsg2222', inner)
const [chatmsg, setChatmsg] = useState([inner])
const [roomName, setRoomName] = useState('dd') //방 선택이 방1을 눌럿다 방2를 누르면 전체로 전송됨
function enterChatroom(roomName) { //방 입장하기
socket.emit('joinRoom', roomName)
console.log(`joinRoom : ${roomName} 입장`)
}
const sendMsg = (e) => {
e.preventDefault()
console.log('sendMsg', inner)
console.log(roomName)
socket.emit("chat", {
roomName: roomName,
msg: inner
});
}
function clearChat() {
setChatmsg([])
}
useEffect(() => {
console.log('useeffect1')
socket.on('broadcast', (msg) => {
console.log('msg', msg)
console.log('inner :', inner)
setChatmsg([...chatmsg, msg])
console.log('useeffect2', chatmsg)
})
console.log('useeffect2', chatmsg)
}, [chatmsg])
//////////////////////////////////////////////////////////
return (
<>
<Menu />
......@@ -30,7 +80,7 @@ function Home() {
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<ClosedList />
<ClosedList enterChatroom={enterChatroom} setRoomName={setRoomName} clearChat={clearChat} />
</Tab>
<Tab eventKey="open" title="공개방" >
<OpenList />
......@@ -38,7 +88,7 @@ function Home() {
</Tabs>
</Col>
<Col style={{ padding: "0" }}>
{chat ? <Chat handleChatc={handleChatc} /> : null}
{chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} setInner={setInner} chatmsg={chatmsg} roomName={roomName} /> : null}
<Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} >
생성
......
client/src/Pages/LogInPage.js
View file @ 36320a85
import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import axios from 'axios'
import { Button, Form, Container, Navbar, Spinner, Alert } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors'
import { Link, Redirect } from 'react-router-dom'
import { handleLogin } from '../utils/auth'
const INIT_USER = {
email: '',
password: '',
}
function LogIn() {
const [validated, setValidated] = useState(false);
const [user, setUser] = useState(INIT_USER)
//로딩, 에러, diserved 상태 넣어야됨.
const [disabled, setDisabled] = useState(true)
const [error, setError] = useState('')
const [success, setSucces] = useState(false)
const [loading, setLoading] = useState(false)
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
useEffect(() => {
const isUser = Object.values(user).every(el => Boolean(el))
//Boolean : 참거짓 판별
//every : every뒤에 함수값이 return하는 값이 모두 참일때만 true출력 -> element가 하나도 빈 문자열이 존재하지 않을때
//empty string때만 false로 나옴.
isUser ? setDisabled(false) : setDisabled(true)
}, [user])
function handleChange(event) {
const { name, value } = event.target
// console.log(name, value)
setUser({ ...user, [name]: value })
}
setValidated(true);
};
async function handleSubmit(event) {
event.preventDefault()
// const form = event.currentTarget;
// if (form.checkValidity() === false) {
// event.preventDefault();
// event.stopPropagation();
// }
// setValidated(true);
try {
setLoading(true)
setError('')
await axios.post('/auth/login', user)
// 알아서 stringify하기 때문에 따로 해줄 필요 없음.
handleLogin(user)
setSucces(true)
} catch (error) {
catchErrors(error, setError)
//setError(error.response.data)
//error객체가 들어감.
} finally {
setLoading(false)
}
//server쪽에서 json형식으로 보낼것임
}
//success시 링크이동
if (success) {
console.log('success', success)
return <Redirect to='/' />
}
return (
<>
<Navbar bg="dark" variant="dark">
{/* <Navbar bg="dark" variant="dark">
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
</Navbar> */}
<Form noValidate validated={validated} onSubmit={handleSubmit} className='vh-100 flex-column align-items-center justify-content-center mt-2'>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
<h2 className="text-center ">로그인</h2>
<h2 className="text-center">로그인</h2>
<Form.Group controlId="formGroupEmail">
<Form.Label>이메일</Form.Label>
<Form.Control
required
type="text"
type="email"
name="email"
onChange={handleChange}
value={user.email}
placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요!
......@@ -41,20 +96,32 @@ function LogIn() {
<Form.Label>비밀번호</Form.Label>
<Form.Control
required
type="text"
type="password"
name="password"
onChange={handleChange}
value={user.password}
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>
<Button
disabled={disabled || loading}
type="submit"
variant="outline-success"
size="lg"
className="mr-4"
block>
{loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' />} {' '} 로그인
</Button>
<Link to="./signuppage">
<Link to="./signup">
<h6 type="button" className="text-right mt-2" style={{ cursor: 'pointer' }}>회원가입</h6>
</Link>
{error && <Alert variant='danger'>
{error}
</Alert>}
</div>
</Container>
</Form>
......@@ -62,7 +129,4 @@ function LogIn() {
);
}
//render(<LogIn />);
export default LogIn
\ No newline at end of file
client/src/Pages/ProfilePage.js
View file @ 36320a85
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Menu from '../Components/Menu';
import { Image, Button, Container, Form, FormControl, Navbar, Nav } 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 axios from 'axios'
import userdefault from './KakaoTalk_20201230_153151693.png'
import img1 from './img_1.png'
import img2 from './img_2.png'
import img3 from './img_3.jpg'
import DropdownItem from 'react-bootstrap/esm/DropdownItem';
const userName = "정연우";
const userEmail = "dusdn8455@korea.ac.kr";
let userNickname = "가나다라마바사";
// const INIT_USER = {
// username: '',
// email: '',
// nickname: ''
// }
function ProfilePage() {
const [user, setUser] = useState('')
const [userimg, setUserimg] = useState(img2)
const [defaultImg, setDefaultImg] = useState(true)
const [hidden, setHidden] = useState(true)
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)
async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
const userid = localStorage.getItem('user')
const response = await axios.post(`/users/${userid}`, { 'email': userid })
setUser(response.data)
}
function goHome() {
return (setTohome(true))
function handleSubmit(e) {
e.preventDefault()
if (hidden) {
setHidden(false)
} else {
setHidden(true)
}
console.log(document.cookie)
}
function handleChange(e) {
setUser({ ...user, 'nickname': e.target.value })
}
async function handleNicksave() {
const userid = localStorage.getItem('user')
await axios.put(`/users/${userid}`, user)
}
function setThumbnail(event) { //불러온 사진 <div id='image_container'>에 띄우기
......@@ -59,68 +56,200 @@ function ProfilePage() {
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("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')
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')
img.setAttribute("style", 'height:300px; width:300px')
document.querySelector("div#image_container").appendChild(img);
};
}
}
useEffect(() => {
if (localStorage.getItem('user')) { //id뿐만아니라 토큰같은거를 확인 못하나 + 이런식으로 확인해도 되는것도 맞나
getLoginedUser()
}
else {
alert("로그인 후 이용하세요")
window.location.href = '/login'
}
}, [])
return (
<div>
<Menu />
<Container>
<Row><h1>ProfilePage</h1></Row>
<Row><h2>{user.username}님 환영합니다 !</h2></Row>
</Container>
<Container className="mt-5 shadow w-75">
<Row>
<Col sm={4}>
<Row>
<div className="d-flex justify-content-center mb-3" id="defaultImg">
<Image src={userimg} width="300px" roundedCircle />
</div>
</Row>
<Row>
<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>
</Col>
<Col sm={8}>
<Row className="m-3 justify-content-flex-start" style={{ fontWeight: "bold", fontSize: "x-large" }}>
<Col sm={2.5}>이름 :</Col>
<Col sm={8}>{user.username}</Col>
</Row>
<Row className="m-3 justify-content-flex-start" id="nickname">
<Form className="d-flex" onSubmit={handleSubmit} style={{ fontWeight: "bold", fontSize: "x-large" }}>
<Row>
<Col>별명 :</Col>
<Col hidden={!hidden}>
{user.nickname}
</Col>
<Col hidden={hidden}>
<Form.Control defaultValue={user.nickname} style={{width : "110%"}} onChange={handleChange} />
</Col>
<Col>
<Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button>
</Col>
</Row>
</Form>
</Row>
<Row className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>
<Col sm={2.5}>이메일 : </Col>
<Col sm={8}>{user.email}</Col>
</Row>
<Row className='justify-content-center'>
<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>
</Row>
</Col>
</Row>
</Container>
{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>
<h4 className="text-center mb-5">{user.username}님 환영합니다 !</h4>
<div className="d-flex justify-content-center mb-3" id="defaultImg">
<Image src={userdefault} width="300px" roundedCircle />
<Image src={userimg} width="300px" roundedCircle />
</div>
<div className="d-flex justify-content-center">
<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 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 className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>이메일 : {user.email}</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>
<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>
......
client/src/Pages/SignUpPage.js
View file @ 36320a85
import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import axios from 'axios'
import { Button, Form, Container, Navbar, Alert } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors';
import { Redirect } from 'react-router-dom';
const INIT_USER = {
username: '',
nickname: '',
email: '',
password: '',
}
function SingUp() {
const [validated, setValidated] = useState(false);
const [user, setUser] = useState(INIT_USER)
const [error, setError] = useState('')
const [disabled, setDisabled] = useState(true)
const [success, setSucces] = useState(false)
useEffect(() => {
const isUser = Object.values(user).every(el => Boolean(el))
//Boolean : 참거짓 판별
//every : every뒤에 함수값이 return하는 값이 모두 참일때만 true출력 -> element가 하나도 빈 문자열이 존재하지 않을때
//empty string때만 false로 나옴.
isUser ? setDisabled(false) : setDisabled(true)
}, [user])
const handleSubmit = (event) => {
function handleChange(event) {
const { name, value } = event.target
// console.log(name, value)
setUser({ ...user, [name]: value })
}
async function handleSubmit(event) {
event.preventDefault();
//빈문자열 입력 시 오류 문자 출력
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
// console.log(user)
try {
setError('')
// const response = await fetch('/api/users/signup', {
// //post, get같은게 주어지지 않으면 기본적으로 fetch에 get요청함
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(user)
// })
// const data = await response.json()
await axios.post('/users/signup', user)
// 알아서 stringify하기 때문에 따로 해줄 필요 없음.
// console.log(response.data)
console.log(user)
// ?????????hash 처리된 password가 저장되지 않았음
// setUser(INIT_USER)
setSucces(true)
} catch (error) {
catchErrors(error, setError)
}
}
if (success) {
console.log('success', success)
return <Redirect to='/login' />
}
return (
<>
<Navbar bg="dark" variant="dark">
{/* <Navbar bg="dark" variant="dark">
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar>
</Navbar> */}
<div>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Form noValidate validated={validated} onSubmit={handleSubmit} className='vh-100 flex-column align-items-center justify-content-center mt-2'>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
......@@ -34,6 +92,9 @@ function SingUp() {
<Form.Control
required
type="text"
name="username"
onChange={handleChange}
value={user.username}
placeholder="이름을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이름을 입력해주세요!
......@@ -45,6 +106,9 @@ function SingUp() {
<Form.Control
required
type="text"
name="nickname"
onChange={handleChange}
value={user.nickname}
placeholder="별명을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 별명을 입력해주세요!
......@@ -55,7 +119,10 @@ function SingUp() {
<Form.Label>이메일</Form.Label>
<Form.Control
required
type="text"
type="email"
name="email"
onChange={handleChange}
value={user.email}
placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요!
......@@ -66,20 +133,29 @@ function SingUp() {
<Form.Label>비밀번호</Form.Label>
<Form.Control
required
type="text"
type="password"
name="password"
onChange={handleChange}
value={user.password}
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>
<Button
disabled={disabled}
type='submit'
variant="outline-success"
size="lg"
className="mr-4"
block>가입</Button>
{error && <Alert variant='danger'>
{error}
</Alert>}
</div>
</Container>
</Form>
</div >
</>
)
}
......
client/src/Pages/user_default.svg
View file @ 36320a85
client/src/Pages/user_default.svg
\ No newline at end of file
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- 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 @ 36320a85
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
// import App from './App';
import SignUpPage from './Pages/SignUpPage';
......@@ -7,7 +8,6 @@ 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'
......
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