실행법

1. yarn으로 패키지 설치
2. json-server --watch db.json --port 4000 으로 JSON server 실행 *(mac ver - yarn json-server --watch db.json --port 4000)
3. node server.js로 express 서버 실행
4. yarn start로 클라이언트 실행

GongGongPlay ⚽️🎾🏀

🖥️ 프로젝트 개요

• React.js로 빌드한 서울시 공공서비스 체육시설 조회 및 예약안내 사이트입니다
• naver map api, 서울시 공공 체육시설 api, open weather map api, youtube data api를 활용하여 다채로운 페이지 구성을 하였습니다

📍 사이트 주소

GONG GONG PLAY

배포 사이트 이용 시 설정 참고

• 서울시 api는 https를 지원하지 않아서 브라우저 설정 필요
• 크롬 기준 아래 캡쳐와 같이 url 주소창 왼쪽 자물쇠 클릭 - 사이트 설정 선택 - 안전하지 않은 콘텐츠 허용 후 새로고침

🕰️ 개발 기간

2023.07.17 - 2023.07.23

🖼 와이어프레임

Figma | 펼칠 시 스크린샷

🏷 폴더 구조

펼칠 시 파일 상세 구조

 ┣ 📂axios
 ┃ ┣ 📜comment.js
 ┃ ┣ 📜publicDataAPI.js
 ┃ ┗ 📜weatherApi.js
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📜Footer.jsx
 ┃ ┃ ┣ 📜Header.jsx
 ┃ ┃ ┣ 📜Layout.jsx
 ┃ ┃ ┣ 📜Weather.jsx
 ┃ ┃ ┗ 📜YouTubeApi.jsx
 ┃ ┣ 📂detail
 ┃ ┃ ┣ 📜Comments.jsx
 ┃ ┃ ┣ 📜Detail.jsx
 ┃ ┃ ┗ 📜PostData.jsx
 ┃ ┣ 📂map
 ┃ ┃ ┣ 📜MapComponent.jsx
 ┃ ┃ ┣ 📜Maps.jsx
 ┃ ┃ ┗ 📜MarkPins.jsx
 ┃ ┣ 📜Facilities.jsx
 ┃ ┣ 📜Paging.jsx
 ┃ ┗ 📜Search.jsx
 ┣ 📂helper
 ┃ ┗ 📜calDistance.js
 ┣ 📂hooks
 ┃ ┣ 📂mapHooks
 ┃ ┃ ┣ 📜saveBoundary.js
 ┃ ┃ ┣ 📜setBoundaries.js
 ┃ ┃ ┗ 📜useGetCoords.js
 ┃ ┣ 📜useCurrentLocation.js
 ┃ ┗ 📜useFetchPublicData.js
 ┣ 📂pages
 ┃ ┣ 📜Home.jsx
 ┃ ┗ 📜Homebackup.jsx
 ┣ 📂redux
 ┃ ┣ 📂config
 ┃ ┃ ┗ 📜configStore.js
 ┃ ┗ 📂modules
 ┃ ┃ ┣ 📂maps
 ┃ ┃ ┃ ┣ 📜coordsGroup.js
 ┃ ┃ ┃ ┣ 📜reloadMap.js
 ┃ ┃ ┃ ┣ 📜save10Location.js
 ┃ ┃ ┃ ┗ 📜setBoundary.js
 ┃ ┃ ┣ 📜commentsSlice.js
 ┃ ┃ ┣ 📜publicData.js
 ┃ ┃ ┗ 📜userLocation.js
 ┣ 📂shared
 ┃ ┗ 📜Router.js
 ┣ 📜.DS_Store
 ┣ 📜App.css
 ┣ 📜App.js
 ┣ 📜GlobalStyle.jsx
 ┣ 📜index.css
 ┣ 📜index.js
 ┗ 📜reset.css

🧑‍🤝‍🧑 팀원 소개

• 팀명 : 내 코드 왜2러조
• 팀원 및 담당 구현 기능

역할	이름	담당 구현 기능	GitHub
팀장	김환훈	지도 API, express 서버, 컴포넌트간 데이터 연결	https://github.com/kimhwanhoon
팀원	김우리	날씨API, 유튜브 API	https://github.com/wooriki
팀원	박지원	공공API 데이터 페이지네이션	https://github.com/xoxojw
팀원	조성록	날씨API, 상세 페이지, 댓글 기능, 검색 기능	https://github.com/pigrok
팀원	최수아	공공API 데이터 검색 및 필터 기능	https://github.com/choisua98

📌 주요 기능

지도API 네이버 지도

• 공공데이터API에서 불러온 데이터에서 위도와 경도를 활용하여 네이버 맵에 핀을 찍는다
• reverse geocoding api를 통해 위도와 경도를 통해서 도로명주소로 변환한다

공공데이터API 서울시 체육시설 공공서비스 예약

• react query, axios 활용하여 서울시 공공API 데이터 GET 요청한다
• 검색창 필터링으로 공공데이터 필터기능을 구현한다
• 필터링 된 API 데이터를 pagination 기능으로 painting
• 불러온 API 데이터를 사용자 위치 정보에 따라 가까운 순으로 정렬한다
• 거리 순으로 정렬된 데이터를 react-js-pagination 라이브러리 활용하여 페이지네이션한다

날씨API Open Weather Map

• 현재 웹 브라우저 사용자의 위치를 통해 날씨 정보를 가져오는 API
• 도시의 위치(경도, 위도)값을 매개변수로 하여 활용한다
• json형태로 가져와서 현재 위치의 날씨 현황을 해당 날씨에 반환되는 icon으로 지역명과 함께 브라우저에 렌더링한다
• 추가적으로 날짜와 현재 시간을 렌더링한다

유튜브API YouTube

• 타겟팅한 특정 채널의 ID 값을 활용하여 채널의 재생목록 List를 API로 가져온다
• API 요청 매개변수와 일치하는 재생목록의 모음을 반환받아 axios get 요청으로 상세 데이터를 불러온다
• 필요한 값을 return 해주며 List를 shuffle하여 브라우저에 렌더링한다

🎬 페이지 스크린샷

1. 메인화면

1) Header - 검색창 카테고리 필터 : 사용자가 운동종목과 지역구를 선택하여 데이터 필터링
2) Header - 날씨 API : 사용자 현재 위치에 따른 날씨 및 시간 보여주기
3) Body - map API :  사용자 현재 위치에서 가까운 데이터 보여주기
4) Body - Youtube API : 추천 음악 리스트 가져오기 ( 새로고침 할 때 새로운 리스트로 바뀜 )
5) Body - 공공데이터 API : 사용자 현재 위치와 가까운 순으로 데이터 페이지네이션

2. 검색카테고리 필터링 구현

3. 검색기능 구현

4. 게시물 디테일 화면

5. 게시물 디테일 - 댓글기능

1) 댓글 수정/삭제기능 구현
2) 랜덤으로 프로필 사진 생성

6. 반응형 구현

⚙️ 기술 스택

• React.js

⚙️ 사용한 라이브러리

• styled-components
• react-router-dom
• react-redux
• redux-toolkit
• redux-devtools-extension
• react-query
• react-query-devtools
• react-js-paginaition
• react-naver-maps
• axios
• cors
• dotenv
• express
• weather-styled-icon

⚙️ 버전 관리 시스템

• Git/Github

⚙️ 협업툴

• Visual Studio
• Slack
• Figma