📎 https://eveneul.github.io/crypto-tracker/

📎 https://github.com/eveneul/crypto-tracker

🔥 구현된 기능

  1. 다크모드/라이트 모드 구현
  2. styled-components로 CSS 작성
  3. react-router(5.3.0v) 적용
  4. typescript로 리액트(JSX) 작성
  5. Apex Chart를 활용한 데이터 시각화

💡 다크모드 / 라이트 모드

메인 페이지에서 Change Mode 버튼을 클릭했을 때 다크모드, 라이트모드가 적용됩니다

styled-components에서 제공하는 DefaultTheme를 이용해 다크모드, 라이트모드의 색상을 지정해 줬습니다

export const darkTheme: DefaultTheme = {
	bgColor: '#2f3640',
	textColor: '#fff',
	accentColor: '#e1b12c',
	articleBg: '#111',
};

export const lightTheme: DefaultTheme = {
	bgColor: '#efefef',
	textColor: '#000',
	accentColor: '#e1b12c',
	articleBg: '#dcdcdc',
};

또한 타입스크립트에서 각각의 색상 설정값이 무엇인지 알 수 없기에 styled.d.ts라는 파일을 만들어서 타입을 정해 주었습니다