DO GREEN 🌏🌱

서비스 소개

"환경 도메인 뉴스레터 구독 서비스"

각 카테고리 별로 분류된 주제를 구독하여 뉴스레터를 볼 수 있고, 댓글과 좋아요로 상호작용 가능합니다.

배포 링크(현재 이용 불가능합니다)

https://do-green.vercel.app

1. TECH STACK

FRONTEND

• react-query와 zustand를 이용한 상태관리
• 코멘트와 뉴스페이지에 Infinity scroll 구현
• 좋아요에 optimistic update 적용
• alert/confirm 등 재사용성 있는 dialog modal 구현
• skeleton screen 적용

BACKEND

주요 구현내용

• 도메인 로직을 분리하기 위해 Layered Architecture 적용
• Dockerfile과 GCP를 사용한 배포 자동화
• MongoDB Atlas를 사용하여 애플리케이션과 데이터베이스 분리
• 페이지네이션으로 올 쿼리 요청 최적화
• Zod library로 request parsing
• TypeScript의 Pick, Omit, Union 타입을 이용하여 재사용성 극대화
• type-guard 용도로 사용하는 tiny-invariant 라이브러리를 커스텀하여 유틸 함수 구현
• Express의 request 타입을 확장하여 미들웨어에서 공유 가능한 context 생성
• S3 bucket으로 이미지 파일 스토리지 분리

2. 기능 상세

메인페이지

로그인

회원가입

내 정보 수정

카테고리 페이지

뉴스레터 페이지

내 구독정보 조회

3. ARCHITECTURE

서비스 구조도

ERD

4. 참고 링크

• figma

• API 문서

5. 프로젝트 팀원 역할 분담

이름	포지션	담당업무
박지수	팀장/FE	뉴스, 코멘트, 카테고리 구현 및 환경설정/라우팅
이예나	FE	메인페이지, 카테고리, 마이페이지, 모달 구현
이지현	FE	로그인, 모달, 유저 관련 기능 구현
지시안	FE	어드민, 헤더/네비게이터/푸터 구현
서윤지	BE	유저API, 어드민API, 구독API, 이미지 업로드 API, 배포, 문서화
손형석	BE	카테고리API, 뉴스레터API, 좋아요API, 댓글API 구현, 문서화

6. 실행 방법

BE

• root path

$ ./backend

• dependency

yarn install

• command

$ yarn dev 또는 yarn start

FE

• dependency

$ npm install

• command

$ npm run dev