🍃 ECOF 🍃

🍃 떡잎마을 방범대가 되어 지구를 지켜보아요! 🍃

환경을 생각하는 우리 조금 더 친숙하게 환경에 접근할 수 없을까?
온라인과 오프라인 커뮤니티를 통해
혼자서가 아닌 많은 사람들과 함께 환경보호를 즐기고 싶다면!

저희 로 오세요!

🚩 프로젝트 개요

• 프로젝트 명 :
• 진행 기간 : 23.10.16 ~ 23.11.10

👨‍👩‍👧‍👦 팀원 소개

김나라	김선미	김현묵
@C5D2	@seon-mikim	@kim-hyun-mook
FE (총괄 팀장)	FE	FE (팀장)

김다희	김연수	이민혁	정경은	정준용
@dhdhk	@younssue	@Llimy1	@bbororo	@wnsdyd1012
BE	BE (팀장)	BE	BE	BE

⚙️기술 스택

Tools

Git	Github	Discord	Notion

Front-end

Html	CSS	TypeScript	React	React- Router	Styled- Components	esLint	Prettier	React- Query	Redux

Back-end

Java	mySQL	Security	Spring data Jpa	Spring Boot	JWT	Gradle	MariaDB

Deploy

Docker	RDS	S3	AWS	EC2	NginX

🗂️ 기능 설명

1. 회원

FE

• 소셜 로그인 : 구글, 카카오, 네이버를 이용한 로그인과 회원가입 각각 구현
• 소셜 로그인 시 닉네임, 이메일, 프로필 이미지 정보 가져오기
• 소셜 회원 가입 후 커뮤니티 가입 시 필요한 추가 정보 입력 페이지 생성
• 로그인 시 가입 정보를 토대로 로그인 진행 로컬스토리지 OAuth Provider, 이메일 저장
• 로그인이 완료되면 홈화면으로 이동
• 토큰 만료 시 인터렉션이 발생되면 자동으로 토큰 재발급
• 로그아웃 시 API주소 POST를 통해 토큰 쿠키제거, 로그인 버튼→ 로그아웃버튼 전환

BE

• 소셜 로그인 : 구글, 카카오, 네이버 OAuth2.0 으로 회원가입 및 로그인
  • 소셜 로그인 시 이름, 이메일, 프로필 이미지, provider 데이터 추출
• JWT : 고유 토큰 활용을 통한 유저 인증 강화
  • 서버에서 토큰을 발급하여 소셜 로그인 provider에 관계 없이 회원 관리
  • accessToken 30분, refreshToken 2주의 기간 설정
• 회원가입 (추가 정보 입력)
  • 유저 닉네임, 핸드폰 번호
• 로그아웃
  • refreshToken 값을 null로 변경함에 따른 보안 강화
• 토큰갱신
  • refreshToken 값을 이용한 accessToken, refreshToken 갱신
• 닉네임, 핸드폰 번호 중복확인
  • 탈퇴한 회원 데이터 제외

2. 커뮤니티

FE

• 커뮤니티 작성 폼 페이지 생성(커뮤니티 제목, 이미지, 커뮤니티 내용 컴포넌트로 구현)
• 커뮤니티 리스트 페이지(API주소 GET을 통해 리스트 내용 구현),검색기능
• 커뮤니티 상세 페이지(API주소 GET을 통해 유저정보,상세내용 구현)

BE

• 커뮤니티 생성
  • 커뮤니티 제목, 내용, 모집인원, 장소 와 함께 AWS S3을 이용하여 이미지 업로드 기능 활용하여 커뮤니티 이미지 등록
  • DB에 S3에 업로드 된 이미지 객체 URL 을 imagePath로 저장
• 커뮤니티 참가 (조건 없이, 인원수 제한 O)
  • accessToken을 이용하여 해당 유저를 판별 후 pathvariable로 communityId에 해당하는 커뮤니티에 참가
• 커뮤니티 탈퇴
  • accessToken을 이용하여 해당 유저를 판별 후 pathvariable로 communityId에 해당하는 커뮤니티 탈퇴
  • 해당 커뮤니티 유저 false → true 변경 (소프트 딜리트 지향)
  • 해당 유저가 작성한 게시글 좋아요 true → false 변경 (소프트 딜리트 지향)
  • 해당 유저가 작성한 게시글, 댓글 false → true 변경 (소프트 딜리트 지향)
• 모든 커뮤니티 조회
  • 인증된 회원이 아니더라도 볼 수 있도록 조회 가능
  • 모든 커뮤니티 리스트 반환
• 카테고리 별 커뮤니티 조회
  • 인증된 회원이 아니더라도 볼 수 있도록 조회 가능
  • Query Parameter categoryId에 해당하는 커뮤니티 조회
• 커뮤니티 검색 (작성자, 제목)
  • pathvariable type을 받아 작성자와 제목을 구분 짓고 Query Parameter keyword에 해당하는 커뮤니티 조회
• 커뮤니티 삭제
  • 해당 커뮤니티 false → true 변경, 참가인원 0으로 변경, 모집 마감으로 변경 (소프트 딜리트 지향)
  • 해당 커뮤니티 유저 false → true 변경 (소프트 딜리트 지향)
  • 해당 커뮤니티에 게시글 좋아요 true → false 변경 (소프트 딜리트 지향)
  • 해당 커뮤니티 게시글, 댓글 false → true 변경 (소프트 딜리트 지향)

3. 커뮤니티 내 게시글 작성

FE

• 게시글 작성 폼 페이지 생성(게시물 제목, 이미지, 게시물 내용 컴포넌트로 구현)
• 게시글 수정
  • 게시글 생성 폼을 활용하여 수정 기능 구현
• 게시글 상세보기
  • 게시글 상세 제목, 작성시간, 작성자, 게시물 내용, 하트 카운트 정보 호출
  • 좋아요 아이콘 클릭 시 하트 아이콘 토글로 구현
  • 좋아요 아이콘 클릭 시 좋아요 카운트 + 1
• 게시글 조회
  • 게시글 제목, 작성시간, 작성자, 게시물 내용, 하트 카운트 정보 호출
  • 게시글 리스트에서 좋아요 카운트 표시
  • 본인이 작성한 게시글에만 더보기 아이콘 표시(토큰값과 posterId 일치 여부 확인 후 진행)
  • 더보기 아이콘 토글로 구현(수정, 삭제 기능 구현)

BE

• 게시글 작성
  • 게시글 제목, 내용과 함께 AWS S3을 이용하여 이미지 업로드 기능 활용하여 게시글 이미지 등록
  • DB에 S3에 업로드 된 이미지 객체 URL 을 imagePath로 저장
• 게시글 수정
  • pathvariable로 posterID에 해당하는 게시글의 상세페이지 조회하여 해당 게시글 수정
  • S3에 게시글 등록 된 이미지 삭제 후 수정된 이미지를 업로드 후 DB에 S3에 업로드 된 이미지 객체 URL 을 imagePath로 저장
  • 게시글 수정 시 제목, 내용 수정 가능
• 게시글 상세보기
  • posterID로 해당 게시글 상세 조회
  • 상세 조회 시 좋아요 개수, 댓글 조회 가능
• 게시글 조회
  • 전체 조회 : 커뮤니티에 해당하는 게시글 전체 조회
  • 상세 조회 : posterID에 해당하는 게시글 조회
• 게시글 삭제 시 posterID에 해당하는 댓글, 좋아요 true로 변경(소프트 딜리트 지향)
• 게시글 좋아요 기능 (토글 방식)
  • 첫 좋아요 실행 → true 생성
  • 다시 눌렀을 때 false 로 반환 , 다시 누르면 true 값으로 반환

4. 댓글작성

FE

• text area를 활용하여 댓글 작성 및 수정 기능 구현
• 상태 관리는 useMutation 활용
• 더보기 옵션(수정, 삭제) 토글로 구현
• 본인이 작성한 댓글에만 더보기 아이콘 노출(토큰값과 commentId 일치 여부 확인 후 진행)

BE

• 대댓글 없이 댓글만 쌓이게 작성
• 댓글 수정, 삭제. (소프트 딜리트)
• 댓글 리스트 회원 프로필 사진, 닉네임, 댓글 내용

5. 마이페이지

FE

• 프로필 수정
• 나의 활동
• 내가 만든 커뮤니티
• 내가 가입한 커뮤니티
• 회원 탈퇴
• 커뮤니티 나가기

BE

• 내 커뮤니티 (가입한 커뮤니티)
  • 커뮤니티 나가기
  • 좋아요 한 게시글 개수/ 좋아요 받은 게시글 개수 / 가입한(활동한)커뮤니티 개수 / 댓글 개수
  • 내가 만든 커뮤니티 리스트
  • 내가 가입한 커뮤니티 리스트
• 회원 정보 수정 (닉네임, 전화번호)
• 나간 커뮤니티 글 삭제하기(소프트 딜리트)
• 회원 탈퇴(소프트 딜리트)
  • 생성한 커뮤니티 소프트 딜리트 false → true
  • 가입한 커뮤니티 커뮤니티 유저 false → true , 참가인원 감소
  • 해당 커뮤니티 게시글, 댓글 false → true 변경 (소프트 딜리트 지향)
  • 해당 커뮤니티에 게시글 좋아요 true → false 변경 (소프트 딜리트 지향)

6. 관리자 페이지

FE

• 회원 조회(리액트 테이블 활용)
  • 회원 검색(닉네임)
• 커뮤니티 조회(리액트 테이블 활용)
  • 필터 구현(카테고리별)
  • 커뮤니티 검색(커뮤니티 이름, 닉네임)

BE

• 회원 조회
• 커뮤니티 조회(카테고리 별)
• 커뮤니티 검색

7. 서버

FE

• 네틀리파이 혹은 버셀 배포 예정 중

BE

• 배포 전략 (Blue/Green)
• AWS EC2
  • RDS (mariadb)
  • 탄력적 ip 사용
  • 도메인 연결
  • https
    • SSL
• Docker
  • Dockerfile (빌드된 Project jar을 이미지로 구워 Docker Hub에 Upload)
  • Docker Commpose (Blue와 Green Container를 따로 관리)
• Nginx (무중단 배포)
• Github Actions (CI/CD를 위해 사용)
  • GitHub Pull or Pull Request 후 빌드 실행
  • Dockerfile 실행
  • docker-compose.yml, deploy.sh, .env 파일 서버로 전송
  • EC2 접속 → Docker hub → Project image pull
  • deploy.sh 실행 → 현재 blue container 실행 중 이면 → green 실행 or 현재 green container 실행 중 이면 → blue container 실행
  • health check 후 정상적으로 동작
  • 배포 완료

🖥️주요 기능 화면

1. 메인 화면

메인화면

2. 회원가입 및 로그인 화면

네이버 로그인

3. 커뮤니티 상세 화면

커뮤니티 상세 설명

4. 커뮤니티 게시글 화면

커뮤니티 게시글 목록

커뮤니티 게시글 상세

커뮤니티 게시글 수정

5. 커뮤니티 게시글 댓글 화면

댓글 작성

댓글 수정

댓글 삭제

6. 마이페이지 화면

마이페이지

7. 관리자 화면

회원 목록

커뮤니티 목록

📑 관련 문서

📌 화면 정의서

📌 API 명세서

📌 ERD

🌲 Git

Branch

• main : 서비스 운영 브랜치입니다.
• dev : 개발 환경 브랜치입니다. 개별적으로 작업했던 내용을 합치고 검토합니다.
• feat/fe(or be)/... : 프론트(백엔드) 세부 브랜치입니다.