🛠 Tech Stack

📗 프로젝트 설명

⏰ 공공데이터를 이용한 미세먼지 알림이입니다.
   셀렉박스를 통해 선택한 지역의 미세먼지 정보를 보여줍니다.(모바일 사이즈)

📎 브랜치 설명

• main 브랜치 : Javascript로 작성
• TS 브랜치 : TypeScript로 작성

📌 구현기능

• 공공데이터 api 로 데이터 받아오기
• 기본 지역 보기/ 전체 보기 / 즐겨찾기 페이지 구현
• 미세먼지 수치에 따른 카드 색상 변화
• 로컬스토로지를 이용한 즐겨찾기 기능 구현

📦 폴더트리

📦src ┣ 📂app ┃ ┗ 📜store.ts ┣ 📂assets ┃ ┣ 📜GmarketSansTTFBold.ttf ┃ ┣ 📜GmarketSansTTFLight.ttf ┃ ┣ 📜GmarketSansTTFMedium.ttf ┃ ┣ 📜react.svg ┃ ┗ 📜selectImg.svg ┣ 📂components ┃ ┣ 📂Card ┃ ┃ ┣ 📜Favorite.tsx ┃ ┃ ┣ 📜index.tsx ┃ ┃ ┗ 📜style.ts ┃ ┣ 📂FetchData ┃ ┃ ┣ 📜index.tsx ┃ ┃ ┗ 📜style.ts ┃ ┣ 📂SelectBox ┃ ┃ ┣ 📜index.tsx ┃ ┃ ┗ 📜style.ts ┃ ┗ 📂Tab ┃ ┃ ┣ 📜index.tsx ┃ ┃ ┗ 📜style.ts ┣ 📂feature ┃ ┗ 📜dustSlice.ts ┣ 📂model ┃ ┗ 📜types.ts ┣ 📂pages ┃ ┣ 📂Favorites ┃ ┃ ┣ 📜index.tsx ┃ ┃ ┗ 📜style.ts ┃ ┣ 📂MyPlace ┃ ┃ ┗ 📜index.tsx ┃ ┗ 📂ViewAllPlace ┃ ┃ ┣ 📜Container.tsx ┃ ┃ ┣ 📜index.tsx ┃ ┃ ┗ 📜style.ts ┣ 📂style ┃ ┣ 📜global.ts ┃ ┗ 📜theme.ts ┣ 📂utils ┃ ┣ 📜addLocalStoroge.ts ┃ ┗ 📜constants.ts ┣ 📜App.tsx ┣ 📜index.css ┣ 📜main.tsx ┗ 📜vite-env.d.ts