로또 맵

로또 사고 싶은데 어디서 살지 고민이신가요?
걱정마세요. 당신이 원하는 로또 판매점 찾아드릴게요.

📎 로또 맵 바로가기

💡 프로젝트 소개

네이버 지도 Api를 이용한 로또 맵
누구나 쉽고 빠르게 당첨횟수가 많은 로또 판매점을 찾을수 있고 리스트에서 검색, 즐겨찾기도 가능하며 추첨번호 생성까지 할 수 있습니다.

🎬 프로젝트 진행상황

✔︎ 진행기간 : 2024.4.19 ~ 진행 중

🛠 사용한 기술 스택

🛠 ESLint, Prettier and Husky

Husky pre-commit hooks를 통해서 Airbnb에서 정의한 자바스크립트 규칙을 ES-Lint에 적용하였으며, Prettier 규칙도 적용하였습니다. 이를 통해서, commit을 하게되면, 정해진 ESLint, Prettier 규칙에 따라 자동으로 검사하게 되며, 통과하지 못하면, commit이 안되게 하여 일관된 코드 컨벤션을 적용하였습니다.

🛠 주요 기능

✔︎ 지도

• 메인페이지인 지도에서 현재 위치 기반 당첨횟수가 많은 순서대로 로또 판매점을 확인할 수 있어요

지도의 마커 클릭시 상세조회

사이드바에서 로또 판매점 즐겨찾기

• 즐겨찾기한 판매점들은 나의 로또 판매점에서 리스트 형식으로 볼 수 있어요.

✔︎ 리스트

• 리스트 페이지에서 로또 맵의 점수 알고리즘으로 계산한 전국 판매점 랭킹 1등부터 순서대로 볼 수 있어요.
  
• 판매점 이름과 주소 두 가지로 검색하고 즐겨찾기 할 수 있어요.

판매점 이름 검색

판매점 주소 검색

판매점 상세 페이지

✔︎ 나의 로또 판매점

• 즐겨찾기한 로또 판매점 정보를 리스트 형식으로 확인할 수 있어요.

나의 로또 판매점

✔︎ 추첨번호

• 번호 뽑기 버튼을 누르면 추첨번호를 랜덤으로 생성할 수 있어요.

추첨번호 생성

⚙️ 개발환경 설정

npm install

npm start

.env 설정

REACT_APP_API_URL=
DISABLE_ESLINT_PLUGIN=true
REACT_APP_NAVER_MAP_CLIENT_ID = 

📁 Directory Structure

LottoMap-frontend
├── .husky                          # pre-commit hook
├── public                          # public
└── src
    ├── Apis                        # api 호출 Function
    ├── Assets                      # resoucres
    ├── common                      # theme
    ├── Components                  # 페이지를 구성하는 components           
    ├── Constants                   # api, message, queryStirng, route 및 공통적으로 사용되는 constants       
    ├── context                     # PopUp 제어  
    ├── Hooks                       # Custom Hooks   
    ├── models                      # data type                     
    ├── Pages                       # Pages                            
    ├── Store                       # Zustand를 사용한 전역 Store                         
    ├── Styles                      # Global Style                                                 
    ├── Utils                       # util 함수                       

🙋🏻‍ FE 팀원

이성은

변성은

방명규