junny97 / cointracker Goto Github PK

📃Recoil로 다크모드 설정

• Recoil 설치 및 index파일에 RecoilRoot 감싸주기
• 다크모드 atom 파일 만들고 기본 key값과 defalut 상태 세팅
• DarkModeBtn 컴포넌트 생성 & useRecoilState로 다크모드 상태관리 기능구현
• ThemeProvider 위치 app.js로 변경 & useRecoilValue로 isDarkAtom 기본값 가져오기
• 다크모드 coinDetail 컴포넌트 적용

📃 Description

전체 페이지에 적용할 Layout을 컴포넌트로 정의합니다

✅ CheckList

• Layout을 컴포넌트 설정
• title react-helmet으로 감싸기

📃 Description

메인화면에 보여줄 코인 설명 동영상 카드 애니메이션을 설정합니다

✅ CheckList

• �card 컴포넌트 생성 후 UI 작업
• 카드에 보여줄 코인 정보들 url 설정
• keyframes을 이용한 카드 애니매이션 설정

📃 GlobalStyle 설정하기

• styled-components 세팅
• reset css 설정
• ThemeProvider사용하여 다크모드 테마 설정

📃 코인 차트 데이터 받아오기

• Chart 컴포넌트 생성 & 차트 라이브러리 ApexCharts 설치하기
• 차트 데이터 받아오기 & UI 꾸미기

📃 Description

기존 한 파일에서만 정의돼 있던 버튼들을 컴포넌트화 시킵니다.

✅ CheckList

• 다크모드 버튼 분리
• 뒤로가기 버튼 분리
• 최상단 이동 버튼 추가

📃 컴포넌트 설정하기

• [x]�Coins 컴포넌트 스타일링& 기능구현
• CoinDetail 컴포넌트 스타일링& 기능구현
• axios 라이브러리 설치
• CoinDetail 컴포넌트 다크모드 추가 & 뒤로가기 버튼 추가

📃 리팩토링 목록

• interface.ts 만들어서 타입 정의 분리하기
• api 기본 주소 BASE_URL 처리
• Chart 데이터 전달 방식 props로 전달 방식으로 수정
• NoChart 컴포넌트 설정
• Price 데이터 전달 방식 props 전달 방식으로 수정
• Price 가격 정보 컴포넌트로 분리
• Coin, CoinDetail page 폴더로 분리

📃react helmet 설치

• react helmet 설치
• coins, coinDetail 컴포넌트에 적용하기

📃price 컴포넌트 설정하기

• 실시간 가격 정보 받아오기
• 7일간 거래 평균가 받아오기
• 최고가 갱신일/ 갱신액 받아오기
• UI 스타일링하기
• 가격 정보 UI 표 형식으로 변경
• props 전달 방식이 아닌 직접 데이터 받아 처리하는 방식으로 변경

📃 Description

Loading 컴포넌트 만들기

✅ CheckList

• 로딩 이미지 추가 & UI 작업

• React Query 설치
• api 파일 컴포넌트 페이지서 분리하기
• 기존 컴포넌트 기능들 React Query 사용하여 변경하기

📃 Router 설정하기

• react-router-dom 설치
• Router 경로 설정
• 페이지들 생성 후 Router 연결

📃Github pages 배포하기

• Github pages 배포하기