homepage/수정중

client/src/Pages/HomePage.js

 import React, { useState } from 'react';
-import { ListGroup, Col, Row, Modal, Button, Form } from 'react-bootstrap';
+import { ListGroup, Col, Row, Modal, Button, Form, Alert } from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
-// import Form from 'react-bootstrap';
-
+import randCode from '../randCode'
+// import randomN from './RandomN';
 
 function Home() {
     const [list, setList] = useState([
@@ -15,6 +15,21 @@ function Home() {
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
 
+    const [show2, setShow2] = useState(false);
+
+    const handleClose2 = () => setShow2(false);
+    const handleShow2 = () => setShow2(true);
+
+    const [checkedI, setCheckedI] = useState(false);
+
+    const codeClose = () => setCheckedI(false);
+    const codeShow = () => setCheckedI(true);
+
+    const [showCode, setCode] = useState(false);
+
+    const handleCloseCode = () => setCode(false);
+    const handleShowCode = () => setCode(true);
+
 
     return (
         <div className="container">
@@ -35,16 +50,20 @@ function Home() {
                     생성
                 </button>
 
+                <button variant="primary" onClick={handleShow2}>
+                    참가
+                </button>
+
                 <Modal show={show} onHide={handleClose}>
                     <Modal.Header closeButton>
                         <Modal.Title>방 생성</Modal.Title>
                     </Modal.Header>
                     <Modal.Body>
-                        <Form onSubmit={() => { console.log('제출') }}>
+                        <Form>
                             <Form.Group as={Row} controlId="formChatTitle">
                                 <Form.Label column sm={4}>방 이름</Form.Label>
                                 <Col>
-                                    <Form.Control type="text" placeholder="" />
+                                    <Form.Control type="text" />
                                 </Col>
                             </Form.Group>
                             <Form.Group as={Row} controlId="formInterest">
@@ -63,20 +82,53 @@ function Home() {
                             <Form.Group as={Row} controlId="formBasicCheckbox">
                                 <Form.Label column sm={4}>공개방</Form.Label>
                                 <Col>
-                                    <Form.Check type="checkbox" onClick={handleShow}/>
+                                    <Form.Check
+                                        type="checkbox"
+                                        checked={checkedI}
+                                        onChange={() => setCheckedI(!checkedI)} />
                                 </Col>
                             </Form.Group>
+                            {
+                                (checkedI)
+                                    ? (<p><b>공개방</b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</p>)
+                                    : (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
+                            }
                             <Form.Group as={Row}>
                                 <Col sm={{ span: 5, offset: 4 }}>
-                                    <Button type="submit">방 생성</Button>
+                                    <Button type="submit" onClick={handleShowCode}>방 생성</Button>
                                 </Col>
                             </Form.Group>
                         </Form>
                     </Modal.Body>
                 </Modal>
 
+                <Alert show={showCode} variant="success" onClose={() => setCode(false)} dismissible>
+                    <Alert.Heading>생성 완료</Alert.Heading>
+                    <p>참여코드는 oooo입니다.</p>
+                </Alert>
+
+                <Modal show={show2} onHide={handleClose2}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>참여 코드로 채팅 참가</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <Form onSubmit={() => { console.log('제출') }}>
+                            <Form.Group as={Row} controlId="formCodeE">
+                                <Form.Label column sm={4}>참여 코드</Form.Label>
+                                <Col>
+                                    <Form.Control type="text" />
+                                </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>
+        </div >
     );
 }