협업돼지 안녕🖐🏻
📝 프로젝트 회고록
프로젝트가 마무리 된 직후에 쓰고 싶었던 회고록. 발표 전 날 밤새고 하루가 지나니 이력서, 면접 준비 우선 순위에 밀려 이제야 쓰게 되었다.
뭐가 되었든 내 인생 최초의 큰 결과물이고, 이렇게 오랜 시간 하루의 대부분을 사용한 프로젝트는 앞으로도 있기 어려울 것이기 때문에 꼭 남기고 싶었다.
💬 협업돼지 개요
협업돼지는 단기 프로젝트를 위한 기능을 모두 합친 협업툴로, 문서작성·일정 관리·채팅 등을 한 워크스페이스에서 경험할 수 있습니다😄
- 팀 구성 : 프론트엔드(React) 3명 / 백엔드(Node.js) 3명 / Designer : 2명
- 진행 기간 : 2021.07.23 ~ 2021.09.03
- github repository(frontend) : https://github.com/team-pig/pig-frontend
- 협업돼지 사이트 : http://teampig.co.kr
- 협업돼지 소개 영상 : https://youtu.be/PoposHECS3Y
(알찬 소개 영상 모두가 꼭 봐줬으면 좋겠다✨✨)
🔧 기능
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조 너무 감사하고, 모두가 꽃길🌹🌹🌹만 걷길 간절히 바란다💕💕
.png)
(발표일 우리 단체사진)
