ul

client/src/Components/Chat.js

+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

+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/OpenList.js

+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

+import { Button, Navbar, Nav, Form, FormControl } from 'react-bootstrap';
+import React from 'react'
+
+const userName = "정연우";
+
+
+function Hello(props) {
+    console.log(props)
+    return (
+        <>
+            <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}
+            </div>
+            <input className="input" />
+
+        </>
+    )
+
+}
+
+export default Hello;

client/src/Page/LogIn.js

-import React from 'react';
-import { Button, Container } from 'react-bootstrap';
-
-function LogIn() {
-    return(
-        <div>
-            <Container >
-                <h2 className="d-flex justify-content-center">회원가입</h2>
-                <Form>
-                    <Form.Group controlId="formGroupEmail">
-                        <Form.Label>Email address</Form.Label>
-                        <Form.Control type="email" placeholder="Enter email" />
-                    </Form.Group>
-                    <Form.Group controlId="formGroupPassword">
-                        <Form.Label>Password</Form.Label>
-                        <Form.Control type="password" placeholder="Enter Password" />
-                    </Form.Group>
-                </Form>
-                <span>
-                    <Button className="btn btn-outline-primary">가입</Button>
-                </span>
-            </Container>
-        </div>
-    )
-}
-
-export default LogIn
\ No newline at end of file

client/src/Page/SignUp.js

-import React from 'react';
-import { Button, Container } from 'react-bootstrap';
-
-function SingUp() {
-    return(
-        <div>
-            <h2 className="d-flex justify-content-center">회원가입</h2>
-            <Form>
-                <Form.Group controlId="formGroupEmail">
-                    <Form.Label>User name</Form.Label>
-                    <Form.Control type="email" placeholder="Enter User name" />
-                </Form.Group>
-                <Form.Group controlId="formGroupPassword">
-                    <Form.Label>Nickname</Form.Label>
-                    <Form.Control type="password" placeholder="Enter nickname" />
-                </Form.Group>
-                <Form.Group controlId="formGroupEmail">
-                    <Form.Label>Email address</Form.Label>
-                    <Form.Control type="email" placeholder="Enter email" />
-                </Form.Group>
-                <Form.Group controlId="formGroupPassword">
-                    <Form.Label>Password</Form.Label>
-                    <Form.Control type="password" placeholder="Enter Password" />
-                </Form.Group>
-            </Form>
-            <span>
-                <Button className="btn btn-outline-primary">가입</Button>
-            </span>
-        </div>
-    )
-}
-
-export default SingUp
\ No newline at end of file

client/src/Pages/HomePage.js

+import React, { useState } 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';
+import OpenList from '../Components/OpenList';
+import Chat from '../Components/Chat';
+// import styled from 'styled-components';
+
+// const List = styled.div`
+//   background: #FFFAFA;
+// `
+const userName = "정연우";
+
+
+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 (
+    <>
+      <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>
+      <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;

client/src/Pages/LogInPage.js

+import React, { useState } from 'react';
+import { Button, Form, Container } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+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 (
+        <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>
+
+                    <Button type="submit" variant="outline-success" size="lg" className="mr-4" block>로그인</Button>
+                    
+                    <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/LoginForm.js

+import React, { useState } from "react";
+import Joi, { validate } from "joi-browser";
+
+const LoginForm = () => {
+  const userSchema = {
+    username: Joi.string().required(),
+    password: Joi.string().required(),
+  };
+
+  const [userInfo, setUserInfo] = useState({
+    username: "",
+    password: "",
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault(); // 기본 동작 방지
+  };
+
+  const handleChange = (e) => {
+    // e.target.id: 변경이 일어난 input 태그의 id
+    // e.target.value: 변경이 일어난 input 태그의 값
+    const { id, value } = e.target;
+    const errors = { ...userInfo.errors };
+
+    /* 입력받은 값 유효성 검증 */
+    const obj = { [id]: value }; // 입력받은 값에 
+    const schema = { [id]: userSchema[id] }; // Joi 스키마를 적용하여
+    const { error } = validate(obj, schema); // 유효성 검증
+
+    if(error) errors[id] = error;
+    else delete errors[id];
+
+    /* 입력받은 username 및 password를 state에 저장 */
+    const data = userInfo;
+    data[id] = value; // 점(.) 표기법을 대괄호([]) 표기법으로 사용
+    setUserInfo({ ...data, errors });
+  };
+
+  const buttonValidate = () => {
+    const options = { abortEarly: false, allowUnknown:true };
+    const { error } = Joi.validate(userInfo, userSchema, options);
+
+    // 에러 미발생 시 null 반환
+    if (!error) return null;
+
+    // 에러 발생 시 에러 정보 반환
+    const errors = {};
+    for (let item of error.details) {
+      errors[item.path[0]] = item.message;
+    }
+    return errors;
+  }
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    const validUsername = 'ingyeo';
+    const validPassword = '1234';
+
+    if(validUsername === userInfo.username && validPassword === userInfo.password)
+      alert('로그인 성공!')
+    else 
+      alert('로그인 실패...');
+  }
+
+  return (
+    <div>
+      <h1>Login</h1>
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="username">Username</label>{" "}
+          {/* 이 label 태그는 아래 input 태그를 참조함  */}
+          <input
+            onChange={handleChange}
+            id="username"
+            type="text"
+            className="form-control"
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="password">Password</label>
+          <input
+            onChange={handleChange}
+            id="password"
+            type="password"
+            className="form-control"
+          />
+        </div>
+        <button 
+          disabled={buttonValidate()}
+          onClick={handleClick}
+          className="btn btn-primary">Login</button>
+      </form>
+    </div>
+  );
+};
+
+export default LoginForm;
\ No newline at end of file

client/src/Pages/ProfilePage.js

+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+
+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>
+            <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>
+                <Button variant="light" className="ml-3">Logout</Button>
+            </Navbar>
+
+            {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

+import React, { useState } from 'react';
+import { Button, Form, Container } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+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 (
+        <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="./homepage">
+                        <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

+client/src/Pages/user_default.png
\ No newline at end of file

client/src/Pages/user_default.svg

+client/src/Pages/user_default.svg
\ No newline at end of file

client/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
-import SingUp from './Page/SignUp';
+// import App from './App';
+import SignUpPage from './Pages/SignUpPage';
+import ProfilePage from './Pages/ProfilePage';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import LogIn from './Page/LogIn';
-import ProfilePage from './Page/ProfilePage';
+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>
-    <SignUp/>
-    <LogIn/>
-    <ProfilePage/>
-  </React.StrictMode>,
+  <Router>
+    <Switch>
+      <Route exact path="/" component={LogInPage} />
+      <Route path="/signuppage" component={SignUpPage} />
+      <Route path="/profilepage" component={ProfilePage} />
+      <Route path="/hello" component={Hello} />
+      <Route path="/homepage" component={HomePage} />
+      <Redirect path='/hello' to='/hello' />
+    </Switch>
+  </Router>,
   document.getElementById('root')
 );