[React MUI 5] 인스타그램 클론코딩 - PostModal 구현 | 게시물 생성 모달

결과물

 

 

1. src/components/Modal.js 를 생성 (MUI Modal)

import * as React from 'react';
import Modal from '@mui/material/Modal';
import Box from '@mui/material/Box';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '100%',
  maxWidth: '500px',
  height: '500px',
  bgcolor: 'background.paper',
  boxShadow: 24,
  paddingBottom: '2rem',
  borderRadius: '12px',
};

export default function PostModal({ open, handleClose }) {

  return (
    <div>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          {/* title */}
          
          {/* content */}
          
            {/* - description */}
            
            {/* - upload image */}
        </Box>
      </Modal>
    </div>
  );
}

 

2. Header.js 에서 Modal을 열고 닫기 위한 open 변수 추가

//......
import PostModal from './Modal';

//......
  const [user, setUser] = React.useState(true);
  const [open, setOpen] = React.useState(false);
  
  
  //......
    <AppBar position="static" color="transparent" elevation={1}>
      <Toolbar>
        <PostModal open={open} handleClose={() => setOpen(false)} />
        
        
                //......
                <IconButton onClick={() => setOpen(true)}>
                  <AddCircleOutlineIcon />
                </IconButton>

+ 버튼 클릭시 모달 오픈

 

3. 모달 타이틀 넣어주기

import Typography from '@mui/material/Typography';

//......
          {/* title */}
          <Typography
            id="modal-modal-title"
            variant="h6"
            align="center"
            fontWeight={600}
            sx={{ padding: '0.5rem', borderBottom: '1px solid #bdbdbd' }}
          >
            새 게시물 만들기
          </Typography>

 

4. 사진 추가 아이콘 및 설명 넣기

import ImageSearchIcon from '@mui/icons-material/ImageSearch';

//......

          {/* content */}
          <Box
            sx={{
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            {/* - description */}
            <ImageSearchIcon sx={{ fontSize: '4rem' }} />
            <Typography
              id="modal-modal-description"
              variant="h6"
              sx={{ marginY: '1rem' }}
            >
              사진과 동영상을 여기에 끌어다 놓으세요
            </Typography>

          </Box>

 

5. 파일 업로드 버튼 추가

import Button from '@mui/material/Button';

//......

            {/* - upload image */}
            <Button variant="contained" component="label">
              이미지 선택
              <input hidden accept="image/*" type="file" />
            </Button>

 

6. 마지막으로 src/theme.js의 primary 색상을 인스타그램의 하늘 색상으로 바꾼다.

//......

    primary: {
      main: '#0095F6'
    },

MUI theme primary 색상 변경

 

완료!

 

React MUI5 인스타그램 클론코딩 마지막 페이지 입니다.