# todo store 적용 3 :  컴포넌트에 store 연동

* TodoList

```
<script>
import TodoItem from './TodoItem.svelte'
import { fetchTodos } from '../store'
import { fade, fly } from 'svelte/transition'
import { flip } from 'svelte/animate'
</script>

<div class="main">
  <ul>
    {#each $fetchTodos as todo, index(todo.id)}
      <li
        in:fade
        out:fade="{{duration: 100}}"
        animate:flip="{{duration: 1000}}"
        >      
        <TodoItem {todo} />
      </li>
    {/each}
  </ul>
</div>
```

* TodoItem

```
<script>
import { todos } from '../store'

export let todo

const handleCheckTodo = () => todos.checkTodo(todo.id)
const handleChangeTodoEditMode = () => todos.changeTodoEditMode(todo.id)
const handleEditTodo = () => {
  todos.editTodo(todo)
  todos.closeTodoEditMode()
}

const handleRemoveTodo = () => todos.removeTodo(todo.id)

</script>

<input type="checkbox" bind:checked={todo.done} on:click={handleCheckTodo} />
{#if $todos.editMode === todo.id }
  <input type="text" bind:value={todo.content} on:focusout={handleEditTodo} >
{:else}
  <span on:dblclick={handleChangeTodoEditMode}>{todo.content}</span>
{/if}
<a href="#null" on:click={handleRemoveTodo} >X</a>
```

* TodoHeader.svelte

```
<script>
import { todoForm, todos } from '../store'

const handleTodoAdd = (e) => {
  if(e.keyCode === 13) {
    todos.addTodo($todoForm)
  }
}
</script>

<header>
  <div class="wrap">
    <h1>SVELTE TODO</h1>
    <input type="text" bind:value={$todoForm} on:keyup={handleTodoAdd} >  
  </div>
</header>
```

* TodoInfos.svlete

```
<script>
import { todos, countTodo } from '../store'
import Constant from '../constant'

const handleFetchTodoALL = () => todos.changeTodoView(Constant.ALL)
const handleFetchTodoActive = () => todos.changeTodoView(Constant.ACTIVE)
const handleFetchTodoDone = () => todos.changeTodoView(Constant.DONE)

</script>

<div class="info">
  <div class="wrap">
    <span>COUNT: {$countTodo}</span>
    <div>
      <button class:selected={$todos.viewMode === Constant.ALL} class="btn" on:click={handleFetchTodoALL} >ALL</button>
      <button class:selected={$todos.viewMode === Constant.ACTIVE} class="btn" on:click={handleFetchTodoActive} >ACTIVE</button>
      <button class:selected={$todos.viewMode === Constant.DONE} class="btn" on:click={handleFetchTodoDone} >DONE</button>
    </div>  
  </div>
</div>

<style>
.selected {
  border-bottom: 2px solid #005EFF;
}
</style>
```



[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&#x26;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>

