홈페이지(미완성)

client/src/Components/ClosedList.js

+import React, { useState } from 'react'
+import { ListGroup } from 'react-bootstrap';
+
+function ClosedList() {
+  const [list, setList] = useState([
+    { room: '테스트 방1', memnum: 5, admin: '가영' },
+    { room: '테스트 방2', memnum: 4, admin: '수현' }]
+  );
+  return (
+    <div>
+      {list.map(list =>
+        <ListGroup>
+          <ListGroup.Item action>
+            <h2>{list.room}</h2>
+          </ListGroup.Item>
+        </ListGroup>
+      )}
+    </div>
+  )
+}
+
+export default ClosedList

client/src/Components/OpenList.js

+import React, { useState } from 'react'
+import { ListGroup } from 'react-bootstrap';
+
+function OpenList() {
+  const [list, setList] = useState([
+    { room: '테스트 방3', memnum: 7, admin: '가영2' },
+    { room: '테스트 방4', memnum: 2, admin: '수현2' }]
+  );
+  return (
+    <div>
+      {list.map(list =>
+        <ListGroup>
+          <ListGroup.Item action>
+            <h2>{list.room}</h2>
+          </ListGroup.Item>
+        </ListGroup>
+      )}
+    </div>
+  )
+}
+
+export default OpenList
\ No newline at end of file

client/src/Pages/HomePage.js

+import React, { useState } from 'react';
+import { Row, Col, Modal, Button } from 'react-bootstrap';
+import Tabs from 'react-bootstrap/Tabs';
+import Tab from 'react-bootstrap/Tab';
+import ClosedList from '../Components/ClosedList';
+import OpenList from '../Components/OpenList';
+
+function Home() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <Row className="mr-0">
+      <Col className="list" md={5}> 
+        <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
+          <Tab eventKey="closed" title="내 채팅" >
+            <ClosedList />
+          </Tab>
+          <Tab eventKey="open" title="공개방" >
+            <OpenList />
+          </Tab>
+        </Tabs>
+
+      </Col>
+      <Col style={{ padding: "0" }}>
+        <Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} >
+          생성
+        </Button>
+
+        <Modal show={show} onHide={handleClose}>
+          <Modal.Header closeButton>
+            <Modal.Title>방 생성</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>여기에 form 입력</Modal.Body>
+          <Modal.Footer>
+            <Button variant="primary" onClick={handleClose}>
+              생성
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </Col>
+    </Row>
+  );
+}
+
+export default Home;