임시완성 profile

client/src/Components/Chat.js

@@ -26,6 +26,10 @@ function Chat(props) {
     setChat([...chat, props.singleChat])
   }, [props.singleChat])
   
+  useEffect(() => {
+    setChat([...chat, props.recievedMsg])
+  }, [props.recievedMsg])
+
   return (
 
     <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>

client/src/Components/Menu.js

@@ -16,7 +16,6 @@ function Menu() {
       <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>
       <Link to="./login">
         <Button onClick={() => handleLogout()} variant="light" className="ml-3">Logout</Button>

client/src/Pages/HomePage.js

@@ -30,6 +30,7 @@ function Home() {
 
   const [singleChat, setSingleChat] = useState('')
   const [roomName, setRoomName] = useState('')
+  const [recievedMsg, setRecievedMsg] = useState('')
 
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
@@ -80,11 +81,19 @@ function Home() {
       roomName: roomName,
       msg: singleChat
     })
-    socket.on('broadcast', (msg) => {
+  }, [singleChat])
+
+  useEffect(() => {
+    socket.on("sendedMSG", (msg) => {
       console.log(msg)
-      setSingleChat(msg)
+      setRecievedMsg(msg)
     })
-  }, [singleChat])
+  }, [])
+  //   socket.on('broadcast', (msg) => {
+  //     console.log(msg)
+  //     setSingleChat(msg)
+  //   })
+  // }, [singleChat])
 
   return (
     <>
@@ -101,7 +110,7 @@ function Home() {
           </Tabs>
         </Col>
         <Col style={{ padding: "0" }}>
-          {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName} /> : null}
+          {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName} recievedMsg={recievedMsg} /> : null}
 
           <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
             <Button variant="primary" onClick={handleShow} size="lg" block>

client/src/Pages/ProfilePage.js

@@ -53,24 +53,21 @@ function ProfilePage() {
         e.preventDefault()
         if (changed) {
             const formData = new FormData()
+            if (user.imageUrl) {
                 formData.append('imageUrl', user.imageUrl[0])
-            formData.append('newNickname', user.nickname)
+            }
+            formData.append('newNickname', user.nickname)   //얘네는 req.body로 들어감
             try {
-                if (userId && user.imageUrl) {
+                if (userId) {
                     await axios.put(`/users/${userId}`, formData)
                     alert('저장되었습니다.')
                     window.location.reload()
                 }
-                // else{
-                //     console.log("삐빅")
-                //     const formData = new FormData()
-                //     formData.append('newNickname', user.nickname)
-                //     const response = await axios.put(`/users/${userId}`, formData)
-                // }
             } catch (error) {
                 catchErrors(error, setError)
             }
-        } else {
+        }
+        else {
             alert('변경사항이 없습니다.')
         }
     }
@@ -79,35 +76,50 @@ function ProfilePage() {
         getProfile(userId)
     }, [userId])
 
+
+    //     const [img, setImg] = useState('')
+    // function bbb(e) {
+    //     const { name } = e.target
+    //     let reader = new FileReader();
+    //     reader.onload = function (e){
+    //         console.log(e.target.result)
+    //         // setImg(e.target.result)
+    //         // setProfileimg
+    //         // console.log(user,name)
+    //         setUser({...user, [name]: e.target.result})
+    //     };
+    //     reader.readAsDataURL(e.target.files[0])
+    //  )
     return (
         <>
             <Menu />
-            <Container className='border' fluid>
-                <Row>
+            <Container>
+                <Row >
                     <Col sm={4}>
                         <Row className='justify-content-center'>
-                            {user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle /> }
+                            {user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />}
+                            {/* {user.profileimg ? <><Image id='profileimg' src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle hidden={!hidden}/> */}
+                            {/* <Image id='profileimg' src={user.profileimg} style={{ width: "300px", height: "300px" }} roundedCircle hidden={hidden}/></> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />} */}
                         </Row>
                         <Row className='ml-3 mt-3 justify-content-center'>
                             <Form className="d-flex">
                                 <Form.Group>
                                     <Form.Label>프로필 사진 변경</Form.Label>
-                                    <Form.Control type='file' name='imageUrl' onChange={handleChange} />
+                                    <Form.Control type='file' name='imageUrl' onChange={handleChange} accept='image/*' />
                                 </Form.Group>
                             </Form>
                         </Row>
-                        {/* <Row className="d-flex justify-content-center mb-3">
-                            <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>
+                        {/* 
+{img?<Image src={img}/> : <h2>아직입니다.</h2>}
+                        <Row className='ml-3 mt-3 justify-content-center'>
+                            <Form className="d-flex">
+                                <Form.Group>
+                                    <Form.Label>프로필 사진 변경</Form.Label>
+                                    <Form.Control type='file' name='profileimg' onChange={bbb} accept='image/*' />
+                                </Form.Group>
+                            </Form>
                         </Row> */}
+
                     </Col>
                     <Col sm={8}>
                         <Row className='m-5 justify-content-center'>

server/controllers/user.controller.js

@@ -2,10 +2,7 @@ import User from "../models/User.js"
 import isLength from 'validator/lib/isLength.js'
 import isEmail from 'validator/lib/isEmail.js'
 import bcrypt from "bcryptjs";
-import jwt from 'jsonwebtoken'
-import config from "../config.js"
 import multer from "multer";
-import catchErrors from "../../client/src/utils/catchErrors.js";
 
 const upload = multer({ dest: 'uploads/' })
 const profileUpload = upload.fields([
@@ -54,9 +51,14 @@ const update = async (req, res) => {
     const newNickname = req.body.newNickname
     try {
         await User.updateOne({ 'username': username }, { 'nickname': newNickname })
-        const imageUrl = req.files['imageUrl'][0]
+        let imageUrl = ''
+        if (req.files['imageUrl']) {
+            imageUrl = req.files['imageUrl'][0]
+        }
         const user = req.user
+        if (req.files['imageUrl']) {
             user.profileimg = imageUrl.filename //우리가 사용할 uesr.profileimg에다가 imageUrl의 filename을 저장
+        }
         const updatedUser = await user.save()
         res.json(updatedUser)
     } catch (error) {