[React MUI 5] 인스타그램 클론코딩 - Header 오른쪽 상단 네비게이션 아이콘들 넣기

결과물

 

1. Header.js 오른쪽 상단에 네비게이션 아이콘들 넣기

  - material-icons에서 Home, Send, AddCircle, Group, Favorit 아이콘을 가져옴

import HomeIcon from '@mui/icons-material/Home';
import SendIcon from '@mui/icons-material/Send';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import GroupIcon from '@mui/icons-material/Group';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';

 

  - {/* profile  */} 영역에 {/* desktop icon group */} 영역 추가

          {/* profile */}
          <Box sx={{ display: 'flex' }}>
            {/* desktop icon group */}
            <Box sx={{ marginRight: '1rem' }}>
              <IconButton>
                <HomeIcon />
              </IconButton>
              <IconButton>
                <SendIcon />
              </IconButton>
              <IconButton>
                <AddCircleOutlineIcon />
              </IconButton>
              <IconButton>
                <GroupIcon />
              </IconButton>
              <IconButton>
                <FavoriteBorderIcon />
              </IconButton>
            </Box>

            <Avatar alt="Remy Sharp" src="https://" />
          </Box>

오른쪽 상단 네비게이션 아이콘들

 

2. <SendIcon/> 에 뱃지(badge) 달기

              <IconButton>
                <Badge badgeContent={5} color="error">
                  <SendIcon />
                </Badge>
              </IconButton>

 

 

3. 모바일 크기에서 안보이게 하기

  - xs(0px)에서 display: 'none' 처리하고 md(900px) 이상부터 display: 'block' 처리

          {/* profile */}
          <Box sx={{ display: 'flex' }}>
            {/* desktop icon group */}
            <Box
              sx={{ marginRight: '1rem', display: { xs: 'none', md: 'block' } }}
            >
......