쓰레기를 주우며 등산하는 활동에 참여할 수 있도록 독려하는 서비스
최종 배포 사이트 이미지 or gif
🔗SITE
- 웹 사이트 접속 시 메인 페이지가 보여짐
- 산, 날짜, 인원을 정해서 버튼 클릭 시
- 로그인이 되어 있을 경우 글 작성 페이지로 이동
- 로그인이 되어 있지 않을 경우 로그인 페이지로 이동
- 데이터 차트를 통해 위치 별 산림 쓰레기량을 볼 수 있음
- 산, 날짜, 인원을 정해서 버튼 클릭 시
- 로그인 페이지 접속 시
- 회원가입이 완료된 경우 로그인 후 메인 페이지로 이동
- 회원가입이 완료되지 않은 경우 회원가입 페이지로 이동해서 가입 후 다시 로그인
- 산찾기 페이지 접속 시
- 산 상세 정보를 확인할 수 있음
- 지역과 등산 난이도로 특정 산을 검색할 수 있음
- 커뮤니티 페이지 접속 시
- 말머리 별로 게시글 조회 가능
- 로그인이 되어 있을 경우
- 글 작성 페이지로 이동 가능
- 게시글에 댓글 작성 가능
- 로그인이 되어 있지 않을 경우
- 글 작성 버튼 비활성화
- 마이페이지 접속 시
- 로그인이 되어 있지 않을 경우 접속 불가
- 본인의 가입 정보 조회 및 수정 가능
- 등산로 연간 탐방객수
- 🔗 https://stat.me.go.kr/portal/stat/easyStatPage/DT_355N_01_000556.do
- 파일포맷: JSON, CSV
- 등산로 연도별 쓰레기처리량
- 🔗 https://stat.me.go.kr/portal/stat/easyStatPage/DT_355N_01_000556.do
- 파일포맷: JSON, CSV
- 국토교통부 등산로 데이터
- 🔗 https://www.data.go.kr/data/15061695/fileData.do
- 전국 120여개의 등산로 지도를 공간정보(지도)로 표현할 수 있도록 오픈API 형태로 제공
- 파일포맷: JSON, XML
- front
- React
- Styled-Components
- Ant Design
- back
- Express
- MongoDB, Mongoose
- data
- Python
- front
antd: 통일된 UI를 구성하기 위한 라이브러리styled-components: 세부적인 스타일 설정을 위한 라이브러리axios: 비동기 통신을 위한 라이브러리moment: 날짜 및 시간 정의를 위한 라이브러리react-simple-maps: 지도 출력 라이브러리react-kakao-maps-sdk: 카카오맵 지도 출력 라이브러리
- back
bcrypt: 비밀번호 암호화를 위한 라이브러리cors: 서버와 클라이언트 간 연동을 위한 라이브러리dotenv: 환경변수 관리 라이브러리jsonwebtoken: jwt 토큰 생성 라이브러리uuid: 고유 아이디값을 만들기 위한 라이브러리
- data
d3-scale: 선형 스케일링 라이브러리react-tooltip: hover시 사용할 효과 라이브러리d3-geostrip-ansiweb-vitals
- 코로나19와 사회적 거리두기의 여파로 그나마 밀집도가 덜한 야외의 산에서 답답함을 풀려는 이들이 많아지면서 등산객이 급격하게 증가하는 추세를 보임
- 등산객이 증가하면서 산림 폐기물 또한 증가하자 각 지자체에서는 자체적으로 환경정화 활동을 진행하고 있으나, 산림을 청소하는 인력 예산이 따로 없어 어려움을 겪고 있는 실정
- 따라서 일반인이 운동 및 선행 목적으로
쓰레기를 주우며 등산하는 활동에 참여할 수 있도록 독려하는 서비스를 개발하고자 함
- 연간 쓰레기 처리량을 통해 산에서 어느정도의 쓰레기가 발생하는가를 인지
- 산림 내 무단투기로 인한 환경오염의 심각성
- 데이터 시각화
- 메인 페이지에서 산 별로 연간 쓰레기 처리량을 지도에 버블차트 형태로 나타냄
- 쓰레기 처리량에 따른 온실가스 발생량 및 나무의 수와 비교해서 나타냄
- 회원관리
- 회원가입, 로그인
- 회원 정보 조회, 수정
- 개인 작성 글 목록 조회
- 커뮤니티
- 게시글 CRUD
- 댓글 CRUD
- 산찾기
- 데이터셋 기반으로 한 쓰레기 처리량 수치가 높은 산 추천
- 등산 난이도, 지역별 산 검색
- 지도에 버블차트 형태로 데이터를 보여줌으로써 산의 위치와 쓰레기의 수치를 한 눈에 알기 쉬움
- 쓰레기의 수치를 비교 대상과 보여줌으로써 심각성을 인지할 수 있음
- 커뮤니티 기능으로 사람들의 클린 하이킹 참여를 이끌 수 있음
front
public: 배경화면 및 로고 등 사용되는 이미지 저장srcapi: GET, POST, PUT, DELETE 요청 정의 폴더componentscommon: 공통 컴포넌트 폴더community: Community MVP 컴포넌트 폴더main: Main MVP 컴포넌트 폴더mountainDetail: Mountain MVP 컴포넌트 폴더user: User MVP 컴포넌트 폴더
enum: 주소값, 상태코드 등 상수값 관리 폴더fonts: 프로젝트 폰트 정의 폴더pages: 각 컴포넌트들을 묶어서 보여줄 페이지 폴더util: validation 정의 폴더
back
srccommunity: Community MVP 폴더main: Main MVP 폴더mountain: Mountain MVP 폴더user: User MVP 폴더middlewares: 에러처리 및 페이지네이션 처리 폴더mongoDB: mongoDB 연결 폴더
data
downloads: 데이터셋 csv 폴더
| 이름 | 담당업무 |
|---|---|
| 임의연 | 프론트엔드 개발 |
| 임동민 | 프론트엔드 개발 |
| 오윤아 | 프론트엔드 개발 |
| 현지예 | 프론트엔드 개발 |
| 정민규 | 백엔드엔드 개발 |
| 임효근 | 백엔드엔드 개발 |
임의연 (팀장)
- 기획 단계: 아이디어 구상, 최종 기획안 작성, 프로젝트 폴더 구조 세분화
- 개발 단계: 프론트엔드 개발, Community MVP 담당, 데이터 처리
- 수정 단계: 코치님 피드백 반영, 최종 병합
담당 상세
Community MVP [Front]
1. 게시글
- 게시글 Create, Read, Update, Delete
- 게시글 페이지네이션 및 DB 연동
- 상세(Detail)페이지 상에 지도 API 값 지역마다 다르게 화면에 출력
- 상세(Detail) 페이지에 해당하는 유저 정보 및 게시물 정보 출력
- 수정 페이지 구현, DB 연동
- 전체, 클린후기, 모집중, 모집완료 머리말에 따라 게시글 상태관리 및 페이지 출력
- 유저의 로그인/로그아웃 상황에 따라 버튼 접근 권한 조정
- 게시글 List 페이지 작업, 지역, 현재시점으로부터 작성시간, 닉네임 정보 출력
- 로그인 여부에 따라 댓글 작성, 포스팅 작성 제한
- 인원 모집여부에 따른 상태관리
- Main Page에서 Props 전달후 배치
2. 댓글
- 댓글 Create, Read, Delete
- 댓글 DB연동
- 댓글 업로드 및 전체 갯수 카운팅 상태관리
임동민
- 기획 단계: 아이디어 구상, 와이어프레임 작성
- 개발 단계: 프론트엔드 개발, Mountain MVP 담당
- 수정 단계: 코치님 피드백 반영, 최종 배포 담당
담당 상세
Mountain MVP [Front]
1. 상단 카드
- 쓰레기가 많은 산 순으로 4개의 데이터를 api를 통해 받아와 구현
- 카드에 마우스 호버 시 이미지가 커지고 어두워지면서 쓰레기량 데이터 출력하도록 구현
- 클릭 시 해당 산의 정보를 모달창으로 출력
2. 리스트
- 검색창을 통해 산 리스트를 지역/난이도/이름 조건별로 검색
- 검색 결과를 하단 리스트에 출력하고 페이지네이션을 통해리스트를 깔끔하게 구현
- 각 리스트 클릭 시 해당 산의 정보를 모달창으로 출력
3. 지도
- 카카오맵 api를 통해 출력하였으며 DB에 저장되어있는 모든 산의 위치를 마커로 출력
- 마커에 마우스 호버 시 해당 산의 이름을 출력하고 마커 클릭 시 해당 산의 정보를 모달창으로 출력
4. 모달창
창의 배경이 어두워지며 배경부에 있는 페이지의 요소에서 이벤트가 발생하지 않게끔 구현
- 모달창 배경 클릭 시 모달창이 꺼지도록 구현
- 해당 산의 정확한 위치정보를 카카오맵 api를 통해 구현
- 하단에 함께하기 버튼을 클릭하였을 때 커뮤니티 페이지에서 해당 산의 모집 목록으로 이동하도록 라우터 처리
오윤아
- 기획 단계: 아이디어 구상, 문제 정의 및 가설 설정, 스토리보드 작성
- 개발 단계: 프론트엔드 개발, User MVP 담당
- 수정 단계: 코치님 피드백 반영, 리드미 작성
담당 상세
User MVP [Front]
1. 회원가입
- 이메일, 닉네임, 비밀번호 validation 구현
- 비밀번호 일치 체크 기능 구현
- 이메일 중복 체크 버튼 구현
2. 로그인
- 유저 가입 여부 및 비밀번호 일치 여부 체크
- JWT토큰 만료 시간 5분 전에 안내 메시지 띄우고 만료되면 로그아웃 상태로 변경
3. user 정보 조회
- 로그인된 사용자가 아니라면 로그인 폼으로 이동 (JWT토큰 만료 후에도 로그인폼으로 이동)
- 프로필 이미지, 닉네임 조회
- 닉네임, 비밀번호, 프로필 이미지 변경
- base64로 인코딩 후 사진 업로드
4. user 글 조회
- user id에 해당하는 글 목록을 조회
- 닉네임 변경이 이루어질 경우 작성한 글에도 반영되도록 구현
- 게시글 페이지네이션 처리
현지예
- 기획 단계: 아이디어 구상, 기획서 초안 작성, 와이어프레임 작성
- 개발 단계: 프론트엔드 개발, Main MVP 담당, 데이터 시각화
- 수정 단계: 코치님 피드백 반영, PPT 작성
담당 상세
1. Header / Footer [Front]
- useNavigte을 이용한 네비게이션 구현
- Context 및 Reducer를 사용하여 로그인 여부 확인 및 유저 프로필 이미지 출력
- 카카오톡 메세지 API를 이용한 공유하기 구현
- dispatch로 로그아웃 구현
- path값을 담은 파일을 분리하여 상수로 관리함
2. Main MVP [Front]
- AOS 라이브러리를 사용하여 스크롤 감지 Fade 애니메이션 구현
- useNavigate를 사용하여 다른 페이지에 사용자 선택값 전달
- 지도 차트에서 클릭된 산의 쓰레기량에 따라 다른 이미지 출력
3. 데이터 시각화
- Python 데이터 전처리
- 등산로별 최근 5개년 평균 쓰레기배출량 추출
- csv 파일 형태로 MongoDB에 저장하여 api 구현
- 지도 버블차트 구현
- react-simple-maps 라이브러리 및 대한민국 geoJSON 데이터를 사용해 지도 출력 구현
- D3-scale 라이브러리를 사용해 각 산별 쓰레기량 값 선형 스케일링
- 선형 스케일링한 값을 반지름으로 쓰레기량을 나타내는 버블 구현
- 스케일링 값에 따라 버블 색상을 다르게 반환하는 함수 구현
- Tooltip을 사용해 hover시 산 명칭 및 쓰레기량 출력
- State를 사용해 각 버블 클릭 시 상세 정보 텍스트 출력
- 쓰레기량 값별로 필터링할 수 있는 슬라이더 바 구현
- State를 사용해 현재 슬라이더 값 이상인 산만 지도에 출력
정민규
- 기획 단계: 아이디어 구상, 문제 정의 및 가설 설정
- 개발 단계: 백엔드 개발, Community MVP 담당, Main MVP 담당
- 수정 단계: 코치님 피드백 반영, 발표 준비
담당 상세
Community MVP [back]
1. 게시글
- 게시글 Create, Read, Update, Delete
- 전체, 모집중, 모집완료, 클린후기, 산 상태에 따라 분류해서 게시글 출력
- 페이지당 최신순으로 5개 게시글 출력 (페이지네이션)
- 한 페이지에 띄우고자 하는 게시글 수를 직접 지정 가능
- DB에 있는 산 리스트 출력
- 유저 닉네임 수정 시 게시글에 일괄 반영
- 참가하는 인원 수 카운트 +1 => 모집 인원이 채워졌을때 모집완료로 상태 변경
- 모임에서 탈퇴했을때 카운트 -1 => 모집완료 상태일 경우 모집중으로 상태 변경
2. 댓글
- 댓글 Create, Read, Update, Delete
3. 참여하기
- 참여하기 => 버튼을 누른 유저의 정보를 불러와서 모집인원에 할당
- 탈퇴하기 => 버튼을 누른 유저의 정보가 모집인원에 있다면 삭제
Main MVP [back]
4. 산 (명칭, 주소, 난이도, 쓰레기량, 이미지) DB에서 불러와서 전송
임효근
- 기획 단계: 아이디어 구상
- 개발 단계: 백엔드 개발, Mountain MVP 담당, User MVP 담당, 데이터 처리
- 수정 단계: 코치님 피드백 반영
담당 상세
User MVP [back]
-회원가입 라우터
-동일 이메일이 존재하는지 확인 후 회원가입처리
-탈퇴한 유저의 이메일은 동일하게 사용 가능하게 설정
-이메일 확인 라우터
유저 아이디 생성 요청 전에 이메일 확인 요청을 처리해주는 라우터
-로그인 라우터
-로그인 요청이 들어왔을때 계정 존재 여부, 비밀번호 일치 여부, 탈퇴여부를 판단한 뒤 해당 유저의 고유키값을 jwt에 담아 전송
-유저 정보 조회 라우터
-헤더로 전달받은 유저의 고유키를 통해 해당 유저를 탐색후 정보 전달
-유저 정보 수정 라우터
-고유키를 통해 해당 유저 탐색 후 정보 수정
-유저 닉네임, 비밀번호, 이미지 별로 각각의 라우터 존재
-유저 탈퇴 라우터
-고유키로 해당 유저 탐색 후 해당 유저의 삭제 정보를 true값으로 설정해서 처리
-해당 유저의 데이터 보관 및 추후 데이터 복구 요청이 들어왔을 때 처리하기 위한 조치
Mountain MVP [back]
-Mountain데이터는 별도의 추가 요청없이 초기 데이터를 출력해주는 기능만이 필요
-전처리 데이터를 가공하여 DB생성 후 등록
-이미지 파일은 해당 이미지 URL값을 저장
-Detail라우터
-Mountain DB의 값을 조회후 등록해주는 라우터
-별도의 쿼리가 없을 시 페이지네이션 처리를 통해 전체 페이지 수와 한페이지에 출력되는 5개의 데이터 전송
-쿼리요청을 통해 페이지 이동 가능
-전체 페이지 이상의 요청이 들어올시 제일 끝 페이지 정보 전달
-5개 이하의 데이터가 남았을때는 해당 데이터들만 전달
-쿼리 조작을 통해 검색 가능
-산이름, 등산 난이도, 지역 3가지 카테고리로 검색가능
-최대 쓰래기 조회 라우터
-기존 MountainDB를 쓰래기량 데이터를 기준으로 정렬한 뒤 상위 4개 칼럼을 리턴