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

client/package.json

@@ -12,6 +12,7 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
@@ -37,5 +38,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:3030"
 }

client/src/Components/Menu.js

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

@@ -5,6 +5,7 @@ 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';
 
 // const List = styled.div`
@@ -13,6 +14,7 @@ import Chat from '../Components/Chat';
 const userName = "정연우";
 
 
+
 function Home() {
   const [show, setShow] = useState(false);
   const [chat, setChat] = useState(false);
@@ -25,20 +27,7 @@ function Home() {
 
   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>
+      <Menu />
       <Row className="mr-0">
         <Col className="list" md={5}>
           <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">

client/src/Pages/LogInPage.js

+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

 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 './user_default.svg'
+import userdefault from './KakaoTalk_20201230_153151693.png'
 
 
 const userName = "정연우";
@@ -89,16 +89,7 @@ function ProfilePage() {
 
     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>
+            <Menu />
 
             {tohome ? <Redirect to='/homepage' /> : ''}
             <Container className="d-flex justify-content-center">

client/src/Pages/SignUpPage.js

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

@@ -2,27 +2,30 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
-import { BrowserRouter as Router, Route, Redirect, Switch, BrowserRouter } from 'react-router-dom';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+// 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 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(
   <Router>
     <Switch>
-      <Route exact path="/" component={App} />
+      <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="/homepage" component={HomePage} />
-      <Route path="/profilepage" component={ProfilePage} />
-      <Redirect path='/hello' to='/hello'/>
+      <Route path="/home" component={HomePage} />
+      <Redirect path='/hello' to='/hello' />
     </Switch>
   </Router>,
-
-  // <React.StrictMode>
-  //   <App />
-  // </React.StrictMode>,
   document.getElementById('root')
 );
 

server/config.js

+const config = {
+    env: process.env.NODE_ENV || 'development',
+    port: process.env.PORT || 3030,
+    jwtSecret: process.env.JWT_SECRET || 'My_Secret_Key',
+    mongoDbUri: process.env.MONGODB_URI || 'mongodb://localhost/messenger'
+}
+
+export default config
\ No newline at end of file

server/controllers/user.controller.js

+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

+//주고받는 형식을 정의함.
+
+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,
+        unique: true,
+        //unique: 같은 email을 두번넣으면 error발생함
+    },
+    password: {
+        type: String,
+        required: true,
+        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)
+//user라는 이름이 있으면 앞을 return하고 없으면 뒤를 실행함
\ No newline at end of file

server/routes/user.routes.js

+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

server/server.js

 import express from 'express'
+import connectDb from './utils/connectDb.js'
+import userRouter from './routes/user.routes.js'
 
-const app = express()  //서버라 생각하면됨
+connectDb()
 
-// app.use(express.static('../client/build'))
+const app = express()
 
+app.use(express.json())
+//이부분을 body 파싱함
+//express가 req.body라는곳을 자동으로만들어서 json형식으로 보낸것을 객체형식으로 넣음
+//이부분 다음부터는 req.body라는 부분을 실행할 수 있음
 
-//메서드 사용하는 것
-app.get('/', (req, res) => {    //루트 경로로 오는 애들 담당하겠다.
-    res.send('Hello')
-})
-app.get('/', (req, res) => {    //루트 경로로 오는 애들 담당하겠다.
-    res.send('Hoome paffSD')
-})
+app.use(userRouter)
+//userRouter로 이동
 
-//카테고리 put으로 해놓고 http://localhost:3001/signin
-app.put('/signin', (req, res) => {
-    res.send('Sign in')
+app.get('/', (req, res) => {
+    res.send('Hello World. 안녕하세요')
 })
 
-app.listen(3001, () => {
-    console.log('Server is listening on port 3001')
+app.listen(3030, () => {
+    console.log('Listening on port 3030')
 })

server/utils/connectDb.js

+import mongoose from 'mongoose'
+import config from '../config.js'
+
+const connection = {}
+
+async function connectDb() {
+    if (connection.isConnected) {
+        return
+    }
+
+    const db = await mongoose.connect(config.mongoDbUri, {
+        useNewUrlParser: true,
+        useUnifiedTopology: true,
+        useFindAndModify: false,
+        useCreateIndex: true
+    })
+
+    connection.isConnected = db.connections[0].readyState
+}
+
+export default connectDb
\ No newline at end of file