ui 색상통일

client/src/Components/Chat.js

@@ -88,8 +88,8 @@ function Chat(props) {
   const time = new Date().toLocaleTimeString()
   return (
     <>
-      <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
-        <Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px", margin: "1%" }}>
+      <Container id="chat" style={{ padding: '20px', border: "2px solid", height: "520px", margin: "1%", borderColor: "#9174ad", background: '' }}>
+        <Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#9174ad", height: "80px", margin: "1%" }}>
           <Col md="auto">
             <Button variant="light" onClick={handleClick} >{`<`}</Button>
           </Col>
@@ -98,6 +98,7 @@ function Chat(props) {
             <Row > {props.roomCode} </Row>
           </Col>
         </Row>
+        <div className="m-2" style={{ overflow: 'auto', padding: '20px', margin: "1%", height: "380px" }}>
           <p>{props.newUser}님이 입장하셨습니다.</p>
           {chat.map((value, index) => {
             if (!(value == '')) {
@@ -110,7 +111,7 @@ function Chat(props) {
                     <Col xs={8}>
                       <Row><strong>{sender[index]}</strong></Row>
                       <Row className='d-flex flex-wrap-nowrap'>
-                      <Row className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Row>
+                        <Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Row>
                         <Col className='ml-1'>{time}</Col>
                       </Row>
                     </Col>
@@ -121,7 +122,7 @@ function Chat(props) {
                   <Row key={index} className='m-1 justify-content-end'>
                     <Row className='d-flex flex-wrap-nowrap' >
                       <Col className='mr-1'>{time}</Col>
-                    <Row className='mr-2' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
+                      <Row className='mr-2' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
                     </Row>
                   </Row>
                 )
@@ -131,19 +132,15 @@ function Chat(props) {
             }
           })
           }
-
+        </div>
       </Container >
-      <Form onSubmit={sendMsgCH} fluid>
-        <Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'>
-          <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 onSubmit={sendMsgCH}>
+        <Form.Group className="d-flex justify-content-center flex-wrap-nowrap mt-2 ml-4" style={{ width: '95%' }}>
+          <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ borderColor: "#9174ad" }} />
+          <Button className="ml-1" type="submit" disabled={disabled} style={{ width: '25%', backgroundColor: "#9174ad", borderColor: "#9174ad" }}>전송</Button>
         </Form.Group>
       </Form>
     </>
-
-
   );
 }
 

client/src/Components/Menu.js

 import React from 'react'
-import { Navbar, Nav, Button } from 'react-bootstrap';
+import { Navbar, Nav, Button, Row, Col } from 'react-bootstrap';
 import { handleLogout } from '../utils/auth';
 
 
@@ -8,22 +8,54 @@ function Menu() {
   const name = sessionStorage.getItem('name');
 
   return (
-    <Navbar bg="dark" variant="dark">
-      <Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
+
+    // <Navbar bg="dark" variant="dark" expand="lg">
+    //   <Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
+    //   <Navbar.Toggle aria-controls="basic-navbar-nav" />
+    //   <Navbar.Collapse id="basic-navbar-nav">
+    //     {name ?
+    //       <>
+    //         <Nav.Item className="mt-2" style={{ color: 'white' }}>{name}님 환영합니다</Nav.Item>
+    //         <Nav.Item className="ml-auto">
+    //           <Nav.Link href="/profile" style={{ color: 'white' }}>Profile</Nav.Link>
+    //         </Nav.Item>
+    //         <Nav.Item>
+    //           <Nav.Link onClick={() => handleLogout()} href="login" style={{ color: 'white' }}>Logout</Nav.Link>
+    //         </Nav.Item>
+    //       </>
+    //       : <>
+    //         <Nav.Item className="ml-auto">
+    //           <Nav.Link href='/login' style={{ color: 'white' }}>로그인</Nav.Link>
+    //         </Nav.Item>
+    //         <Nav.Item>
+    //           <Nav.Link href='/signup' style={{ color: 'white' }}>회원가입</Nav.Link>
+    //         </Nav.Item>
+    //       </>}
+    //   </Navbar.Collapse>
+    // </Navbar>
+    // style={{ borderColor: "#BDBDBD" }}
+    
+    <Navbar style={{ backgroundColor: "#61477a" }} variant="dark">
+      <div className="container-fluid">
+        <Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
         {name ?
           <>
-          <div className='ml-1 mr-2' style={{ color: 'white' }}>{name}님 환영합니다</div>
-          <Nav className="mr-auto">
+            <Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}>
+              <Nav.Item className="mt-2 mr-4">{name}님 환영합니다</Nav.Item>
               <Nav.Link href="/profile">Profile</Nav.Link>
+              <Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>
             </Nav>
-          <Button className="ml-auto" onClick={() => handleLogout()} variant="light">Logout</Button>
           </>
-        : <Nav className="ml-auto">
-          <Nav.Link href='/login'>로그인</Nav.Link>
-          <Nav.Link href='/signup'>회원가입</Nav.Link>
-        </Nav>}
+          : <>
+            <Nav className="nav navbar-nav">
+              <Nav.Link href="/login">Login</Nav.Link>
+              <Nav.Link href="/signup">Signup</Nav.Link>
+            </Nav>
+          </>}
+      </div>
     </Navbar>
   )
 }
 
+
 export default Menu

client/src/Pages/HomePage.js

@@ -119,6 +119,7 @@ function Home() {
   return (
     <>
       <Menu />
+      {userName ? <>
         <Row className="mr-0">
           <Col className="list" md={5}>
             <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
@@ -130,13 +131,13 @@ function Home() {
               </Tab>
             </Tabs>
           </Col>
-        <Col style={{ padding: "0" }}>
+          <Col className="mr-3">
             <>
               {(show || chat) ?
                 null
                 : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
-                <Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
-                <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
+                  <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 ?
@@ -151,18 +152,21 @@ function Home() {
                       <h5>▷ 참여인원 : {room.member.length}</h5>
                       <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
                       <Row className='justify-content-center'>
-                      <Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
-                      <Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
+                        <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>
                 </div>
                 : null}
             </>
-        </Col>
-      </Row>
             <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
             <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
+          </Col>
+        </Row>
+      </> : window.location.href = '/login'}
     </>
   );
 }

client/src/Pages/LogInPage.js

@@ -91,11 +91,12 @@ function LogIn() {
                         <Button
                             disabled={disabled || loading}
                             type="submit"
-                            variant="outline-success"
+                            variant="outline"
                             size="lg"
                             className="mr-4"
+                            style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white', font: 'dark' }}
                             block>
-                            {loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' />} {' '} 로그인
+                            {loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' style={{ color: "#b49dc9" }} />} {' '} 로그인
                                 </Button>
                         {error && <Alert variant='danger'>
                             {error}

client/src/Pages/ProfilePage.js

@@ -113,7 +113,7 @@ function ProfilePage() {
                             </Col>
                             <Col xs={3}>
                                 <Form className="d-flex" onSubmit={handleSubmitHidVis}>
-                                    <Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button>
+                                    <Button className="ml-3 d-flex justify-content-end" variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white' }} size="sm" type='submit'>수정</Button>
                                 </Form>
                             </Col>
                         </Row>
@@ -123,9 +123,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'>저장</Button>
+                                <Button variant="outline-success" 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" >홈 화면으로</Button>
+                                    <Button variant="outline-success" size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
                                 </Link>
                             </Form>
                         </Row>

client/src/Pages/SignUpPage.js

 import React, { useState, useEffect } from 'react';
 import axios from 'axios'
-import { Button, Form, Container, Alert, Navbar } from 'react-bootstrap';
+import { Button, Form, Container, Alert, Spinner, Navbar } from 'react-bootstrap';
 import catchErrors from '../utils/catchErrors';
 import { Redirect } from 'react-router-dom';
 import Menu from '../Components/Menu';
@@ -18,6 +18,7 @@ function SingUp() {
     const [error, setError] = useState('')
     const [disabled, setDisabled] = useState(true)
     const [success, setSuccess] = useState(false)    
+    const [loading, setLoading] = useState(false)
 
     useEffect(() => {
         const isUser = Object.values(user).every(el => Boolean(el))
@@ -43,11 +44,14 @@ function SingUp() {
         // console.log(user)
 
         try {
+            setLoading(true)
             setError('')
             await axios.post('/users/signup', user)
             setSuccess(true)
         } catch (error) {
             catchErrors(error, setError)
+        } finally {
+            setLoading(false)
         }
     }
 
@@ -127,10 +131,12 @@ function SingUp() {
                         <Button
                             disabled={disabled}
                             type='submit'
-                            variant="outline-success"
+                            variant="outline"
                             size="lg"
                             className="mr-4"
-                            block>가입</Button>
+                            style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white', font: 'dark' }}
+                            block>
+                            {loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' style={{ color: "#b49dc9" }} />}가입</Button>
                         {error && <Alert variant='danger'>
                             {error}
                         </Alert>}

client/src/utils/auth.js

@@ -10,7 +10,7 @@ export async function handleLogout() {
     sessionStorage.clear();
     await axios.get('/auth/logout')
     //login페이지로 이동
-    window.location.href='/login'
+    // window.location.href='/login'
 }
 
 export function isAuthenticated() {

server/models/Room.js

@@ -25,7 +25,7 @@ const RoomSchema = new mongoose.Schema({
     member: {
         type: Array,
         required: true,
-    }
+    },
 }, {
     timestamps: true
 })