https://github.com/ssi02014/motov-homework

React와 KAKAO Map API를 통해 진행한 Motov-Homework 저장소입니다 😁
https://github.com/ssi02014/motov-homework

Last synced: 4 months ago
JSON representation

React와 KAKAO Map API를 통해 진행한 Motov-Homework 저장소입니다 😁

• Host: GitHub
• URL: https://github.com/ssi02014/motov-homework
• Owner: ssi02014
• Created: 2021-06-23T09:48:26.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-06-29T05:13:39.000Z (over 4 years ago)
• Last Synced: 2024-12-30T06:45:14.056Z (10 months ago)
• Language: JavaScript
• Homepage:
• Size: 734 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 💻 Motov-HomeWork

### 전민재의 Motov-HomeWork 저장소입니다. 😁




## 🎥 배포 및 데모 영상

- URL: [Motov Homework - JeonMinjae](http://www.jeonminjae.com/)

  - `AWS EC2`와 `Nginx`를 통한 배포 작업 진행

  - `Domain`(http://www.jeonminjae.com/) 적용

- 데모 영상: https://www.youtube.com/watch?v=metdX6GXE6Q




### 1. Main Page

![4](https://user-images.githubusercontent.com/64779472/123552226-3185cb80-d7b0-11eb-8aa9-92c4b3cfedba.png)

### 2. Loading Page

![6](https://user-images.githubusercontent.com/64779472/123552269-5e39e300-d7b0-11eb-9fe0-35d3b915196f.png)




## 📁 Map API

- [KAKAO Map API](https://apis.map.kakao.com/)




## 🔖 기술스택 및 주요 라이브러리

- React

- React Hooks

- axios

- styled-components

- react-icons

- AWS EC2

- Nginx




## 👨🏻‍💻 기능 구현

- 외부 데이터[https://motov-coding-homework.s3.ap-northeast-2.amazonaws.com/country.json] 불러오기

- 검색 한 지역 Polygon을 생성

- Input을 통한 지역 검색 구현

  - Input Value 유효성 검사

- Modal을 통한 지역 검색 구현

  - 전체 체크, 전체 체크 해제

  - selectBox를 통한 지역 검색

  - checkBox를 통한 지역 검색

  - 선택 된 Country `X`버튼을 통한 제거

- 지도/스카이뷰 구현

- Map Event 구현

  - `Mouseover` 시에 해당 영역 색깔 변경

  - `Click` 시에 영역 Country 이름과 면적 출력

- 최초 렌더링 시 로딩 화면 구현




## 📝 Projects Board

![2](https://user-images.githubusercontent.com/64779472/123551453-cdadd380-d7ac-11eb-9280-c1aa0c23eb09.png)




## 📝 Git Flow

- **master**

  - 메인 브랜치

  - 배포용 브랜치

- **develop**

  - 최종 개발 브랜치

  - 각 기능 브랜치들이 하나로 병합되는 지점

- **feature**

  - 기능 개발 브랜치

  - 실제 브랜치명은 각 구현 기능명

- **hotfix**

  - 에러 수정용 브랜치




## 📝 Commit Message

- Add: 특정 기능을 하는 코드를 구현 했을 때

- Modify: 이미 구현 된 기능의 코드를 수정하는데, 기능의 향상이 이루어졌을 때

- Design: CSS와 같은 스타일링을 했을 때

- Refactor: 리팩토링을 진행했을 때

- Fix: 버그 픽스나 핫 픽스 이슈를 완료하였을 때

- Rename: 폴더 및 파일 명을 변경했을 때

- Remove: 필요 없는 코드 및 파일을 제거했을 때

- Docs: README.md와 같은 단순 문서 작업




## 😥 아직 남아있는 이슈

- Polygon 생성 시에 영역이 깨지는 지역이 있음

- 반응형 UI 구현 X