/cleankinder-front

πŸ‘¦πŸ»πŸ‘§πŸ»μš°λ¦¬μ•„μ΄μœ μΉ˜μ› ν”„λ‘ νŠΈμ—”λ“œ πŸ”₯μ„œμšΈ μ—΄λ¦°κ΄‘μž₯데이터 곡λͺ¨μ „!!

Primary LanguageTypeScript

πŸ‘¦πŸ»πŸ’› 우리 아이가 닀닐건데, μœ μΉ˜μ›λ„ μ•Œμ•„λ³΄κ³  보내야지! πŸ’›πŸ‘§πŸ» 🫧

πŸš€ μ„œμšΈμ—΄λ¦°λ°μ΄ν„°κ΄‘μž₯ 곡λͺ¨μ „ 'μš°λ¦¬μ•„μ΄μ˜ μœ μΉ˜μ›'


'μš°λ¦¬μ•„μ΄μ˜ μœ μΉ˜μ›' μ„œλΉ„μŠ€ λ°”λ‘œκ°€κΈ°

πŸ‘‰πŸ» μž„μ‹œ μ„œλΉ„μŠ€ URL : http://kinder.tosel.co.kr/


Useage

🌏 지도

  • 각 μžμΉ˜κ΅¬λ³„λ‘œ λ‹€λ₯Έ 색깔이 λ°°μ •λ˜μ–΄ μžˆλŠ”λ°, 각 자치ꡬλ₯Ό ν΄λ¦­ν•˜λ©΄ ν•΄λ‹Ή 자치ꡬ의 μœ μΉ˜μ› 리슀트λ₯Ό 확인할 수 μžˆλ‹€.



πŸ‘§πŸ» μœ μΉ˜μ› 리슀트

  • μœ μΉ˜μ› λ¦¬μŠ€νŠΈμ—λŠ” 각 μœ μΉ˜μ› λ§ˆλ‹€ ν•˜λ‚˜μ˜ λΈ”λ‘μœΌλ‘œ ꡬ성 λ˜μ–΄μ Έ μžˆλ‹€.
  • κ·Έ λΈ”λ‘μ—λŠ” μœ μΉ˜μ› μœ„μƒν™˜κ²½ μƒνƒœλ₯Ό μ•Œμ•„λ³΄κΈ° μ‰½κ²Œ ν•˜κΈ° μœ„ν•˜μ—¬ λŒ€λΆ„λ₯˜λ§ˆλ‹€ 색을 λΆ€μ—¬ν•˜μ˜€λ‹€.



🧐 μœ μΉ˜μ› 세뢀사항

  • 그리고 각 μœ μΉ˜μ› 블둝을 ν΄λ¦­ν•˜λ©΄ μœ„μ˜ 그림처럼 μœ μΉ˜μ› 세뢀사항(μœ μΉ˜μ› μœ„μΉ˜, μœ μΉ˜μ› 정보, ν™˜κ²½ μœ„μƒ 관리 점검 사항)듀이 λ‚˜μ˜€κ²Œ λœλ‹€.
  • 이 정보듀을 톡해 ν•΄λ‹Ή μœ μΉ˜μ›μ˜ ν™˜κ²½ μœ„μƒ μƒνƒœ ν˜„ν™©λ“€μ„ 잘 νŒŒμ•…ν•  수 μžˆλ‹€.



🎨 Front-End μ‚¬μš© 기술 μŠ€νƒ

πŸ§‘πŸ»β€πŸ’» Stack πŸ§‘πŸ»β€πŸ’» Version
Next.js 13.3.3
TypeScript 5.0.4
TailwindCSS 3.3.2
Mapbox-gl-geocoder 4.7.3
Mapbox-gl API 2.7.11
μ„œμšΈμ—΄λ¦°λ°μ΄ν„°κ΄‘μž₯ API -
Google-Maps API 2.18.1




πŸ“ 디렉토리 ꡬ쑰

.
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ fonts
β”‚   └── img
└── src
    β”œβ”€β”€ assets
    β”œβ”€β”€ components
    β”œβ”€β”€ interfaces
    β”œβ”€β”€ pages
    β”œβ”€β”€ styles
    └── utils



Test

git clone https://github.com/clean-kinder cleankinder-front.git

'μš°λ¦¬μ•„μ΄μ˜ μœ μΉ˜μ›' 둜컬 ν…ŒμŠ€νŠΈλ₯Ό μ§„ν–‰ν•˜κΈ° μœ„ν•΄μ„  Mapbox api 등둝, Google Map api 등둝, μ„œμšΈμ—΄λ¦°λ°μ΄ν„°κ΄‘μž₯ api 등둝이 ν•„μš”ν•©λ‹ˆλ‹€.

# .env file
NEXT_PUBLIC_MAPBOX_TOKEN = "여기에 ν‚€λ₯Ό λ„£μœΌμ„Έμš”"
NEXT_PUBLIC_GOOGEL_MAP_KEY = "여기에 ν‚€λ₯Ό λ„£μœΌμ„Έμš”"
NEXT_PUBLIC_SEOUL_KEY = "여기에 ν‚€λ₯Ό λ„£μœΌμ„Έμš”"
NEXT_PULBIC_KINERLIST_KEY = "여기에 ν‚€λ₯Ό λ„£μœΌμ„Έμš”"

λΉŒλ“œ, μ‹€ν–‰ν•˜κΈ°

npm run dev
or
npm start