You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
팀원 추가: 서버에서 가져온 팀원 목록에서 필요한 팀원을 선택하여 일정에 추가할 수 있습니다.
팀원 제거: 일정에 배정된 팀원 목록에서 팀원을 제거할 수 있습니다.
팀원 정보: 각 팀원의 아바타와 이름이 함께 표시됩니다.
3. 상태 및 우선순위 관리
각 일정에 대해 상태 및 우선순위를 설정할 수 있는 기능을 지원합니다.
상태: 일정의 상태를 할 일, 진행 중, 완료로 설정할 수 있습니다.
우선 순위: 높음, 중간, 낮음으로 우선순위를 설정하여 일정의 중요도를 명확히 할 수 있습니다.
4. 소속 팀 설정
사용자는 이메일 인증을 통해 소속 팀을 인증하고 설정할 수 있습니다. 이를 통해 팀 단위 일정 관리가 가능합니다.
5. 일정 서버 동기화
서버와의 동기화:
서버에서 프로젝트 및 일정을 불러와 로컬 클라이언트와 동기화하여 최신 상태를 유지합니다.
일정 생성, 수정, 삭제 시 서버와 즉시 동기화하여 데이터를 일관성 있게 유지할 수 있습니다.
6. 캘린더 일정 뷰
캘린더 UI를 통해 프로젝트 및 일정을 시각적으로 한눈에 확인할 수 있습니다.
각 일정 항목은 시각적으로 쉽게 구분될 수 있도록 색상으로 표시되며, 일정을 클릭하면 세부 정보가 포함된 모달 창이 팝업됩니다.
7. 회원 관리 기능
회원가입: 사용자가 회원가입을 하면 데이터베이스에 유저 정보가 저장되어 관리됩니다.
로그인: 등록된 사용자 정보로 로그인하여 시스템에 접근할 수 있습니다.
4. 화면 구성 📺
로그인 페이지
회원가입 페이지
메인 페이지
팀 설정 페이지
캘린더 페이지
캘린더 상세 모달
일정 추가 모달
비밀번호 재설정
내 정보 모달
5. Tasks & Responsibilities (작업 및 역할 분담)
이주영
일정 등록, 수정, 삭제
팀 리딩 및 커뮤니케이션
일정/유저 상태관리
조아라
로그인상태유지(프록시설정)
캘린더/ 랜딩 / 유저정보수정
비밀번호 재설정요청/ 재설정
이서빈
캘린더 모달, 댓글
유저정보 모달(소속 팀)
팀 정하기
김영현
팀
프로젝트
업무
손석경
유저
인증
업무
6. Technology Stack (기술 스택)
6.1 Frotend
기술 스택
설명
로고
React
사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다.
TailwindCSS
빠르고 유연한 스타일링을 위한 유틸리티 중심의 CSS 프레임워크입니다.
TypeScript
JavaScript에 정적 타입을 추가하여 코드의 안정성을 높이는 언어입니다.
Zustand
전역 상태 관리를 위한 간단하고 빠른 상태 관리 라이브러리입니다.
6.2 Backend
기술 스택
설명
로고
Node.js
서버 측 애플리케이션 개발을 위한 JavaScript 런타임입니다.
Express
Node.js 위에서 작동하는 빠르고 유연한 웹 애플리케이션 프레임워크입니다.
MongoDB
확장성 있고 유연한 데이터 저장을 위한 NoSQL 데이터베이스입니다.
TypeScript
JavaScript에 정적 타입을 추가하여 코드의 안정성을 높이는 언어입니다.
6.3 Cooperation
도구
로고
Git
GitLab
Notion
Discord
7. Project Structure (프로젝트 구조, 백엔드)
BACK/
├── db/ # 데이터베이스 설정 파일
├── node_modules/ # 설치된 npm 모듈
├── README.asset # README에 사용된 에셋 파일
├── src/
│ ├── interface/ # 타입 및 인터페이스 정의 파일
│ ├── middleware/ # 미들웨어 모듈
│ ├── models/ # 데이터베이스 모델 파일
│ ├── uploads/ # 파일 업로드 폴더
│ └── utils/ # 유틸리티 함수 모음
├── .gitignore # Git에서 무시할 파일 및 폴더 목록
├── index.ts # 애플리케이션 진입 파일
├── package-lock.json # 정확한 종속성 버전 기록 파일
├── package.json # 프로젝트 종속성 및 스크립트 정의
├── README.md # 프로젝트 개요 및 사용법
└── tsconfig.json # TypeScript 설정 파일
8. Development Workflow (개발 워크플로우)
브랜치 전략 (Branch Strategy)
우리의 브랜치 전략은 Git Flow를 기반으로 하며, 다음과 같은 브랜치를 사용합니다.
Master Branch
배포 가능한 상태의 코드를 유지합니다.
모든 배포는 이 브랜치에서 이루어집니다.
Dev branch
팀원 각자의 개발한 내용을 합쳐서 테스트 하는 브랜치 입니다.
Master 브랜치로 배포 전 최종 확인을 합니다.
feat{name} Branch
팀원 각자의 개발 브랜치입니다.
모든 기능 개발은 이 브랜치에서 이루어집니다.
9. Coding Convention
문장 종료
// 세미콜론(;)
console.log("Hello World!");
명명 규칙
변수 & 함수 : 카멜케이스
10. 커밋 컨벤션
기본 구조
type : subject
type 종류
feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 수정
style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
refactor : 코드 리펙토링
test : 테스트 코드, 리펙토링 테스트 코드 추가
chore : 빌드 업무 수정, 패키지 매니저 수정
커밋 예시
== ex1
feat: "회원 가입 기능 구현"
== ex2
fix: "DB연결 에러 해결"
