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/chartfunction 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.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; } }