[Vue-todo-list] #2 카테고리가 있는 Todo List 만들기

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링

[Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일

---

위처럼 단순하게 to do 리스트를 추가하고, 편집하고, 완료하는 기능에서, 아래의 카테고리 편집 기능을 넣었다.

 

카테고리 추가 기능을 위한 UI

위 Nav Bar에 Daily Report에서는 간단한 데이터를 파이 차트, 라인 차트로 시각화해 보여주는데, 그때를 위한 색 지정이 필요해 <input type="color"> 태그의 컬러 피커를 처음 써봤다.

기존 input 창에서 글 쓰고 엔터를 hit 하면 새로운 카테고리가 등록되는 것에서 컬러도 함께 저장할 수 있게 했다. @keyup.enter="addCate()" 메서드를 썼다.

 

컨트롤 패널 부분은 table로 짰는데, 두 번째 row인 <tr> 내부에서 select에 대한 v-for 때문에 살짝 애를 먹었다. 위 상태의 깔끔한 UI를 그대로 진행하려는데 구성이 아래와 같았기 때문이다.

 

<tr v-for="(item, index) in categories." :key="index">
	<td><label /></td>
    <td><input /><td>
    <td><label /></td>
    <td>
    	<select>
        	<option v-for="(cate, idx) in categories" :key="idx" :value="cate.title" :label="cate.title">
        </select>
        <input />
   	</td>
    

 

간략하게 이런 구조인데, select 태그 내 option에 v-for로 현재까지 저장된 categories 의 배열을 받아와 뿌려주는 것까지는 좋았는데, v-for가 적용되지 않는 곳에서 cate를 가지고 올 수가 없었다. 할 수 없이 <td> 내부의 <select>는 그대로 두고 <tr>에서 같은 데이터를 가지고 v-for를 한 번 더 썼다.

 

이런 경우에는 <tr>이 반복되므로, 아래처럼 배열을 slice 해줄 필요가 생긴다.

 

<tr v-for="(item, index) in categories.slice(this.sliceNum, this.sliceNum + 1)" :key="index">

 

그러면 화면에서는 아까처럼 딱 필요한 한 줄만 얻을 수 있게 된다. 0, 1이 아닌 sliceNum 변수를 넣어준 것은 카테고리를 클릭했을 때 이 <tr>를 동적으로 바꿔주기 위해서였다. <select>의 <option> 내부에는 :value나 :label 등의 디렉티브가 여러 개가 있지만, v-for를 중첩으로 쓸 순 없었으므로, <select> 태그에 @chage 이벤트를 걸어 변화가 생겼을 때 changeCateInfo($event) 메서드를 invoke 시켰다.

 

changeCateInfo(event: any) {
      const currentTitle = event.target.value;
      for (let i = 0; i < this.categories.length; i++) {
        if (this.categories[i].title === currentTitle) this.sliceNum = i;
      }
    },

this.categories는 Vuex를 통한 상태 관리를 위한 store.js에 저장해둔 state의 하나인데, 저장해둔 배열을 가지고 오는 변수이다. this.categories 길이만큼 반복하면서 event.target.value와 title이 일치할 때 해당 인덱스를 sliceNum에 넣어주기로 했다.

 

그러면 <tr> 밑의 color picker도 해당 카테고리 타이틀에 맞는 색을 출력해줄 수 있게 된다.

다만 여기서 또 <select>의 <option>의 라벨이 제대로 표기가 안 되는 문제점이 생기는데 한참 헤매다가 :required 디렉티브와 :selected로 해결을 봤다.

 

<select
    name="categories"
    id="categories"
    class="w-1/3 mr-3 pl-2 border rounded border-solid border-primary-lightgray"
    @change="changeCateInfo($event)"
    :required="true"
  >
    <option
      v-for="(cate, idx) in categories"
      :key="idx"
      :value="cate.title"
      :label="cate.title"
      :selected="cate.title === item.title"
      >{{ cate.title }}</option
    >
</select>

두 디렉티브 모두 boolean 값을 받는다. 그러면 중첩된 두 v-for의 item과 cate 객체를 모두 가지고 와 서로의 title을 비교하고, 일치한다면 true를 반환해 해당 라벨을 보여줄 수 있게 된다.

Store

 

카테고리 역시 store에 저장해 state로 관리하고, localStorage에 저장해서 사용할 수 있게 했다. 라벨을 지정하고 컬러를 pick하거나 컬러를 변경하지 않고 타이틀만 작성하고 엔터를 hit하면 this.$store.commit("<mutation 이름 >", payload) store로 커밋을 하도록 했다.

 

changeExistingCate(item: Category, event: any, param: string) {
      const cateIndex = this.categories.indexOf(item);
      if (param === "color") {
        this.$store.commit("modifyCate", {
          backgroundColor: event.target.value,
          index: cateIndex
        });
      } else {
        this.$store.commit("modifyCate", {
          title: event.target.value,
          index: cateIndex
        });
      }
    },

chageExistingCate는 두 번 쓰이는데, 하나는 param이 'color'일 때 하나는 'title'로 들어올 때이다. commit 해줄 때의 paylaod가 각각 다르므로, store.js도 아래처럼 작성해주었다.

 

// store/store.js

modifyCate(state, payload) {
      const categories = this.state.categories;
      const index = payload.index;
      const bgColor = payload.backgroundColor;
      const title = payload.title;

      if (bgColor && index) {
        categories[index].backgroundColor = bgColor;
      }
      if (title && index) {
        categories[index].title = title;
      }
      localStorage.setItem("categories", JSON.stringify(state.categories));
}

 

💌 todo.vue 컴포넌트에 대한 전체 소스는 이곳에서