💜 Detto

프로젝트 기간 : 2023.02.06 ~ 2023.03.13

🔗 Detto 서비스 둘러보기 (데스크탑/모바일 환경에서 이용 가능)

🎬 발표 영상 보러가기

🎬 시연 영상 보러가기

✨ 프로젝트 소개

Develop Together, Grow Together, Detto

• Detto는 개발자를 위한 사이드 프로젝트 팀 매칭 플랫폼입니다.
• 현재 모집 중인 사이드 프로젝트들을 포지션 별로 확인할 수 있습니다.
• 프로젝트 모집 글에 지원하고 초대받는 과정을 통해 더 좋은 시너지를 낼 수 있는 팀원을 만날 수 있습니다.

프로젝트 문서

📒 팀 Notion	🎉 프로젝트 S.A	💌 베타 테스트 피드백	🚀 트러블 슈팅 및 최적화	💬 KPT 회고

🙌 팀원 소개

FE 효진	FE 유정	FE 성완	FE 상원	FE 정은	DE 하연

📅 프로젝트 일정

Sprint	기간	내용	작업 현황
1	2023/2/6 - 2023/2/19	데스크탑 UI, MVP 기능 구현	▶️ Sprint1-1 , ▶️ Sprint1-2
2	2023/2/20 - 2023/2/24	모바일 UI 구현	▶️ Sprint2
3	2023/2/27 - 2023/3/3	성능 최적화, UI 개선, 에러 점검	▶️ Sprint3
4	2023/3/4 - 2023/3/13	베타 테스터 피드백, 최종 발표	▶️ Sprint4

🖥 기술 스택

🛠️ 기술적 의사결정 과정 보러가기

구분	사용 기술
언어	TypeScript
UI	React
라우팅	React Router Dom
SEO	React Helmet Async
스타일링	Emotion
아이콘	react-icons
DB	Firebase Firestore
서버 상태 관리	React Query
클라이언트 상태 관리	Recoil
번들러	Webpack
패키지 관리 매니저	Yarn Berry

🗂 디렉토리 구조

📦src
 ┣ 📂apis
 ┣ 📂assets
 ┃ ┣ 📂images
 ┃ ┗ 📂styles
 ┣ 📂components
 ┃ ┗ 📂common
 ┣ 📂hooks
 ┣ 📂pages
 ┃ ┣ 📜ErrorPage.tsx
 ┃ ┣ 📜FindProjectPage.tsx
 ┃ ┣ 📜LoadingPage.tsx
 ┃ ┣ 📜MainPage.tsx
 ┃ ┣ 📜MyPage.tsx
 ┃ ┣ 📜ProjectDetailPage.tsx
 ┃ ┣ 📜ProjectEditPage.tsx
 ┃ ┣ 📜ProjectWritePage.tsx
 ┃ ┣ 📜PublicProfilePage.tsx
 ┃ ┗ 📜Root.tsx
 ┣ 📂recoil
 ┣ 📂routes
 ┣ 📂types
 ┣ 📂utils
 ┣ 📜App.tsx
 ┣ 📜index.tsx
 ┗ 📜react-app-env.d.ts

• apis : api 호출 관련 파일
• assets : 로고 및 이미지 파일, 스타일 설정
• components : 각 페이지 내부 컴포넌트
• hooks : 커스텀 훅 파일
• pages : 각 페이지 컴포넌트
• recoil : 리코일 관련 파일
• routes : 라우터 설정 파일
• types : 타입 관련 파일
• utils : 기타 공용으로 사용하는 파일

⭐️ 주요 기능

📌 프로젝트 찾기

• 포지션 별로 필터링 된 프로젝트를 확인할 수 있습니다.

📌 프로젝트 지원 / 초대

• 유저는 참여하고 싶은 프로젝트에 지원할 수 있습니다.
• 작성자는 지원자 목록에서 함께 하고 싶은 지원자를 프로젝트에 초대할 수 있습니다.

📌 쪽지 / 알림

• 유저는 다른 유저에게 쪽지를 보내고 받으며 커뮤니케이션 할 수 있습니다.
• 프로젝트에 초대되거나, 지원한 프로젝트가 마감한 경우 알림이 갑니다.

💡 구현 기능

로그인/회원가입

• 소셜 로그인 (구글, 페이스북, 깃허브)
• 로그인/회원가입 완료 후 프로필, 기술 스택, 포지션 설정
• 유효성 검사

헤더

• 로그인 / 비 로그인 시 네비게이션 다르게 노출
• 페이지 이동 시 해당 메뉴 활성화

메인

• 캘린더로 모집중인 프로젝트 조회
• 조회순/관심순 프로젝트 조회
• 포지션 별 팀원 추천

프로젝트 찾기

• 포지션 별 프로젝트 조회
• 모집 중인 프로젝트 조회

프로젝트 구인 게시글 상세

• 모집 인원, 필요 스택, 예상 기간, 프로젝트 마감일 조회
• 조회수
• 관심 기능
• 공유 기능
• 작성자에게 쪽지 보내기
• 작성자 ➡️ 수정, 삭제, 지원한 인원 프로필 열람 가능, 모집 마감
• 지원자 ➡️ 지원 / 지원 취소 기능

구인 게시글 작성

• 모집 포지션 인원, 기술 스택, 시작/종료/마감 기간 설정
• 썸네일 이미지 추가 가능
• Toast UI 에디터로 마크다운 작성 가능
• 유효성 검사
• 페이지 벗어날 시 경고 모달창

공개 프로필

• 유저 정보 조회
• 쪽지 보내기
• 경력 1년 미만일 경우 새싹 배지
• 참여한/작성한 프로젝트 리스트 조회

마이페이지

• 닉네임, 프로필 이미지, 기술스택, 포지션, 경력 수정
• 유효성 검사
• 회원탈퇴
• 지원한/참여한/작성한/관심있는 프로젝트 리스트 조회

쪽지

• 쪽지 읽기/보내기/답장하기
• 보낸 쪽지함/받은 쪽지함
• 유효성 검사

알림

• 게시글 작성자 ➡️ 지원자 있을 때 알림
• 지원자 ➡️ 매칭 되었을 때, 신청한 프로젝트가 마감 되었을 때 알림
• 알림을 클릭했을 때 해당 프로젝트/프로필 링크로 이동