# 4. atom 생성

## src/features/TodoFormModal/atom.ts

```jsx
import { atom } from 'recoil';

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

## src/features/TodoList/atom.ts

```jsx
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

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

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shindongri89.gitbook.io/recoil-todo-list/5.-recoil.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.