tooooo1 / dust-rating

전국 미세먼지 측정 서비스

랭킹먼지

랭킹먼지

퉁이리의 개인 프로젝트

Since

• 2022.03.16 ~ 2022.03.23 (개발 기간)
• 2022.03.24 (배포 시작)
• 2022.12.03 ~ 2022.12.08 (리팩토링)

dust-rating's Issues

fix: 카카오 map 랜더링 이슈 해결

📕 작업 설명

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

feat: 지도에 미세먼지 정보를 표시할 Pin 컴포넌트 구현하기

📕 작업 설명

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

feat: axios instance 생성 및 interceptor 추가

작업 목록

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

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

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

LocalDetail 페이지 리팩토링

작업 목록

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

fix: Progress 바 수치 변경

작업 목록

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

상수 정리

작업 목록

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

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

작업 목록

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

미세먼지 예보 추가

작업 목록

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

You can mark the path "stylis" as external to exclude it from the bundle, which will remove this error

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

지도 zoom level을 다르게 설정한 탭 구성하기

작업 목록

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

feat: 배포 링크 새로 고침 시 페이지 누락

작업 목록

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

airQualityByCity 정보를 받아올 때 도움이 필요합니다.

작업 목록

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

마커가 겹칠 때 이벤트 등록

작업 목록

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

feat: 미세먼지 지도 페이지 이동 버튼 추가

작업 목록

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

chore: react-query 설치 및 설정

📕 작업 설명

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

이벤트 중복 add 방지

작업 목록

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

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

작업 목록

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

fix: 마커가 계속 생성되는 문제 해결하기

작업 목록

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

feat: Detail Page 구현하기

1. 작업 내용

• #17

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

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

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

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

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

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

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

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

chore: 폴더 정리 및 파일명 수정

작업 목록

폴더 정리 및 파일명 수정

refactor: useFetch 함수 구현, Result page 수정

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

마커 내부에 정보 추가하기

작업 목록

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

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

작업 목록

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

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

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

feat: 지도 위 미세먼지, 초미세먼지 정보 띄우기

📕 작업 설명

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

Result 컴포넌트 로직 분리

작업 목록

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

design: Choice 페이지 스타일 수정

📕 작업 설명

• Choice 페이지 스타일 수정

refactor: Choice 페이지 타입스크립트 마이그레이션

📕 작업 설명

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

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

작업 목록

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

refactor: Result page TS로 마이그레이션

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

feat: 없는 페이지 접근 시 홈으로 리디렉션

작업 목록

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

refactor: 미세 먼지 정보를 가져올 때 너무 많은 API 요청이 일어남.

1. 문제

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

fix: grade 수치 데이터 값 예외 처리

작업 목록

fgrade 수치 데이터 값 예외 처리

지도에서 지역 클릭시 상세정보 표기

작업 목록

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

Ranking 페이지 chakra-ui 적용하기

작업 목록

Ranking 페이지 chakra-ui 적용하기

refactor: CSS 속성에 사용된 vw, vh 단위를 rem로 변경

📕 작업 설명

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

fix: dustScaleValidate 유틸 함수 수정

작업 목록

dustScaleValidate 유틸 함수 수정

내 위치의 온도, 습도를 표기합니다.

refactor: airQuality를 dust로 통일하기

작업 목록

airQuality를 dust로 통일하기

Refactor: chakraUI 빠진 부분 적용

작업 목록

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

fix: air quality API의 NaN 반환값 없애기

작업 목록

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

chore: chakra-ui 설치

📕 작업 설명

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

feat: 카카오 map API 연동

📕 작업 설명

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

refactor: logo 컴포넌트, map 페이지에 차크라 적용

작업 목록

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

dustmap page의 문제점들 해결하기.

작업 목록

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

refactor: 모바일 환경 최적화

작업 목록

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

refactor: 타입스크립트

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

refactor: DustForcast 페이지 스타일 개선

작업 목록

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

선택한 지역의 온도,습도 정보 가져오기.

작업 목록

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