Skip to content

Latest commit

 

History

History
247 lines (194 loc) · 9.19 KB

README.md

File metadata and controls

247 lines (194 loc) · 9.19 KB
Raw

우리의 일정관리 Taskify

pc

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

모달 기반 일정 관리 서비스


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

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

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


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) 주요 기능

[회원가입, 로그인]
회원가입 로그인


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

대시보드 관련 기능

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

[컬럼, 카드관련 기능]

무한 스크롤

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

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

댓글 작성 및 수정

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

[대시보드 수정 기능]

관리~초대하기
멤버삭제~돌아가기

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

[접근 권한 제어 관련]

미로그인 모달
대시보드 주인 아닐때

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

[계정 관련]

계정 프로필/비밀번호 수정

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

[반응형]

반응형1 반응형2

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
 ┃ ┃ ┣ 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

트러블 슈팅

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