스타일컴포넌트(themeprovider,globalstyle),유즈쿼리,라우터,쿼리데브툴, 초기환경 세팅

스타일컴포넌트(themeprovider,globalstyle),유즈쿼리,라우터,쿼리데브툴, 초기환경 세팅

// theme.ts 생성
import { DefaultTheme } from 'styled-components';

export const darkTheme: DefaultTheme = {
  bgColor: '#192a56',
  textColor: '#f5f6fa',
  btnColor: 'tomato',
  accentColor: 'rgb(255,155,50)',
};

export const lightTheme: DefaultTheme = {
  bgColor: '#f5f6fa',
  textColor: 'rgb(15,200,15)',
  btnColor: 'tomato',
  accentColor: 'rgb(255,155,50)',
};

// styled.d.ts 생성

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
    btnColor: string;
    accentColor: string;
  }
}

//index.tsx 생성


import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import { RecoilRoot } from 'recoil';
const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

// app.tsx 작성

import React, { useState } from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import Router from './Router';
import { ReactQueryDevtools } from 'react-query/devtools';
import { ThemeProvider } from 'styled-components';
import { darkTheme, lightTheme } from './theme';
import { useRecoilValue } from 'recoil';
import { isDarkAtom } from './atoms';

const GlobalStyle = createGlobalStyle`
 //...
`;
const Button = styled.button`
  color: ${(prop) => prop.theme.textColor};
  background-color: ${(prop) => prop.theme.bgColor};
  border-radius: 10px;
  padding: 10px;
`;

const App = () => {
  const isDark = useRecoilValue(isDarkAtom);
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <GlobalStyle />
        <Router />
        <ReactQueryDevtools initialIsOpen={true} />
      </ThemeProvider>
    </>
  );
};

export default App;