Style: 모드에 따른 스타일 적용

[choigirang]

• Mui 사용 시 모드에 따른 스타일을 적용함에 있어 theme.palette에 대한 설정을 나누어줘야 하는 게 가독성이 너무 떨어짐

const Header = MuiStyled('div')<HeaderScrollState>(({ theme, $scroll }) => ({
  display: 'flex',
  position: 'fixed',
  top: 0,
  justifyContent: 'space-between',
  alignItems: 'center',
  width: '100%',
  height: '100px',
  padding: '0 calc((100vw - 1280px) / 2)',
  backgroundColor: $scroll
    ? 'transparent'
    : theme.palette.mode === 'dark'
      ? theme.palette.secondary.dark
      : theme.palette.secondary.main,
  color: theme.palette.mode === 'dark' ? 'white' : 'white',
  boxSizing: 'border-box',
  transition: 'all 1s',
  zIndex: 1,

  '.visited': {
    fontWeight: '500',
    color: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light,
  },
}));