[React MUI 5] 인스타그램 클론코딩 - Feed Layout 구성

결과물

 

 

 

구현

1. src/components 폴더 아래에 Feed.js, Stories.js, MiniProfile.js 추가

import Box from '@mui/material/Box';
import MiniProfile from './MiniProfile';
import Stories from './Stories';

function Feed() {
  return (
    <Boxcomponent="main">
      <Box component="section" sx={{ bgcolor: 'red' }}>
        <Stories />
        {/* posts */}
      </Box>

      <Box
        component="section"
        sx={{ bgcolor: 'gray' }}
      >
        <MiniProfile />
        {/* sugestions */}
      </Box>
    </Box>
  );
}
export default Feed;

 

 

 

2. Feed.js의 main 컴포넌트에 display: grid 및 grid-template-columns 설정

function Feed() {
  return (
    <Box
      component="main"
      sx={{
        display: 'grid',
        gridTemplateColumns: {
          xs: 'repeat(1, 1fr)',
          sm: 'repeat(2, 1fr)',
          md: 'repeat(3, 1fr)',
        },
        maxWidth: 'lg',
        marginX: 'auto',
      }}
    >
......
    </Box>
  )
}

 

 

 

3. 왼쪽 Stories가 포함된 section은 2칸을 사용하고, 오른쪽 MiniProfile이 포함된 section은 1칸을 사용

      <Box component="section" sx={{ gridColumn: '1 / 3', bgcolor: 'red' }}>
        <Stories />
        {/* posts */}
      </Box>

      <Box component="section" sx={{ gridColumn: '3', bgcolor: 'gray' }}>
        <MiniProfile />
        {/* sugestions */}
      </Box>

 

 

4. md(900px)이상 일 때만 오른쪽 section을 보이게 처리

      <Box
        component="section"
        sx={{
          display: { xs: 'none', md: 'block' },
          gridColumn: '3',
          bgcolor: 'gray',
        }}
      >
        <MiniProfile />
        {/* sugestions */}
      </Box>