[MUI] Drawer Form

useState 를 사용하여 Drawer 의 열림 / 닫힘 상태를 관리하고 그에 따른 클릭 이벤트에 대한 처리를 해주어야 한다.

아래 코드는 이를 구현한 예시

import React, { useState } from 'react';
import { IconButton, Drawer, Box, Button } from '@mui/material';
import { FcSmartphoneTablet } from 'react-icons/fc';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';

const DevicePage = () => {
    const [isDrawerOpen, setDrawerOpen] = useState(false);

    // Drawer Button Text 설정
    const buttonText = isDrawerOpen ? <ArrowForwardIcon /> : '전체화면으로 보기';

    // Button 클릭 시 Drawer 열림/닫힘 상태를 토글하는 함수
    const toggleDrawer = () => {
        setDrawerOpen(!isDrawerOpen);
    };

    return (
        <div>
            <IconButton onClick={toggleDrawer}>
                <FcSmartphoneTablet size="24" onClick={() => console.log('devicePage btn Click')} />
            </IconButton>

            <Drawer
                anchor="right"
                open={isDrawerOpen}
                onClose={() => setDrawerOpen(false)}
            >
                <div role="tab">
                    <Box sx={{ p: 2, pt: 10, backgroundColor: '#FAFBFC' }}>
                        <Box sx={{ w: 1, m: 2, display: 'flex', float: 'right' }}>
                            <Button onClick={() => setDrawerOpen(false)} size="large" color="error" variant="outlined">Close Drawer</Button>
                        </Box>
                        <br />
                        <Device />
                    </Box>
                </div>
            </Drawer>
        </div>
    );
};

export default DevicePage;