스벨트(Svelte) Todo App 만들어 보기

/*** src/todos.js ***/

import { writable } from "svelte/store";
import { v4 } from "uuid";

/* Todo 목록 */
let _todos = [
  { id: v4(), title: "스벨트 공부", done: false },
  { id: v4(), title: "숨쉬기", done: true },
  { id: v4(), title: "밥먹기", done: false },
]

const createTodos = () => {
  // Writable 스토어 생성
  const todos = writable(_todos);

  // Writable 스토어가 제공하는 함수 꺼내오기
  //  * _update 함수는 Writable 스토어가 제공하는 함수
  //  * update 함수는 아래에서 재정의할 커스텀 함수
  const { subscribe, reset, update: _update } = todos;

  // Todo 추가 함수
  const add = (title) => {
    _update(todos => todos.concat({ id: v4(), title, done: false }));
  }

  // Todo 제거 함수
  const remove = (item) => {
    if(!item) return;
    _update(items => items.filter(_item => _item.id !== item.id));
  }

  // Todo 수정 함수(_update와는 다르다. _update와는...)
  const update = (item) => {
    if(!item) return;
    _update(todos => todos.map(_item => (_item.id === item.id ? item : _item)));
  }

  // Todo CRUD 관련 함수 리턴
  return { subscribe, reset, add, remove, update };
}

export const todos = createTodos();

<!-- src/routes/+page.svelte -->

<script>
  import "bootstrap/dist/css/bootstrap.min.css";
  import { onDestroy } from "svelte";
  import Todo from "../Todo.svelte";
  import { todos } from "../todos";

  // 스토어 구독
  const unsubscribe = todos.subscribe((v) => {
    console.log(v);
  });

  // 컴포넌트가 파괴될 때 스토어 구독 종료
  onDestroy(unsubscribe);

  /* 변수 */
  let inputTodo = ""; // Todo 입력 값
  let refInput; // input 태그를 제어하기 위한 참조 변수

  /* 이벤트 처리 함수 */
  // input 태그 내 엔터 키 입력 이벤트 처리 함수
  const handleEnterKey = () => {
    if(window.event.keyCode == 13) {
      if(inputTodo === ""){ // 입력 값이 비어 있으면 경고 띄운 후 포커스 맞춤
        alert("할 일을 입력해주세요.");
        refInput.focus();
        return;
      }

      todos.add(inputTodo); // 입력 값을 스토어에 저장
      inputTodo = "";
    }
  }

  // 추가 버튼 클릭 이벤트 처리 함수
  const handleAddBtn = () => {
    if(inputTodo === ""){ // 입력 값이 비어 있으면 경고 띄운 후 포커스 맞춤
      alert("할 일을 입력해주세요.");
      refInput.focus();
      return;
    }

    todos.add(inputTodo); // 입력 값을 스토어에 저장
    inputTodo = "";
  }

  // 취소 버튼 클릭 이벤트 함수
  const handleCancelBtn = () => {
    inputTodo = ""; // 입력 값을 초기화 하고 포커스 맞춤
    refInput.focus();
  }

  /* 하위(Todo) 컴포넌트에서 보내온 이벤트를 처리하는 함수 */
  const removeTodo = (e) => todos.remove(e.detail);
  const changeTodo = (e) => todos.update(e.detail);  
</script>

<!-- 네비게이션 바 -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <span>Svelte App</span>
    </a>
  </div>
</nav>

<!-- 메인 항목 -->
<main class="container p-3">
  <!-- 제목 -->
  <h1 class="text-center">TODO LIST</h1>

  <!-- Todo 입력 -->
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingInput" placeholder="무엇을 해야 하나요?" bind:value={inputTodo} bind:this={refInput} on:keyup={handleEnterKey}>
    <label for="floatingInput">무엇을 해야 하나요?</label>
  </div>

  <!-- 추가/취소 버튼 -->
  <div class="row">
    <div class="col">
      <button class="btn btn-primary w-100 p-2" on:click={handleAddBtn}>추가</button>
    </div>
    <div class="col">
      <button class="btn btn-danger w-100 p-2" on:click={handleCancelBtn}>취소</button>
    </div>
  </div>

  <!-- Todo 컴포넌트 배치 -->
  {#each $todos as todo (todo.id)}
    <Todo todo={todo} on:removeTodo={removeTodo} on:changeTodo={changeTodo}/>
  {/each}
</main>

<style>
  /* 구글폰트 import 후 모든 HTML 요소에 나눔고딕 적용 */
  @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
  
  * {
    font-family: 'Nanum Gothic', sans-serif;
  }

  h1 {
    color: #F22208;
  }
</style>

<!-- src/Todo.svelte -->

<script>
  import { createEventDispatcher } from "svelte";
  export let todo; // 상위 컴포넌트에서 받아온 Props

  /* 상위 컴포넌트에 전달할 이벤트 */
  const dispatch = createEventDispatcher();
  const changeTodo = () => dispatch("changeTodo", todo);
  const removeTodo = () => dispatch("removeTodo", todo);

  /* 플래그 및 변수 */
  let isDone = todo.done; // 할 일 완료 여부
  let isChanging = false; // 할 일 수정 중 여부
  let changeBtnName = "수정"; // 버튼 이름(수정 <-> 완료)

  /* 수정 버튼 이벤트 처리 기 */
  const handleChangeBtn = () => {
    isChanging = !isChanging;
    isChanging ? changeBtnName = "완료" : changeBtnName = "수정";
    changeTodo(); // change 이벤트를 상위 컴포넌트로 전달
  }
</script>

<div class="shadow-sm p-3 mb-3 bg-body rounded">
  <div class="row">
    <div class="col">
      <!-- 체크박스: 체크되어 있으면 취소선 표시 -->
      <input type="checkbox" checked={todo.done} on:click={() => isDone = !isDone}>

      <!-- 할 일 변경 중이면 입력 태그를, 아니면 텍스트 출력 -->
      {#if isChanging}
        <input type="text" class="input w-75" bind:value={todo.title}>
      {:else}
        <span class="{isDone ? 'done' : ''}">{todo.title}</span>
      {/if}
    </div>
    <div class="col-3">
      <!-- 수정/삭제 버튼 -->
      <div class="btn-group w-100" role="group" aria-label="Basic mixed styles example">
        <button type="button" class="btn btn-primary" on:click={handleChangeBtn}>{changeBtnName}</button>
        <button type="button" class="btn btn-danger" on:click={removeTodo}>삭제</button>
      </div>
    </div>
  </div>
</div>

<style>
  .done {
    text-decoration: line-through;
    color: gray;
  }
</style>