패스트캠퍼스 챌린지 41일차 (Recoil 2)

22.3.5 (토) +41days

https://recoil-todo-list.netlify.app/

실습예제

Use-Cases

좌, 우 아이콘 버튼을 클릭하여 이전 달, 다음 달로 이동 가능하다.
오늘 날짜는 #313133 색으로 표시
날짜를 선택하면 해당 날짜#7047EB 색으로 표시
선택한 날짜의 숫자를 더블 클릭하면 해당 날짜의 할 일 목록의 통계 모달을 노출시킨다.
- 할 일 목록이 있을 시에 리스트로 노출되고 제 아이콘을 눌러 제 가능하다.
선택한 날짜의 빈 곳을 더블 클릭하면 해당 날짜의 할 일 등록 모달을 노출시킨다.
- 할 일을 입력하고 엔터 키를 누르면 해당 날짜의 할 일 목록에 추가된다.
- 해당 날짜의 할 일 목록이 3개가 넘게되면 그 외 n 개 로 표시된다.
- 그 외 n 개를 클릭하면 해당 날짜의 할 일 목록 통계 모달 노출시킨다.
할 일을 선택 후 백 스페이스 키를 누르면 해당 할일이 제거된다.

src/features/TodoFormModal/atom.ts

import { atom } from 'recoil';

export const todoFormModalOpenState = atom<boolean>({ // 할 일 등록 모달
  key: 'todoFormModalOpenState',
  default: false
});

src/features/TodoList/atom.ts

import { atom, atomFamily, selectorFamily } from 'recoil';
import { isSameDay } from '../../utils/date';

export interface Todo {
  id: string;
  content: string;
  done: boolean;
  date: Date;
}

export const todoListState = atom<Array<Todo>>({ // 할 일 목록
  key: 'todoListState',
  default: [],
});

export const selectedDateState = atom<Date>({ // 선택한 날짜
  key: 'selectedDateState',
  default: new Date(),
});

export const selectedTodoState = atom<Todo | null>({ // 선택한 할 일
  key: 'selectedTodoState',
  default: null,
});

export const filteredTodoListState = atomFamily<Array<Todo>, Date>({ // 선택한 날짜의 할 일 목록
  key: 'filteredTodoListState',
  default: selectorFamily({
    key: 'filteredTodoListState/default',
    get: (selectedDate) => ({ get }) => {
      const todoList = get(todoListState);

      return todoList.filter(todo => isSameDay(todo.date, selectedDate));
    }
  })
});

src/features/TodoStatisticsModal/atom.ts

import { atom, atomFamily, selectorFamily } from 'recoil';
import { filteredTodoListState } from '../TodoList/atom';

export const todoStatisticsModalOpenState = atom<boolean>({
  key: 'todoStatisticsModalOpenState',
  default: false
});

export const todoStatisticsState = atomFamily<{ total: number, done: number }, Date>({
  key: 'todoStatisticsState',
  default: selectorFamily({
    key: 'todoStatisticsState/default',
    get: (selectedDate) => ({ get }) => {
      const todoList = get(filteredTodoListState(selectedDate));

      return {
        total: todoList.length,
        done: todoList.filter(todo => todo.done).length || 0
      }
    }
  })
});