ThemeProvider 으로 반응형 작업

[aajy]

목적

전체 컴포넌트에서 반응형 테마에 관련된 변수를 재사용한다.

내용

• 적용 순서

  // themes.js
  export const theme = {
  colors: {
  primary: '#333',
  secondary: '#555'
  },
  breakpoints: {
  mobile: '320px',
  tablet: '768px',
  desktop: '1024px'
  }
  };

  
  // App.js
  import { ThemeProvider } from 'styled-components';
  import { theme } from './themes';

function App() { return (

); }

// Component.js import styled from 'styled-components';

const Component= styled.div @media (max-width: ${props => props.theme.breakpoints.tablet}) { ... } ;

## 참고사항

[Jangwoohyeok123]

적용이 필요합니다. 다음주 작업에 포함시켜야할듯