im-gnar/ShareToDolistProject

🌱협업을 위한 실시간 공유형 To-Do List🌱

📋 WorkOurself 📋

Work hard, Try Ourself!

🔖 목차

목차

1. ➤ 웹서비스 설명
2. ➤ 사이트
3. ➤ 기술 스택
4. ➤ FE & BE 역할 분담
5. ➤ 기획 & 설계
6. ➤ 개발 기간
7. ➤ PreView

👩‍🏫 웹서비스 설명

Work Ourself 는 개인 및 팀단위 프로젝트의 태스크를 등록, 공유하고 관리하는 협업을 위한 서비스입니다. 팀원들과 협업 과정에서 필요한 과제들을 To-Do List 형식으로 등록하고 공유할 수 있습니다. 체크리스트를 채우며 진행 상황을 공유하고, 실시간 채팅을 통해 소통하며 효율적으로 프로젝트를 진행할 수 있도록 돕는 서비스입니다.

메인페이지

• 회원가입/로그인
  • 로그인한 유저만 방을 조회, 생성, 참여할 수 있습니다.
  • 닉네임과 비밀번호로 간편하게 회원가입할 수 있으며, 중복된 닉네임은 사용할 수 없습니다.
  • 로그아웃을 하기 전까지 유저의 로그인 정보는 유지됩니다.
• 방 등록
  • 생성할 방의 이름을 입력하고 추가 버튼을 눌러 간단하게 방을 생성할 수 있습니다.
  • 같은 유저라도 여러 개의 방을 생성하고 참여할 수 있습니다.
• 방 검색
  • 방 목록 상단의 검색창에 호스트 이름 혹은 방 이름을 검색해 참여하고자 하는 방을 찾을 수 있습니다.
• 참여자 관리
  • 참여 신청이 오면 승인 대기자 목록에 참여 신청자가 추가되며, 운영자에게 참여 신청이 있다는 메일이 발송됩니다. 만약 승인 전에 참여 신청자가 참여 신청 취소를 한다면, 승인 대기자 목록에서 삭제되어 표시되지 않습니다.
  • 승인 대기자, 참여자 목록에는 참여신청자의 이메일이 표시됩니다. 이 연락처를 사용해 참여신청자와 연락 후 승인, 거절 여부를 결정합니다.
  • 승인 -> 참여자 목록에 추가되며, 참여 신청자에게 승인 메일이 발송됩니다.
  • 거절 -> 승인 대기자 목록에서 삭제되며, 참여 신청자에게 거절 메일이 발송됩니다.
  • 독서모임 참여자를 내보내고 싶을 때에는 참여자 목록에서 '내보내기'버튼을 클릭해 참여자 목록에서 삭제할 수 있습니다.
  • 내보내기 -> 참여자 목록에서 삭제되며, 참여자에게 내보내기 되었다는 메일이 발송됩니다.

프로젝트 방

• 실시간 채팅
  • 방에 입장하게 되면 기존에 접속해있던 멤버들에게 입장이 공지됩니다.
  • 방에서 나가게 되면 남아있는 멤버들에게 퇴장이 공지됩니다.
  • 실시간 채팅으로 팀원들과 소통할 수 있습니다.
• 공유형 To Do List
  • 모든 멤버는 우측 투두리스트에 태스크를 등록, 수정, 삭제할 수 있습니다.
  • 태스트 수정 시 취소를 누르면 변경사항은 저장되지 않고 원래 태스크로 돌아갑니다.
  • 달성한 태스크를 체크로 토글하면 달성률이 올라갑니다.
  • 반대로 체크되어있던 태스크를 미달성 상태로 되돌리면 달성률이 내려갑니다.
  • 달성률은 등록된 태스크의 총 갯수에 따라 지정됩니다. 따라서 신규 태스크를 등록하거나 기존 태스크를 삭제해도 달성률이 오르거나 내릴 수 있습니다.
  • 모든 변경사항은 실시간으로 팀원들과 공유됩니다.

💻 사이트

• 실서버 링크 : http://workourself.com:5000
  

🗃 기술 스택

FE

• Javascript, Tailwind

BE

• Python 3.8, Flask
• NodeJS, Express
• MySQL
• AWS LightSail, Route53
• Docker + Nginx

👨‍💻 FE & BE 역할 분담

프로젝트 칸반보드✨

FE, BE

• yoojeong jang

👩‍💻 기획 & 설계

• ⚙ DB 명세서

• 📝 API

회원가입

method	uri
POST	/signin

{
  request: {
    id: ""
    pwd: ""
  }
 response: STATUS:302, URL: "/login"
}

아이디 중복체크

method	uri
POST	/emilcheck

{
 request: {
   email : ""
 }
 response: {
   jsonify(ok = response)
 }
 // response = true / false
}

로그인

method	uri
POST	/login

{
 request: {
   id : ""
   pwd : ""
 }
 response: {
   login: True
   roomList : []
 }
 // STATUS : 302
 // URL : "/"
}

프로젝트 방 입장

method	uri
GET	/todolist/<roomId>

{
 response: {
   user: session.get(user),
   roomId: "",
   roomName: ""
 }
}

🗓 개발 기간

• ver 1. (2021/02 ~ 2021/05)

🎇 PreView

🎇 Signin && Login

🎇 Room Search && Create

🎇 Chat

🎇 To DO CRUD