🛠 시연 영상

시연 영상

출처 : jjyy0804(팀장)

1. Project Overview (프로젝트 개요)

• 프로젝트 이름: Todolo
• 협업 플랫폼인 Trello를 모티브 삼아 팀별로 일정을 공유하고, 캘린더를 통해 관리 할 수 있는 업무지원 플랫폼
• 핵심 문제점 : 모티브 삼은 Trello 서비스는 Kanban 방식의 일정 관리와 개인 일정 관리가 주를 이루고 있고, 일정이 많아질수록 한눈에 보기 어려움.
• 프로젝트 목표: Trello의 한계를 보완하여, Kanban과 캘린더 기반으로 팀별로 일정과 업무를 효율적으로 공유하고, 역할 기반의 권한 관리 등을 제공하는 팀별 일정 공유 및 업무 지원 플랫폼을 개발.

2. Team Members (팀원 및 팀 소개)

이주영	조아라	이서빈	김영현	손석경
FE	FE	FE	BE	BE
GitHub	GitHub	GitHub	GitHub	GitHub

3. Key Features (주요 기능)

1. 일정 관리 기능

• 팀 및 프로젝트 기반의 일정을 생성하고 효율적으로 관리할 수 있는 기능을 제공합니다.
• 일정 항목에는 다음과 같은 정보가 포함됩니다:
  • 프로젝트: 해당 일정이 속한 프로젝트의 이름
  • 제목: 일정의 제목
  • 내용: 일정의 상세 설명
  • 상태: 할 일, 진행 중, 완료 중 하나로 설정 가능
  • 우선순위: 높음, 중간, 낮음으로 설정 가능
  • 시작 날짜: 일정 시작일 선택
  • 종료 날짜: 일정 종료일 선택
  • 팀원: 해당 일정에 참여하는 팀원 지정

2. 팀원 관리 기능

• 일정에 팀원을 추가하거나 제거하는 기능을 제공합니다.
  • 팀원 추가: 서버에서 가져온 팀원 목록에서 필요한 팀원을 선택하여 일정에 추가할 수 있습니다.
  • 팀원 제거: 일정에 배정된 팀원 목록에서 팀원을 제거할 수 있습니다.
  • 팀원 정보: 각 팀원의 아바타와 이름이 함께 표시됩니다.

3. 상태 및 우선순위 관리

• 각 일정에 대해 상태 및 우선순위를 설정할 수 있는 기능을 지원합니다.
  • 상태: 일정의 상태를 할 일, 진행 중, 완료로 설정할 수 있습니다.
  • 우선 순위: 높음, 중간, 낮음으로 우선순위를 설정하여 일정의 중요도를 명확히 할 수 있습니다.

4. 소속 팀 설정

• 사용자는 이메일 인증을 통해 소속 팀을 인증하고 설정할 수 있습니다. 이를 통해 팀 단위 일정 관리가 가능합니다.

5. 캘린더 일정 뷰

• 캘린더 UI를 통해 프로젝트 및 일정을 시각적으로 한눈에 확인할 수 있습니다.
• 각 일정 항목은 시각적으로 쉽게 구분될 수 있도록 색상으로 표시되며, 일정을 클릭하면 세부 정보가 포함된 모달 창이 팝업됩니다.

6. 회원 관리 기능

• 회원가입: 사용자가 회원가입을 하면 데이터베이스에 유저 정보가 저장되어 관리됩니다.
• 로그인: 등록된 사용자 정보로 로그인하여 시스템에 접근할 수 있습니다.

4. 화면 구성 📺

로그인 페이지	회원가입 페이지	메인 페이지
팀 설정 페이지	캘린더 페이지	캘린더 상세 모달
일정 추가 모달	비밀번호 재설정	내 정보 모달

---

5. Tasks & Responsibilities (작업 및 역할 분담)

이주영		일정 등록, 수정, 삭제 팀 리딩 및 커뮤니케이션 일정/유저 상태관리
조아라		로그인상태유지(프록시설정) 캘린더/ 랜딩 / 유저정보수정 비밀번호 재설정요청/ 재설정
이서빈		캘린더 모달, 댓글 유저정보 모달(소속 팀) 팀 정하기
김영현		팀 프로젝트 업무
손석경		유저 인증 업무

6. 설계 구조

6.1 ERD 다이어그램

6.2 유저 팀 선정 API 설계 구조 (시퀀스 다이어그램)

6.3 시스템 아키텍처

7. 주요 작업

• Layered Architecture를 도입하여 책임과 관심사를 분리함으로써 코드의 확장성과 유연성을 개선했습니다.
• 회원가입 및 로그인 시 유효성 검증을 위해 Joi를 활용하여 validator를 만들어서 입력값 조건(이메일 형식, 비밀번호 강도 등)을 검증하고, 서버의 데이터 무결성을 강화했습니다.
• AppError 클래스를 활용해 HTTP 상태 코드와 운영 오류 정보를 포함한 커스텀 에러를 구현하여 에러 핸들링 로직을 단순화했습니다. 또한, errorHandler 미들웨어를 통해 Joi 유효성 검사 오류와 서버 오류를 구분해 일관된 에러 응답을 제공함으로써, 디버깅과 유지보수 효율성을 향상시켰습니다.
• 업무와 프로젝트에 조인이 필요할 때 MongoDB aggregate를 사용해 데이터를 한 번의 쿼리로 처리하여 불필요한 DB I/O 오버헤드를 줄여서 API 호출을 더 효율적으로 처리했습니다.
• 팀 소속 인증 시 링크가 해당 유저에게 메일로 보내지게 되는데 인증 과정 없이 즉시 팀이 결정되는 취약점을 발견해서 토큰 검증을 통해 링크의 유효성을 확인하고 팀에 소속되는 로직을 도입하여 안전성을 강화했습니다.
• 팀 , 프로젝트, 업무, 사용자 등의 도메인에 관한 ERD를 설계하고, CRUD API를 개발했습니다.

8. Technology Stack (기술 스택)

8.1 Frotend

기술 스택	설명	로고
React	사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다.
TailwindCSS	빠르고 유연한 스타일링을 위한 유틸리티 중심의 CSS 프레임워크입니다.
TypeScript	JavaScript에 정적 타입을 추가하여 코드의 안정성을 높이는 언어입니다.
Zustand	전역 상태 관리를 위한 간단하고 빠른 상태 관리 라이브러리입니다.

8.2 Backend

기술 스택	설명	로고
Node.js	서버 측 애플리케이션 개발을 위한 JavaScript 런타임입니다.
Express	Node.js 위에서 작동하는 빠르고 유연한 웹 애플리케이션 프레임워크입니다.
MongoDB	확장성 있고 유연한 데이터 저장을 위한 NoSQL 데이터베이스입니다.
TypeScript	JavaScript에 정적 타입을 추가하여 코드의 안정성을 높이는 언어입니다.