material ui layout 반응형

반응형을 css에서 일일이 미디어쿼리로 주지않고

윗부분에서 useMediaQuery로 설정해주고,
바뀌는 이미지사이즈를 설정해준다.

const imgSizeObj = {
  pc: {
    maxWidth: 150,
    minWidth: 150,
    minHeight: 150,
    maxHeight: 300,
  },
  tablet: {
    maxWidth: 150,
    minWidth: 150,
    minHeight: 150,
    maxHeight: 300,
  },
  mobile: {
    width: 104,
    height: 104
  }
}

export default function Fourth() {
  const theme = useTheme();
  const matches800 = useMediaQuery('(min-width:800px)');
  const matches1000 = useMediaQuery('(min-width:1000)');
  const matchesBelow600 = useMediaQuery('(max-width:600px)');
  const imgKey = matches1000 ? 'pc' : matches800 ? 'tablet' : 'mobile'

필요한곳에 map을돌려서 뿌려주면서
미디어쿼리 속성을 인라인스타일로 적절히 넣어준다.

{data.map((item,index) => {
          return (
            <Grid md={3} xs={12} padding={5} container  >
              <Grid xs={5} md={12} style={{}} >
              <img src={item.imageSrc} style={imgSizeObj[imgKey]}  />
              </Grid>
              <Grid xs={7} style={{backgroundColor: 'powderblue'}}>
                <div>
                  플라잉캣에서만!
                </div>
                <Grid style={{textAlign: 'end',width: '90%'}}>
                  {item.goodsPrice}
                </Grid>
                ```