💻 COGETHER

목차

1. 웹 서비스 소개

2. 기술 스택

3. 시연영상

4. 기능 소개

5. 개발팀 소개

6. 시스템 아키텍쳐

7. 개체 관계 모델 (ERD)

8. 개발 기간

9. 실행 방법

주니어 개발자를 위한 SNS & 커뮤니티, COGETHER 💻

개발공부를 막 시작한 병아리 개발자들. 어떻게 공부해야할 지 막막하신가요? 🙄

TODAY I LEARN! 개발 공부를 인증하고 싶은데 어디서 해야하 지 고민이시라고요?

주니어 개발자들이 함께 그리고, 재밌게 공부할 수 있는 SNS

COGETEHR, 코게더를 이용해 보세요 !

🙄 COGETHER는 무슨 뜻인가요?

Co-op + CODE + TOGETHER의 합성어로서 사용자들의 흥미를 유발해 즐겁게 개발 공부를 같이하자! 라는 의미를 가집니다.

웹서비스 COGETHER는 모두가 함께 그리고 즐겁게 코딩 공부를 하자는 목표 가지고 만들어진 웹사이트입니다.
크게 TIL, 구인, DM, 스터디 라이브, 랭킹 5가지의 기능을 가지고 있습니다.

🛠 기술 스택

Front-end 기술 스택
Back-end 기술 스택
Server 기술 스택

🎬 시연영상

📌 기능 소개

🔎 주요기능 요약

• 게이미피케이션의 적용

  • 경험치를 도입하여 유저들은 레벨을 상승시켜 웹서비스 사용의 동기부여를 부여합니다

• 좌측 메뉴

  • 홈, 구인, 챌린지, 랭킹 탭을 이용해 원하는 페이지로 이동이 가능합니다.

• 홈

  • 유저들의 TIL(Today I learn) 피드를 조회할 수 있는 페이지입니다.

• 구인

  • 스터디, 프로젝트 그룹을 모집하거나 참여할 수 있습니다.

• 챌린지

  • 유저의 공부시간을 측정하여 다른 유저들과 경쟁할 수 있는 경쟁모드와 다른 유저와 협력하여 정해진 시간 내 일회성 스터디를 할수 있는 협력모드로 구성된 페이지입니다.

• 랭킹

  • 작성된 피드 개수, 경험치, 경쟁모드 시간 기준으로 전체 유저 또는 팔로잉한 유저의 랭킹을 확인할 수 있습니다.

👀 주요기능 화면

1. 홈화면

• 작성자의 프로필 사진을 누르면 해당 회원의 프로필 페이지로 이동합니다.

기능	화면	설명
피드검색 & 상세보기 & 좋아요 & 댓글달기		- 유저가 자신이 작성한 글과 유저가 팔로우한 사람들의 최신 피드를 보여줍니다. - 로그인한 유저의 피드와 팔로잉한 유저들의 최신 피드를 조회할 수 있습니다 - 각각의 피드를 클릭하면 상세조회가 가능하고, 댓글 조회 및 작성이 가능합니다 - 유저는 해당 피드에 좋아요 등록, 좋아요 취소를 할 수 있습니다.
피드 작성		- 중앙 우측하단의 "+" 버튼을 누르면 피드를 작성할 수 있습니다.
피드 수정 & 삭제		- 유저 자신이 작성한 게시글을 수정, 삭제할 수 있습니다.

구인

• 상단에 검색창에서 사람이나 프로젝트를 검색할 수 있습니다.
• 탭을 통해 프로젝트와 스터티 창으로 이동할 수 있습니다.
• 스크랩한 글과 현재 사용자가 입력한 글을 따로 볼 수 있습니다.

기능 설명	화면	설명
구인 검색		- 상단에 검색창에서 사람이나 프로젝트를 검색할 수 있습니다.
구인글 작성		- 글의 종류(프로젝트,스터디)와 제목, 시작날짜, 종료날짜, 내용을 입력하면 글을 생성할 수 있습니다.
구인글 삭제		- 유저는 자신이 올린 프로젝트나 스터디 글을 삭제할 수 있습니다.
구인글 상세조회 & 스크랩 & 내 스크랩,내 글 보기		- 스크랩한 글과 현재 사용자가 입력한 글을 따로 볼 수 있습니다. - 유저는 마음에 드는 구인글을 스크랩등록, 취소할 수 있습니다. - 목록의 글을 클릭하여 해당 글의 내용을 상세 조회할 수 있습니다. - 상단 탭을 이용하여 구인,프로젝트, 내 스크랩보기, 내 글보기가 가능합니다.

챌린지

기능 설명	화면	설명
경쟁모드		- GO 버튼을 눌러 하루 공부시간을 측정할 수 있습니다. - GO 버튼을 누르면 시작 시간이 표시되고 1분 마다 당일 총 공부 시간과 랭킹이 업데이트 됩니다. - STOP 버튼을 누르면 시간 측정과 랭킹 업데이트가 종료됩니다.
협력모드 방입장 & 단체 채팅		- 현재 참여하고 있는 협력모드 방이 없고 방 인원 수가 다 차지 않았다면 방에 참여할 수 있습니다. - 협력모드 방에 참여하고 있는 상태라면 목록 가장 첫 번째에 해당 협력모드 방이 표시됩니다. - 협력모드 방에서 나와도 재입장이 가능하고 입장/재입장했을 때 기존 채팅 내역이 표시됩니다. -멤버는 언제든지 나갈 수 있고 협력모드 방의 주인이 방을 종료하는 경우 해당 협력모드 방은 삭제됩니다. - 실시간 단체 채팅이 가능합니다 -전체, 시작 전, 진행중으로 구분하여 전체 조회와 검색이 가능합니다.
협력모드 코드메모		- 협력모드 방에 참여하면 상단의 메모장을 사용하며 실시간 단체 채팅을 진행할 수 있습니다.
협력모드 방생성		- 하단의 작성 버튼을 눌러 협력모드 방 생성 화면으로 이동이 가능합니다. - 협력모드 방 생성 화면에서 제목, 인원, 시간, 내용을 작성하고 방을 등록할 수 있습니다.

랭킹

기능	화면	설명
랭킹		- TIL 개수, 경험치, 경쟁모드 시간 기준으로 전체와 팔로잉 사람들의 랭킹을 확인할 수 있습니다.

채팅

기능 설명	화면	설명
실시간채팅		채팅 목록 버튼을 눌러 채팅방 목록을 조회할 수 있고 채팅방을 눌러 일대일 채팅이 가능합니다.

회원가입 & 비밀번호 찾기

기능 설명	화면	설명
회원가입 - 기술스택등록		- 유저는 자신이 다룰 수 있는 기술을 등록할 수 있습니다
회원가입 - 닉네임, 비밀번호 중복검사		- 닉네임과, 비밀번호의 중복검사를 하고 중복이 발견되면 회원가입이 되지 않습니다.
비밀번호 변경		- 유저는 해당계정의 비밀번호를 변경할 수 있습니다
임시비밀번호 발급		- 가입한 이메일로 임시비밀번호가 전송됩니다.

프로필

기능 설명	화면	설명
내 프로필 정보 수정		-자신의 프로필에서는 수정 버튼이 있어 수정 페이지로 이동할 수 있습니다. - 프로필 수정에서 자신의 프로필 정보를 수정할 수 있습니다.
상대 프로필 조회, 팔로잉, 팔로잉목록조회		- 팔로우/팔로잉 리스트 버튼을 누르면 팔로우 창이 뜹니다. - 팔로우 창에서 사용자의 팔로워/팔로잉 목록을 확인할 수 있습니다.
유저검색		- 검색창을 이용해 이메일, 닉네임으로 유저를 검색할 수 있습니다

시스템 아키텍쳐

개체 관계 모델 (ERD)

👨‍👩‍👧‍👦 개발 팀 소개

역할	이름	담당	깃
팀장	김진회	프론트엔드	https://github.com/KimJinHoe
팀원	박홍철	프론트엔드
팀원	유지연	백엔드	https://github.com/Zyeon
팀원	고나령	백엔드	https://github.com/naryeong-ko
팀원	신성은	백엔드 & 서버 &발표	https://github.com/JudyLia56

이름	개발내용
김진회	- 챌린지 페이지 - DM 채팅창 - 랭킹페이지 - 구인페이지 - sockJS를 사용한 실시간 채팅 구현
박홍철	-로그인 &회원가입 - 메인&피드 페이지 - 프로필페이지
유지연	- 프로젝트 기획관리 - 회원관리 - JWT와 interceptor를 이용한 로그인 인가 구현 - 팔로잉 API - 알림 API
고나령	- 구팀 API - 챌린지 API - - socketio를 이용한 실시간 채팅 API
신성은	- 수동배포 AWS 서버 환경 세팅 - 피드 API - 구팀 API

📅 개발 기간

22.07.05. ~ 22.08.19.

실행방법

Client 실행

1. 원격 저장소 복제

$ git clone https://github.com/2022Cogether/Cogether.git

2. 프로젝트 폴더로 이동

$ cd cogether-fe

3. 필요한 node_modules 설치

$ npm install

5. 개발 서버 실행

$ npm run build