HomePage.js

import React, { useState, useEffect } from 'react';
import { Row, Col, Modal, Button, Form } 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;
// `

const INIT_CHATR = {
    name: '',
    interest: '',
    isOpen: false
}

function Home() {
    const [show, setShow] = useState(false);
    const [show2, setShow2] = useState(false);
    const [chat, setChat] = useState(false);
    const [checkedI, setCheckedI] = useState(false);
    const [chatR, setChatR] = useState(INIT_CHATR);
    const [disabled, setDisabled] = useState(true);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    const handleChato = () => setChat(true);
    const handleChatc = () => setChat(false);
    const handleClose2 = () => setShow2(false);
    const handleShow2 = () => setShow2(true);
    // variant="pills"

    useEffect(() => {
        const isChatR = Object.values(chatR).every(el => Boolean(el))
        isChatR ? setDisabled(false) : setDisabled(true)
    }, [chatR])

    function handleChange(event){
        const {name, value} = event.target
        setChatR({...chatR, [name]:value})
        console.log(chatR)
    }

    async function handleSubmit(event){
        event.preventDefault()
        const response = await fetch('chat/makeChat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(chatR)
        })
        const data = await response.json()
        console.log(data)
        setChatR(INIT_CHATR)
    }

    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}

                    <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                        <Button variant="primary" onClick={handleShow} size="lg" block>
                            생성
                        </Button>

                        <Button variant="secondary" onClick={handleShow2} size="lg" block>
                            참가
                        </Button>
                    </div>

                    <Modal show={show} onHide={handleClose}>
                        <Modal.Header closeButton>
                            <Modal.Title>방 생성</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <Form onSubmit={handleSubmit}>
                                <Form.Group as={Row} controlId="chatName">
                                    <Form.Label column sm={4}>방 이름</Form.Label>
                                    <Col>
                                        <Form.Control name='name' type='text' value={chatR.name} onChange={handleChange} />
                                    </Col>
                                </Form.Group>
                                <Form.Group as={Row} controlId="chatInterest">
                                    <Form.Label column sm={4}>관심 분야</Form.Label>
                                    <Col>
                                        <Form.Control as="select" defaultValue="Choose..." name='interest' type='text' value={chatR.interest} onChange={handleChange}>
                                            <option>Choose...</option>
                                            <option>과학</option>
                                            <option>수학</option>
                                            <option>예술</option>
                                            <option>언어</option>
                                            <option>취미</option>
                                        </Form.Control>
                                        {/* <Form.Control type="text" /> */}
                                    </Col>
                                </Form.Group>
                                <Form.Group as={Row} controlId="chatIsOpen">
                                    <Form.Label column sm={4}>공개방</Form.Label>
                                    <Col>
                                        <Form.Check
                                            type="checkbox"
                                            checked={chatR.isOpen}
                                            name='isOpen'
                                            onChange={() => setChatR({...chatR, isOpen: !chatR.isOpen})}/>
                                    </Col>
                                </Form.Group>
                                {
                                    (chatR.isOpen)
                                        ? (<p><b>공개방</b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</p>)
                                        : (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
                                }
                                <Form.Group as={Row}>
                                    {console.log(chatR)}
                                    <Col sm={{ span: 5, offset: 4 }}>
                                        <Button type="submit" >방 생성</Button>
                                    </Col>
                                </Form.Group>
                            </Form>
                        </Modal.Body>
                    </Modal>

                    <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>
                </Col>
            </Row>
        </>
    );
}

export default Home;