우리의 일정관리 Taskify

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

모달 기반 일정 관리 서비스

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

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

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

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

wiki 바로가기🔗

프로젝트 소개

일정관리 사이트(Taskify)

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

🎯 담당 페이지 - 로그인/회원가입 페이지

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

1) 주요 기능

[회원가입, 로그인]

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

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

[컬럼, 카드관련 기능]

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

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

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

[대시보드 수정 기능]

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

[접근 권한 제어 관련]

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

[계정 관련]

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

[반응형]

2) 실행방법

$ git clone [email protected]: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
 ┃ ┣ domains
 ┃ ┃ ┣ dashboard
 ┃ ┃ ┣ edit
 ┃ ┃ ┗ myDashBoard
 ┃ ┣ dropdown
 ┃ ┣ modal
 ┃ ┗ myPage
 ┣ constants
 ┣ context
 ┣ hooks
 ┣ lib
 ┣ pages
 ┃ ┣ dashboard
 ┃ ┃ ┗ [boardid]
 ┃ ┣ login
 ┃ ┣ mydashboard
 ┃ ┣ mypage
 ┃ ┣ signup
 ┣ styles
 ┗ utils