0129 머지

client/src/Components/Chat.js

@@ -128,7 +128,7 @@ function Chat(props) {
   return (
     <div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "90vh", position: "relative" }}>
       <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
-        <a  href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
+        <a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
         <div style={{ justifyContent: "center" }}>
           <p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
           <p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
@@ -147,31 +147,31 @@ function Chat(props) {
           if (!(value.msg === '')) {
             if (value.sender === "system") {
               return (
-                <Row style={{ background: "#F5F5F5", border:"none" }}>
+                <Row style={{ background: "#F5F5F5", border: "none", justifyContent: "center" }}>
                   {value.msg}
                 </Row>
               )
             } else if (!(value.sender === user.nickname)) {
               return (
-                <Row key={index} className='m-1' >
-                  <Col xs={2}>
-                    <Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
+                <Row key={index} className='d-flex flex-wrap-nowrap mt-2' style={{ width: "95%", maxWidth: '95%' }}>
+                  <Col xs="auto">
+                    <Image src={value.img && `/images/${value.img}`} style={{ width: "55px", height: "55px" }} roundedCircle />
                   </Col>
-                  <Col xs={8}>
+                  <Col className="ml-2">
                     <Row><strong>{value.sender}</strong></Row>
-                    <Row className='d-flex flex-wrap-nowrap'>
-                      <Row className='border' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row>
-                      <Col className='ml-1'>{value.time}</Col>
+                    <Row xs="auto" className='d-flex flex-wrap-nowrap'>
+                      <Row style={{ width: 'max-content', maxWidth: '80%', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row>
+                      <Col className="ml-1">{value.time}</Col>
                     </Row>
                   </Col>
                 </Row>
               )
             } else {
               return ( //내가 보낸 메시지
-                <Row key={index} className='m-1 justify-content-end'>
+                <Row key={index} className='mt-2 justify-content-end' style={{ width: "100%" }}>
                   <Row className='d-flex flex-wrap-nowrap' >
-                    <Col className='mr-1'>{value.time}</Col>
-                    <Row className='mr-2' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: 'px', fontSize: 'x-large' }}>{value.msg}</Row>
+                    <Col xs="auto" className="ml-3">{value.time}</Col>
+                    <Col className='mr-1' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Col>
                   </Row>
                 </Row>
               )
@@ -188,7 +188,7 @@ function Chat(props) {
             <Form.Group style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
               <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ width: "80%", height: "90%", borderColor: "#FFFFFF" }} />
               <Button type="submit" disabled={disabled} style={{ justifyContent: "center", width: "10%", height: "90%", borderRadius: "20px", backgroundColor: "#C1C1C1", borderColor: "#FFFFFF" }}>
-                <FiSend size="16px" color="FAFAFA" />
+                <FiSend size="16px" color="#FAFAFA" />
               </Button>
             </Form.Group>
           </Form>

client/src/Components/OpenList.js

@@ -7,13 +7,9 @@ function OpenList(props) {
     if (props.roomCode){
       props.closeChatRoom(props.roomCode)
     }
-    
-    console.log('e확인', e.target)
     const roomCode = e.target.name
-    // props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
     props.openListroom(roomCode)
     props.setRoomCode(roomCode)
-    // props.clearChat()
   }
 
   return (

client/src/Components/RoomMake.js

@@ -28,7 +28,6 @@ function RoomMake(props) {
             const Id = res.data.roomId
             alert(`방암호는 ${Id}입니다`)
             props.handleCloseModal()
-            props.handleChato()
             setRoom(INIT_ROOM)
         } catch (error) {
             catchErrors(error, setError)
@@ -62,7 +61,6 @@ function RoomMake(props) {
                                 <option>언어</option>
                                 <option>취미</option>
                             </Form.Control>
-                            {/* <Form.Control type="text" /> */}
                         </Col>
                     </Form.Group>
                     <Form.Group as={Row} controlId="chatIsOpen">

client/src/Pages/HomePage.js

@@ -54,7 +54,12 @@ function Home() {
   const [recievedTime, setRecievedTime] = useState('')
   const [leaveInfo, setLeaveInfo] = useState([{ roomName: "", leaveTime: "" }])
 
-  const handleCloseModal = () => setShowModal(false);
+  const handleCloseModal = () => {
+    setShowModal(false);
+    getClosedList()
+    getOpenList()
+
+  }
   const handleShowModal = () => setShowModal(true);
   const handleCloseEnter = () => setShowEnter(false);
   const handleShowEnter = () => setShowEnter(true);
@@ -67,7 +72,9 @@ function Home() {
   async function enterChatRoom(rCode) {    //방 입장하기
     socket.emit('joinRoom', rCode)
     socket.emit('newUser', { rmIf: rCode, userInfo: userName })
+    setShow(true)
     console.log(`joinRoom : ${rCode} 입장`)
+    console.log('show:', show)
     //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
   }
 
@@ -81,7 +88,6 @@ function Home() {
     const userNick = response.data.nickname;
     await axios.put('/room/deleteMem', { userId: userId, roomId: roomId })
     setSysmsg(`${userNick}님이 나갔습니다.`)
-    console.log(`${roomId}방 ${userId} 탈퇴`)
     setRoomCode("")
   }
 
@@ -93,19 +99,16 @@ function Home() {
 
   async function getOpenList() {
     let res = await axios.get('/room/openlist')
-    console.log('getOpenlist', res.data)
     setOpenlist(res.data)
   }
 
-  //오픈채팅방에서 참가하기
   async function openListroom(roomId) {
-    console.log(roomId)
     const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
     setRoom(roomInf.data[0])
-    setOpen(true)
     setShow(false)
+    setOpen(true)
   }
-
+  //오픈채팅방에서 참가하기
   async function attendListRoom() {
     const roomId = room.roomId
     const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
@@ -114,6 +117,7 @@ function Home() {
     if (tf.data) {
       alert('참가되었습니다.')
       setSysmsg(`${userNick}님이 들어왔습니다.`)
+      getClosedList()
     } else {
       alert('이미 참가된 방입니다.')
     }
@@ -186,34 +190,30 @@ function Home() {
           </Sdiv>
         </Col>
         <Col style={{ padding: "5px", marginLeft: "15px" }}>
-          <>
-            {(show || chat) ?
-              null
+          {show ? <>
+            {chat ? <Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} />
               : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                 <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
                 <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
-              </div>
-            }
-            {chat ?
-              <Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} />
-              : null}
-            {(open && !chat) ?
-              <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
-                <div className="d-flex justify-content-center">
-                  <div className="mt-5 p-5 shadow w-75">
-                    <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2>
-                    <h5>▷ 관심분야 : {room.interest}</h5>
-                    <h5>▷ 참여인원 : {room.member.length}</h5>
-                    <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
-                    <Row className='justify-content-center'>
-                      <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
-                      <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
-                    </Row>
-                  </div>
+              </div>} </>
+            : <> {open ? 
+            <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
+              <div className="d-flex justify-content-center">
+                <div className="mt-5 p-5 mr-2" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', position: "relative" }}>
+                  <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2>
+                  <h5>▷ 관심분야 : {room.interest}</h5>
+                  <h5>▷ 참여인원 : {room.member.length}</h5>
+                  <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
+                  <Row className='justify-content-center'>
+                    <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
+                    <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
+                  </Row>
                 </div>
               </div>
-              : null}
-          </>
+            </div> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
+                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
+                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
+              </div>} </>}
         </Col>
       </Row>
       <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />

client/src/Pages/LogInPage.js

@@ -38,8 +38,6 @@ function LogIn() {
             setSucces(true)
         } catch (error) {
             catchErrors(error, setError)
-            //setError(error.response.data)
-            //error객체가 들어감. 
         } finally {
             setLoading(false)
         }

client/src/Pages/ProfilePage.js

@@ -124,9 +124,9 @@ function ProfilePage() {
                         </Row>
                         <Row className='m-3 justify-content-center'>
                             <Form onSubmit={handleSubmit}>
-                                <Button variant="outline-success" size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button>
+                                <Button size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button>
                                 <Link to='/'>
-                                    <Button variant="outline-success" size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
+                                    <Button size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
                                 </Link>
                             </Form>
                         </Row>