우리의 일정관리 Taskify

"열심히 살아가는 당신에게 도움이 된다면 좋겠어요"

모달 기반 일정 관리 서비스

동료들과 함께 일정을 정하고 정리해보아요!

멤버를 초대해 일정 카드를 만들고, 마감일을 정해 일을 시작해봅시다.

가끔은 일 뿐만 아니라 맛집이나 일상을 사진에 담아 올리고 댓글로 소통해 보아요 :)

Taskify로 함께 일정관리 하기👩‍👧‍👦

wiki 바로가기🔗

팀원 소개 & 역할

박운성

박지원

안소연

정현진

한지수

박운성

• landing, dashboard/{boardId}/edit Page ui 제작
  
• 페이지네이션 기반 초대 기록, 구성원 조회 및 삭제 기능 구현
  
• Modal 관련 공통 컴포넌트 제작
  (Modal Layout, ConfirmModal)
• 컬럼 추가 모달 제작
  
• 전체 api, api 관련 type 추가
  

박지원

• login, signup Page ui 제작
  
• react-hook-form 기반 회원가입, 로그인 기능 구현
  
• Auth 관련 유효성 검사, debounce 적용
  
• Auth 관련 동적 에러 메세지 모달 제작
  
• 각 페이지의 Header 공통 컴포넌트 제작
  

안소연

• 프로젝트 및 레포 셋팅
  
• 브랜치 전략 문서화
  
• dashboard/{boardId} Page ui 제작
• 무한스크롤 기반 컬럼 조회 기능 구현
• 카드 추가, 수정 및 멤버 외 접근 제한 모달 제작
• 아바타, 태그 컴포넌트 랜덤한 배경 지정 기능 구현
• react-hook-form 기반 Input, SideBar 공통 컴포넌트 제작
  (FormInput, TagInput, AuthInput)
  

정현진

• react-select 기반 드롭다운 컴포넌트 구현
  
• mypage Page ui 제작
  
• react-hook-form 기반 form 제작
  
• input 값 기반 버튼 활성화 기능 구현 및 관련 모달 제작
  
• 프로필 이미지 upload 및 preview 기능 구현

한지수

• mydashboard Page ui 제작
  
• 페이지네이션 기반 대시보드 조회 기능 구현
  
• 무한스크롤 기반 초대 조회 및 수락, 거절 및 검색 기능 구현
  
• 검색 관련 debounce, 로딩ui 적용
  
• Button, Chip 관련 공통 컴포넌트 제작
  
• 로딩 관련 커스텀 훅, 로딩 ui 추가
  

목차

1. 프로젝트 소개

• 주요기능
• 프로젝트 실행방법

2. 프로젝트 구성

• 기술 스택
• Directory 구조

3. 트러블 슈팅

프로젝트 소개

일정관리 사이트(Taskify)

모달 기반의 초대기능이 있는 일정 관리 서비스를 제공합니다
제작기간: 2024.01.25-2024.02.13

1) 주요 기능

[회원가입, 로그인]

[대시보드, 초대 관련 기능]

• 페이지네이션 기반 대시보드 조회, 생성 기능
• 무한스크롤 기반 초대 목록 조회, 초대 응답, 검색 기능

[컬럼, 카드관련 기능]

• 무한 스크롤 기반 할 일 카드 조회 기능
  

• 카드 생성, 수정, 삭제 기능
  

• 댓글 작성, 수정. 삭제 기능
  

[대시보드 수정 기능]

• 대시보드 수정 및 삭제 기능
• 페이지네이션 기반 구성원, 초대 내역 조회
• 구성원 삭제 및 초대 취소 기능

[접근 권한 제어 관련]

• 초대받지 않은 대시보드에 접근하거나 로그인 하지 않은 상태로 페이지에 접근 시 모달
  

[계정 관련]

• 프로필 업로드 ,닉네임·비밀번호 수정 기능
  

[반응형]

2) 실행방법

$ git clone git@github.com:sozign/codeit-top-secret-X.git
$ npm install
$ npm run dev

http://localhost:3000 접속

프로젝트 구성

1) 기술스택

2) Directory 구조

src
 ┣ components
 ┃ ┣ common
 ┃ ┃ ┣ Buttons
 ┃ ┃ ┣ Chips
 ┃ ┃ ┣ Headers
 ┃ ┃ ┣ Input
 ┃ ┃ ┣ spinner
 ┃ ┃ ┣ Avatar.tsx
 ┃ ┃ ┣ PageLayout.tsx
 ┃ ┃ ┣ SideBar.tsx
 ┃ ┃ ┗ SideBarPagination.tsx
 ┃ ┣ domains
 ┃ ┃ ┣ dashboard
 ┃ ┃ ┣ edit
 ┃ ┃ ┗ myDashBoard
 ┃ ┣ dropdown
 ┃ ┣ modal
 ┃ ┗ myPage
 ┣ constants
 ┃ ┣ types.ts
 ┃ ┗ validation.ts
 ┣ context
 ┃ ┣ DashboardContext.tsx
 ┃ ┗ UserContext.tsx
 ┣ hooks
 ┃ ┗ useAsync.ts
 ┣ lib
 ┃ ┣ api.ts
 ┃ ┗ axios.ts
 ┣ pages
 ┃ ┣ dashboard
 ┃ ┃ ┗ [boardid]
 ┃ ┃ ┃ ┣ edit.tsx
 ┃ ┃ ┃ ┗ index.tsx
 ┃ ┣ login
 ┃ ┃ ┗ index.tsx
 ┃ ┣ mydashboard
 ┃ ┃ ┗ index.tsx
 ┃ ┣ mypage
 ┃ ┃ ┗ index.tsx
 ┃ ┣ signup
 ┃ ┃ ┗ index.tsx
 ┃ ┣ 404.tsx
 ┃ ┣ index.tsx
 ┃ ┣ _app.tsx
 ┃ ┗ _document.tsx
 ┣ styles
 ┃ ┣ font.js
 ┃ ┗ globals.css
 ┗ utils
    ┗ stringToNumber.ts

트러블 슈팅

트러블 슈팅 노션 바로가기🛠