홈페이지 모달

client/src/Pages/HomePage.js

+import React, { useState } from 'react';
+import { ListGroup, Col, Row, Modal, Button, Form } from 'react-bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+// import Form from 'react-bootstrap';
+
+
+function Home() {
+    const [list, setList] = useState([
+        { room: '테스트 방1', memnum: 5, admin: '가영' },
+        { room: '테스트 방2', memnum: 4, admin: '수현' }]
+    );
+
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+
+    return (
+        <div className="container">
+            <div className="list">
+                <Col md={6}>
+                    {list.map(list =>
+                        <ListGroup>
+                            <ListGroup.Item action>
+                                <h2>{list.room}</h2>
+                                <p></p>
+                            </ListGroup.Item>
+                        </ListGroup>
+                    )}
+                </Col>
+            </div>
+            <div className="right">
+                <button variant="primary" onClick={handleShow}>
+                    생성
+                </button>
+
+                <Modal show={show} onHide={handleClose}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>방 생성</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <Form onSubmit={() => { console.log('제출') }}>
+                            <Form.Group as={Row} controlId="formChatTitle">
+                                <Form.Label column sm={4}>방 이름</Form.Label>
+                                <Col>
+                                    <Form.Control type="text" placeholder="" />
+                                </Col>
+                            </Form.Group>
+                            <Form.Group as={Row} controlId="formInterest">
+                                <Form.Label column sm={4}>관심 분야</Form.Label>
+                                <Col>
+                                    <Form.Control as="select" defaultValue="Choose...">
+                                        <option>Choose...</option>
+                                        <option>과학</option>
+                                        <option>수학</option>
+                                        <option>예술</option>
+                                        <option>언어</option>
+                                        <option>취미</option>
+                                    </Form.Control>
+                                </Col>
+                            </Form.Group>
+                            <Form.Group as={Row} controlId="formBasicCheckbox">
+                                <Form.Label column sm={4}>공개방</Form.Label>
+                                <Col>
+                                    <Form.Check type="checkbox" onClick={handleShow}/>
+                                </Col>
+                            </Form.Group>
+                            <Form.Group as={Row}>
+                                <Col sm={{ span: 5, offset: 4 }}>
+                                    <Button type="submit">방 생성</Button>
+                                </Col>
+                            </Form.Group>
+                        </Form>
+                    </Modal.Body>
+                </Modal>
+
+            </div>
+        </div>
+    );
+}
+
+export default Home;
\ No newline at end of file