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

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

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

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

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

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

✅ 개발 기간 : 2022.11.24 ~ 2022.12.05

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

👩🏻‍💻 테스트 계정

ID : [email protected]
PW : 123123

팀원 소개

안정음	유윤우 (👑 팀 리더)	이재호	제지해

🔗 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