Commit d05bb4f0 authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

homepage/수정중

parent d917453a
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 >
);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment