2팀

📄 팀 협업 문서

팀원 구성

FS 팀장: 강범준 GitHub 프로필	FS 팀원: 김대건 GitHub 프로필	FS 팀원: 김효인 GitHub 프로필	FS 팀원: 주영은 GitHub 프로필

프로젝트 소개

• 제목: 공부의 숲
• 소개: 개인 공부 관리 및 커뮤니티 서비스
  • 최근 몇 년간 올바른 습관의 정착에 대한 사람들의 관심이 높아지고 있고, 그중에서도 ‘조금씩 습관을 들이기’에 대한 이론이 각광받고 있습니다. 따라서 개인이 학습할 내용을 정리할 스터디를 만들고, 하루동안 수행할 공부를 관리하며 집중 타이머 기능을 제공해 잘 수행할 때마다 포인트를 제공하는 서비스 제작합니다.

기술 스택

Frontend

Backend

Database

기타 Tool

팀원별 구현 기능 상세

강범준

• 오늘의 습관 페이지
• (자신이 개발한 기능에 대한 사진이나 gif 파일 첨부)

김대건

• 오늘의 집중 페이지
• (자신이 개발한 기능에 대한 사진이나 gif 파일 첨부)

김효인

DATABASE

• study
• study 생성 기능 구현
• study 목록 조회 기능 구현

메인 페이지

• GET을 이용한 스터디 정보 표시
• 닉네임, 스터디 이름에 따른 말줄임표 추가
• 스터디 배경화면에 따른 내부 텍스트 색깔 추가
• 스터디 생성한 날짜 표시
• 스터디 소개 3줄로 표시
• react study를 이용하여 스터디 사용
• GET을 이용한 이모지 정보 표시
• 갯수가 3개 이상일 경우 +숫자로 표시
• react emoji를 이용하여 이모지 표시
• 기능
  • 공부의 숲 로고 클릭 시 새로고침 기능 추가
  • 검색 기능 구현
  • 드롭다운 기능으로 [최신순, 오래된순, 포인트순]으로 조회 가능
  • 페이지네이션으로 추가 정보 불러오기 기능 구현
• 특정 스터디 누르면 상세 페이지 이동 구현
• 스터디 만들기 버튼 누르면 만들기 페이지로 이동
• 반응형 레이아웃 구현

스터디 만들기 페이지

• POST를 이용한 스터디 정보 전송
• 만들기 버튼 누르면 상세 페이지 이동 구현
• 반응형 레이아웃 구현

스터디 만들기, 수정하기 공용 기능

• 유효성 검사 기능 구현

공통 컴포넌트 구현

• NavBar의 레이아웃
• main 공통 컴포넌트
• body 배경색

스터디 목록 조회

스터디 생성하기 폼

주영은

DATABASE 엔티티 간의 관계 및 속성 정의

• study
  • study 상세 조회 기능 구현
  • study 수정 기능 구현
  • study 삭제 기능 구현
• reaction
  • 특정 study에 대한 reaction 조회 기능 구현
  • 특정 study에 대한 reaction 생성 기능 구현
  • 해당 이모지가 있다면 +1
  • 해당 이모지가 없다면 생성
• habit
  • 특정 study에 대한 습관 생성 기능 구현
  • 특정 study에 대한 습관 조회 기능 구현
  • 습관명 수정 기능 구현
  • 습관 삭제 기능 구현
  • 습관 삭제시 endDate 속성에 값 지정
  • cron을 활용해 매주 월요일 자정에 endDate 속성값이 null이 아니고, isActive가 true인 습관 삭제
• completeHabit
  • 완료된 습관 생성 기능 구현
  • 완료된 습관 조회 기능 구현
  • 완료된 습관 삭제 기능 구현
  • cron을 활용해 매주 월요일 자정에 completeHabit 데이터 초기화
• 서버 배포
  • render.com 사용하여 배포

스터디 상세 조회 페이지

• GET을 사용하여 스터디 상세 정보 표시
• GET을 사용하여 이모지 상세 정보 표시
• POST을 사용하여 추가할 이모지 정보 전송
• react emoji를 사용하여 이모지 사용
• 스터디 링크 공유하기
• 공유하기의 Link-copy 클릭시 확인용 toast message 표시
• 카카오톡 공유하기 기능 추가 구현
• 수정하기, 스터디 삭제하기, 오늘의 습관, 오늘의 집중 클릭시 권한 확인 모달 표시
• 수정하기 클릭시 스터디 수정 페이지 이동 구현
• 스터디 삭제하기 클릭시 스터디 삭제 후 메인페이지 이동 구현
• 삭제 확인용 toast message 표시
• 오늘의 습관 클릭시 해당 study의 오늘의 습관 페이지 이동 구현
• 오늘의 집중 클릭시 해당 study의 오늘의 집중 페이지 이동 구현
• GET을 사용하여 습관명 표시
• GET을 사용하여 완료된 습관 표시
• 반응형 레이아웃 구현

스터디 수정 페이지

• GET을 사용하여 해당 스터디의 기존 데이터 표시
• PUT을 사용하여 수정하기 버튼 클릭시 데이터 전송
• 유효성 검사와 input 값에 따라 수정하기 버튼 활성/비활성 구현
• 수정하기 버튼 클릭시 스터디 상세 페이지로 이동
• 반응형 레이아웃 구현

오늘의 습관 페이지

• GET을 사용하여 해당 스터디의 습관 표시
• GET을 사용하여 해당 스터디의 습관 완료 여부 표시
• PUT을 사용하여 해당 스터디의 습관 수정 및 삭제값 수정
• POST을 사용하여 해당 스터디의 습관 생성

프론트 배포

• netlify 사용하여 배포

스터디 상세 조회

권한 확인 모달

수정하기 폼

파일구조

구현 홈페이지

공부의 숲

프로젝트 회고록

(제작한 발표자료 링크 혹은 첨부파일 첨부)