올리기

client/src/Components/Chat.js

@@ -40,15 +40,6 @@ function Chat(props) {
         <Form.Control name='msg' type='text' onChange={handleChange} />
         <Button variant="primary" type="submit">전송</Button>
       </Form>
-
-      <Form>
-        <Form.Group>
-          <Form.Control type="text" />
-        </Form.Group>
-        <Button variant="primary" type="submit">
-          전송
-        </Button>
-      </Form>
     </div>
 
 

client/src/Components/Menu.js

-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Navbar, Nav, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { handleLogout } from '../utils/auth';
+import axios from 'axios'
 
 function Menu() {
-  const userName = "정연우";
+  const [username, setUsername] = useState('')
+
+  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()
+  }, [])
 
   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>
+      <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>

client/src/Pages/HomePage.js

@@ -12,12 +12,13 @@ import { io } from "socket.io-client";   //모듈 가져오기
 // const List = styled.div`
 //   background: #FFFAFA;
 // `
-const userName = "정연우";
 
 const socket = io();
 
 
 function Home() {
+  const [username, setUsername] = useState('defaultUser')
+
   const [show, setShow] = useState(false);
   const [chat, setChat] = useState(false);
 

client/src/Pages/ProfilePage.js

@@ -5,10 +5,10 @@ import { Image, Button, Container, Form, FormControl, Navbar, Nav, Row, Col, Dro
 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 userdefault from '../Images/KakaoTalk_20201230_153151693.png'
+import img1 from '../Images/img_1.png'
+import img2 from '../Images/img_2.png'
+import img3 from '../Images/img_3.jpg'
 import DropdownItem from 'react-bootstrap/esm/DropdownItem';
 
 
@@ -39,7 +39,6 @@ function ProfilePage() {
         } else {
             setHidden(true)
         }
-        console.log(document.cookie)
     }
     function handleChange(e) {
         setUser({ ...user, 'nickname': e.target.value })
@@ -94,27 +93,23 @@ function ProfilePage() {
     return (
         <div>
             <Menu />
-            <Container>
-                <Row><h1>ProfilePage</h1></Row>
-                <Row><h2>{user.username}님 환영합니다 !</h2></Row>
-            </Container>
-            <Container className="mt-5 shadow w-75">
+            <Container className='border' fluid>
                 <Row>
                     <Col sm={4}>
-                        <Row>
-                            <div className="d-flex justify-content-center mb-3" id="defaultImg">
+                        <Row className='justify-content-center'>
+                            <div className="d-flex ml-3 mt-3" id="defaultImg">
                                 <Image src={userimg} width="300px" roundedCircle />
                             </div>
                         </Row>
-                        <Row>
-                            <Form className="d-flex justify-content-center">
+                        <Row className='ml-3 mt-3 justify-content-center'>
+                            <Form className="d-flex">
                                 <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">
+                        <Row className="d-flex justify-content-center mb-3">
                             <Dropdown>
                                 <Dropdown.Toggle variant='success' id='dropdown-basic'>
                                     프로필 사진 선택
@@ -128,34 +123,35 @@ function ProfilePage() {
                         </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 className='m-5 justify-content-center'>
+                            <h2>{user.username}님의 프로필 정보</h2>
                         </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 className="m-3 justify-content-flex-start" style={{ fontWeight: "bold", fontSize: "large" }}>
+                            <Col xs={3}>이름 :</Col>
+                            <Col xs={6}>{user.username}</Col>
+                            {/* <Col sm={4}></Col> */}
                         </Row>
-                        <Row className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>
-                            <Col sm={2.5}>이메일 : </Col>
-                            <Col sm={8}>{user.email}</Col>
+                        <Row className="m-3 justify-content-flex-start" id="nickname" style={{ fontWeight: "bold", fontSize: "large" }}>
+                            <Col xs={3}>별명 :</Col>
+                            <Col xs={6} hidden={!hidden}>
+                                {user.nickname}
+                            </Col>
+                            <Col xs={6} hidden={hidden}>
+                                <Form>
+                                    <Form.Control defaultValue={user.nickname} style={{ width: "110%" }} onChange={handleChange} />
+                                </Form>
+                            </Col>
+                            <Col xs={3}>
+                                <Form className="d-flex" onSubmit={handleSubmit}>
+                                    <Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button>
+                                </Form>
+                            </Col>
                         </Row>
-                        <Row className='justify-content-center'>
+                        <Row className="m-3" style={{ fontWeight: "bold", fontSize: "large" }}>
+                            <Col xs={3}>이메일 : </Col>
+                            <Col xs={6}>{user.email}</Col>
+                        </Row>
+                        <Row className='m-3 justify-content-center'>
                             <Form>
                                 <Button variant="outline-success" size="sm" className="mr-4" onClick={handleNicksave}>저장</Button>
                                 <Link to='/'>
@@ -166,94 +162,6 @@ function ProfilePage() {
                     </Col>
                 </Row>
             </Container>
-
-
-
-
-            <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">{user.username}님 환영합니다 !</h4>
-
-                    <div className="d-flex justify-content-center mb-3" id="defaultImg">
-                        <Image src={userimg} width="300px" roundedCircle />
-                    </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>
     )
 }

server/controllers/profile.controller.js

-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/models/profile.js → server/models/Room.js

@@ -2,13 +2,22 @@ import mongoose from 'mongoose'
 
 const { String } = mongoose.Schema.Types
 
-const ProfileSchema = new mongoose.Schema({
-    defaultImg: {
+const RoomSchema = new mongoose.Schema({
+    roomName: {
         type: String,
         required: true,
     },
+    interest: {
+        type: String,
+        required: true,
+    },
+    isOpen:{
+        type: String,
+
+    },
+    
 }, {
     timestamps: true
 })
 
-export default mongoose.models.ProfileSchema || mongoose.model('profile', ProfileSchema)
\ No newline at end of file
+export default mongoose.models.ChatSchema || mongoose.model('chat', ChatSchema)
\ No newline at end of file

server/models/chat.js

 import mongoose from 'mongoose'
 
-const {String} = mongoose.Schema.Types
+const { String } = mongoose.Schema.Types
 
 const ChatSchema = new mongoose.Schema({
-    name: {
-        type: String,
+    room: {
+        type: ObjectId,
         required: true,
+        ref: 'Room',
     },
     interest: {
         type: String,
         required: true,
-        select: false
+        ref: 'User',
     },
-    isOpen: {
-        type: String,
-        required: true,
-        default: 'user',
-        enum: ['user', 'admin', 'root']
-    }
+    message: String,
 }, {
     timestamps: true
 })

server/routes/profile.routes.js

-import express from 'express'
-import profileCtrl from "../controllers/profile.controller.js";
-
-
-const router = express.Router()
-
-router.route('/profile')
-    .get(profileCtrl.getimage)
-
-    
-
-
-export default router
\ No newline at end of file

server/server.js

@@ -2,7 +2,6 @@ import express from 'express'
 import connectDb from './utils/connectDb.js'
 import userRouter from './routes/user.routes.js'
 import authRouter from './routes/auth.routes.js'
-import profileRouter from './routes/profile.routes.js'
 
 import cors from "cors";
 import bodyParser from "body-parser";
@@ -53,7 +52,6 @@ app.use(bodyParser.json());
 
 app.use(userRouter)
 app.use(authRouter)
-app.use(profileRouter)
 //userRouter로 이동
 
 app.get('/', (req, res) => {