[항해99] 협업돼지 정리 및 회고🐷

Jihyun·2021년 9월 11일
0

항해99

목록 보기
45/46

협업돼지 안녕🖐🏻

📝 프로젝트 회고록

프로젝트가 마무리 된 직후에 쓰고 싶었던 회고록. 발표 전 날 밤새고 하루가 지나니 이력서, 면접 준비 우선 순위에 밀려 이제야 쓰게 되었다.

뭐가 되었든 내 인생 최초의 큰 결과물이고, 이렇게 오랜 시간 하루의 대부분을 사용한 프로젝트는 앞으로도 있기 어려울 것이기 때문에 꼭 남기고 싶었다.

💬 협업돼지 개요

협업돼지는 단기 프로젝트를 위한 기능을 모두 합친 협업툴로, 문서작성·일정 관리·채팅 등을 한 워크스페이스에서 경험할 수 있습니다😄


🔧 기능

1. 방

협업돼지에서 은 각 프로젝트를 구분하는 단위입니다.

① 내가 속한 방 리스트 안에서 검색이 가능합니다.
방을 만들거나 기존 방에 입장할 수 있습니다.
③ 다른 사람에게 초대하기 위한 초대링크 복사 버튼 / 방 즐겨찾기 버튼
방을 나갈 수 있습니다. (마스터)의 경우 방을 삭제하거나 수정할 수 있습니다.


방 만들기

방 이미지를 등록할 수 있습니다. 파일, url 모두 가능하며, 입력하지 않으면 기본 이미지로 등록됩니다.
② 방의 정보(제목, 부제목, 태그)를 입력하여 방을 생성할 수 있습니다.


방 입장

⇒ 다른 사람에게 전달받은 방 코드를 입력하면 방 정보가 나타나며 입장할 수 있게 됩니다.


2. 방 - 메인

전체 프로젝트와 방 멤버의 진행상황을 알 수 있습니다. (todo 개수를 기준으로 측정됩니다)
② 마스터가 설정한 방의 정보를 볼 수 있습니다.
나에게 할당된 todo 리스트를 볼 수 있습니다.
④ 방에 있는 멤버들끼리 실시간 채팅이 가능합니다.


3. 방 - 문서

① 문서를 추가하는 버튼입니다.
문서 리스트를 볼 수 있습니다. 왼쪽의 - 버튼을 누르면 삭제가 가능합니다.
문서 제목과 내용을 볼 수 있습니다.
④ 문서를 수정하는 버튼입니다.
⑤ 문서를 마지막으로 편집한 사람, 편집한 시간을 확인할 수 있습니다.


⇒ 문서 추가·수정 시 마크다운 형식으로 왼쪽에는 수정 공간이, 오른쪽에는 미리보기가 보여집니다.


4. 방 - 보드(칸반보드)

① ①번 하나하나를 버킷이라고 부릅니다. 버킷은 카드들의 모음이 됩니다.
버킷을 추가, 삭제할 수 있습니다.
③ 버킷에 속하는 카드를 만들 수 있습니다. 카드는 해야 할 일 단위로 만들어 사용할 수 있습니다.
④ 카드입니다. 클릭하면 카드 상세 내용을 확인할 수 있습니다.

⇒ 카드를 누르면 카드의 상세 내용을 수정할 수 있습니다.
⇒ 카드 제목, 설명, 상세 투두리스트, 투두리스트, 투두리스트 담당자, 카드 색상 수정 가능


5. 방 - 일정(캘린더)

※ 일정(캘린더)에서의 할 일과 보드에서의 할 일은 연동되어 있습니다.

① 현재 캘린더가 몇 년 몇 월을 가리키는지 확인할 수 있습니다. < > 아이콘을 클릭하면 월 이동이 가능합니다.
날짜와 그 날의 할 일을 간단하게 볼 수 있습니다.
새로운 할 일을 등록할 수 있습니다. 일정 등록 시 보드(칸반보드)에도 똑같이 등록됩니다.
④ 캘린더에서 클릭한 날짜와 그 날의 할 일 리스트를 볼 수 있습니다. 일정 클릭 시 보드에서와 같은 카드 상세내용을 볼 수 있습니다.


6. 비밀번호 찾기 기능

⇒ 비밀번호를 분실했을 경우 이메일을 통해 비밀번호 변경을 할 수 있습니다.


7. 반응형 웹

⇒ 여러 기기에서 사용이 가능하도록 반응형 웹으로 구성했습니다.


8. 튜토리얼

⇒ 처음 협업돼지를 사용하시는 분들을 위한 튜토리얼이 제공됩니다.

🛠 사용 기술 및 라이브러리

  • React
  • Connected-router-dom
  • Redux, redux-thunk, immer, redux-actions
  • Socket.io
  • Axios
  • Styled-components
  • formik, yup, lodash, moment, toast-ui/react-editor, react-beautiful-dnd, react-rnd, react-helmet, react-tooltip, react-joyride 등
  • AWS S3
  • AWS Amplify

👩🏻 담당한 기능 (Frontend - React)

  • moment.js를 이용한 캘린더 구현 및 칸반보드와의 데이터 연결
  • socket.io를 이용한 채팅 구현
  • toast-ui-editor을 활용한 문서 CRUD 기능
  • 문서 리스트 사이드바 resize 기능
  • react-joyride를 이용한 튜토리얼 구현
  • Responsive Web 구현(메인, 문서, 캘린더, 채팅)
  • 다양한 패키지를 재사용하기 위해 컴포넌트화(toast-ui/editor, react-joyride, react-rnd 등) 작업

👩🏻‍🎓 프로젝트를 마친 소감

항해99라는 부트캠프를 시작하게 된 가장 큰 계기 중 하나가 팀 프로젝트였다. 그 중에서도 6주나 진행한다는 실전 프로젝트

사실 생각해보면 고난의 연속이었던 것 같다.
1. 팀 구성
2. 기획
3. 프론트-백-디자이너의 협업
4. 새로운 기술들의 연속
5. 마케팅
6. 발표 준비를 위한 밤샘

하지만 지나보니 그 것도 한 때였다.
치열하게 고민해서 머리도 아파보고, 열 날 정도로 코딩하다가 드러누워도 보고, 하고 싶은 말이 목 끝까지 차올랐지만 꾹꾹 눌러도보고😄
그 때는 화나고 힘들고 어려웠지만 지금 생각하면 "그게 뭐라고🤷🏻‍♀️" 싶다.

항상 서로 요구사항을 얘기하고 도우려고 노력하는 팀원들 덕분에 그 모든 것을 이겨낼 수 있었고, 만족스러운 프로젝트로 남을 수 있었다.

항해에서 네 번의 팀 프로젝트를 했지만 정말 솔직하게 마지막 프로젝트야 말로 "아, 내가 협업을 했구나." 라는 생각이 들게한다.
그 정도로 모두가 제 역할을 잘 해주고, 회의가 순기능을 하는 협업이었다.

기분 좋은 끝맺음을 낼 수 있게 해준 우리 7조 너무 감사하고, 모두가 꽃길🌹🌹🌹만 걷길 간절히 바란다💕💕

(발표일 우리 단체사진)

profile
Don't dream it, be it.

0개의 댓글