/Detto

개발자를 위한 사이드 프로젝트 팀 매칭 플랫폼, Detto (Develop Together)

Primary LanguageTypeScript

💜 Detto


로고

프로젝트 기간 : 2023.02.06 ~ 2023.03.13

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

🎬 발표 영상 보러가기

🎬 시연 영상 보러가기


✨ 프로젝트 소개

Develop Together, Grow Together, Detto

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

프로젝트 문서

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



🙌 팀원 소개

FE 효진 FE 유정 FE 성완 FE 상원 FE 정은 DE 하연
su-no yujleee baesee0806 vpvm96 jeLee94 hayeon



📅 프로젝트 일정

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년 미만일 경우 새싹 배지
  • 참여한/작성한 프로젝트 리스트 조회

마이페이지

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

쪽지

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

알림

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