새벽 공부 하는 사람들을 위한 공간, Dawn, With Me? 🌙

스터디 매칭 노래 추천 ASMR 공부 꿀팁

새벽에 집중안될 때, 다른 사람은 어떻게 할까? 🤔

Dawn With Me는 조용한 새벽에 공부하는 올빼미들을 위한 공부 커뮤니티입니다.

Dawn With Me에서 새벽반 사람들과 함께 공부 꿀팁, 공부할 때 듣기 좋은 노래를 공유하고 스터디 매칭을 해보세요!

❗️해당 서비스는 모바일에 최적화 되어있습니다.

✅ 개발 기간 : 2022.11.24 ~ 2023.01.05

🔗 배포 링크 : https://dawn-with-me.vercel.app

👩🏻‍💻 테스트 계정

ID : [email protected]
PW : 123123

📌 목차

1. 팀원 소개

2. 역할 분담

3. 기술 및 개발환경

4. 폴더 구조

5. 기능 시연

팀원 소개

안정음	유윤우 (👑 팀 리더)	이재호	제지해
🔗 GitHub 🔗 Blog - 바른소리	🔗 GitHub 🔗 Blog - FE 개발자 기록	🔗 GitHub	🔗 GitHub

역할 분담

안정음

• 자유 게시판 페이지
  • 팔로우된 사용자들의 게시물 목록 기능 구현
  • 게시물 상세 페이지 기능 구현
  • 게시물 생성 페이지 기능 구현
  • 게시물 수정, 삭제, 신고 기능 구현
  • 댓글 입력, 삭제, 신고 기능 구현
  • 모달 기능
• 유저 검색 페이지
  • 유저 검색 기능 구현
• 디자인
  • 메인 캐릭터 디자인 (시작화면, 프로필, 404)
  • 로고 디자인
• pr 템플릿 생성

유윤우

• 전체 코드 리드 및 관리
  • 프로젝트 시작 준비 Setting
  • 협업 프로세스 구축 (Issues, Project칸반보드, ESlint, prettier)
  • 라이브 쉐어로 팀원의 코드 기능 문제 해결
  • 이슈 템플릿 생성
  • 팀 레포지토리 관리 컨플릭 및 자잘한 충돌 해결
  • 프로젝트 아토믹 패턴 및 전체 폴더구조 구축
• 로그인 페이지 구현
  • 라이브 쉐어 & 방송을 이용해 팀원 모두가 참여하여 기능구현의 흐름을 파악할 수 있도록 코드리드
• 카테고리 게시판 페이지
  • 기존 상품등록 api 변형하여 카테고리 게시판 기능 구현
  • 카테고리 게시물 생성 페이지 구현
  • 카테고리 게시물 수정 페이지 구현
  • 카테고리 게시물 상세 페이지 구현
  • 카테고리 게시물 CRUD 기능 구현
• 프로필 페이지 구현
  • 유저 프로필 페이지 구현
  • 내 프로필 페이지 구현
  • 내 프로필 수정 기능 구현
  • 유저 팔로우 & 언팔로우 기능 구현
  • 게시물 Album, List 형식 카테고리 기능구현
• 404 페이지 구현
• 팔로우 페이지 구현
  • 팔로잉 페이지 구현
  • 팔로워 페이지 구현
  • 팔로우 & 취소 버튼 기능 구현
• 전체 페이지 Data Loading 시 보여줄 LoadingSpinner 구현
• 전체 페이지 서버 문제 시 Error Toast Modal 구현
• 재사용 가능한 UI 컴포넌트 생성
• Recoil을 이용한 전역 모달 생성
• Axios 베이스 설정
  • 데이터 요청 별 Instance,interceptors 생성
• router 인증상태 별 접근제한 기능 구현
• 유지보수 고려하기 위해 GlobalStyled,theme 이용한 전역 스타일 관리
• 프로젝트 배포 & 관리

이재호

• 회원가입 페이지 구현
  • 이메일 회원가입 페이지 기능 구현
  • 프로필설정 페이지 기능 구현
• 타이머 페이지 기능구현
  • 타이머 기능 구현
• 지도 카테고리 구현
  • 카카오맵 API를 활용한 지도 검색 기능 구현

제지해

• 회원가입 페이지 구현
  • 이메일 회원가입 페이지 기능 구현
• 스플래쉬 구현
• 채팅 레이아웃

기술 및 개발환경

⚙️ 기술

Front-End :

Back-End : 부트캠프를 통해 제공 받은 API 사용

협업 및 디자인 :

⚙️ 개발환경

정적 코드 분석 도구 : Eslint

Code Formatter : Prettier

이슈 관리 : Github-Issues (Feature, Error 템플릿 사용)

브랜치 전략 : Git-flow

Git-flow

컨벤션 : 커밋메시지 컨벤션

컨벤션

폴더 구조

Atomic Design 패턴 사용

아토믹 디자인 패턴을 사용하여 컴포넌트 재사용을 극대화

📦dawn-with-me
 ┣ 📂.github
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂api
 ┃ ┃ ┣ 📂 // ...해당 기능별 api 폴더 나눔
 ┃ ┃ ┗ 📜axios-api.js // instance, interceptors 등..
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂fonts
 ┃ ┃ ┗ 📂images
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂atoms
 ┃ ┃ ┣ 📂molecules
 ┃ ┃ ┣ 📂organisms
 ┃ ┃ ┗ 📂template
 ┃ ┣ 📂pages
 ┃ ┣ 📂recoil
 ┃ ┣ 📂router
 ┃ ┣ 📂styles
 ┃ ┣ 📜App.jsx
 ┃ ┣ 📜index.css
 ┃ ┗ 📜index.jsx
 ┣ 📜.eslintrc.js
 ┣ 📜.gitattributes
 ┣ 📜.gitignore
 ┣ 📜.prettierignore
 ┣ 📜.prettierrc.json
 ┣ 📜README.md
 ┣ 📜package-lock.json
 ┗ 📜package.json

각 페이지 별 기능 시연

1) 시작화면

splash	회원가입	로그인

2) 카테고리 & 자유게시판

스터디 매칭	음악 추천	공부 꿀팁

지도 페이지	타이머 페이지

게시판 목록	유저 검색	게시글 작성

수정	삭제	신고

3) 프로필

마이 프로필	유저 프로필	프로필 수정

팔로워	팔로잉	로그아웃