타입스크립트 기본설정

1. index.tsx

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <BrowserRouter>
      <App />
      {/* App/내부에서는 props.theme으로 모두 접근 가능해짐 */}
    </BrowserRouter>
  </ThemeProvider>,
  document.getElementById('root')
);

2. app.tsx

function App() {
	return (
		<>
			<GlobalStyle />
			<Router />
		</>
	);
}
export default App;

Router
/ -> All coins (coin list)
/:id -> /btc -> coin detail
/btc/price
/btc/chart

function Router() {
return (
	<Routes>
		<Route path="/" element={<Coins />}></Route> 
		<Route path="/:coinId" element={<Coin />}>
			<Route path="price" element={<Price />} />
      		<Route path="chart" element={<Chart />} />
		</Route> 
	</Routes>
	)
};

GlobalStyle
-Reset CSS
https://github.com/zacanger/styled-reset/blob/master/src/index.ts
-Source Sans Pro 폰트
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap');
font-family: 'Source Sans Pro', sans-serif;
-Flat UI Color
https://flatuicolors.com/palette/gb

app.tsx.에서 props.theme 사용 가능

body {
font-family: 'Source Sans Pro', sans-serif;
background-color:${(props) => props.theme.bgColor}; color:${(props) => props.theme.textColor}
}

1-1.theme.ts

import { DefaultTheme } from "styled-components";
export const theme: DefaultTheme = {
    bgColor: "#2f3640",
    textColor: "#f5f6fa",
    accentColor: "#4cd137",
};

1-2.styled.d.ts

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