typescript-todo : 컴파일 설정 & 스타일링 설정

1. .prettierrc 규칙 설정

{
    "singleQuote": true
  }

2. tsconfig.json : 타입스크립트 컴파일 설정

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

3. /src/styles/globalStyles.ts : 전역 스타일 생성

// 전역적인 스타일 설정
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  #root, body, html {
    //
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 62.5%;
  /*background-color: {theme.dark.background};*/

  }
  * {
  font-family: "Roboto",sans-serif;
    box-sizing: border-box;

    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
    &:hover::-webkit-scrollbar-thumb {
      border-radius: 18px;
    }
  }
  body{

      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  a{
    margin:0;
    padding:0;
    color:inherit;
    text-decoration: none;
    cursor:pointer;
  }
  input-security, button{
      background-color: transparent;
      border:none;
      outline:none;
  }
 a:hover, button:hover {
    cursor: pointer;
  }
  h1,h2,h3,h4,h5,h6{
      font-family: "Maven Pro", sans-serif;
  }
  img{
  display: block;
    width:100%;
    height:100%;
  }
  ol,ul,li{
      list-style:none;
  }
`;

export default GlobalStyle;

4. /src/styles/theme.ts : theme 생성에 필요한 스타일 생성

export const font = {
  weight: {
    bold: '700',
    medium: '600',
    reguler: '400',
    light: '200',
  },
  size: {
    large: '24px',
    regular: '18px',
    small: '14px',
  },
};
export const dark = {
  background: '#2b2a2a',
  common: {
    black: '#000000',
    white: '#ffffff',
    yellow: '#FFC93F',
    grey: '#414142',
  },
  primary: {
    grey: '#b8b8b8',
  },
  secondary: {
    main: '#709fb0',
    contrastText: '#ffffff',
  },
};

export const light = {
  background: '#b8b8b8',
  common: {
    black: '#ffffff',
    white: '#0F1419',
    yellow: '#1D9BF0',
    grey: '#71767B',
  },
  primary: {
    grey: '#b8b8b8',
  },
  secondary: {
    main: '#1D9BF01A',
    contrastText: '#ffffff',
  },
};

export const borderRadius = '15px';

5. /src/constants/deviceInfo.ts : 기기별 breakPoint 지정

const deviceQuery = {
    mobile: "(max-width:767px)",
    tablet: "(min-width:768px) and (max-width: 1023px)",
    desktop: "(min-width:1024px)",
  };  


export default deviceQuery;

6. /src/styles/mediaQuery.tsx : 기기 타입을 인자로 전달하면 상수로 지정한 breakPoint 바탕으로 CSS 미디어쿼리 작성하는 applyMediaQuery 함수

import  deviceQuery  from "../constants/deviceInfo";

const { mobile, tablet, desktop } = deviceQuery;

const deviceMediaQuery = {
  mobile: `screen and ${mobile}`,
  tablet: `screen and ${tablet}`,
  desktop: `screen and ${desktop}`,
};

type deviceType = "mobile" | "tablet" | "desktop";

const applyMediaQuery = (device: deviceType) =>
  `@media ${deviceMediaQuery[device]}`;



export default applyMediaQuery;