Taskuit - 일정 관리 서비스

프로젝트 소개

• 일정 관리 서비스를 제공하는 플랫폼인 'Taskuit'입니다.
• 대시보드를 생성하여 멤버를 초대하고 일정을 관리할 수 있어요.

배포 사이트

https://taskuit.vercel.app/

개발 환경

1. 기술 스택

2. 협업 툴

3. 서비스 배포 환경

4. 디자인 시안

5. 코드 컨벤션

코드 컨벤션

6. 커밋 컨벤션

커밋 컨벤션

팀원 역할 분담

⚽️ 오다은

• UI
  • 공통 컴포넌트 : TextInput, DateInput, TagInput, TextArea
  • 페이지 : Dashboard 페이지
  • 반응형 작업
• 기능
  • 카드 및 댓글 무한 스크롤, date 피커, card 상세모달 구현

👒 이진욱

• UI
  • 공통 컴포넌트 : Modal, Toast
  • 페이지 : mypage 페이지
• 기능
  • 전역 상태 관리, 모달 구현, 토스트 구현, 애니메이션, 태그 색상 커스텀

🎾 정지성

• UI
  • 공통 컴포넌트 : SideMenu, DashBoardHeader, LandingHeader, UserProfile, UserInfo, HeaderButtons
  • 페이지 : Login, SignUp 페이지
  • 반응형 작업
• 기능
  • 사이드메뉴 페이지네이션, Auth 리액트 훅폼, ProfileList 드롭다운 페이지네이션

🖥️ 박상준

• UI
  • 공통 컴포넌트 : Button
  • 페이지 : mydashboard, dashboardEdit 페이지, 랜딩 페이지
• 기능
  • 컬러 피커, 드래그앤 드롭, 드래그 사이드 스크롤, 테마/언어 변경

폴더 구조

 ┣ 📜.eslintrc.json
 ┣ 📜.gitignore
 ┣ 📜.prettierrc
 ┣ 📜Portal.tsx
 ┣ 📜README.md
 ┣ 📜next-env.d.ts
 ┣ 📜next.config.mjs
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜postcss.config.mjs
 ┣ 📜request.http
 ┣ 📜tailwind.config.ts
 ┣ 📜tsconfig.json
📦components
 ┣ 📂AppLayout
   ┣ 📂DashboardLayout
   ┣ 📂Edit
   ┣ 📂LandingPageLayout
   ┣ 📂MyDashboard
   ┣ 📂MyPageLayout
   ┗ 📜AppLayout.tsx
 ┣ 📂AuthThemeButton
 ┣ 📂Buttons
 ┣ 📂Chips
 ┣ 📂ColorSelector
 ┣ 📂Footer
 ┣ 📂Headers
 ┣ 📂Inputs
 ┣ 📂Loading
 ┣ 📂Modals
 ┣ 📂SideMenu
 ┣ 📂TextCounter
 ┣ 📂Toasts
 ┣ 📂UserInfo
 ┗ 📜index.ts
📦db
 ┣ 📂config
   ┗ 📜index.ts
 ┣ 📂middlewares
   ┗ 📜cors.ts
 ┗ 📂models
   ┣ 📜tag.ts
   ┗ 📜user.ts
📦hooks
 ┣ 📜useApp.ts
 ┣ 📜useAsync.ts
 ┣ 📜useDebounce.ts
 ┗ 📜useEditBoard.ts
📦public
 ┣ 📂icons
 ┣ 📂images
 ┗ 📜favicon.ico
📦pages
 ┣ 📂api
   ┣ 📂tags
   ┗ 📂users
 ┣ 📂dashboard
   ┗ 📂[dashboardId]
 ┣ 📜404.tsx
 ┣ 📜_app.tsx
 ┣ 📜_document.tsx
 ┣ 📜index.tsx
 ┣ 📜login.tsx
 ┣ 📜mydashboard.tsx
 ┣ 📜mypage.tsx
 ┗ 📜signup.tsx
📦service
 ┣ 📜auth.ts
 ┣ 📜cards.ts
 ┣ // ...
📦store
 ┣ 📂context
   ┣ 📂Provider
     ┗ 📜TotalProvider.tsx
   ┣ 📜DbIdContext.ts
   ┣ 📜LanguageContext.ts
   ┣ // ...
 ┣ 📂reducers
   ┣ 📜cardReducer.ts
   ┣ 📜columnReducer.ts
   ┣ // ...
 ┗ 📜store.ts
📦styles
 ┣ 📜datepicker.css
 ┗ 📜globals.css
📦types
 ┣ 📜auth.ts
 ┣ 📜dashboard.ts
 ┣ // ...
📦types
 ┣ 📜auth.ts
 ┣ 📜dashboard.ts
 ┗ // ...

사이드바 & 상단 네비게이션바

• 로고를 누르면 ('/mydashboard/)로 이동합니다.
• 페이지네이션은 각 페이지 별, 5개의 대시보드 / 프로필을 출력합니다.
• isCreatedByMe 값에 따라 버튼들과 왕관 모양 아이콘이 보임/숨김 처리됩니다.
• 현재 active인 대시보드 또는 호버시에 active style이 적용됩니다.
• 사이드 메뉴의 추가버튼을 통해 대시보드 추가 모달을 띄웁니다.
• 상단 네비게이션의 프로필리스트를 클릭하면, 현 대시보드의 참여 맴버 프로필을 보여줍니다.
• 유저프로필을 클릭하면, 내정보(/mypage), 내 대시보드(/mydashboard), 로그아웃 드롭다운이 보입니다.

로그인 페이지(/login ) & 회원가입 페이지(/signup)

• 유효성 검사에 따라 에러 메세지를 출력합니다.
• 비밀번호가 틀리거나, 존재하는 이메일로 가입을 시도할 경우 에러 메세지와 토스트를 추가로 출력합니다.
• 인풋값이 없거나, 에러 상태인 경우에는 로그인/가입하기 버튼이 비활성화 됩니다.
• 라벨을 누르면 해당 인풋에 focus됩니다.
• 눈모양 아이콘을 누르면 비밀번호 인풋이 text/password 로 타입을 토글합니다.
• 정상적으로 가입이 된 경우, 토스트를 출력하며 /login 페이지로 이동합니다.
• 정상적으로 로그인 된 경우, /mydashboard 페이지로 이동합니다.

메인 랜딩 페이지(/ )

• '로고 버튼'을 클릭하면 / 페이지로 이동합니다.
• '로그인' 버튼을 클릭하면 /login 페이지로 이동합니다.
• '회원가입' 버튼을 클릭하면 /signup 페이지로 이동합니다.
• 로그인이 되어있으면 /dashboard/{첫번째 dashboardid} 로 이동합니다

나의 대시보드 페이지(/mydashboard)

• 내가 만든 대시보드끝에는 👑 이 붙습니다.
• 내 대시보드는 페이지네이션으로 구현합니다.
• 초대받은 대시보드는 무한스크롤로 구현합니다.
• 내 대시보드를 각각을 클릭하면 해당 대시보드 페이지로/dashboard/{dashboardid} 이동합니다.
• '+' 버튼을 클릭하면 대시보드 생성 모달이 나타납니다.
• 초대받은 대시보드가 없으면 “아직 초대받은 대시보드가 없어요”문구를 보여줍니다.
• 초대받은 대시보드에서 이름(title)으로 검색이 가능합니다.(키워드가 이름에 일부라도 포함되면 모두 검색됩니다.)
• 초대받은 대시보드에서 '수락' 버튼을 누르면 대시보드가 추가됩니다.(초대 받은 대시보드 목록에서 유지됩니다.)
• 초대받은 대시보드에서 '거절' 버튼을 누르면 해당 대시보드는 삭제됩니다.

대시보드 생성 모달(/mydashboard)

• '+' 버튼을 클릭하면 대시보드 생성 모달이 나타납니다.
• 대시보드 생성 모달에서 대시보드 이름과 색을 선택해야 '생성' 버튼이 활성화가 됩니다.
• 대시보드 '생성'버튼을 누르면 대시보드가 생성이 되고 /dashboard/{dashboardid} 로 이동합니다

대시보드 페이지(dashboard/{dashboardid})

• 각 칼럼의 카드들이 무한스크롤로 이어집니다.
• 내가 만든 보드는 상단에 '관리' 버튼과 '초대하기' 버튼이 보입니다.
• '관리' 버튼을 누르면 /dashboard/{boardid}/edit로 이동합니다
• '초대하기' 버튼을 누르면 초대하기 모달창이 나타납니다.
• 내가 만든 대시보드 이름 우측에는 왕관 모양이 보입니다.
• '새로운 컬럼 추가하기' 버튼을 누르면 컬럼 추가하기 모달이 나타납니다.
• 각 컬럼의 '+' 버튼을 누르면 해당 컬럼 할 일 생성 모달이 나타납니다.
• 내가 만든 보드는 각 컬럼의 '톱니바퀴' 버튼을 누르면 컬럼 수정 모달이 나타납니다.
• 생성된 할 일 카드를 클릭하면 해당 카드 상세 모달이 나타납니다.

할 일 카드 모달

• 만들어진 카드 정보를 보여줍니다.
• 댓글 input에 값을 입력하고 '입력' 버튼을 누르면 댓글이 남겨집니다.
• 댓글은 무한스크롤로 이어집니다.
• 내가 남긴 댓글을 수정하거나 삭제할 수 있습니다.
• 오른쪽 상단 케밥을 누르면 드롭다운으로 수정하기, 삭제하기를 고를 수 있습니다.
• '수정하기' 버튼을 누르면 할 일 수정 모달이 나타납니다.
• '삭제하기' 버튼을 누르면 해당 카드가 삭제됩니다

태그 색상 커스텀

• 할일 카드의 색상을 원하는대로 선택할 수 있습니다.

사진 업로드

• 할일 카드의 추가할 사진, 프로필 사진에 사용할 사진을 업로드 할때 용량이 4메가 이하로 제한하여 불필요한 리퀘스트를 막게 하였습니다.

할 일 생성, 수정 모달(/dashboard/{dashboardid})

• 할 일 수정 모달은 만들어진 카드 정보로 input이 기본값으로 채워집니다.
• 값이 하나라도 바뀌면 '수정' 버튼이 활성화 됩니다.
• 태그 색상을 9가지 중 선택할 수 있습니다.
• '수정' 버튼을 누르면 해당 카드에 수정된 정보가 반영이 됩니다.

컬럼 추가 모달(/dashboard/{dashboardid})

• 이름 input에 입력값이 없으면 '생성' 버튼은 비활성화 됩니다.
• 활성화된 '생성'버튼을 누르면 컬럼이 추가됩니다.
• 칼럼은 최대 10개까지 생성이 가능합니다.
• 칼럼은 스크롤로 이어집니다.

컬럼 관리 모달(/dashboard/{dashboardid})

• '삭제하기' 버튼을 누르면 “컬럼의 모든 카드가 삭제됩니다” 경고창을 보여줍니다.
• '예' 버튼을 누르면 해당 컬럼의 모든 할 일 카드들이 삭제가 됩니다.
• 수정할 이름을 넣고 '변경'버튼을 누르면 컬럼 이름이 수정됩니다.

대시보드 수정(/dashboard/{dashboardid}/edit)

• 대시보드 이름이나 색을 바꾸고 '변경' 버튼을 누르면 대시보드가 수정됩니다.
• '돌아가기' 버튼을 누르면 /dashboard/{dashboardid}로 이동합니다.
• 대시보드 각 구성원 오른쪽에 있는 '삭제' 버튼을 누르면 구성원이 삭제가 됩니다.
• 구성원 리스트는 페이지네이션으로 구현합니다.
• 초대 내역 리스트는 페이지네이션으로 구현합니다.
• '초대하기' 버튼을 누르면 초대하기 모달창이 나타납니다.
• 초대 내역 각 오른쪽의 '취소'버튼을 누르면 해당 초대는 취소가 됩니다.

초대하기 모달(/dashboard/{dashboardid}/edit)

• 유효한 이메일을 입력하고 '초대' 버튼을 누르면 해당 이메일을 가진 유저에게 초대가 갑니다.
• 중복된 이메일로 초대를 보낼 수 있습니다.
• 값을 입력하지 않으면 '초대' 버튼은 활성화되지 않습니다

계정 관리(/mypage)

• '+' 버튼을 누르면 이미지를 업로드 할 수 있습니다.
• 이메일은 수정할 수 없습니다.
• 닉네임 또는 이미지를 바꾸고 '저장' 버튼을 누르면 정보가 수정됩니다.
• 새 비밀번호 확인 input에서 focus out 일때 새 비밀번호 input 값과 다를 경우 비밀번호 input에 빨간색 테두리와 아래에 “비밀번호가 일치하지않습니다” 빨강색 에러 메세지가 보입니다.
• 모든 input이 채워지면 '변경' 버튼이 활성화 됩니다.
• '변경' 버튼을 눌렀을때 현재 비밀번호 값이 틀리면 “현재 비밀번호가 틀립니다” 경고창이 나타납니다.
• 정확한 현재 비밀번호 값을 입력하고 '변경' 버튼을 누르면 비밀번호가 변경이 됩니다.

컬러 피커

• 대시보드 색상을 지정된 값이 아닌 사용자가 직접 커스텀 가능합니다

테마 변경

• 상단 네이게이션 바에 있는 테마 버튼은 누르면 다크모드로 변경됩니다.

언어 변경

• 상단 네이게이션 바에 있는 언어 버튼을 누르면 영어로 변경됩니다.

드래그 앤 드랍

• 대시보드의 칼럼 할일 목록을 마우스로 드레그해 상태를 변경할수 있습니다.

가로 스크롤

• 대시보드 페이지에서 마우스를 클릭해 가로 스크롤이 가능합니다.