4. atom 생성

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
      }
    }
  })
});