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

client/src/Components/Chat.js

+import axios from 'axios';
 import React, { useState, useEffect } from 'react';
-import { Form, Button, Row } from 'react-bootstrap';
+import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
+import { isAuthenticated } from '../utils/auth';
+import catchErrors from '../utils/catchErrors';
 
 
 function Chat(props) {
@@ -11,6 +14,8 @@ function Chat(props) {
   function handleChange(e) {
     e.preventDefault()
     setInner(e.target.value)
+    console.log(e.target.value)
+    setDisabled(false)
   }
 
   function sendMsgCH(e) {
@@ -18,40 +23,92 @@ function Chat(props) {
     props.setSingleChat(inner)
     props.sendMsg(e)
     setInner('')
+    setDisabled(true)
+    console.log(chat)
   }
+  useEffect(() => {
+    getProfile(userId)
+  }, [userId])
 
   useEffect(() => {
     setChat([...chat, props.singleChat])
+    console.log('UseEffect singlechat', chat)
+    // check()
   }, [props.singleChat])
-  
+
   useEffect(() => {
     setChat([...chat, props.recievedMsg])
+    console.log('UseEffect recievechat', chat)
   }, [props.recievedMsg])
 
-  return (
 
-    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
+  // function check() {
+  //   // if (chat[chat.length-1].user ===chat[chat.length-2].user){  //마지막보낸거랑 그 전꺼랑 보낸사람이 같은지 비교
+  //   if (chat.length === 2) {
+  //     setHidden(false)
+  //   } else {
+  //     setHidden(true)
+  //   }
+  //   console.log(hidden)
+  // }
+  const time = new Date().toLocaleTimeString()
+  return (
+    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
       <h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2>
-      {      chat.map((value, index) => {
-        if (!(value=='')) {
-          // console.log(`value=${value}=`)
-          return <Row key={index} className='ml-3'>
-            {defaultname}님이 보낸 메세지 : {value}
-          </Row>
+      {/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */}
+      {chat.map((value, index) => {
+        if (!(value == '')) {
+          return (
+            <Row key={index} className='m-1 ml-3' >
+              <Col xs={2}>
+                {user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "50px", height: "50px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "50px", height: "50px" }} roundedCircle />}
+              </Col>
+              <Col xs={8}>
+                <Row><strong>{user.nickname}의 {index}</strong></Row>
+                <Row className='d-flex flex-wrap-nowrap'>
+                  <Col className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Col>
+                  <Col className='ml-4'>{new Date().toLocaleTimeString()}</Col>
+                </Row>
+              </Col>
+            </Row>
+          )
+        } else {
+          return null
+        }
+      })
+      }
+      {/* 내가 보낸 메세지 띄우기 */}
+      {chat.map((value, index) => {
+        if (!(value == '')) {
+          return (
+            <Row key={index} className='m-1 mr-4 justify-content-end'>
+              <div className='d-flex flex-wrap-nowrap' >
+                <Row className='mr-4'>{time}</Row>
+                <Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
+              </div>
+            </Row>
+          )
         } else {
           return null
         }
-      })}
+      })
+      }
+
+
+
+
+
       <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
       <Form onSubmit={sendMsgCH}>
-        <Form.Group>
-          <Form.Control name='chat' type="text" value={inner} onChange={handleChange} />
+        <Form.Group className='d-flex flex-wrap-nowrap justify-content-center ml-2 mr-2'>
+          <Form.Control className='border border-warning' name='chat' type="text" value={inner} onChange={handleChange} style={{ width: '85%' }} />
+          <Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}>
+            전송
+          </Button>
         </Form.Group>
-        <Button variant="primary" type="submit">
-          전송
-        </Button>
+
       </Form>
-    </div>
+    </div >
 
 
   );

client/src/Pages/ProfilePage.js

@@ -84,9 +84,7 @@ function ProfilePage() {
                     <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 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>
                         <Row className='ml-3 mt-3 justify-content-center'>
                             <Form className="d-flex">
                                 <Form.Group>
@@ -95,17 +93,6 @@ function ProfilePage() {
                                 </Form.Group>
                             </Form>
                         </Row>
-                        {/* 
-{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'>