홈페이지(탭 해야함)

client/src/Components/Chat.js

+import React from 'react';
+import { Form, Button } from 'react-bootstrap';
+
+
+function Chat(props) {
+  return (
+    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
+      <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
+      <Form>
+        <Form.Group>
+          <Form.Control type="text" />
+        </Form.Group>
+        <Button variant="primary" type="submit">
+          전송
+        </Button>
+      </Form>
+    </div>
+
+
+  );
+}
+
+export default Chat;
\ No newline at end of file

client/src/Components/ClosedList.js

@@ -8,8 +8,8 @@ function ClosedList() {
   );
   return (
     <div>
-      {list.map(list =>
-        <ListGroup>
+      {list.map((list, index) =>
+        <ListGroup key={index}>
           <ListGroup.Item action>
             <h2>{list.room}</h2>
           </ListGroup.Item>

client/src/Components/OpenList.js

@@ -8,8 +8,8 @@ function OpenList() {
   );
   return (
     <div>
-      {list.map(list =>
-        <ListGroup>
+      {list.map((list, index) =>
+        <ListGroup key={index}>
           <ListGroup.Item action>
             <h2>{list.room}</h2>
           </ListGroup.Item>

client/src/Pages/HomePage.js

@@ -4,27 +4,38 @@ import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import ClosedList from '../Components/ClosedList';
 import OpenList from '../Components/OpenList';
+import Chat from '../Components/Chat';
+// import styled from 'styled-components';
+
+// const List = styled.div`
+//   background: #FFFAFA;
+// `
 
 function Home() {
   const [show, setShow] = useState(false);
+  const [chat, setChat] = useState(false);
 
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
+  const handleChato = () => setChat(true);
+  const handleChatc = () => setChat(false);
+  // variant="pills"
 
   return (
     <Row className="mr-0">
-      <Col className="list" md={5}> 
+      <Col className="list" md={5}>
         <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
-          <Tab eventKey="closed" title="내 채팅" >
+          <Tab eventKey="closed" title="내 채팅" onClick = {handleChato} >
             <ClosedList />
           </Tab>
           <Tab eventKey="open" title="공개방" >
             <OpenList />
           </Tab>
         </Tabs>
-
       </Col>
       <Col style={{ padding: "0" }}>
+        {chat ? <Chat handleChatc={handleChatc} /> : null}
+
         <Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} >
           생성
         </Button>