공부의 숲

📄 팀 협업 문서

📄 BE 레포지토리

🎥 시연 영상

🍀 팀원 구성

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

📜 프로젝트 소개

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

🛠️ 기술 스택

Frontend

Backend

Database

기타 Tool

📲 구현 기능 상세

스터디 상세 조회 페이지

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

스터디 수정 페이지

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

오늘의 습관 페이지

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

프론트 배포

• netlify 사용하여 배포

🗂️ 파일구조

파일 구조 보기

node_modules
public/
├── _redirects
├── favicon.png
├── ic_share_logo.png
├── index.css
└── index.html

src/
├── components/
│   ├── CreateStudyComponents/
│   │   ├── CreateBackground.js
│   │   ├── CreateBackground.module.css
│   │   ├── CreateFooter.js
│   │   ├── CreateFooter.module.css
│   │   ├── CreateForm.js
│   │   ├── CreateForm.module.css
│   │   ├── CreateInput.js
│   │   ├── CreateInput.module.css
│   │   ├── CreatePassword.js
│   │   └── CreatePassword.module.css
│   ├── EditStudyComponents/
│   │   ├── BackgroundSelector.js
│   │   ├── EditStudyForm.css
│   │   ├── EditStudyForm.js
│   │   ├── LabeledInput.js
│   │   ├── PasswordInput.js
│   │   └── SubmitButton.js
│   ├── Layout/
│   │   ├── Container.js
│   │   ├── Container.module.css
│   │   ├── Footer.js
│   │   ├── Layout.js
│   │   ├── Nav.js
│   │   └── Nav.module.css
│   ├── StudyDetailComponents/
│   │   ├── PasswordModal.css
│   │   ├── PasswordModal.js
│   │   ├── StudyHabits.css
│   │   ├── StudyHabits.js
│   │   ├── StudyInfo.css
│   │   ├── StudyInfo.js
│   │   ├── StudyName.css
│   │   ├── StudyName.js
│   │   ├── StudyPoint.css
│   │   ├── StudyPoint.js
│   │   └── StudyShare.js
│   ├── StudyHomeComponents/
│   │   ├── backgrounds/
│   │   ├── Dropdown.js
│   │   ├── Dropdown.module.css
│   │   ├── ExploreDataFetch.js
│   │   ├── ExploreDataFetch.module.css
│   │   ├── ExploreStudies.js
│   │   ├── ExploreStudies.module.css
│   │   ├── ExploreStudiesHeader.js
│   │   ├── ExploreStudiesHeader.module.css
│   │   ├── RecentDataFetch.js
│   │   ├── RecentDataFetch.module.css
│   │   ├── RecentStudies.js
│   │   ├── RecentStudies.module.css
│   │   └── StudyHomeForm.js
│   ├── TodayFocusComponents/
│   │   ├── api/
│   │   │   └── setPoint.js
│   │   ├── components/
│   │   │   ├── assets/
│   │   │   ├── FocusMid.css
│   │   │   ├── FocusMid.js
│   │   │   ├── FocusTimer.css
│   │   │   ├── FocusTimer.js
│   │   │   ├── FocusTop.css
│   │   │   ├── FocusTop.js
│   │   │   ├── TimerSettingModal.css
│   │   │   └── TimerSettingModal.js
│   │   └── utility/
│   │       ├── timeParser.js
│   │       ├── FocusPage.css
│   │       └── FocusPage.js
│   └── TodayTodoList/
│       ├── HabitEditModal.css
│       ├── HabitEditModal.js
│       ├── HabitItem.css
│       ├── HabitItem.js
│       ├── HabitModalList.css
│       ├── HabitModalList.js
│       ├── HabitStudyComponent.css
│       ├── HabitStudyComponent.js
│       ├── ModalButtons.css
│       ├── ModalButtons.js
│       ├── NewHabitList.css
│       ├── NewHabitList.js
│       ├── TodoList.css
│       └── TodoList.js
├── css/
│   └── reset.css
├── hooks/
│   ├── useExploreList.js
│   ├── useFetchCompleteHabit.js
│   ├── useFetchEmoji.js
│   ├── useFetchHabit.js
│   ├── useFetchStudy.js
│   ├── useInputValid.js
│   └── useRecentList.js
├── img/
├── pages/
│   ├── CreateStudyPage.js
│   ├── EditStudyPage.js
│   ├── FocusTimerPage.js
│   ├── HabitTrackerPage.js
│   ├── StudyDetailPage.js
│   ├── StudyRoomPage.js
│   ├── index.js
│   └── Main.js
├── index.js
├── Main.js
.gitignore
package-lock.json
package.json
README.md

🔗 구현 홈페이지

공부의 숲

🔗 프로젝트 회고록

📒 팀 회고록

💾 최종발표 자료