📌 task dashboard

보드에 일정 관리와 필터링을 할 수 있는 카드형 대시보드

1. 배포 사이트

https://yourtaskdashboard.netlify.app

2. 제작 기간 & 참여 인원

• 2022.6.2 - 6.7(+ 리팩토링 10.20-)
• 개인 프로젝트

3. 사용 기술 및 라이브러리

• react v18
• typescript
• 라우팅
  • react-router-dom
• 스타일
  • scss
  • css module
  • classnames
• 중앙 저장소
  • recoil
  • recoil-persist(브라우저 localStorage)
• 코딩 컨벤션
  • eslint
  • prettier
  • stylelint
• 기타
  • html-react-parser: dangerouslySetInnerHTML의 안전한 대체제
  • react-beautiful-dnd
  • react-datepicker
  • dayjs

4. 화면 예시

🎈내용 펼치기🎈

확대를 위해 화면 일부만 찍어서 영상에서는 테스크 및 확인 모달이 한 쪽으로 치우쳐 보입니다.

4.1. 보드 생성

보드 추가 네모 버튼 클릭 -> 추가 모달 -> 보드 이름 입력 -> 새 보드 생성

4.2. 보드 수정

보드 햄버거 아이콘 클릭 -> 보드 수정 클릭 -> 수정 모달 -> 보드 이름 수정 -> 보드 수정

4.3. 보드 삭제

보드 햄버거 아이콘 클릭 -> 보드 삭제 클릭 -> 보드 삭제

4.4. 테스크 생성

플러스 버튼 클릭 -> 제목, 태그, 내용, 날짜, 사진 선택 후 Create Task 클릭 -> 카드 생성

• 중복 카테고리 작성 시 중복된 카테고리 항목이 미적용 됩니다.

• 카테고리 추가 버튼을 누르면 input 창이 나타나며, 추가한 카테고리를 클릭하면 삭제가 됩니다.

• 제목이나 카테고리는 필수로 작성해야 하므로 미작성 시 테스크가 추가가 되지 않으며, 오류 메세지를 띄워줍니다.

• 테스크가 보드 크기를 넘을 시 스크롤이 생깁니다.

4.5. 테스크 Drag & Drop

사용자가 카드의 우선 순위와 카드의 진행 상황을 직관적으로 변경할 수 있도록 드래그 앤 드롭 기능을 구현하였습니다.

같은 보드 내 카드 위치 이동 & 다른 보드로의 카드 이동

• 같은 보드 내에서의 테스크 끼리 Drag & Drop을 통해 중요도에 따라 순서를 바꿀 수 있습니다.

• Drag & Drop을 통해 다른 보드로의 이동이 가능하여 테스크 process 상태를 바꿔줄 수 있습니다.

4.6. 테스크 수정

연필 아이콘 클릭 -> 수정 버튼 클릭 -> 제목, 태그, 내용, 날짜, 사진 수정 후 Edit Task 클릭 -> 카드 수정

4.7. 테스크 삭제

연필 아이콘 클릭 -> 삭제 버튼 클릭 -> 모달 확인 버튼 클릭 -> 카드 삭제

4.8. 테스크 카드 필터링

제목, 카테고리, 내용 필터링: 검색 필터링 드롭다운 제목, 카테고리, 내용 클릭 후 단어 또는 문장 입력

전체 필터링: 검색 필터링 클릭 x -> 단어 또는 문장 입력

• 검색어를 입력하면 키워드가 있는 테스크 카드만 필터링되어 보여집니다.

• 키워드는 노란색으로 하이라이트 되어 보여집니다.

• input 창의 x 버튼을 누르면 input 내의 키워드 값이 지워지며, 필터링이 초기화 됩니다.

4.9. 모바일 화면

스크롤을 이용해서 다른 보드를 쉽게 확인할 수 있는 데스크톱 화면과는 달리, 화면이 작은 모바일 화면에서는 그러기가 쉽지 않다고 생각했습니다. 또한 보드에서 보드로의 자유로운 드래그 앤 드롭이 힘들 것이라고 판단하였습니다. 따라서 모바일 반응형 화면에서는 보드마다 다른 route 를 적용하여, 네비게이션으로 보드 사이를 쉽게 이동하고 확인할 수 있도록 하였습니다.

4.9.1. 보드 생성

프로젝트 메뉴 클릭 -> 보드 추가 클릭 -> 보드 이름 입력 -> 새 보드 생성

• 4개 이상의 보드 생성 시 스크롤이 생깁니다.

4.9.2. 보드 수정

프로젝트 메뉴 클릭 -> 보드 수정 클릭 -> 보드 이름 수정 -> 보드 수정

4.9.3. 보드 삭제

프로젝트 메뉴 클릭 -> 보드 삭제 클릭 -> 보드 삭제

4.9.4. 테스크 생성

프로젝트 메뉴 클릭 -> 제목, 태그, 내용, 날짜, 사진 선택 후 Create Task 클릭 -> 카드 생성

4.9.5. 테스크 Drag & Drop

• 드래그를 통해 같은 보드 내 카드 위치 이동이 가능합니다.

4.9.6. 테스크 수정

연필 아이콘 클릭 -> 수정 버튼 클릭-> 제목, 태그, 내용, 날짜, 사진 수정 후 Edit Task 클릭 -> 카드 수정

4.9.7. 테스크 삭제

연필 아이콘 클릭 -> 삭제 버튼 클릭 -> 모달 확인 버튼 클릭 -> 카드 삭제

4.9.8. 테스크 보드 이동

연필 아이콘 클릭 -> 카드 이동 버튼 클릭 -> 보드 선택 -> 선택한 보드로 카드 이동

4.9.9. 테스크 카드 필터링

제목, 카테고리, 내용 필터링

전체 필터링

5. 트러블 슈팅

5.1. input 입력 끊김 현상 해결 📑블로그 글

모바일 환경에서 키워드를 입력할 때, 카드가 필터링 되는 업데이트가 동시에 일어나면서 입력 끊김 UI 현상이 일어났다. 이에 React18의 concurrent 기능을 활용하여 긴급 업데이트(input에 입력)와 전환 업데이트(카드 필터링)를 구분하였다. 이로써 키워드가 부드럽게 입력이 되어 사용성이 높아질 수 있었다.

6. 앞으로 구현할 부분

현재 프론트엔드 기능만을 구현하여 카드 정보 데이터를 서버에 저장하지 않고 있는 상황입니다. firebase 등 서버를 이용하여 추후 리팩토링할 예정입니다.