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';
import Chat from '../Components/Chat';
import Menu from '../Components/Menu';
// 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 (
    <>
      <Menu />
      <Row className="mr-0">
        <Col className="list" md={5}>
          <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
            <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>

          <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;