Code Monkey home page Code Monkey logo

mini-dust-alret's Introduction

header

🛠 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

mini-dust-alret's People

Contributors

0seo8 avatar

Watchers

 avatar

Forkers

kwonl

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.