ECONET 에코넷(Web)

1. 프로젝트 개요

에코넷을 통해 환경 정보에 쉽고 빠르게 접근할 수 있으며, 회원가입한 유저들은 환경 보호 활동을 위한 모임을 조직할 수 있습니다. 지도 상에서 제공되는 정보를 이용해 일상 속에서 분리배출에 어려움을 겪는 사람들이 도움을 받을 수 있을 뿐만 아니라, 상세한 정보를 서로 공유하며 유저들이 함께 만들어 가는 플랫폼입니다.

2. 에코넷을 만드는 사람

팀원

• 정원희: Backend Engineer
• 이종훈: Backend Engineer
• 장지훈: Frontend Engineer
• 박지원: Frontend Engineer
• 박민서: Frontend Engineer

3. 에코넷을 만드는 기술

기술 스택

• 코어: React, JavaScript
• 상태관리: Recoil
• 디자인 시스템: Figma
• 스타일링: Styled-components
• 협업: Github

4. 주요 기능

4.1. 유저 관리

• 회원 관리: 회원가입, JWT 토큰 기반 로그인, 로그아웃
• 계정 설정: 비밀번호 변경, 유저 작성 글/댓글 조회 기능

4.2. 오늘의 환경

• 미세먼지 정보: 서울의 각 지역구에 설치된 측정소에서의 미세먼지 수치 정보 조회 기능

4.3. 모임 게시판

• 모임 만들기: 로그인 유저 대상 모임 만들기 기능
• 모임 조회하기: 유저들이 생성한 모임 전체 조회 기능
• 모임 상세보기: 모임 조회 페이지에서 모임 제목 클릭 → 상세 정보 조회 → 로그인 여부에 따라 댓글, 좋아요 버튼 활성화/ 수정, 삭제 가능/ 글 작성자는 댓글 표시 구별 기능

4.4. 환경 뉴스

• 환경 뉴스 크롤링: 국내, 국외 환경 뉴스를 실시간으로 받아오는 뉴스 기사 조회 기능
• 키워드 뉴스 검색: 키워드 입력 → 해당 키워드 포함된 기사 리스트 조회

4.5. 배출함 위치

• 네이버지도 배출함 위치 표시: 유저가 마포구의 행정동 선택 → 배출함 종류 선택 시 지도 위에 마커 표시 → 마커 클릭 시 상세 정보 담은 모달창 구현
• 배출함 상세 정보: 모달창 내부에 있는 링크 클릭 → 해당 배출함 상세 정보 페이지로 이동 → 유저 댓글 작성 기능, 배출함 사진 업로드 기능
• 종류별 배출 방법: 쓰레기 종류별 배출 방법 제공

5. 구현 분담

장지훈

• 유저 관리(계정 설정)
• 환경 뉴스
• 배출함 위치(종류별 배출 방법)

박지원

• 유저 관리(회원 관리)
• 오늘의 환경
• 모임 게시판
• 배출함 위치(배출함 상세 정보)

박민서

• 로그인/회원가입 페이지
• 모임 만들기
• 배출함 위치(네이버지도 배출함 위치 표시)

시연 영상