tooooo1 / dust-rating Goto Github PK

작업 목록

미세먼지 지도 페이지 라우팅을 설정합니다.

• Result Page를 TS로 마이그레이션
• Result Page에서 사용하는 컴포넌트들 TS로 마이그레이션

작업 목록

• 큰 틀
• Progress 바 수치 변경
  • 작은 틀
  • 미세먼지 수치가 눈에 띄도록 Progress 바의 수치를 변경합니다.
  • 최대 수치가 100%가 넘어가지 않도록 합니다.

타입스크립트 마이그레이션

작업 목록

• 큰 틀
• promise와 배열의 크기가 다른이유를 모르겠습니다.
  • 작은 틀
  • 
    위와 같은 코드를 실행할 때 airQualityByCity가 [120 | 121]의 크기를 갖고, 모든 promise가 성공합니다. 각각의 수행에 대해서 cityDustInfoMarkers.push를 수행하기 때문에 cityDustInfoMarkers 배열의 크기도 [120 | 121]이 되어야 한다고 생각합니다. 그러나 배열의 크기를 확인해보면 117로 약간 모자란 것을 확인하였습니다. cityDustInfoMarkers 배열은 현 컴포넌트에서 state가 아닌 일반 배열로 선언되어 사용되고 있습니다. 이유가 무엇일까요?

• Result.tsx에 있는 api 통신 로직을 분리하여 useFetch로 구성.
• Result page에서 상단 영역이 잘리는 문제 수정

📕 작업 설명

Pin 컴포넌트를 구현합니다.

• result page에서 미세먼지 농도에 따라 순서가 바뀌도록 변경

작업 목록

• 큰 틀
• 지도에서 지역 클릭시 상세정보 표기
  • 작은 틀
  • 아래 중 1택 예정
  • 상세정보(미세먼지, 초미세먼지) 를 표기할 모달(?) 생성
  • 상세정보 페이지로 이동

작업 목록

• 큰 틀
• 차크라가 적용되어 있지 않던 부분에 차크라를 적용합니다.
  • 작은 틀

작업 목록

• 큰 틀
• dustmap page의 몇 가지 문제점들을 해결합니다.
  • 작은 틀
  • 지도 화면 첫 입장 시 사용자의 디바이스 위치가 서울이 아니면 마커들이 표기되지 않는 문제가 있습니다.
  • 지도에서 마커를 클릭 시 상세창의 내용이 클릭한 마커와 다른 경우가 있습니다.
  • 지도를 축소할 때 자른 sido의 마커들이 보이게 되면 click 기능이 제대로 동작하지 않는 문제가 있습니다.

작업 목록

axios instance 생성 및 interceptor 추가해 재사용가능한 api 호출을 구현합니다.

작업 목록

LocalDetail 페이지 리팩토링을 진행해요.

작업 목록

eslint import 자동 정렬, 콘솔 사용 금지 설정

작업 목록

시간대별 미세먼지 농도 차트 구현

📕 작업 설명

• chakra-ui 설치
• chakra-ui 설명

작업 목록

• 큰 틀
• 상수와 관련된 파일들을 정리합니다.
  • 작은 틀
  • 이전에 사용되던 상수들의 경로를 정리합니다.
  • route 경로를 상수화 합니다.

작업 목록

• 큰 틀
• 선택한 지역의 온도,습도 정보 가져오기.
  • 작은 틀
  • kakao api, 기상청21_기상특보 조회서비스등을 사용하여 result page에서 선택된 지역의 온도, 습도 정보를 LocalDetailPage에 나타냅니다

📕 작업 설명

• Choice 페이지를 타입스크립트로 마이그레이션
• Choice 컴포넌트와 관련된 컴포넌트를 타입스크립트로 마이그레이션

최신 상태로 package json 을 업데이트하였으나 다음과 같은 에러가 발생하여
npm i stylis
을 통하여 해결하였으나 정상적인 해결방법인지 궁금합니다.

1. 작업 내용

• #17

• 내 위치를 알기 위해서 geolocation.getCurrentPosition 를 사용합니다.

• 위의 과정을 통해 받아온 위/경도를 https://developers.kakao.com/docs/latest/ko/local/dev-guide 를 통해서 x,y 좌표로 바꿉니다.

• 위 과정을 통해서 얻어온 x,y 좌표로 내 위치의 온도, 습도를 받아옵니다.

• 초단기실황조회를 사용합니다.

• 받아온 정보를 아이콘과 함께 보여줍니다.

• 내 동네의 미세먼지 세부 사항을 보여줍니다.

• 내 동네의 미세먼지 세부 사항 업데이트 날자를 보여줍니다.

상세 정보를 얻고 싶은 지명 -> kakao api -> kakao api에서 얻은 좌표 -> 초단기실황조회 -> 날씨 정보 제공

📕 작업 설명

• 카카오 map API 연동
• 현 위치에 마커 띄우기

작업 목록

air quality API의 NaN 반환값을 정제합니다.

작업 목록

• 큰 틀
• 마커가 겹칠 때 이벤트 등록
  • 작은 틀

작업 목록

dustScaleValidate 유틸 함수 수정

📕 작업 설명

지도 위에 위치별로 미세먼지, 초미세먼지 정보가 포함된 마커 띄우기

📕 작업 설명

• Choice 페이지 스타일 수정

작업 목록

마커 내부에 지역명을 추가합니다.

Choice 페이지에 chakra-ui 적용하기

작업 목록

동네 지도 위 미세먼지, 초미세먼지 정보 띄우기

작업 목록

airQuality를 dust로 통일하기

작업 목록

• 큰 틀
• LocalDetail page에 미세먼지 예보를 추가합니다.
  • 작은 틀
  • 스타일은 간단하게 설정하고 API를 사용하여 오늘 기준으로 미세먼지 예보를 받아오는 것을 목표로 합니다.

작업 목록

• 큰 틀
• 모바일 환경 최적화
  • 작은 틀
  • 모바일 환경에서의 폰트 크기 등을 수정합니다.

작업 목록

DustForcast 페이지 스타일 개선 및 DustState 컴포넌트 구조 개선

작업 목록

• 큰 틀
• chakraUI 빠진 부분 적용
  • 작은 틀
  • Choice.tsx에 Img 태그가 남아있어서 수정합니다

작업 목록

• 큰 틀
• 지도의 zoom level에 따른 동네별, 전국별 탭을 생성하여 지도의 크기를 바꾸어 표기합니다.
  • 작은 틀

작업 목록

• 큰 틀
• 배포 링크에서 새로 고침을 실행하면 404로 연결됩니다.
  • 작은 틀

작업 목록

• 큰 틀
• 없는 페이지 접근 시 홈으로 리디렉션
  • 작은 틀

📕 작업 설명

Choice 페이지에서 CSS 속성에 사용된 vw, vh 단위를 rem으로 변경합니다.

📕 작업 설명

지도를 확대나 축소할 때 초기 위치가 보였다가 확대되는 문제 해결하기

작업 목록

api 데이터 정제를 통해 컴포넌트 내부의 자바스크립트 코드 줄이기

📕 작업 설명

• react-query 설치
• react-query 설정

작업 목록

전국 지도 모드일 때 window가 포커스 된 경우, 마커가 계속 생성되는 문제를 해결합니다.

1. 문제

• result page에서 미세 먼지 정보를 가져올 때 너무 많은 API 요청이 일어납니다.
  useFetch hooks의 다음 부분 때문입니다.
  if (!data[0]) fetchData();
  해당 코드는 정상적으로 미세먼지 정보를 불러오지 못한 경우를 방지하기 위하여 넣은 코드이지만 과도하게 많은 API 요청을 하는 문제가 있습니다.

작업 목록

fgrade 수치 데이터 값 예외 처리

작업 목록

Ranking 페이지 chakra-ui 적용하기

작업 목록

대기질 예보 API 데이터 누락 예외 처리

작업 목록

• 큰 틀
• 이벤트 중복 add 방지
  • 작은 틀
  • addEventListener를 사용할 경우 동일한 이벤트가 중복으로 생성 될 수 있습니다.
  • 1. city.onclick = () => handleClickMarker(city); // Property 'onclick' does not exist on type 'Element'.ts(2339)
  • 2. setAttribute?

작업 목록

폴더 정리 및 파일명 수정